feat(button): add xs size

Signed-off-by: astagnol <[email protected]>
ovh · Oct 16, 2024 · 0cf46f8 · 0cf46f8
1 parent 2c7e82e
commit 0cf46f8
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 3 deletions.
diff --git a/packages/ods/src/components/button/src/components/ods-button/ods-button.scss b/packages/ods/src/components/button/src/components/ods-button/ods-button.scss
@@ -15,6 +15,10 @@
 
     position: relative;
 
+    &--xs {
+      @include button.ods-button-size('xs');
+    }
+
     &--sm {
       @include button.ods-button-size('sm');
     }

diff --git a/packages/ods/src/components/button/src/components/ods-button/ods-button.tsx b/packages/ods/src/components/button/src/components/ods-button/ods-button.tsx
@@ -55,7 +55,7 @@ export class OdsButton {
             <ods-spinner
               class="ods-button__button__spinner"
               color={ ODS_SPINNER_COLOR.neutral }
-              size={ ODS_SPINNER_SIZE.sm }>
+              size={ this.size === 'xs' ? ODS_SPINNER_SIZE.xs : ODS_SPINNER_SIZE.sm }>
             </ods-spinner>
           }
 

diff --git a/packages/ods/src/components/button/src/constants/button-size.ts b/packages/ods/src/components/button/src/constants/button-size.ts
@@ -1,6 +1,7 @@
 enum ODS_BUTTON_SIZE {
   md = 'md',
   sm = 'sm',
+  xs = 'xs',
 }
 
 type OdsButtonSize =`${ODS_BUTTON_SIZE}`;

diff --git a/packages/ods/src/components/button/src/index.html b/packages/ods/src/components/button/src/index.html
@@ -20,6 +20,8 @@
   </ods-button>
   <ods-button size="sm">
   </ods-button>
+  <ods-button size="xs">
+  </ods-button>
 
   <p>Variant</p>
   <ods-button label="Variant button" variant="default" color="primary" size="md">
@@ -47,6 +49,17 @@
   </ods-button>
   <ods-button label="Variant button" variant="ghost" color="critical" size="sm">
   </ods-button>
+  <br /><br />
+  <ods-button label="Variant button" variant="outline" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Variant button" variant="ghost" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Variant button" variant="default" color="critical" size="xs">
+  </ods-button>
+  <ods-button label="Variant button" variant="outline" color="critical" size="xs">
+  </ods-button>
+  <ods-button label="Variant button" variant="ghost" color="critical" size="xs">
+  </ods-button>
 
   <p>Disabled</p>
   <ods-button label="Disabled button" is-disabled variant="default" color="primary" size="md">
@@ -74,6 +87,19 @@
   </ods-button>
   <ods-button label="Disabled button" is-disabled variant="ghost" color="critical" size="sm">
   </ods-button>
+  <br /><br />
+  <ods-button label="Disabled button" is-disabled variant="default" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Disabled button" is-disabled variant="outline" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Disabled button" is-disabled variant="ghost" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Disabled button" is-disabled variant="default" color="critical" size="xs">
+  </ods-button>
+  <ods-button label="Disabled button" is-disabled variant="outline" color="critical" size="xs">
+  </ods-button>
+  <ods-button label="Disabled button" is-disabled variant="ghost" color="critical" size="xs">
+  </ods-button>
 
   <p>IsLoading</p>
   <ods-button label="Loading button" is-loading variant="default" color="primary" size="md">
@@ -101,6 +127,19 @@
   </ods-button>
   <ods-button label="Loading button" is-loading variant="ghost" color="critical" size="sm">
   </ods-button>
+  <br /><br />
+  <ods-button label="Loading button" is-loading variant="default" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Loading button" is-loading variant="outline" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Loading button" is-loading variant="ghost" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Loading button" is-loading variant="default" color="critical" size="xs">
+  </ods-button>
+  <ods-button label="Loading button" is-loading variant="outline" color="critical" size="xs">
+  </ods-button>
+  <ods-button label="Loading button" is-loading variant="ghost" color="critical" size="xs">
+  </ods-button>
 
   <p>Icon left (Default)</p>
   <ods-button label="Icon button" icon="plus" variant="default" color="primary" size="md">
@@ -128,6 +167,19 @@
   </ods-button>
   <ods-button label="Icon button" icon="plus" variant="ghost" color="critical" size="sm">
   </ods-button>
+  <br /><br />
+  <ods-button label="Icon button" icon="plus" variant="default" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Icon button" icon="plus" variant="outline" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Icon button" icon="plus" variant="ghost" color="primary" size="xs">
+  </ods-button>
+  <ods-button label="Icon button" icon="plus" variant="default" color="critical" size="xs">
+  </ods-button>
+  <ods-button label="Icon button" icon="plus" variant="outline" color="critical" size="xs">
+  </ods-button>
+  <ods-button label="Icon button" icon="plus" variant="ghost" color="critical" size="xs">
+  </ods-button>
 
   <p>Icon right</p>
   <ods-button label="Icon button" icon="plus" icon-alignment="right" variant="default" color="primary" size="md">

diff --git a/packages/ods/src/components/button/tests/rendering/ods-button.e2e.ts b/packages/ods/src/components/button/tests/rendering/ods-button.e2e.ts
@@ -65,22 +65,31 @@ describe('ods-button rendering', () => {
   });
 
   describe('sizes', () => {
-    it('should respect increase order (sm < md)', async() => {
+    it('should respect increase order (xs < sm < md)', async() => {
       await setup(`
+        <ods-button size="${ODS_BUTTON_SIZE.xs}" label="Button"></ods-button>
         <ods-button size="${ODS_BUTTON_SIZE.sm}" label="Button"></ods-button>
         <ods-button size="${ODS_BUTTON_SIZE.md}" label="Button"></ods-button>
       `);
 
+      const xsButton = await page.find(`ods-button[size=${ODS_BUTTON_SIZE.xs}] >>> .ods-button__button`);
       const smButton = await page.find(`ods-button[size=${ODS_BUTTON_SIZE.sm}] >>> .ods-button__button`);
       const mdButton = await page.find(`ods-button[size=${ODS_BUTTON_SIZE.md}] >>> .ods-button__button`);
 
+      const xsButtonStyle = await xsButton.getComputedStyle();
+      const xsButtonHeight = parseInt(xsButtonStyle.getPropertyValue('height'), 10);
+
       const smButtonStyle = await smButton.getComputedStyle();
       const smButtonHeight = parseInt(smButtonStyle.getPropertyValue('height'), 10);
 
       const mdButtonStyle = await mdButton.getComputedStyle();
       const mdButtonHeight = parseInt(mdButtonStyle.getPropertyValue('height'), 10);
 
+      expect(xsButtonHeight).toBeLessThan(smButtonHeight);
+      expect(xsButtonHeight).toBeLessThan(mdButtonHeight);
       expect(smButtonHeight).toBeLessThan(mdButtonHeight);
+      expect(smButtonHeight).toBeGreaterThan(xsButtonHeight);
+      expect(mdButtonHeight).toBeGreaterThan(xsButtonHeight);
       expect(mdButtonHeight).toBeGreaterThan(smButtonHeight);
     });
   });

diff --git a/packages/ods/src/style/_button.scss b/packages/ods/src/style/_button.scss
@@ -2,6 +2,7 @@
 @use './state';
 
 $ods-button-border-radius: var(--ods-border-radius-md);
+$ods-button-size-xs: 24px;
 $ods-button-size-sm: 32px;
 $ods-button-size-md: 40px;
 
@@ -27,7 +28,14 @@ $ods-button-size-md: 40px;
 }
 
 @mixin ods-button-size($size) {
-  @if $size == 'sm' {
+  @if $size == 'xs' {
+    grid-column-gap: 6px;
+    border-radius: 2px;
+    padding: 6px;
+    min-width: $ods-button-size-xs;
+    min-height: $ods-button-size-xs;
+    font-size: 0.75rem;
+  } @else if $size == 'sm' {
     grid-column-gap: 6px;
     padding: 6px;
     min-width: $ods-button-size-sm;

diff --git a/packages/storybook/stories/components/button/button.stories.ts b/packages/storybook/stories/components/button/button.stories.ts
@@ -188,6 +188,7 @@ export const Size: StoryObj = {
   render: () => html`
 <ods-button label="MD button" size="${ODS_BUTTON_SIZE.md}"></ods-button>
 <ods-button label="SM button" size="${ODS_BUTTON_SIZE.sm}"></ods-button>
+<ods-button label="XS button" size="${ODS_BUTTON_SIZE.xs}"></ods-button>
   `,
 };
 

diff --git a/packages/storybook/stories/components/button/documentation.mdx b/packages/storybook/stories/components/button/documentation.mdx
@@ -90,6 +90,7 @@ An <StorybookLink kind="ODS Components/Icon" label="Icon" story="Documentation"
 
 <Heading label="Size" level={ 3 } />
 
+- **Extra Small**: actions in tiny spaces, such as action button in fields or compact rows in a table.
 - **Small**: actions in compact spaces or within densely packed interfaces, providing a more subtle and space-efficient option.
 - **Medium** _(default)_: main usage of **Buttons**, when they can be displayed in an important manner.
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,10 @@ @@
         position: relative;
+        &--xs {
+          @include button.ods-button-size('xs');
+        }
         &--sm {
           @include button.ods-button-size('sm');
         }
@@ Expand Down @@