Skip to content

Commit

Permalink
feat(Button): add xs Button size (#663)
Browse files Browse the repository at this point in the history
  • Loading branch information
Marginy605 authored May 15, 2023
1 parent 230aa8b commit efbe9fc
Show file tree
Hide file tree
Showing 9 changed files with 49 additions and 10 deletions.
24 changes: 24 additions & 0 deletions src/components/Button/Button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,30 @@ $block: '.#{variables.$ns}button';
}

&_size {
&_xs {
--yc-button-height: 20px;

font-size: 13px;

#{$block}__text {
margin: 0 6px;
}

#{$block}__icon {
width: var(--yc-button-height);

&_side_left ~ #{$block}__text {
margin-left: 18px;
}

&_side_right ~ #{$block}__text {
margin-right: 18px;
}
}

--yc-button-border-radius: var(--yc-border-radius-xs);
}

&_s {
--yc-button-height: 24px;

Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export type ButtonView =
| 'outlined-contrast' // outlined button appearance with contrast background
| 'flat-contrast'; // flat button appearance with contrast background

export type ButtonSize = 's' | 'm' | 'l' | 'xl';
export type ButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';

export type ButtonPin =
| 'round-round'
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ type ButtonView =
| 'outlined-contrast'
| 'flat-contrast';

type ButtonSize = 's' | 'm' | 'l' | 'xl';
type ButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';

type ButtonPin =
| 'round-round'
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button/__stories__/Button.new.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default {
defaultValue: 'normal',
},
size: {
options: ['s', 'm', 'l', 'xl'],
options: ['xs', 's', 'm', 'l', 'xl'],
control: {type: 'radio'},
defaultValue: 'm',
},
Expand Down
4 changes: 4 additions & 0 deletions src/components/Button/__stories__/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ export const Default = DefaultTemplate.bind({});

const SizeTemplate: Story<ButtonProps> = (args) => (
<>
<Button {...args} size="xs">
Size xs
</Button>
<span style={{margin: '16px'}} />
<Button {...args} size="s">
Size s
</Button>
Expand Down
2 changes: 2 additions & 0 deletions src/components/Button/__stories__/ButtonShowcase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ export function ButtonShowcase() {
{renderViewGrid()}
<ShowcaseItem title="size">
<p>
<Button size="xs">Size xs</Button>
<span style={{margin: '8px'}} />
<Button size="s">Size s</Button>
<span style={{margin: '8px'}} />
<Button size="m">Size m</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,7 @@ export function ButtonExampleState() {
export function ButtonExampleSize() {
return (
<DocsExample gap="l" space="l">
<Button size="xs">XS-size</Button>
<Button size="s">S-size</Button>
<Button size="m">M-size</Button>
<Button size="l">L-size</Button>
Expand Down
13 changes: 8 additions & 5 deletions src/components/Button/__tests__/Button.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,15 @@ describe('Button', () => {
expect(button).not.toBeDisabled();
});

test.each(new Array<ButtonSize>('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {
render(<Button size={size} qa={qaId} />);
const button = screen.getByTestId(qaId);
test.each(new Array<ButtonSize>('xs', 's', 'm', 'l', 'xl'))(
'render with given "%s" size',
(size) => {
render(<Button size={size} qa={qaId} />);
const button = screen.getByTestId(qaId);

expect(button).toHaveClass(`yc-button_size_${size}`);
});
expect(button).toHaveClass(`yc-button_size_${size}`);
},
);

test.each(new Array<ButtonView>(...buttonViews))('render with given "%s" view', (view) => {
render(<Button view={view} qa={qaId} />);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import _memoize from 'lodash/memoize';
import {block} from '../../../utils/cn';
import {getComponentName} from '../../../utils/getComponentName';
import {Icon} from '../../../Icon';
import {Button, ButtonSize} from '../../../Button';
import {Button} from '../../../Button';
import {Popup} from '../../../Popup';
import {Menu, MenuItemProps} from '../../../Menu';
import {DotsIcon} from '../../../icons/DotsIcon';
Expand Down Expand Up @@ -52,9 +52,14 @@ export interface TableActionGroup<I> {

export type TableActionConfig<I> = TableAction<I> | TableActionGroup<I>;

/**
* common sizes for Menu and Button
*/
export type TableRowActionsSize = 's' | 'm' | 'l' | 'xl';

export interface WithTableActionsProps<I> {
getRowActions: (item: I, index: number) => TableActionConfig<I>[];
rowActionsSize?: ButtonSize;
rowActionsSize?: TableRowActionsSize;
}

interface WithTableActionsState<I> {
Expand Down

0 comments on commit efbe9fc

Please sign in to comment.