diff --git a/src/elements/stepper/step-label/step-label.scss b/src/elements/stepper/step-label/step-label.scss index 111b7a6514..63c1a505c0 100644 --- a/src/elements/stepper/step-label/step-label.scss +++ b/src/elements/stepper/step-label/step-label.scss @@ -57,6 +57,10 @@ } } +:host([data-size='s']) { + --sbb-step-label-prefix-size: var(--sbb-size-element-xxxs); +} + :host([disabled]) { --sbb-step-label-color: var(--sbb-color-granite); --sbb-step-label-prefix-border-style: dashed; @@ -102,6 +106,10 @@ display: flex; gap: var(--sbb-spacing-fixed-4x); color: var(--sbb-step-label-color); + + :host([data-size='s']) & { + @include sbb.text-m--bold; + } } .sbb-step-label__prefix { diff --git a/src/elements/stepper/stepper/stepper.stories.ts b/src/elements/stepper/stepper/stepper.stories.ts index cba7e33cf6..6fa954ea17 100644 --- a/src/elements/stepper/stepper/stepper.stories.ts +++ b/src/elements/stepper/stepper/stepper.stories.ts @@ -47,16 +47,25 @@ const horizontalFrom: InputType = { options: ['unset', 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'], }; +const size: InputType = { + control: { + type: 'inline-radio', + }, + options: ['s', 'm'], +}; + const defaultArgTypes: ArgTypes = { linear, orientation, 'horizontal-from': horizontalFrom, + size, }; const defaultArgs: Args = { linear: false, orientation: 'horizontal', 'horizontal-from': 'unset', + size: size.options![1], }; const codeStyle: Args = { @@ -356,6 +365,12 @@ export const Vertical: StoryObj = { args: { ...defaultArgs, orientation: orientation.options![1] }, }; +export const SizeS: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, size: size.options![0] }, +}; + export const HorizontalFromSmall: StoryObj = { render: Template, argTypes: defaultArgTypes, diff --git a/src/elements/stepper/stepper/stepper.ts b/src/elements/stepper/stepper/stepper.ts index 771cd12aff..1da5a9710f 100644 --- a/src/elements/stepper/stepper/stepper.ts +++ b/src/elements/stepper/stepper/stepper.ts @@ -48,6 +48,9 @@ export class SbbStepperElement extends SbbHydrationMixin(LitElement) { @property({ reflect: true }) public orientation: SbbOrientation = 'horizontal'; + /** Size variant, either l or m. */ + @property({ reflect: true }) public size: 's' | 'm' = 'm'; + /** The currently selected step. */ @property({ attribute: false }) public set selected(step: SbbStepElement) { @@ -200,6 +203,7 @@ export class SbbStepperElement extends SbbHydrationMixin(LitElement) { label.configure(i + 1, array.length, this._loaded); }); this._select(this.selected || this._enabledSteps[0]); + this._proxySize(); } private _updateLabels(): void { @@ -271,6 +275,17 @@ export class SbbStepperElement extends SbbHydrationMixin(LitElement) { if (changedProperties.has('linear') && this._loaded) { this._configureLinearMode(); } + + if (changedProperties.has('size')) { + this._proxySize(); + this._setMarkerSize(); + } + } + + private _proxySize(): void { + this.steps.forEach((step) => { + step.label?.setAttribute('data-size', this.size); + }); } private _handleKeyDown(evt: KeyboardEvent): void { diff --git a/src/elements/stepper/stepper/stepper.visual.spec.ts b/src/elements/stepper/stepper/stepper.visual.spec.ts index 9280b977d1..503a663933 100644 --- a/src/elements/stepper/stepper/stepper.visual.spec.ts +++ b/src/elements/stepper/stepper/stepper.visual.spec.ts @@ -25,12 +25,14 @@ describe(`sbb-stepper`, () => { orientation?: string, longLabel?: boolean, horizontalFrom?: string, + size: 's' | 'm' = 'm', ): TemplateResult => html` Step 1 @@ -87,6 +89,13 @@ describe(`sbb-stepper`, () => { await setup.withFixture(template(false, orientation, true)); }), ); + + it( + `orientation=${orientation} size=s`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template(false, orientation, true, undefined, 's')); + }), + ); } }); });