feat(button): implemented size 'S' (#2544)

sbb-design-systems · Apr 10, 2024 · 396d4dc · 396d4dc
1 parent 20a98b2
commit 396d4dc
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 2 deletions.
diff --git a/src/components/button/button-link/button-link.stories.ts b/src/components/button/button-link/button-link.stories.ts
@@ -20,6 +20,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories.js';
@@ -44,6 +45,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/button-static/button-static.stories.ts b/src/components/button/button-static/button-static.stories.ts
@@ -19,6 +19,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withSlottedIcon,
   withHiddenSlottedIcon,
 } from '../common/common-stories.js';
@@ -56,6 +57,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/button/button.stories.ts b/src/components/button/button/button.stories.ts
@@ -21,6 +21,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories.js';
@@ -45,6 +46,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/common/button-common.scss b/src/components/button/common/button-common.scss
@@ -65,6 +65,15 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
   }
 }
 
+:host([size='s']) {
+  --sbb-button-min-height: var(--sbb-size-element-xs);
+  --sbb-button-padding-inline: var(--sbb-spacing-fixed-4x);
+
+  @include sbb.mq($from: medium) {
+    --sbb-button-padding-inline: var(--sbb-spacing-fixed-5x);
+  }
+}
+
 :host(#{$icon-only}) {
   --sbb-button-padding-inline: 0;
   --icon-margin-inline-end: 0;

diff --git a/src/components/button/common/button-common.ts b/src/components/button/common/button-common.ts
@@ -15,7 +15,7 @@ import { SbbIconNameMixin, type SbbIconNameMixinType } from '../../icon/index.js
 
 export type SbbButtonCommonElement = SbbButtonCommonElementMixinType & SbbActionBaseElement;
 
-export type SbbButtonSize = 'l' | 'm';
+export type SbbButtonSize = 'l' | 'm' | 's';
 
 export declare class SbbButtonCommonElementMixinType
   implements SbbNegativeMixinType, Partial<SbbDisabledMixinType>, Partial<SbbIconNameMixinType>

diff --git a/src/components/button/common/common-stories.ts b/src/components/button/common/common-stories.ts
@@ -90,7 +90,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['l', 'm'],
+  options: ['l', 'm', 's'],
 };
 
 const iconName: InputType = {
@@ -192,6 +192,13 @@ export const sizeM: StoryObj = {
   },
 };
 
+export const sizeS: StoryObj = {
+  render: Template,
+  args: {
+    size: size.options[2],
+  },
+};
+
 export const fixedWidth: StoryObj = {
   render: FixedWidthTemplate,
   args: {

diff --git a/src/components/button/secondary-button-link/secondary-button-link.stories.ts b/src/components/button/secondary-button-link/secondary-button-link.stories.ts
@@ -20,6 +20,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories.js';
@@ -44,6 +45,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/secondary-button-static/secondary-button-static.stories.ts b/src/components/button/secondary-button-static/secondary-button-static.stories.ts
@@ -19,6 +19,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withSlottedIcon,
   withHiddenSlottedIcon,
 } from '../common/common-stories.js';
@@ -56,6 +57,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/secondary-button/secondary-button.stories.ts b/src/components/button/secondary-button/secondary-button.stories.ts
@@ -21,6 +21,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories.js';
@@ -45,6 +46,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/tertiary-button-link/tertiary-button-link.stories.ts b/src/components/button/tertiary-button-link/tertiary-button-link.stories.ts
@@ -20,6 +20,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories.js';
@@ -44,6 +45,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/tertiary-button-static/tertiary-button-static.stories.ts b/src/components/button/tertiary-button-static/tertiary-button-static.stories.ts
@@ -19,6 +19,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withSlottedIcon,
   withHiddenSlottedIcon,
 } from '../common/common-stories.js';
@@ -56,6 +57,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/tertiary-button/tertiary-button.stories.ts b/src/components/button/tertiary-button/tertiary-button.stories.ts
@@ -21,6 +21,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories.js';
@@ -45,6 +46,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/transparent-button-link/transparent-button-link.stories.ts b/src/components/button/transparent-button-link/transparent-button-link.stories.ts
@@ -20,6 +20,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories.js';
@@ -44,6 +45,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/transparent-button-static/transparent-button-static.stories.ts b/src/components/button/transparent-button-static/transparent-button-static.stories.ts
@@ -19,6 +19,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withSlottedIcon,
   withHiddenSlottedIcon,
 } from '../common/common-stories.js';
@@ -56,6 +57,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;

diff --git a/src/components/button/transparent-button/transparent-button.stories.ts b/src/components/button/transparent-button/transparent-button.stories.ts
@@ -21,6 +21,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  sizeS,
   withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories.js';
@@ -45,6 +46,7 @@ export const IconOnlyNegative: StoryObj = iconOnlyNegative;
 export const IconOnlyDisabled: StoryObj = iconOnlyDisabled;
 export const NoIcon: StoryObj = noIcon;
 export const SizeM: StoryObj = sizeM;
+export const SizeS: StoryObj = sizeS;
 export const FixedWidth: StoryObj = fixedWidth;
 export const WithSlottedIcon: StoryObj = withSlottedIcon;
 export const Active: StoryObj = primaryActive;