Merge pull request #581 from ONLYOFFICE/feature/button-redesign

Feature/button redesign
This commit is contained in:
Alexey Safronov 2022-03-14 19:32:28 +03:00 committed by GitHub
commit 8f685a76d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
76 changed files with 259 additions and 356 deletions

View File

@ -24,7 +24,7 @@ const Footer = (props) => {
<Button
className="add_members_btn"
primary={true}
size="big"
size="normal"
label={`${selectButtonLabel} ${
selectedLength && showCounter ? `(${selectedLength})` : ""
}`}

View File

@ -339,7 +339,7 @@ const ErrorContainer = (props) => {
<div id="button-container">
<Button
id="button"
size="big"
size="normal"
scale
primary
label={buttonText}

View File

@ -236,7 +236,7 @@ const Template = (args) => (
<div style={{ display: "flex" }}>
<div style={{ marginRight: 16 }}>
<Button
size="big"
size="normal"
isDisabled={false}
onClick={() => {}}
label="Button"
@ -245,7 +245,7 @@ const Template = (args) => (
</div>
<Button
size="big"
size="normal"
isDisabled={false}
onClick={() => {}}
label="Button"

View File

@ -157,7 +157,7 @@ class AvatarEditor extends React.Component {
label={saveButtonLabel}
isLoading={saveButtonLoading}
primary={true}
size="big"
size="normal"
onClick={this.onSaveButtonClick}
/>
</ModalDialog.Footer>
@ -191,14 +191,14 @@ class AvatarEditor extends React.Component {
label={saveButtonLabel}
isLoading={saveButtonLoading}
primary={true}
size="big"
size="normal"
onClick={this.onSaveButtonClick}
/>
<Button
key="CancelBtn"
label={cancelButtonLabel}
primary={false}
size="big"
size="normal"
onClick={this.onCancelButtonClick}
/>
</StyledButtonsWrapper>

View File

@ -27,7 +27,7 @@ const Template = (args) => {
<Button
label="Show Backdrop"
primary
size="medium"
size="small"
onClick={toggleVisible}
/>
<Backdrop

View File

@ -10,7 +10,7 @@ import Button from "@appserver/components/button";
```jsx
<Button
size="base"
size="extraSmall"
isDisabled={false}
onClick={() => alert("Button clicked")}
label="OK"
@ -19,20 +19,20 @@ import Button from "@appserver/components/button";
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------ | :------------: | :------: | :------------------------------: | :-----: | ----------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `icon` | `node` | - | - | `null` | Icon node element |
| `id` | `string` | - | - | - | Accepts id |
| `isClicked` | `bool` | - | - | `false` | Tells when the button should present a clicked state |
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `isHovered` | `bool` | - | - | `false` | Tells when the button should present a hovered state |
| `isLoading` | `bool` | - | - | `false` | Tells when the button should show loader icon |
| `label` | `string` | - | - | - | Button text |
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |
| `primary` | `bool` | - | - | `false` | Tells when the button should be primary |
| `scale` | `bool` | - | - | `false` | Scale width of button to 100% |
| `size` | `oneOf` | - | `base`, `middle`, `big`, `large` | `base` | Size of button |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `tabIndex` | `number` | - | - | `-1` | Button tab index |
| `minWidth` | `string` | - | - | `null` | Sets the min width of the button |
| Props | Type | Required | Values | Default | Description |
| ------------ | :------------: | :------: | :---------------------------------------: | :----------: | ---------------------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `icon` | `node` | - | - | `null` | Icon node element |
| `id` | `string` | - | - | - | Accepts id |
| `isClicked` | `bool` | - | - | `false` | Tells when the button should present a clicked state |
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `isHovered` | `bool` | - | - | `false` | Tells when the button should present a hovered state |
| `isLoading` | `bool` | - | - | `false` | Tells when the button should show loader icon |
| `label` | `string` | - | - | - | Button text |
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |
| `primary` | `bool` | - | - | `false` | Tells when the button should be primary |
| `scale` | `bool` | - | - | `false` | Scale width of button to 100% |
| `size` | `oneOf` | - | `extraSmall`, `small`, `normal`, `medium` | `extraSmall` | Size of button. The normal size equals 36px and 40px in height on the Desktop and Touchcreen devices |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `tabIndex` | `number` | - | - | `-1` | Button tab index |
| `minWidth` | `string` | - | - | `null` | Sets the min width of the button |

View File

@ -15,7 +15,7 @@ export default {
},
};
const sizes = ["base", "medium", "big", "large"];
const sizes = ["extraSmall", "small", "normal", "medium"];
const Wrapper = (props) => (
<div
@ -32,7 +32,9 @@ const Wrapper = (props) => (
</div>
);
const Template = (args) => <Button {...args} />;
const Template = (args) => (
<Button {...args} onClick={() => alert("Button clicked")} />
);
const PrimaryTemplate = (args) => {
return (
<Wrapper>
@ -127,7 +129,6 @@ const ScaleTemplate = (args) => {
{...args}
primary
size={size}
isLoading={true}
label={`Scale ${size[0].toUpperCase()}${size.slice(1)}`}
/>
))}
@ -136,7 +137,6 @@ const ScaleTemplate = (args) => {
key={`all-scale-sec-${size}`}
{...args}
size={size}
isLoading={true}
label={`Scale ${size[0].toUpperCase()}${size.slice(1)}`}
/>
))}
@ -180,7 +180,7 @@ const ClickedTemplate = (args) => {
primary
size={size}
isClicked={true}
label={`Disabled ${size[0].toUpperCase()}${size.slice(1)}`}
label={`Clicked ${size[0].toUpperCase()}${size.slice(1)}`}
/>
))}
{sizes.map((size) => (
@ -206,7 +206,7 @@ const HoveredTemplate = (args) => {
primary
size={size}
isHovered={true}
label={`Disabled ${size[0].toUpperCase()}${size.slice(1)}`}
label={`Hovered ${size[0].toUpperCase()}${size.slice(1)}`}
/>
))}
{sizes.map((size) => (
@ -215,7 +215,7 @@ const HoveredTemplate = (args) => {
{...args}
size={size}
isHovered={true}
label={`Clicked ${size[0].toUpperCase()}${size.slice(1)}`}
label={`Hovered ${size[0].toUpperCase()}${size.slice(1)}`}
/>
))}
</Wrapper>
@ -224,8 +224,8 @@ const HoveredTemplate = (args) => {
export const Default = Template.bind({});
Default.args = {
size: "base",
label: "Base Button",
size: "extraSmall",
label: "Button",
};
export const PrimaryButtons = PrimaryTemplate.bind({});
export const SecondaryButtons = SecondaryTemplate.bind({});

View File

@ -5,53 +5,26 @@ import StyledButton from "./styled-button";
import Base from "../themes/base";
// eslint-disable-next-line no-unused-vars, react/prop-types
const Icon = ({ size, primary, icon, isHovered, theme }) => (
<div className="btnIcon">
{icon &&
React.cloneElement(icon, {
//isfill: true,
size: size === "large" ? "large" : size === "big" ? "medium" : "small",
color: icon.props.color
? isHovered
? icon.props.hoveredcolor
: icon.props.color
: "",
theme: theme,
})}
</div>
);
Icon.propTypes = {
icon: PropTypes.node,
size: PropTypes.string,
primary: PropTypes.bool,
};
Icon.defaultProps = {
icon: null,
};
const Button = React.forwardRef((props, ref) => {
const { primary, size, isLoading, icon, label, isHovered, theme } = props;
const iconProps = { primary, size, icon, isHovered, theme };
const { primary, size, isLoading, icon, label } = props;
return (
<StyledButton innerRef={ref} {...props}>
{isLoading || icon ? (
isLoading ? (
<Loader
type="oval"
size={size === "large" ? "18px" : size === "big" ? "16px" : "14px"}
className="loader"
/>
) : (
<Icon {...iconProps} />
)
) : (
""
)}
{label}
<div className="button-content">
{(isLoading || icon) &&
(isLoading ? (
<Loader
type="oval"
size={
size === "medium" ? "20px" : size === "normal" ? "16px" : "12px"
}
color={primary ? "#FFFFFF" : "#333333"}
className="loader"
/>
) : (
<div className="icon">{icon}</div>
))}
{label}
</div>
</StyledButton>
);
});
@ -61,8 +34,10 @@ Button.propTypes = {
label: PropTypes.string,
/** Tells when the button should be primary */
primary: PropTypes.bool,
/** Size of button */
size: PropTypes.oneOf(["base", "medium", "big", "large"]),
/** Size of button.
The normal size equals 36px and 40px in height on the Desktop and Touchcreen devices. */
size: PropTypes.oneOf(["extraSmall", "small", "normal", "medium"]),
/** Scale width of button to 100% */
scale: PropTypes.bool,
/** Icon node element */
@ -94,15 +69,12 @@ Button.propTypes = {
Button.defaultProps = {
label: "",
primary: false,
size: "base",
size: "extraSmall",
theme: Base,
scale: false,
icon: null,
tabIndex: -1,
minwidth: null,
isHovered: false,
disableHover: false,
isClicked: false,
@ -111,5 +83,4 @@ Button.defaultProps = {
};
Button.displayName = "Button";
export default Button;

View File

@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
import PropTypes from "prop-types";
import NoUserSelect from "../utils/commonStyles";
import Base from "../themes/base";
import { isDesktop } from "../utils/device";
const activeCss = css`
background-color: ${(props) =>
@ -107,49 +108,23 @@ const disableCss = css`
`;
const heightStyle = (props) => props.theme.button.height[props.size];
const lineHeightStyle = (props) => props.theme.button.lineHeight[props.size];
const fontSizeStyle = (props) => props.theme.button.fontSize[props.size];
const ButtonWrapper = ({
primary,
scale,
size,
isHovered,
isClicked,
isDisabled,
disableHover,
isLoading,
label,
innerRef,
minWidth,
...props
}) => {
const ButtonWrapper = ({ innerRef, ...props }) => {
return <button ref={innerRef} type="button" {...props}></button>;
};
ButtonWrapper.propTypes = {
label: PropTypes.string,
primary: PropTypes.bool,
size: PropTypes.oneOf(["base", "medium", "big", "large"]),
scale: PropTypes.bool,
icon: PropTypes.node,
tabIndex: PropTypes.number,
isHovered: PropTypes.bool,
isClicked: PropTypes.bool,
isDisabled: PropTypes.bool,
disableHover: PropTypes.bool,
isLoading: PropTypes.bool,
onClick: PropTypes.func,
};
const StyledButton = styled(ButtonWrapper).attrs((props) => ({
disabled: props.isDisabled || props.isLoading ? "disabled" : "",
tabIndex: props.tabIndex,
size:
props.size === "normal"
? isDesktop()
? "normalDesktop"
: "normalTouchscreen"
: props.size,
}))`
height: ${(props) => heightStyle(props)};
line-height: ${(props) => lineHeightStyle(props)};
font-size: ${(props) => fontSizeStyle(props)};
color: ${(props) =>
@ -167,86 +142,11 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
? props.theme.button.border.primary
: props.theme.button.border.base};
${(props) => props.scale && `width: 100%;`}
${(props) => props.scale && `width: 100%;`};
min-width: ${(props) =>
props.minwidth ? props.minwidth : props.theme.button.minWidth[props.size]};
.btnIcon {
svg {
path {
fill: ${(props) =>
props.primary
? props.theme.button.color.primary
: props.theme.button.color.base};
}
}
}
padding: ${(props) =>
(props.size === "large" &&
(props.primary
? props.icon
? props.label
? "11px 24px 13px 24px"
: "11px 11px 13px 11px"
: props.label
? "12px 20px 12px 20px"
: "0px"
: props.icon
? props.label
? "10px 24px 13px 24px"
: "10px 11px 13px 11px"
: props.label
? "11px 20px 12px 20px"
: "0px")) ||
(props.size === "big" &&
(props.primary
? props.icon
? props.label
? "8px 24px 9px 24px"
: "8px 10px 9px 10px"
: props.label
? "8px 16px 8px 16px"
: "0px"
: props.icon
? props.label
? "7px 24px 9px 24px"
: "7px 10px 9px 10px"
: props.label
? "7px 16px 8px 16px"
: "0px")) ||
(props.size === "medium" &&
(props.primary
? props.icon
? props.label
? "6px 24px 7px 24px"
: "6px 10px 7px 10px"
: props.label
? "7px 16px 7px 16px"
: "0px"
: props.icon
? props.label
? "5px 24px 7px 24px"
: "5px 10px 7px 10px"
: props.label
? "6px 16px 7px 16px"
: "0px")) ||
(props.size === "base" &&
(props.primary
? props.icon
? props.label
? "3px 20px 5px 20px"
: "3px 5px 5px 5px"
: props.label
? "4px 12px 5px 12px"
: "0px"
: props.icon
? props.label
? "2px 20px 5px 20px"
: "2px 5px 5px 5px"
: props.label
? "3px 12px 5px 12px"
: "0px"))};
${(props) => (props.minwidth ? `min-width: ${props.minwidth};` : null)}
padding: ${(props) => `${props.theme.button.padding[props.size]}`};
cursor: ${(props) =>
props.isDisabled || props.isLoading ? "default !important" : "pointer"};
@ -300,13 +200,24 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
outline: ${(props) => props.theme.button.outline};
}
.btnIcon,
.loader {
display: ${(props) => props.theme.button.display};
vertical-align: ${(props) => props.theme.button.topVerticalAlign};
.button-content {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.icon {
width: auto;
height: 100%;
display: flex;
align-items: center;
}
.loader {
display: flex;
justify-content: center;
align-items: center;
svg {
stroke: ${(props) =>
props.primary
@ -314,23 +225,32 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
: props.theme.button.loader.base};
}
vertical-align: ${(props) =>
props.size === "large" || props.size === "base"
props.size === "normalTouchscreen" || props.size === "extraSmall"
? props.theme.button.middleVerticalAlign
: props.size === "medium"
: props.size === "small"
? props.theme.button.bottomVerticalAlign
: props.theme.button.topVerticalAlign};
}
${(props) =>
props.label &&
css`
.btnIcon,
.loader {
padding-right: ${(props) => props.theme.button.paddingRight};
}
`}
`;
ButtonWrapper.propTypes = {
label: PropTypes.string,
primary: PropTypes.bool,
size: PropTypes.oneOf(["extraSmall", "small", "normal", "medium"]),
scale: PropTypes.bool,
icon: PropTypes.node,
tabIndex: PropTypes.number,
isHovered: PropTypes.bool,
isClicked: PropTypes.bool,
isDisabled: PropTypes.bool,
disableHover: PropTypes.bool,
isLoading: PropTypes.bool,
onClick: PropTypes.func,
};
StyledButton.defaultProps = { theme: Base };
export default StyledButton;

View File

@ -38,7 +38,7 @@ const CampaignsBanner = (props) => {
<Button
className="banner-btn"
primary
size="medium"
size="small"
isDisabled={false}
disableHover={true}
label={btnLabel}

View File

@ -158,7 +158,7 @@ const Template = ({
<Button
label={`${isVisible ? "Hide" : "Show"} menu`}
primary
size="medium"
size="small"
onClick={toggleVisible}
/>

View File

@ -222,7 +222,7 @@ const MainButtonMobile = (props) => {
label={title}
className="action-mobile-button"
primary
size="large"
size="medium"
onClick={onUploadClick}
/>
</StyledButtonWrapper>

View File

@ -32,7 +32,7 @@ const Template = ({ onClick, onClose, onOk, ...args }) => {
<Button
label="Show"
primary={true}
size="medium"
size="small"
onClick={toggleVisible}
/>
<ModalDialog
@ -55,7 +55,7 @@ const Template = ({ onClick, onClose, onOk, ...args }) => {
key="SendBtn"
label="Send"
primary={true}
size="medium"
size="small"
onClick={(e) => {
onOk(e);
setIsVisible(!isVisible);

View File

@ -41,7 +41,7 @@ const Paging = (props) => {
<StyledPaging id={id} className={className} style={style}>
<Button
className="buttonCustomStyle not-selectable"
size="medium"
size="small"
scale={true}
label={previousLabel}
onClick={previousAction}
@ -63,7 +63,7 @@ const Paging = (props) => {
)}
<Button
className="buttonCustomStyle not-selectable"
size="medium"
size="small"
scale={true}
label={nextLabel}
onClick={nextAction}

View File

@ -62,7 +62,7 @@ class SaveCancelButtons extends React.Component {
<div className="buttons-flex">
<Button
className="save-button"
size="big"
size="normal"
isDisabled={isDisabled}
primary
onClick={onSaveClick}
@ -70,7 +70,7 @@ class SaveCancelButtons extends React.Component {
/>
<Button
className="cancel-button"
size="big"
size="normal"
isDisabled={isDisabled}
onClick={onCancelClick}
label={cancelButtonLabel}

View File

@ -96,36 +96,43 @@ const Base = {
paddingRight: "4px",
height: {
base: "24px",
medium: "32px",
big: "36px",
large: "44px",
extraSmall: "24px",
small: "32px",
normalDesktop: "36px",
normalTouchscreen: "40px",
medium: "44px",
},
lineHeight: {
base: "15px",
medium: "18px",
big: "20px",
large: "20px",
extraSmall: "15px",
small: "20px",
normalDesktop: "16px",
normalTouchscreen: "16px",
medium: "22px",
},
fontSize: {
base: "12px",
medium: "13px",
big: "14px",
large: "16px",
extraSmall: "12px",
small: "13px",
normalDesktop: "14px",
normalTouchscreen: "14px",
medium: "16px",
},
padding: {
base: "0 14px",
medium: "0 18px",
big: "0 20px",
extraSmall: "0 12px",
small: "0 28px",
normalDesktop: "0 28px",
normalTouchscreen: "0 28px",
medium: "0 32px",
},
minWidth: {
base: "65px",
medium: "80px",
big: "85px",
extraSmall: "none",
small: "100px",
normalDesktop: "100px",
normalTouchscreen: "100px",
medium: "100px",
},
color: {

View File

@ -96,36 +96,43 @@ const Dark = {
paddingRight: "4px",
height: {
base: "24px",
medium: "32px",
big: "36px",
large: "44px",
extraSmall: "24px",
small: "32px",
normalDesktop: "36px",
normalTouchscreen: "40px",
medium: "44px",
},
lineHeight: {
base: "15px",
medium: "18px",
big: "20px",
large: "20px",
extraSmall: "15px",
small: "20px",
normalDesktop: "16px",
normalTouchscreen: "16px",
medium: "22px",
},
fontSize: {
base: "12px",
medium: "13px",
big: "14px",
large: "16px",
extraSmall: "12px",
small: "13px",
normalDesktop: "14px",
normalTouchscreen: "14px",
medium: "16px",
},
padding: {
base: "0 14px",
medium: "0 18px",
big: "0 20px",
extraSmall: "0 12px",
small: "0 28px",
normalDesktop: "0 28px",
normalTouchscreen: "0 28px",
medium: "0 32px",
},
minWidth: {
base: "65px",
medium: "80px",
big: "85px",
extraSmall: "none",
small: "100px",
normalDesktop: "100px",
normalTouchscreen: "100px",
medium: "100px",
},
color: {

View File

@ -12,7 +12,7 @@ const BaseTemplate = ({ type, data, title, timeout, withCross, ...args }) => {
<Button
label="Show toast"
primary
size="medium"
size="small"
onClick={() => {
switch (type) {
case "error":
@ -150,7 +150,7 @@ const AllTemplate = (args) => {
<Button
label="Show all toast"
primary
size="medium"
size="small"
onClick={() => renderAllToast()}
/>
</>

View File

@ -233,7 +233,7 @@ const EditingWrapperComponent = (props) => {
<>
<Button
className="edit-button not-selectable"
size="medium"
size="small"
isDisabled={isLoading}
onClick={onClickUpdateItem}
icon={okIcon}

View File

@ -194,7 +194,7 @@ const ConflictResolveDialog = (props) => {
className="button-dialog-accept"
key="OkButton"
label={t("Common:OKButton")}
size="medium"
size="small"
primary
scale
onClick={onAcceptType}
@ -204,7 +204,7 @@ const ConflictResolveDialog = (props) => {
className="button-dialog"
key="CancelButton"
label={t("Common:CancelButton")}
size="medium"
size="small"
scale
onClick={onCloseDialog}
//isLoading={isLoading}

View File

@ -212,7 +212,7 @@ const PureConnectDialogContainer = (props) => {
<FieldContainer labelVisible labelText={t("Account")} isVertical>
<Button
label={t("Reconnect")}
size="medium"
size="small"
onClick={onReconnect}
scale
isDisabled={isLoading}
@ -307,7 +307,7 @@ const PureConnectDialogContainer = (props) => {
<Button
tabIndex={5}
label={t("Common:SaveButton")}
size="big"
size="normal"
primary
onClick={onSave}
isDisabled={isLoading}

View File

@ -124,7 +124,7 @@ const ConvertDialogComponent = (props) => {
className="convert_dialog_button-accept"
key="ContinueButton"
label={t("Common:ContinueButton")}
size="medium"
size="small"
primary
onClick={onConvert}
/>
@ -132,7 +132,7 @@ const ConvertDialogComponent = (props) => {
className="convert_dialog_button"
key="CloseButton"
label={t("Common:CloseButton")}
size="medium"
size="small"
onClick={onClose}
/>
</div>

View File

@ -193,7 +193,7 @@ const ConvertPasswordDialogComponent = (props) => {
className="convert-password-dialog_button"
key="ContinueButton"
label={t("Common:SaveButton")}
size="medium"
size="small"
primary
onClick={onConvert}
isLoading={isLoading}
@ -202,7 +202,7 @@ const ConvertPasswordDialogComponent = (props) => {
className="convert-password-dialog_button"
key="CloseButton"
label={t("Common:CloseButton")}
size="medium"
size="small"
onClick={onClose}
/>
</div>

View File

@ -258,7 +258,7 @@ class DeleteDialogComponent extends React.Component {
className="button-dialog-accept"
key="OkButton"
label={accessButtonLabel}
size="medium"
size="small"
primary
onClick={unsubscribe ? this.onUnsubscribe : this.onDelete}
isLoading={isLoading}
@ -268,7 +268,7 @@ class DeleteDialogComponent extends React.Component {
className="button-dialog"
key="CancelButton"
label={t("Common:CancelButton")}
size="medium"
size="small"
onClick={this.onClose}
isLoading={isLoading}
/>

View File

@ -80,7 +80,7 @@ const DeleteThirdPartyDialog = (props) => {
<Button
isLoading={isLoading}
label={t("Common:OKButton")}
size="big"
size="normal"
primary
onClick={onDeleteThirdParty}
/>

View File

@ -479,7 +479,7 @@ class DownloadDialogComponent extends React.Component {
className="button-dialog-accept"
key="DownloadButton"
label={t("Common:Download")}
size="medium"
size="small"
primary
onClick={this.onDownload}
/>
@ -487,7 +487,7 @@ class DownloadDialogComponent extends React.Component {
className="button-dialog"
key="CancelButton"
label={t("Common:CancelButton")}
size="medium"
size="small"
onClick={this.onClose}
/>
</ModalDialog.Footer>

View File

@ -42,7 +42,7 @@ const EmptyTrashDialogComponent = (props) => {
<Button
key="OkButton"
label={t("DeleteForeverButton")}
size="medium"
size="small"
primary
onClick={onEmptyTrash}
isLoading={isLoading}
@ -51,7 +51,7 @@ const EmptyTrashDialogComponent = (props) => {
className="button-dialog"
key="CancelButton"
label={t("Common:CancelButton")}
size="medium"
size="small"
onClick={onClose}
isLoading={isLoading}
/>

View File

@ -111,7 +111,7 @@ const PureThirdPartyMoveContainer = ({
<Button
className="operation-button"
label={t("Translations:Move")}
size="big"
size="normal"
scale
primary
onClick={startOperation}
@ -122,7 +122,7 @@ const PureThirdPartyMoveContainer = ({
data-copy="copy"
className="operation-button"
label={t("Translations:Copy")}
size="big"
size="normal"
scale
onClick={startOperation}
isLoading={isLoading}
@ -131,7 +131,7 @@ const PureThirdPartyMoveContainer = ({
<Button
className="operation-button"
label={t("Common:CancelButton")}
size="big"
size="normal"
scale
onClick={onClose}
isLoading={isLoading}

View File

@ -122,7 +122,7 @@ class ChangeOwnerComponent extends React.Component {
<StyledFooter>
<Button
label={t("Common:SaveButton")}
size="medium"
size="small"
scale
primary
onClick={this.onOwnerChange}

View File

@ -231,14 +231,14 @@ class NewFilesPanel extends React.Component {
<Button
className="new_files_panel-button"
label={t("MarkAsRead")}
size="big"
size="normal"
primary
onClick={this.onMarkAsRead}
/>
<Button
className="sharing_panel-button"
label={t("Common:CloseButton")}
size="big"
size="normal"
onClick={this.onClose}
/>
</StyledFooter>

View File

@ -179,7 +179,7 @@ const OperationsPanelComponent = (props) => {
? t("Translations:Copy")
: t("Translations:Move")
}
size="medium"
size="small"
primary
onClick={onSubmit}
isLoading={isLoading}

View File

@ -134,9 +134,9 @@ const SelectFileDialogAsideView = ({
/>
</div>
)}
</div>
</div>
</div>
</div>
</StyledSelectFilePanel>
</ModalDialog.Body>
<ModalDialog.Footer theme={theme}>
@ -149,14 +149,14 @@ const SelectFileDialogAsideView = ({
theme={theme}
className="select-file-dialog-buttons-save"
primary
size="big"
size="normal"
label={primaryButtonName}
onClick={onClickSave}
isDisabled={selectedFile.length === 0}
/>
<Button
size="normal"
theme={theme}
size="big"
label={t("Common:CancelButton")}
onClick={onClose}
/>

View File

@ -259,7 +259,7 @@ class SelectFileDialogModalView extends React.Component {
theme={theme}
className="select-file-modal-dialog-buttons-save"
primary
size="medium"
size="small"
label={primaryButtonName}
onClick={onClickSave}
isDisabled={selectedFile.length === 0}
@ -267,7 +267,7 @@ class SelectFileDialogModalView extends React.Component {
<Button
theme={theme}
className="modal-dialog-button"
size="medium"
size="small"
label={t("Common:CancelButton")}
onClick={onClose}
/>

View File

@ -96,14 +96,13 @@ const SelectFolderDialogAsideView = ({
theme={theme}
className="select-folder-dialog-buttons-save"
primary
size="big"
size="normal"
label={primaryButtonName}
onClick={onSave}
isDisabled={isLoadingData || !isAvailable || !canCreate}
/>
<Button
theme={theme}
size="big"
size="normal"
label={t("Common:CancelButton")}
onClick={onClose}
isDisabled={isLoadingData || isLoading}

View File

@ -73,14 +73,13 @@ const SelectFolderDialogModalView = ({
theme={theme}
className="select-folder-dialog-buttons-save"
primary
size="medium"
size="small"
label={primaryButtonName}
onClick={onSave}
isDisabled={isLoadingData || !isAvailable || !canCreate}
/>
<Button
theme={theme}
size="medium"
size="small"
label={t("Common:CancelButton")}
onClick={onClose}
isDisabled={isLoadingData || isLoading}

View File

@ -591,7 +591,7 @@ class SharingPanelComponent extends React.Component {
<Button
className="sharing_panel-button"
label={t("Common:SaveButton")}
size="big"
size="normal"
primary
onClick={this.onSaveClick}
isDisabled={isLoading || !isUpdated}
@ -725,7 +725,7 @@ class SharingPanelComponent extends React.Component {
<Button
className="sharing_panel-button"
label={t("Common:SaveButton")}
size={isMobile ? "big" : "medium"}
size={isMobile ? "normal" : "small"}
minwidth="100px"
primary
onClick={this.onSaveClick}

View File

@ -315,7 +315,7 @@ class FileRow extends Component {
<Button
id="conversion-button"
className="conversion-password_button"
size={"medium"}
size={"small"}
scale
primary
label={t("Ready")}

View File

@ -157,7 +157,7 @@ const PrivacyPageComponent = ({ t, history, tReady }) => {
</Text>
<Button
onClick={onOpenEditorsPopup}
size="large"
size="medium"
primary
isDisabled={isDisabled}
label={t("PrivacyButton")}

View File

@ -209,7 +209,7 @@ class ConnectClouds extends React.Component {
{!!providers.length ? (
<>
<Button
size="base"
size="extraSmall"
style={{ marginBottom: "8px" }}
onClick={this.onShowThirdPartyDialog}
label={t("ConnectedCloud")}

View File

@ -200,7 +200,7 @@ const VersionRow = (props) => {
isDisabled={isSavingComment}
className="version_save-button"
label={t("Common:SaveButton")}
size="big"
size="normal"
primary
onClick={onSaveClick}
/>
@ -249,7 +249,7 @@ const VersionRow = (props) => {
>
<Button
isDisabled={isSavingComment}
size="base"
size="extraSmall"
scale={true}
primary
onClick={onSaveClick}
@ -262,7 +262,7 @@ const VersionRow = (props) => {
>
<Button
isDisabled={isSavingComment}
size="base"
size="extraSmall"
scale={true}
onClick={onCancelClick}
label={t("Common:CancelButton")}

View File

@ -85,7 +85,7 @@ class BackupCodesDialogComponent extends React.Component {
<Button
key="PrintBtn"
label={t("PrintButton")}
size="medium"
size="small"
primary={true}
onClick={this.printPage}
/>
@ -93,7 +93,7 @@ class BackupCodesDialogComponent extends React.Component {
key="RequestNewBtn"
className="button-dialog"
label={t("RequestNewButton")}
size="medium"
size="small"
primary={false}
onClick={this.getNewBackupCodes}
/>

View File

@ -164,7 +164,7 @@ class ChangeEmailDialogComponent extends React.Component {
<Button
key="SendBtn"
label={t("Common:SendButton")}
size="medium"
size="small"
primary={true}
onClick={this.onValidateEmail}
isLoading={isRequestRunning}

View File

@ -64,7 +64,7 @@ class ChangePasswordDialogComponent extends React.Component {
<Button
key="SendBtn"
label={t("Common:SendButton")}
size="medium"
size="small"
primary={true}
onClick={this.onSendPasswordChangeInstructions}
isLoading={isRequestRunning}

View File

@ -39,7 +39,7 @@ class ChangePhoneDialogComponent extends React.Component {
<Button
key="SendBtn"
label={t("Common:SendButton")}
size="medium"
size="small"
primary={true}
onClick={this.onChangePhone}
isLoading={isRequestRunning}

View File

@ -148,7 +148,7 @@ class ChangeUserStatusDialogComponent extends React.Component {
<ModalDialog.Footer>
<Button
label={t("ChangeUsersStatusButton")}
size="medium"
size="small"
primary
onClick={this.onChangeUserStatus}
isLoading={isRequestRunning}
@ -157,7 +157,7 @@ class ChangeUserStatusDialogComponent extends React.Component {
<Button
className="button-dialog"
label={t("Common:CancelButton")}
size="medium"
size="small"
onClick={onClose}
isDisabled={isRequestRunning}
/>

View File

@ -141,7 +141,7 @@ class ChangeUserTypeDialogComponent extends React.Component {
<ModalDialog.Footer>
<Button
label={t("ChangeUserTypeButton")}
size="medium"
size="small"
primary
onClick={this.onChangeUserType}
isLoading={isRequestRunning}
@ -150,7 +150,7 @@ class ChangeUserTypeDialogComponent extends React.Component {
<Button
className="button-dialog"
label={t("Common:CancelButton")}
size="medium"
size="small"
onClick={onClose}
isDisabled={isRequestRunning}
/>

View File

@ -49,7 +49,7 @@ class DataLossWarningDialogComponent extends React.Component {
<Button
key="LeaveForm"
label={t("DataLossWarningLeaveBtn")}
size="medium"
size="small"
primary={true}
onClick={this.onSubmit}
/>
@ -57,7 +57,7 @@ class DataLossWarningDialogComponent extends React.Component {
className="button-dialog"
key="StayOnPage"
label={t("Common:CancelButton")}
size="medium"
size="small"
onClick={this.onClose}
/>
</ModalDialog.Footer>

View File

@ -95,7 +95,7 @@ class DeleteProfileEverDialogComponent extends React.Component {
key="OKBtn"
className="delete-profile_button-delete"
label={t("Common:OKButton")}
size="medium"
size="small"
primary={true}
onClick={this.onDeleteProfileEver}
isLoading={isRequestRunning}
@ -104,7 +104,7 @@ class DeleteProfileEverDialogComponent extends React.Component {
className="button-dialog"
key="ReassignBtn"
label={t("Translations:ReassignData")}
size="medium"
size="small"
onClick={this.onReassignDataClick}
isDisabled={isRequestRunning}
/> */}

View File

@ -69,7 +69,7 @@ class DeleteSelfProfileDialogComponent extends React.Component {
<Button
key="SendBtn"
label={t("Common:SendButton")}
size="medium"
size="small"
primary={true}
onClick={this.onDeleteSelfProfileInstructions}
isLoading={isRequestRunning}
@ -78,7 +78,7 @@ class DeleteSelfProfileDialogComponent extends React.Component {
className="button-dialog"
key="CloseBtn"
label={t("Common:CloseButton")}
size="medium"
size="small"
onClick={onClose}
isDisabled={isRequestRunning}
/>

View File

@ -141,7 +141,7 @@ class DeleteGroupUsersDialogComponent extends React.Component {
<ModalDialog.Footer>
<Button
label={t("Common:OKButton")}
size="medium"
size="small"
primary
onClick={this.onDeleteGroupUsers}
isLoading={isRequestRunning}
@ -150,7 +150,7 @@ class DeleteGroupUsersDialogComponent extends React.Component {
<Button
className="button-dialog"
label={t("Common:CancelButton")}
size="medium"
size="small"
onClick={onClose}
isDisabled={isRequestRunning}
/>

View File

@ -184,7 +184,7 @@ class InviteDialogComponent extends React.Component {
? t("Common:LoadingProcessing")
: t("Common:CloseButton")
}
size="medium"
size="small"
primary={true}
onClick={this.onClickToCloseButton}
isLoading={this.state.isLoading}

View File

@ -42,7 +42,7 @@ class ResetApplicationDialogComponent extends React.Component {
<Button
key="SendBtn"
label={t("Common:ResetApplication")}
size="medium"
size="small"
primary={true}
onClick={this.resetApp}
/>
@ -50,7 +50,7 @@ class ResetApplicationDialogComponent extends React.Component {
key="CloseBtn"
className="button-dialog"
label={t("Common:CloseButton")}
size="medium"
size="small"
primary={false}
onClick={onClose}
/>

View File

@ -135,7 +135,7 @@ class SendInviteDialogComponent extends React.Component {
<ModalDialog.Footer>
<Button
label={t("Common:OKButton")}
size="medium"
size="small"
primary
onClick={this.onSendInvite}
isLoading={isRequestRunning}
@ -144,7 +144,7 @@ class SendInviteDialogComponent extends React.Component {
<Button
className="button-dialog"
label={t("Common:CancelButton")}
size="medium"
size="small"
onClick={onClose}
isDisabled={isRequestRunning}
/>

View File

@ -372,14 +372,14 @@ const SectionBodyContent = ({
primary
type="submit"
isLoading={inLoading}
size="big"
size="normal"
tabIndex={4}
onClick={onSave}
/>
<Button
label={t("Common:CancelButton")}
className="cancel-button"
size="big"
size="normal"
isDisabled={inLoading}
onClick={onCancel}
tabIndex={5}

View File

@ -393,7 +393,7 @@ class SectionBodyContent extends React.PureComponent {
{profile.status !== 2 && (isAdmin || isSelf) && (
<EditButtonWrapper>
<Button
size="big"
size="normal"
scale={true}
label={t("EditUser")}
title={t("EditUser")}
@ -442,7 +442,7 @@ class SectionBodyContent extends React.PureComponent {
<ToggleContent label={t("Subscriptions")} isOpen={true}>
<Text as="span">
<Button
size="big"
size="normal"
label={t("EditSubscriptionsBtn")}
primary={true}
onClick={this.onEditSubscriptionsClick}

View File

@ -59,7 +59,7 @@ class TextChangeField extends React.Component {
label={buttonText}
onClick={buttonOnClick}
isDisabled={buttonIsDisabled}
size="medium"
size="small"
style={{ marginLeft: "8px" }}
tabIndex={buttonTabIndex}
data-dialog={dataDialog}

View File

@ -700,7 +700,7 @@ class CreateUserForm extends React.Component {
onClick={this.handleSubmit}
primary
isDisabled={isLoading}
size="big"
size="normal"
tabIndex={10}
className="create-user_save-btn"
/>
@ -708,7 +708,7 @@ class CreateUserForm extends React.Component {
label={t("Common:CancelButton")}
onClick={this.onCancelHandler}
isDisabled={isLoading}
size="big"
size="normal"
style={{ marginLeft: "8px" }}
tabIndex={11}
className="create-user_cancel-btn"

View File

@ -999,14 +999,14 @@ class UpdateUserForm extends React.Component {
onClick={this.handleSubmit}
primary
isDisabled={isLoading}
size="big"
size="normal"
tabIndex={11}
/>
<Button
label={t("Common:CancelButton")}
onClick={this.onCancelHandler}
isDisabled={isLoading}
size="big"
size="normal"
style={{ marginLeft: "8px" }}
tabIndex={12}
/>

View File

@ -112,7 +112,7 @@ const RecoverAccessModalDialog = ({
className="recover-button-dialog"
key="SendBtn"
label={loading ? t("Common:Sending") : t("Common:SendButton")}
size="big"
size="normal"
primary={true}
onClick={onSendRecoverRequest}
isLoading={loading}

View File

@ -340,7 +340,7 @@ class Confirm extends React.PureComponent {
<Button
className="confirm-row"
primary
size="big"
size="normal"
label={t("LoginRegistryButton")}
tabIndex={5}
isLoading={this.state.isLoading}

View File

@ -93,7 +93,7 @@ class Form extends React.PureComponent {
<Button
className="owner-button owner-buttons"
primary
size="big"
size="normal"
label={t("Common:SaveButton")}
tabIndex={2}
isDisabled={false}
@ -101,7 +101,7 @@ class Form extends React.PureComponent {
/>
<Button
className="owner-buttons"
size="big"
size="normal"
label={t("Common:CancelButton")}
tabIndex={2}
isDisabled={false}

View File

@ -176,7 +176,7 @@ class Form extends React.PureComponent {
id="button"
className="password-button"
primary
size="big"
size="normal"
tabIndex={2}
label={
isLoading ? t("Common:LoadingProcessing") : t("Common:OKButton")

View File

@ -104,7 +104,7 @@ const PhoneForm = (props) => {
/>
<Button
primary
size="big"
size="normal"
tabIndex={3}
label={isLoading ? t("Common:LoadingProcessing") : buttonTranslation}
isDisabled={isLoading}

View File

@ -507,7 +507,7 @@ class Confirm extends React.PureComponent {
<Button
className="confirm-row"
primary
size="big"
size="normal"
label={t("LoginRegistryButton")}
tabIndex={5}
isLoading={this.state.isLoading}

View File

@ -89,7 +89,7 @@ class ProfileRemove extends React.PureComponent {
<Button
className="confirm-row"
primary
size="big"
size="normal"
label={t("DeleteProfileBtn")}
tabIndex={1}
isLoading={this.state.isLoading}

View File

@ -170,7 +170,7 @@ const TfaActivationForm = withLoader((props) => {
<Button
scale
primary
size={width <= 1024 ? "large" : "medium"}
size={width <= 1024 ? "medium" : "normal"}
tabIndex={3}
label={
isLoading

View File

@ -118,7 +118,7 @@ const TfaAuthForm = withLoader((props) => {
<Button
scale
primary
size={width <= 1024 ? "large" : "medium"}
size={width <= 1024 ? "medium" : "normal"}
tabIndex={3}
label={
isLoading

View File

@ -71,7 +71,7 @@ class Body extends React.PureComponent {
<Button
label={t("ButtonBuyLicense")}
value={`${buyUrl}`}
size="large"
size="medium"
primary={true}
onClick={this.onClickBuy}
/>
@ -86,7 +86,7 @@ class Body extends React.PureComponent {
<Button
type="submit"
label={t("ButtonUploadLicense")}
size="large"
size="medium"
primary={true}
onClick={this.onClickSubmit}
/>

View File

@ -335,7 +335,7 @@ class WhiteLabel extends React.Component {
<Button
id="btnUseAsLogo"
className="margin-top"
size="medium"
size="small"
label={t("UseAsLogoButton")}
onClick={this.onUseTextAsLogo}
tabIndex={2}
@ -531,7 +531,7 @@ class WhiteLabel extends React.Component {
id="btnSaveGreetingSetting"
className="margin-top"
primary={true}
size="medium"
size="small"
label={t("Common:SaveButton")}
isLoading={false}
isDisabled={false}
@ -542,7 +542,7 @@ class WhiteLabel extends React.Component {
<Button
id="btnRestoreToDefault"
className="margin-top margin-left"
size="medium"
size="small"
label={t("RestoreDefaultButton")}
isLoading={false}
isDisabled={false}

View File

@ -187,7 +187,7 @@ class ConsumerModalDialog extends React.Component {
<Button
className="modal-dialog-button"
primary
size="big"
size="normal"
label={isLoading ? t("Common:Sending") : t("Common:Enable")}
tabIndex={1}
isLoading={isLoading}

View File

@ -118,7 +118,7 @@ class TfaPage extends Component {
{showButton && (
<Button
label={t("Common:SaveButton")}
size="medium"
size="small"
primary={true}
className="save-button"
onClick={this.saveSettings}

View File

@ -20,7 +20,7 @@ const ButtonContainer = ({ t, sending, onContinueHandler }) => {
return (
<StyledContainer>
<Button
size="large"
size="medium"
scale={true}
primary
isDisabled={sending}

View File

@ -68,7 +68,7 @@ const ModalContainer = ({
label={t("Common:SaveButton")}
primary={true}
scale={true}
size="big"
size="normal"
onClick={onSaveEmailHandler}
/>
</BtnContainer>
@ -94,7 +94,7 @@ const ModalContainer = ({
label={t("Common:CloseButton")}
primary={true}
scale={true}
size="big"
size="normal"
onClick={onCloseModal}
/>
</BtnContainer>

View File

@ -546,7 +546,7 @@ const Form = (props) => {
id="submit"
className="login-button"
primary
size="large"
size="medium"
scale={true}
label={isLoading ? t("Common:LoadingProcessing") : t("LoginButton")}
tabIndex={1}

View File

@ -103,7 +103,7 @@ const ForgotPasswordModalDialog = (props) => {
label={
isLoading ? t("Common:LoadingProcessing") : t("Common:SendButton")
}
size="big"
size="normal"
scale={false}
primary={true}
onClick={onSendPasswordInstructions}

View File

@ -89,7 +89,7 @@ const RegisterModalDialog = ({
className="modal-dialog-button"
key="SendBtn"
label={loading ? t("Common:Sending") : t("RegisterSendButton")}
size="big"
size="normal"
scale={false}
primary={true}
onClick={onSendRegisterRequest}