feat(sbb-radio-button, sbb-radio-button-group): add size xs (#2936)

sbb-design-systems · Jul 16, 2024 · 7237dce · 7237dce
1 parent b2bbf2a
commit 7237dce
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 26 deletions.
diff --git a/src/elements/radio-button/common/radio-button-common.scss b/src/elements/radio-button/common/radio-button-common.scss
@@ -57,6 +57,10 @@
   }
 }
 
+:host([size='xs']) {
+  --sbb-radio-button-dimension: #{sbb.px-to-rem-build(20)};
+}
+
 .sbb-screen-reader-only {
   @include sbb.screen-reader-only;
 }
@@ -68,6 +72,10 @@
     @include sbb.text-s--regular;
   }
 
+  :host([size='xs']) & {
+    @include sbb.text-xs--regular;
+  }
+
   display: block;
   cursor: var(--sbb-radio-button-cursor);
   user-select: none;

diff --git a/src/elements/radio-button/common/radio-button-common.ts b/src/elements/radio-button/common/radio-button-common.ts
@@ -13,7 +13,7 @@ import type {
 import type { AbstractConstructor } from '../../core/mixins.js';
 import type { SbbRadioButtonGroupElement } from '../radio-button-group.js';
 
-export type SbbRadioButtonSize = 's' | 'm';
+export type SbbRadioButtonSize = 'xs' | 's' | 'm';
 
 export type SbbRadioButtonStateChange = Extract<
   SbbStateChange,
@@ -110,18 +110,6 @@ export const SbbRadioButtonCommonElementMixin = <T extends AbstractConstructor<L
     }
     private _checked = false;
 
-    /**
-     * Label size variant, either m or s.
-     */
-    @property({ reflect: true })
-    public set size(value: SbbRadioButtonSize) {
-      this._size = value;
-    }
-    public get size(): SbbRadioButtonSize {
-      return this.group?.size ?? this._size;
-    }
-    private _size: SbbRadioButtonSize = 'm';
-
     private _abort = new SbbConnectedAbortController(this);
     private _handlerRepository = new HandlerRepository(this, formElementHandlerAspect);
 

diff --git a/src/elements/radio-button/radio-button-group/radio-button-group.stories.ts b/src/elements/radio-button/radio-button-group/radio-button-group.stories.ts
@@ -75,7 +75,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['m', 's'],
+  options: ['m', 's', 'xs'],
 };
 
 const ariaLabel: InputType = {
@@ -184,6 +184,12 @@ export const VerticalSizeS: StoryObj = {
   args: { ...defaultArgs, orientation: orientation.options![1], size: size.options![1] },
 };
 
+export const SizeXS: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![2] },
+};
+
 export const Disabled: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,

diff --git a/src/elements/radio-button/radio-button-group/radio-button-group.ts b/src/elements/radio-button/radio-button-group/radio-button-group.ts
@@ -8,7 +8,7 @@ import { hostAttributes, slotState } from '../../core/decorators.js';
 import { EventEmitter } from '../../core/eventing.js';
 import type { SbbHorizontalFrom, SbbOrientation, SbbStateChange } from '../../core/interfaces.js';
 import { SbbDisabledMixin } from '../../core/mixins.js';
-import type { SbbRadioButtonSize, SbbRadioButtonStateChange } from '../common.js';
+import type { SbbRadioButtonStateChange, SbbRadioButtonSize } from '../common.js';
 import type { SbbRadioButtonPanelElement } from '../radio-button-panel.js';
 import type { SbbRadioButtonElement } from '../radio-button.js';
 
@@ -58,7 +58,7 @@ export class SbbRadioButtonGroupElement extends SbbDisabledMixin(LitElement) {
   @property() public value?: any | null;
 
   /**
-   * Size variant, either m or s.
+   * Size variant.
    */
   @property() public size: SbbRadioButtonSize = 'm';
 

diff --git a/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts b/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts
@@ -15,7 +15,7 @@ import '../../radio-button.js';
 const cases = {
   disabled: [false, true],
   orientation: ['vertical', 'horizontal'],
-  size: ['m', 's'],
+  size: ['m', 's', 'xs'],
 };
 
 const suffixAndSubtext = (): TemplateResult => html`

diff --git a/src/elements/radio-button/radio-button-group/readme.md b/src/elements/radio-button/radio-button-group/readme.md
@@ -77,7 +77,7 @@ In order to ensure readability for screen-readers, please provide an `aria-label
 | `orientation`         | `orientation`           | public  | `SbbOrientation`                                          | `'horizontal'` | Radio group's orientation, either horizontal or vertical. |
 | `radioButtons`        | -                       | public  | `(SbbRadioButtonElement \| SbbRadioButtonPanelElement)[]` |                | List of contained radio buttons.                          |
 | `required`            | `required`              | public  | `boolean`                                                 | `false`        | Whether the radio group is required.                      |
-| `size`                | `size`                  | public  | `SbbRadioButtonSize`                                      | `'m'`          | Size variant, either m or s.                              |
+| `size`                | `size`                  | public  | `SbbRadioButtonSize`                                      | `'m'`          | Size variant.                                             |
 | `value`               | `value`                 | public  | `any \| null \| undefined`                                |                | The value of the radio group.                             |
 
 ## Events

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
@@ -6,14 +6,16 @@ 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 { panelCommonStyle, SbbPanelMixin, 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.
@@ -36,6 +38,18 @@ export class SbbRadioButtonPanelElement extends SbbPanelMixin(
     panelConnected: 'panelConnected',
   } as const;
 
+  /**
+   * Size variant.
+   */
+  @property({ reflect: true })
+  public set size(value: SbbRadioButtonPanelSize) {
+    this._size = value;
+  }
+  public get size(): SbbRadioButtonPanelSize {
+    return this.group?.size ? (this.group.size === 'xs' ? 's' : this.group.size) : this._size;
+  }
+  private _size: SbbRadioButtonPanelSize = '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
@@ -36,6 +36,13 @@ The `allowEmptySelection` property allows user to deselect the component.
 
 ## Style
 
+The component has three different sizes, which can be changed using the `size` property (`m`, which is the default and `s`).
+If used inside a `sbb-radio-button-group`, the `size` will be inherited from it.
+
+```html
+<sbb-radio-button-panel size="s">Size</sbb-radio-button-panel>
+```
+
 The component's label can be displayed in bold using the `sbb-text--bold` class on a wrapper tag:
 
 ```html
@@ -57,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  | `SbbRadioButtonSize`                 | `'m'`     | Label size variant, either m or s.             |
+| `size`                | `size`                  | public  | `SbbRadioButtonPanelSize`            | `'m'`     | Size variant.                                  |
 | `value`               | `value`                 | public  | `string \| undefined`                |           | Value of radio button.                         |
 
 ## Methods

diff --git a/src/elements/radio-button/radio-button/radio-button.stories.ts b/src/elements/radio-button/radio-button/radio-button.stories.ts
@@ -33,7 +33,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['m', 's'],
+  options: ['m', 's', 'xs'],
 };
 
 const ariaLabel: InputType = {
@@ -89,6 +89,12 @@ export const SizeS: StoryObj = {
   args: { ...defaultArgs, size: size.options![1] },
 };
 
+export const SizeXS: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![2] },
+};
+
 export const Checked: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,

diff --git a/src/elements/radio-button/radio-button/radio-button.ts b/src/elements/radio-button/radio-button/radio-button.ts
@@ -1,9 +1,13 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { LitElement, html, nothing } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 
 import { slotState } from '../../core/decorators.js';
-import { SbbRadioButtonCommonElementMixin, radioButtonCommonStyle } from '../common.js';
+import {
+  SbbRadioButtonCommonElementMixin,
+  radioButtonCommonStyle,
+  type SbbRadioButtonSize,
+} from '../common.js';
 
 import radioButtonStyle from './radio-button.scss?lit&inline';
 
@@ -20,6 +24,18 @@ export class SbbRadioButtonElement extends SbbRadioButtonCommonElementMixin(LitE
     stateChange: 'stateChange',
   } as const;
 
+  /**
+   * Size variant.
+   */
+  @property({ reflect: true })
+  public set size(value: SbbRadioButtonSize) {
+    this._size = value;
+  }
+  public get size(): SbbRadioButtonSize {
+    return this.group?.size ?? this._size;
+  }
+  private _size: SbbRadioButtonSize = 'm';
+
   protected override render(): TemplateResult {
     return html`
       <label class="sbb-radio-button">

diff --git a/src/elements/radio-button/radio-button/radio-button.visual.spec.ts b/src/elements/radio-button/radio-button/radio-button.visual.spec.ts
@@ -5,7 +5,7 @@ import { describeEach, describeViewports, visualDiffDefault } from '../../core/t
 import '../radio-button.js';
 
 const cases = {
-  size: ['m', 's'],
+  size: ['m', 's', 'xs'],
   checked: [true, false],
   disabled: [false, true],
 };

diff --git a/src/elements/radio-button/radio-button/readme.md b/src/elements/radio-button/radio-button/readme.md
@@ -32,7 +32,8 @@ The `allowEmptySelection` property allows user to deselect the component.
 
 ## Style
 
-The component has two different sizes, which can be changed using the `size` property (`m`, which is the default, and `s`).
+The component has three different sizes, which can be changed using the `size` property (`m`, which is the default, `s` and `xs`).
+If used inside a `sbb-radio-button-group`, the `size` will be inherited from it.
 
 ```html
 <sbb-radio-button value="small" size="s">Size</sbb-radio-button>
@@ -57,7 +58,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  | `SbbRadioButtonSize`                 | `'m'`   | Label size variant, either m or s.             |
+| `size`                | `size`                  | public  | `SbbRadioButtonSize`                 | `'m'`   | Size variant.                                  |
 | `value`               | `value`                 | public  | `string \| undefined`                |         | Value of radio button.                         |
 
 ## Methods