Merge branch 'master' of github.com:ONLYOFFICE/AppServer
This commit is contained in:
commit
773820cce7
@ -32,6 +32,6 @@ import { Button } from "asc-web-components";
|
||||
| `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` | `base` | Size of button |
|
||||
| `size` | `oneOf` | - | `base`, `middle`, `big`, `large` | `base` | Size of button |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `tabIndex` | `number` | - | - | `-1` | Button tab index |
|
||||
|
@ -12,7 +12,7 @@ function onClick(e) {
|
||||
|
||||
const getButtons = (primary) => {
|
||||
|
||||
const sizes = ['big', 'medium', 'base'];
|
||||
const sizes = ['large', 'big', 'medium', 'base'];
|
||||
const states = ['isActivated', 'isHovered', 'isClicked', 'isDisabled'];
|
||||
|
||||
const baseButton = {
|
||||
|
@ -13,7 +13,7 @@ storiesOf('Components|Buttons', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add('base', () => {
|
||||
const sizeOptions = ['base', 'medium', 'big'];
|
||||
const sizeOptions = ['base', 'medium', 'big', 'large'];
|
||||
const iconNames = orderBy(Object.keys(Icons), [name => name.toLowerCase()], ['asc']);
|
||||
|
||||
const iconName = select("icon", ['', ...iconNames], '');
|
||||
|
@ -119,6 +119,10 @@ describe('<Button />', () => {
|
||||
expect(wrapper.prop('size')).toEqual('big');
|
||||
expect(wrapper.prop('primary')).toEqual(true);
|
||||
|
||||
wrapper.setProps({size: 'large', primary: true});
|
||||
expect(wrapper.prop('size')).toEqual('large');
|
||||
expect(wrapper.prop('primary')).toEqual(true);
|
||||
|
||||
wrapper.setProps({scale: true});
|
||||
expect(wrapper.prop('scale')).toEqual(true);
|
||||
});
|
||||
@ -138,5 +142,9 @@ describe('<Button />', () => {
|
||||
wrapper.setProps({size: 'medium', primary: true});
|
||||
expect(wrapper.prop('size')).toEqual('medium');
|
||||
expect(wrapper.prop('primary')).toEqual(true);
|
||||
|
||||
wrapper.setProps({size: 'large', primary: true});
|
||||
expect(wrapper.prop('size')).toEqual('large');
|
||||
expect(wrapper.prop('primary')).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
@ -35,7 +35,7 @@ const ButtonWrapper = ({primary, scale, size, isHovered, isClicked, isDisabled,
|
||||
ButtonWrapper.propTypes = {
|
||||
label: PropTypes.string,
|
||||
primary: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['base', 'medium', 'big']),
|
||||
size: PropTypes.oneOf(['base', 'medium', 'big', 'large']),
|
||||
scale: PropTypes.bool,
|
||||
icon: PropTypes.node,
|
||||
|
||||
@ -53,19 +53,26 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
|
||||
disabled: props.isDisabled || props.isLoading ? 'disabled' : '',
|
||||
tabIndex: props.tabIndex
|
||||
}))`
|
||||
min-width: ${props =>
|
||||
props.size === 'base' ? '60px' : '100px'
|
||||
};
|
||||
|
||||
height: ${props =>
|
||||
(props.size === 'large' && '44px') ||
|
||||
(props.size === 'big' && '36px') ||
|
||||
(props.size === 'medium' && '32px') ||
|
||||
(props.size === 'base' && '24px')
|
||||
(props.size === 'base' && '24px')
|
||||
};
|
||||
|
||||
line-height: ${props =>
|
||||
(props.size === 'big' && '19px') ||
|
||||
(props.size === 'medium' && '18px') ||
|
||||
(props.size === 'large' && '20px') ||
|
||||
(props.size === 'big' && '18px') ||
|
||||
(props.size === 'medium' && '15px') ||
|
||||
(props.size === 'base' && '16px')
|
||||
};
|
||||
|
||||
font-size: ${props =>
|
||||
(props.size === 'large' && '16px') ||
|
||||
(props.size === 'big' && '14px') ||
|
||||
(props.size === 'medium' && '13px') ||
|
||||
(props.size === 'base' && '12px')
|
||||
@ -82,41 +89,51 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
|
||||
${props => props.scale && `width: 100%;`}
|
||||
|
||||
padding: ${props =>
|
||||
(props.size === 'big' && (props.primary
|
||||
(props.size === 'large' && (props.primary
|
||||
? (props.icon
|
||||
? (props.label ? '8px 24px 9px 24px' : '8px 10px 9px 10px')
|
||||
: (props.label ? '8px 28px 9px 28px' : '8px 10px 9px 10px')
|
||||
? (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
|
||||
: (props.label ? '12px 20px 12px 20px' : '12px 20px 12px 20px')
|
||||
)
|
||||
: (props.icon
|
||||
? (props.label ? '8px 24px 9px 24px' : '8px 10px 9px 10px')
|
||||
: (props.label ? '8px 27px 9px 28px' : '8px 10px 9px 10px')
|
||||
? (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
|
||||
: (props.label ? '11px 20px 13px 20px' : '11px 20px 13px 20px')
|
||||
))
|
||||
) ||
|
||||
(props.size === 'big' && (props.primary
|
||||
? (props.icon
|
||||
? (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
|
||||
: (props.label ? '8px 16px 8px 16px' : '8px 10px 9px 16px')
|
||||
)
|
||||
: (props.icon
|
||||
? (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
|
||||
: (props.label ? '8px 16px 9px 16px' : '8px 16px 9px 16px')
|
||||
))
|
||||
) ||
|
||||
(props.size === 'medium' && (props.primary
|
||||
? (props.icon
|
||||
? (props.label ? '7px 24px 7px 24px' : '7px 10px 7px 10px')
|
||||
: (props.label ? '7px 24px 7px 24px' : '7px 10px 7px 10px')
|
||||
? (props.label ? '6px 16px 9px 16px' : '6px 16px 8px 16px')
|
||||
: (props.label ? '7px 16px 8px 16px' : '6px 16px 8px 16px')
|
||||
)
|
||||
: (props.icon
|
||||
? (props.label ? '7px 24px 7px 24px' : '7px 10px 7px 10px')
|
||||
: (props.label ? '7px 24px 7px 24px' : '7px 10px 7px 10px')
|
||||
? (props.label ? '6px 16px 9px 16px' : '6px 16px 8px 16px')
|
||||
: (props.label ? '7px 16px 8px 16px' : '6px 16px 8px 16px')
|
||||
))
|
||||
) ||
|
||||
(props.size === 'base' && (props.primary
|
||||
? (props.icon
|
||||
? (props.label ? '3px 20px 5px 20px' : '3px 5px 5px 5px')
|
||||
: (props.label ? '3px 24px 5px 24px' : '3px 5px 5px 5px')
|
||||
? (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
|
||||
: (props.label ? '4px 12px 5px 12px' : '4px 12px 5px 12px')
|
||||
)
|
||||
: (props.icon
|
||||
? (props.label ? '3px 20px 5px 20px' : '3px 5px 5px 5px')
|
||||
: (props.label ? '3px 24px 5px 24px' : '3px 5px 5px 5px')
|
||||
? (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
|
||||
: (props.label ? '3px 12px 5px 12px' : '3px 12px 5px 12px')
|
||||
))
|
||||
)
|
||||
};
|
||||
|
||||
cursor: ${props => props.isDisabled || props.isLoading ? 'default !important' : 'pointer'};
|
||||
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: 'Open Sans', normal;
|
||||
border: none;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
@ -171,6 +188,15 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.loader {
|
||||
vertical-align: ${props => ( props.size === 'large' || props.size === 'base' )
|
||||
? 'middle'
|
||||
: props.size === 'medium'
|
||||
? 'text-bottom'
|
||||
: 'text-top'};
|
||||
}
|
||||
}
|
||||
|
||||
${props => props.label && css`
|
||||
.btnIcon,
|
||||
.loader {
|
||||
@ -184,7 +210,11 @@ const Icon = ({size, primary, icon}) => (
|
||||
{ icon && React.cloneElement(icon,
|
||||
{
|
||||
isfill: true,
|
||||
size: size === "big" ? "medium" : "small",
|
||||
size: size === "large"
|
||||
? "large"
|
||||
: size === "big"
|
||||
? "medium"
|
||||
: "small",
|
||||
color: primary ? "#FFFFFF" : '#333333'
|
||||
})}
|
||||
</div>
|
||||
@ -207,7 +237,9 @@ const Button = React.forwardRef((props, ref) => {
|
||||
<StyledButton innerRef={ref} {...props} >
|
||||
{(isLoading || icon)
|
||||
? (isLoading
|
||||
? <Loader type="oval" size={size === "big" ? '16px' : '14px'} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
|
||||
? <Loader type="oval" size={
|
||||
size === "large" ? '18px' : size === 'big' ? '16px' : '14px'
|
||||
} color={primary ? "#FFFFFF" : '#333333'} className="loader" />
|
||||
: <Icon {...iconProps} />)
|
||||
: ""
|
||||
}
|
||||
@ -219,7 +251,7 @@ const Button = React.forwardRef((props, ref) => {
|
||||
Button.propTypes = {
|
||||
label: PropTypes.string,
|
||||
primary: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['base', 'medium', 'big']),
|
||||
size: PropTypes.oneOf(['base', 'medium', 'big', 'large']),
|
||||
scale: PropTypes.bool,
|
||||
icon: PropTypes.node,
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user