feat(sbb-checkbox): add size xs (#2933)

sbb-design-systems · Jul 16, 2024 · 56db302 · 56db302
1 parent 4f1f482
commit 56db302
Show file tree

Hide file tree

Showing 20 changed files with 208 additions and 55 deletions.
diff --git a/src/elements/checkbox/checkbox-group/checkbox-group.stories.ts b/src/elements/checkbox/checkbox-group/checkbox-group.stories.ts
@@ -234,7 +234,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['m', 's'],
+  options: ['m', 's', 'xs'],
   table: {
     category: 'Checkbox group',
   },
@@ -359,6 +359,12 @@ export const horizontalSizeM: StoryObj = {
   args: { ...checkboxArgs, size: 'm' },
 };
 
+export const horizontalSizeXS: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: checkboxArgTypes,
+  args: { ...checkboxArgs, size: 'xs' },
+};
+
 export const horizontalDisabled: StoryObj = {
   render: DefaultTemplate,
   argTypes: checkboxArgTypes,

diff --git a/src/elements/checkbox/checkbox-group/checkbox-group.visual.spec.ts b/src/elements/checkbox/checkbox-group/checkbox-group.visual.spec.ts
@@ -121,6 +121,13 @@ describe('sbb-checkbox-group', () => {
         }),
       );
 
+      it(
+        `${orientation} size=xs ${visualDiffDefault.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(checkboxesTemplate({ ...args, size: 'xs' }));
+        }),
+      );
+
       it(
         `${orientation} disabled ${visualDiffDefault.name}`,
         visualDiffDefault.with(async (setup) => {

diff --git a/src/elements/checkbox/checkbox-panel/__snapshots__/checkbox-panel.snapshot.spec.snap.js b/src/elements/checkbox/checkbox-panel/__snapshots__/checkbox-panel.snapshot.spec.snap.js
@@ -28,7 +28,7 @@ snapshots["sbb-checkbox-panel renders unchecked Shadow DOM"] =
     <span class="sbb-checkbox">
       <span class="sbb-checkbox__inner">
         <span class="sbb-checkbox__aligner">
-          <sbb-visual-checkbox>
+          <sbb-visual-checkbox size="m">
           </sbb-visual-checkbox>
         </span>
         <span class="sbb-checkbox__label">
@@ -75,7 +75,10 @@ snapshots["sbb-checkbox-panel renders checked Shadow DOM"] =
     <span class="sbb-checkbox">
       <span class="sbb-checkbox__inner">
         <span class="sbb-checkbox__aligner">
-          <sbb-visual-checkbox checked="">
+          <sbb-visual-checkbox
+            checked=""
+            size="m"
+          >
           </sbb-visual-checkbox>
         </span>
         <span class="sbb-checkbox__label">
@@ -121,7 +124,10 @@ snapshots["sbb-checkbox-panel renders indeterminate Shadow DOM"] =
     <span class="sbb-checkbox">
       <span class="sbb-checkbox__inner">
         <span class="sbb-checkbox__aligner">
-          <sbb-visual-checkbox indeterminate="">
+          <sbb-visual-checkbox
+            indeterminate=""
+            size="m"
+          >
           </sbb-visual-checkbox>
         </span>
         <span class="sbb-checkbox__label">
@@ -167,7 +173,10 @@ snapshots["sbb-checkbox-panel renders unchecked disabled Shadow DOM"] =
     <span class="sbb-checkbox">
       <span class="sbb-checkbox__inner">
         <span class="sbb-checkbox__aligner">
-          <sbb-visual-checkbox disabled="">
+          <sbb-visual-checkbox
+            disabled=""
+            size="m"
+          >
           </sbb-visual-checkbox>
         </span>
         <span class="sbb-checkbox__label">

diff --git a/src/elements/checkbox/checkbox-panel/checkbox-panel.ts b/src/elements/checkbox/checkbox-panel/checkbox-panel.ts
@@ -6,7 +6,7 @@ import {
   type PropertyValues,
   type TemplateResult,
 } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 
 import { slotState } from '../../core/decorators.js';
 import { EventEmitter } from '../../core/eventing.js';
@@ -15,7 +15,12 @@ import type {
   SbbDisabledStateChange,
   SbbStateChange,
 } from '../../core/interfaces/types.js';
-import { panelCommonStyle, SbbPanelMixin, SbbUpdateSchedulerMixin } from '../../core/mixins.js';
+import {
+  panelCommonStyle,
+  SbbPanelMixin,
+  type SbbPanelSize,
+  SbbUpdateSchedulerMixin,
+} from '../../core/mixins.js';
 import { checkboxCommonStyle, SbbCheckboxCommonElementMixin } from '../common.js';
 
 import '../../screen-reader-only.js';
@@ -51,6 +56,16 @@ export class SbbCheckboxPanelElement extends SbbPanelMixin(
     panelConnected: 'panelConnected',
   } as const;
 
+  /** Size variant. */
+  @property({ reflect: true })
+  public set size(value: SbbPanelSize) {
+    this._size = value;
+  }
+  public get size(): SbbPanelSize {
+    return this.group?.size ? (this.group.size === 'xs' ? 's' : this.group.size) : this._size;
+  }
+  private _size: SbbPanelSize = 'm';
+
   /**
    * @internal
    * Internal event that emits whenever the state of the checkbox

diff --git a/src/elements/checkbox/checkbox-panel/readme.md b/src/elements/checkbox/checkbox-panel/readme.md
@@ -51,6 +51,14 @@ The component's label can be displayed in bold using the `sbb-text--bold` class
 </sbb-checkbox-panel>
 ```
 
+The component has two `size`, named `s` and `m` (default).
+If the component is used within a group, the size is inherited from it;
+since the `sbb-checkbox-group` has also `xs` size, this case will fall back to `s`.
+
+```html
+<sbb-checkbox-panel size="s"> Size </sbb-checkbox-panel>
+```
+
 ## Events
 
 Consumers can listen to the native `change` event on the `sbb-checkbox-panel` component to intercept the input's change;
@@ -78,7 +86,7 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la
 | `indeterminate` | `indeterminate` | public  | `boolean`                         | `false`   | Whether the checkbox is indeterminate.                      |
 | `name`          | `name`          | public  | `string`                          |           | Name of the form element. Will be read from name attribute. |
 | `required`      | `required`      | public  | `boolean`                         | `false`   | Whether the component is required.                          |
-| `size`          | `size`          | public  | `SbbCheckboxSize`                 | `'m'`     | Label size variant, either m or s.                          |
+| `size`          | `size`          | public  | `SbbPanelSize`                    | `'m'`     | Size variant.                                               |
 | `value`         | `value`         | public  | `string \| null`                  | `null`    | Value of the form element.                                  |
 
 ## Events

diff --git a/src/elements/checkbox/checkbox/__snapshots__/checkbox.snapshot.spec.snap.js b/src/elements/checkbox/checkbox/__snapshots__/checkbox.snapshot.spec.snap.js
@@ -18,7 +18,7 @@ snapshots["sbb-checkbox should render unchecked Shadow DOM"] =
   <span class="sbb-checkbox">
     <span class="sbb-checkbox__inner">
       <span class="sbb-checkbox__aligner">
-        <sbb-visual-checkbox>
+        <sbb-visual-checkbox size="m">
         </sbb-visual-checkbox>
       </span>
       <span class="sbb-checkbox__label">
@@ -53,7 +53,10 @@ snapshots["sbb-checkbox should render checked Shadow DOM"] =
   <span class="sbb-checkbox">
     <span class="sbb-checkbox__inner">
       <span class="sbb-checkbox__aligner">
-        <sbb-visual-checkbox checked="">
+        <sbb-visual-checkbox
+          checked=""
+          size="m"
+        >
         </sbb-visual-checkbox>
       </span>
       <span class="sbb-checkbox__label">
@@ -88,7 +91,10 @@ snapshots["sbb-checkbox should render indeterminate Shadow DOM"] =
   <span class="sbb-checkbox">
     <span class="sbb-checkbox__inner">
       <span class="sbb-checkbox__aligner">
-        <sbb-visual-checkbox indeterminate="">
+        <sbb-visual-checkbox
+          indeterminate=""
+          size="m"
+        >
         </sbb-visual-checkbox>
       </span>
       <span class="sbb-checkbox__label">
@@ -123,7 +129,10 @@ snapshots["sbb-checkbox should render unchecked disabled Shadow DOM"] =
   <span class="sbb-checkbox">
     <span class="sbb-checkbox__inner">
       <span class="sbb-checkbox__aligner">
-        <sbb-visual-checkbox disabled="">
+        <sbb-visual-checkbox
+          disabled=""
+          size="m"
+        >
         </sbb-visual-checkbox>
       </span>
       <span class="sbb-checkbox__label">

diff --git a/src/elements/checkbox/checkbox/checkbox.stories.ts b/src/elements/checkbox/checkbox/checkbox.stories.ts
@@ -23,7 +23,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['m', 's'],
+  options: ['m', 's', 'xs'],
 };
 
 const checked: InputType = {
@@ -173,6 +173,11 @@ export const sizeM: StoryObj = {
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, size: size.options![0] },
 };
+export const sizeXS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![2] },
+};
 export const longLabel: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,

diff --git a/src/elements/checkbox/checkbox/checkbox.ts b/src/elements/checkbox/checkbox/checkbox.ts
@@ -4,7 +4,11 @@ import { customElement, property } from 'lit/decorators.js';
 import { slotState } from '../../core/decorators.js';
 import type { SbbIconPlacement } from '../../core/interfaces.js';
 import { SbbIconNameMixin } from '../../icon.js';
-import { SbbCheckboxCommonElementMixin, checkboxCommonStyle } from '../common.js';
+import {
+  SbbCheckboxCommonElementMixin,
+  checkboxCommonStyle,
+  type SbbCheckboxSize,
+} from '../common.js';
 
 import checkboxStyle from './checkbox.scss?lit&inline';
 
@@ -30,6 +34,16 @@ export class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(
     didChange: 'didChange',
   } as const;
 
+  /** Size variant. */
+  @property({ reflect: true })
+  public set size(value: SbbCheckboxSize) {
+    this._size = value;
+  }
+  public get size(): SbbCheckboxSize {
+    return this.group?.size ?? this._size;
+  }
+  private _size: SbbCheckboxSize = 'm';
+
   /** The label position relative to the labelIcon. Defaults to end */
   @property({ attribute: 'icon-placement', reflect: true })
   public iconPlacement: SbbIconPlacement = 'end';
@@ -44,6 +58,7 @@ export class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(
                 ?checked=${this.checked}
                 ?indeterminate=${this.indeterminate}
                 ?disabled=${this.disabled || this.formDisabled}
+                size=${this.size}
               ></sbb-visual-checkbox>
             </span>
             <span class="sbb-checkbox__label">

diff --git a/src/elements/checkbox/checkbox/checkbox.visual.spec.ts b/src/elements/checkbox/checkbox/checkbox.visual.spec.ts
@@ -62,6 +62,13 @@ describe('sbb-checkbox', () => {
         }),
       );
 
+      it(
+        `${state} size=xs`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template({ ...defaultArgs, size: 'xs' }));
+        }),
+      );
+
       for (const iconPlacement of ['start', 'end']) {
         it(
           `${state} iconPlacement=${iconPlacement}`,

diff --git a/src/elements/checkbox/checkbox/readme.md b/src/elements/checkbox/checkbox/readme.md
@@ -43,10 +43,12 @@ The component can be displayed in `disabled` or `required` state by using the se
 
 ## Style
 
-The component has two `size`, named `s` and `m` (default).
+The component has three `size`, named `xs`, `s` and `m` (default).
 
 ```html
-<sbb-checkbox value="size" size="m">Size</sbb-checkbox>
+<sbb-checkbox value="size" size="xs">Size</sbb-checkbox>
+
+<sbb-checkbox value="size" size="s">Size</sbb-checkbox>
 ```
 
 The component's label can be displayed in bold using the `sbb-text--bold` class on a wrapper tag:
@@ -90,7 +92,7 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la
 | `indeterminate` | `indeterminate`  | public  | `boolean`                         | `false` | Whether the checkbox is indeterminate.                                                                                           |
 | `name`          | `name`           | public  | `string`                          |         | Name of the form element. Will be read from name attribute.                                                                      |
 | `required`      | `required`       | public  | `boolean`                         | `false` | Whether the component is required.                                                                                               |
-| `size`          | `size`           | public  | `SbbCheckboxSize`                 | `'m'`   | Label size variant, either m or s.                                                                                               |
+| `size`          | `size`           | public  | `SbbCheckboxSize`                 | `'m'`   | Size variant.                                                                                                                    |
 | `value`         | `value`          | public  | `string \| null`                  | `null`  | Value of the form element.                                                                                                       |
 
 ## Events

diff --git a/src/elements/checkbox/common/checkbox-common.scss b/src/elements/checkbox/common/checkbox-common.scss
@@ -34,6 +34,10 @@
   :host([size='s']) & {
     @include sbb.text-s--regular;
   }
+
+  :host([size='xs']) & {
+    @include sbb.text-xs--regular;
+  }
 }
 
 .sbb-checkbox__inner {

diff --git a/src/elements/checkbox/common/checkbox-common.ts b/src/elements/checkbox/common/checkbox-common.ts
@@ -10,17 +10,14 @@ import {
 } from '../../core/mixins.js';
 import type { SbbCheckboxGroupElement } from '../checkbox-group.js';
 
-export type SbbCheckboxSize = 's' | 'm';
+export type SbbCheckboxSize = 'xs' | 's' | 'm';
 
 export declare class SbbCheckboxCommonElementMixinType
   extends SbbFormAssociatedCheckboxMixinType
   implements Partial<SbbDisabledMixinType>, Partial<SbbRequiredMixinType>
 {
   public indeterminate: boolean;
 
-  public set size(value: SbbCheckboxSize);
-  public get size(): SbbCheckboxSize;
-
   public get group(): SbbCheckboxGroupElement | null;
 }
 
@@ -35,16 +32,6 @@ export const SbbCheckboxCommonElementMixin = <T extends Constructor<LitElement>>
     /** Whether the checkbox is indeterminate. */
     @property({ type: Boolean }) public indeterminate = false;
 
-    /** Label size variant, either m or s. */
-    @property({ reflect: true })
-    public set size(value: SbbCheckboxSize) {
-      this._size = value;
-    }
-    public get size(): SbbCheckboxSize {
-      return this.group?.size ?? this._size;
-    }
-    private _size: SbbCheckboxSize = 'm';
-
     /** Reference to the connected checkbox group. */
     public get group(): SbbCheckboxGroupElement | null {
       return this._group;

diff --git a/src/elements/core/mixins/panel-mixin.ts b/src/elements/core/mixins/panel-mixin.ts
@@ -11,6 +11,8 @@ export declare class SbbPanelMixinType {
   public expansionState?: string;
 }
 
+export type SbbPanelSize = 's' | 'm';
+
 /**
  * Mixin for common panel behaviors
  */

diff --git a/src/elements/radio-button/radio-button-panel/radio-button-panel.ts b/src/elements/radio-button/radio-button-panel/radio-button-panel.ts
@@ -9,13 +9,16 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 
 import { slotState } from '../../core/decorators.js';
-import { panelCommonStyle, SbbPanelMixin, SbbUpdateSchedulerMixin } from '../../core/mixins.js';
+import {
+  panelCommonStyle,
+  SbbPanelMixin,
+  type SbbPanelSize,
+  SbbUpdateSchedulerMixin,
+} from '../../core/mixins.js';
 import { radioButtonCommonStyle, SbbRadioButtonCommonElementMixin } from '../common.js';
 
 import '../../screen-reader-only.js';
 
-export type SbbRadioButtonPanelSize = 's' | 'm';
-
 /**
  /**
  * It displays a radio button enhanced with the panel design.
@@ -42,13 +45,13 @@ export class SbbRadioButtonPanelElement extends SbbPanelMixin(
    * Size variant.
    */
   @property({ reflect: true })
-  public set size(value: SbbRadioButtonPanelSize) {
+  public set size(value: SbbPanelSize) {
     this._size = value;
   }
-  public get size(): SbbRadioButtonPanelSize {
+  public get size(): SbbPanelSize {
     return this.group?.size ? (this.group.size === 'xs' ? 's' : this.group.size) : this._size;
   }
-  private _size: SbbRadioButtonPanelSize = 'm';
+  private _size: SbbPanelSize = 'm';
 
   protected override async willUpdate(changedProperties: PropertyValues<this>): Promise<void> {
     super.willUpdate(changedProperties);

diff --git a/src/elements/radio-button/radio-button-panel/readme.md b/src/elements/radio-button/radio-button-panel/readme.md
@@ -64,7 +64,7 @@ The component's label can be displayed in bold using the `sbb-text--bold` class
 | `disabled`            | `disabled`              | public  | `boolean`                            | `false`   | Whether the radio button is disabled.          |
 | `group`               | -                       | public  | `SbbRadioButtonGroupElement \| null` | `null`    | Reference to the connected radio button group. |
 | `required`            | `required`              | public  | `boolean`                            | `false`   | Whether the radio button is required.          |
-| `size`                | `size`                  | public  | `SbbRadioButtonPanelSize`            | `'m'`     | Size variant.                                  |
+| `size`                | `size`                  | public  | `SbbPanelSize`                       | `'m'`     | Size variant.                                  |
 | `value`               | `value`                 | public  | `string \| undefined`                |           | Value of radio button.                         |
 
 ## Methods
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,8 @@ export declare class SbbPanelMixinType { @@
       public expansionState?: string;
     }
+    export type SbbPanelSize = 's' | 'm';
     /**
      * Mixin for common panel behaviors
      */
@@ Expand Down @@