feat(sbb-tab-group): add size s variant (#2683)

sbb-design-systems · May 29, 2024 · c00aa58 · c00aa58
1 parent 37accd2
commit c00aa58
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 deletions.
diff --git a/src/components/tabs/tab-group/readme.md b/src/components/tabs/tab-group/readme.md
@@ -43,7 +43,7 @@ It's possible to set the first selected tab using the `initialSelectedIndex` pro
 | Name                   | Attribute                | Privacy | Type                              | Default | Description                                                                                                                        |
 | ---------------------- | ------------------------ | ------- | --------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | `initialSelectedIndex` | `initial-selected-index` | public  | `number`                          | `0`     | Sets the initial tab. If it matches a disabled tab or exceeds the length of the tab group, the first enabled tab will be selected. |
-| `size`                 | `size`                   | public  | `InterfaceSbbTabGroupTab['size']` | `'l'`   | Size variant, either l or xl.                                                                                                      |
+| `size`                 | `size`                   | public  | `InterfaceSbbTabGroupTab['size']` | `'l'`   | Size variant, either s, l or xl.                                                                                                   |
 
 ## Methods
 

diff --git a/src/components/tabs/tab-group/tab-group.stories.ts b/src/components/tabs/tab-group/tab-group.stories.ts
@@ -152,7 +152,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['l', 'xl'],
+  options: ['s', 'l', 'xl'],
 };
 
 const negative: InputType = {
@@ -176,7 +176,7 @@ const basicArgs: Args = {
   label: 'Tab label one',
   'icon-name': undefined,
   amount: undefined,
-  size: size.options![0],
+  size: size.options![1],
   negative: false,
 };
 
@@ -189,25 +189,36 @@ export const defaultTabsSizeL: StoryObj = {
 export const numbersAndIconsSizeL: StoryObj = {
   render: IconsAndNumbersTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![0] },
+  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![1] },
 };
 
 export const defaultTabsSizeXL: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, size: size.options![1] },
+  args: { ...basicArgs, size: size.options![2] },
 };
 
 export const numbersAndIconsSizeXL: StoryObj = {
   render: IconsAndNumbersTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![0], size: size.options![1] },
+  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![0], size: size.options![2] },
+};
+export const defaultTabsSizeS: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, size: size.options![0] },
+};
+
+export const numbersAndIconsSizeS: StoryObj = {
+  render: IconsAndNumbersTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![0], size: size.options![0] },
 };
 
 export const nestedTabGroups: StoryObj = {
   render: NestedTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![0] },
+  args: { ...basicArgs, amount: 16, 'icon-name': iconName.options![1] },
 };
 
 export const tintedBackground: StoryObj = {

diff --git a/src/components/tabs/tab-group/tab-group.ts b/src/components/tabs/tab-group/tab-group.ts
@@ -25,7 +25,7 @@ export interface InterfaceSbbTabGroupTab extends HTMLElement {
   relatedContent?: HTMLElement;
   index?: number;
   tabGroupActions?: InterfaceSbbTabGroupActions;
-  size: 'l' | 'xl';
+  size: 's' | 'l' | 'xl';
 }
 
 const tabObserverConfig: MutationObserverInit = {
@@ -70,7 +70,7 @@ export class SbbTabGroupElement extends LitElement {
   );
 
   /**
-   * Size variant, either l or xl.
+   * Size variant, either s, l or xl.
    */
   @property()
   public set size(value: InterfaceSbbTabGroupTab['size']) {

diff --git a/src/components/tabs/tab-title/tab-title.scss b/src/components/tabs/tab-title/tab-title.scss
@@ -4,13 +4,14 @@
 @include sbb.box-sizing;
 
 :host {
-  --sbb-tab-title-height: var(--sbb-spacing-fixed-12x);
+  --sbb-tab-title-height: var(--sbb-size-element-m);
   --sbb-tab-title-color: var(--sbb-color-granite);
   --sbb-tab-title-icon-color: var(--sbb-color-black);
   --sbb-tab-title-background-color: var(--sbb-color-white);
   --sbb-tab-title-cursor: pointer;
   --sbb-tab-title-pointer-events: unset;
   --sbb-tab-title-inset: 0;
+  --sbb-tab-title-inline-padding: var(--sbb-spacing-responsive-xs);
   --sbb-tab-title-marker-transform: scale(0);
   --sbb-tab-title-text-decoration: none;
   --sbb-tab-title-animation-duration: var(
@@ -29,17 +30,18 @@
   // which appears in normalize css of several frameworks.
   outline: none !important;
 
-  @include sbb.mq($from: medium) {
-    --sbb-tab-title-height: var(--sbb-spacing-fixed-14x);
-  }
-
   @include sbb.if-forced-colors {
     --sbb-tab-title-color: ButtonText;
     --sbb-tab-title-icon-color: ButtonText;
     --sbb-tab-title-amount-color: ButtonText;
   }
 }
 
+:host([data-size='s']) {
+  --sbb-tab-title-height: var(--sbb-size-element-xs);
+  --sbb-tab-title-inline-padding: var(--sbb-spacing-responsive-xxxs);
+}
+
 :host([disabled]) {
   --sbb-tab-title-icon-color: var(--sbb-color-granite);
   --sbb-tab-title-background-color: var(--sbb-color-milk);
@@ -104,7 +106,7 @@
   min-height: var(--sbb-tab-title-height);
   display: flex;
   align-items: center;
-  padding-inline: var(--sbb-spacing-responsive-xs);
+  padding-inline: var(--sbb-tab-title-inline-padding);
   gap: var(--sbb-spacing-fixed-2x);
   user-select: none;
   cursor: var(--sbb-tab-title-cursor);
@@ -164,6 +166,10 @@
   @include sbb.font-smoothing;
   @include sbb.ellipsis;
 
+  :host([data-size='s']) & {
+    @include sbb.text-s--bold;
+  }
+
   :host([data-size='xl']) & {
     @include sbb.text-xl--bold;
   }
@@ -180,6 +186,10 @@
     display: none;
   }
 
+  :host([data-size='s']) & {
+    @include sbb.text-s--regular;
+  }
+
   :host([data-size='xl']) & {
     @include sbb.text-xl--regular;
   }