feat(Button): add xs Button size

gravity-ui · May 15, 2023 · ac2b5d2 · ac2b5d2
1 parent fe05925
commit ac2b5d2
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 8 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -85,6 +85,46 @@ $block: '.#{variables.$ns}button';
     }
 
     &_size {
+        &_xs {
+            --yc-button-height: 20px;
+            --yc-button-icon-size: 12px;
+
+            font-size: 13px;
+
+            #{$block}__text {
+                margin: 0 6px;
+            }
+
+            #{$block}__icon {
+                width: var(--yc-button-height);
+
+                &_side_left {
+                    margin-left: 6px;
+                    width: var(--yc-button-icon-size);
+                }
+
+                &_side_left ~ #{$block}__text {
+                    margin-left: 22px;
+                }
+
+                &_side_right {
+                    margin-right: 6px;
+                    width: var(--yc-button-icon-size);
+                }
+
+                &_side_right ~ #{$block}__text {
+                    margin-right: 22px;
+                }
+
+                #{$block}__icon-inner > * {
+                    max-height: var(--yc-button-icon-size);
+                    max-width: var(--yc-button-icon-size);
+                }
+            }
+
+            --yc-button-border-radius: var(--yc-border-radius-xs);
+        }
+
         &_s {
             --yc-button-height: 24px;
 

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -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'

diff --git a/src/components/Button/README.md b/src/components/Button/README.md
@@ -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'

diff --git a/src/components/Button/__stories__/Button.new.stories.tsx b/src/components/Button/__stories__/Button.new.stories.tsx
@@ -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',
         },

diff --git a/src/components/Button/__stories__/Button.stories.tsx b/src/components/Button/__stories__/Button.stories.tsx
@@ -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>

diff --git a/src/components/Button/__stories__/ButtonShowcase.tsx b/src/components/Button/__stories__/ButtonShowcase.tsx
@@ -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>

diff --git a/src/components/Button/__stories__/examples/ButtonExampleView/ButtonExampleView.tsx b/src/components/Button/__stories__/examples/ButtonExampleView/ButtonExampleView.tsx
@@ -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>

diff --git a/src/components/Button/__tests__/Button.test.tsx b/src/components/Button/__tests__/Button.test.tsx
@@ -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} />);