From 2a86acc3ca42690ce4aa707b6aa30b042bf42745 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Fri, 23 Aug 2024 17:10:57 +0200 Subject: [PATCH 1/5] feat(sbb-stepper): add size 's' --- src/elements/stepper/step-label/step-label.scss | 8 ++++++++ src/elements/stepper/stepper/stepper.stories.ts | 15 +++++++++++++++ src/elements/stepper/stepper/stepper.ts | 15 +++++++++++++++ .../stepper/stepper/stepper.visual.spec.ts | 9 +++++++++ 4 files changed, 47 insertions(+) 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')); + }), + ); } }); }); From c037ecee61e4d6bb38d39a6b627b7e35e1814dfb Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Tue, 27 Aug 2024 09:53:22 +0200 Subject: [PATCH 2/5] chore(sbb-stepper): integrity --- .../stepper/__snapshots__/stepper.snapshot.spec.snap.js | 4 ++++ src/elements/stepper/stepper/readme.md | 1 + 2 files changed, 5 insertions(+) diff --git a/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js b/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js index f6909850dc..e86d986551 100644 --- a/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js +++ b/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js @@ -6,6 +6,7 @@ snapshots["sbb-stepper renders DOM"] = data-disable-animation="" orientation="horizontal" selected-index="0" + size="m" > Date: Tue, 27 Aug 2024 10:45:50 +0200 Subject: [PATCH 3/5] test(sbb-stepper): fix visual spec --- src/elements/stepper/stepper/stepper.visual.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/stepper/stepper/stepper.visual.spec.ts b/src/elements/stepper/stepper/stepper.visual.spec.ts index 503a663933..4ceb226016 100644 --- a/src/elements/stepper/stepper/stepper.visual.spec.ts +++ b/src/elements/stepper/stepper/stepper.visual.spec.ts @@ -93,7 +93,7 @@ describe(`sbb-stepper`, () => { it( `orientation=${orientation} size=s`, visualDiffDefault.with(async (setup) => { - await setup.withFixture(template(false, orientation, true, undefined, 's')); + await setup.withFixture(template(false, orientation, false, undefined, 's')); }), ); } From 4145b32a11a7aacd72c15c066c7570688b231715 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Tue, 27 Aug 2024 14:54:50 +0200 Subject: [PATCH 4/5] fix(sbb-stepper): pr feedbacks --- src/elements/stepper/stepper/readme.md | 2 +- src/elements/stepper/stepper/stepper.spec.ts | 11 +++++++++++ src/elements/stepper/stepper/stepper.ts | 2 +- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/elements/stepper/stepper/readme.md b/src/elements/stepper/stepper/readme.md index c4a5773b47..882cc9e4f3 100644 --- a/src/elements/stepper/stepper/readme.md +++ b/src/elements/stepper/stepper/readme.md @@ -110,7 +110,7 @@ Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-s | `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Steps orientation, either horizontal or vertical. | | `selected` | - | public | `SbbStepElement \| undefined` | | The currently selected step. | | `selectedIndex` | `selected-index` | public | `number \| undefined` | | The currently selected step index. | -| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either l or m. | +| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Size variant, either s or m. | | `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. | ## Methods diff --git a/src/elements/stepper/stepper/stepper.spec.ts b/src/elements/stepper/stepper/stepper.spec.ts index 1e93465a72..30e34fceab 100644 --- a/src/elements/stepper/stepper/stepper.spec.ts +++ b/src/elements/stepper/stepper/stepper.spec.ts @@ -397,4 +397,15 @@ describe('sbb-stepper', () => { expect(stepLabelThree).to.have.attribute('data-selected'); expect(stepLabelThree.step).to.have.attribute('data-selected'); }); + + it('proxy size to step children', async () => { + const stepLabels = Array.from(element.querySelectorAll('sbb-step-label')!); + + expect(stepLabels.every((l) => l.getAttribute('data-size') === element.size)).to.be.true; + + element.size = 's'; + await waitForLitRender(element); + + expect(stepLabels.every((l) => l.getAttribute('data-size') === element.size)).to.be.true; + }); }); diff --git a/src/elements/stepper/stepper/stepper.ts b/src/elements/stepper/stepper/stepper.ts index 1da5a9710f..a6ff30d23a 100644 --- a/src/elements/stepper/stepper/stepper.ts +++ b/src/elements/stepper/stepper/stepper.ts @@ -48,7 +48,7 @@ export class SbbStepperElement extends SbbHydrationMixin(LitElement) { @property({ reflect: true }) public orientation: SbbOrientation = 'horizontal'; - /** Size variant, either l or m. */ + /** Size variant, either s or m. */ @property({ reflect: true }) public size: 's' | 'm' = 'm'; /** The currently selected step. */ From bd54c20a0c0a97efeec48f7dbad616ca79b4fb67 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 28 Aug 2024 14:13:38 +0200 Subject: [PATCH 5/5] fix(sbb-stepper): ux review feedbacks --- src/elements/stepper/step-label/step-label.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/elements/stepper/step-label/step-label.scss b/src/elements/stepper/step-label/step-label.scss index 63c1a505c0..5dd362e1d1 100644 --- a/src/elements/stepper/step-label/step-label.scss +++ b/src/elements/stepper/step-label/step-label.scss @@ -13,6 +13,7 @@ --sbb-step-label-prefix-border-style: solid; --sbb-step-label-prefix-border-color: var(--sbb-color-cloud); --sbb-step-label-prefix-background-color: var(--sbb-color-white); + --sbb-step-label-gap: var(--sbb-spacing-fixed-4x); position: relative; min-width: 0; @@ -58,7 +59,17 @@ } :host([data-size='s']) { + --sbb-step-label-gap: var(--sbb-spacing-fixed-3x); --sbb-step-label-prefix-size: var(--sbb-size-element-xxxs); + + &::before { + // The `--sbb-font-size-text-m` is beign used here to align the bubble's inner text to + // the label text which includes the `sbb.text-m--bold` mixin. + inset-block-start: calc( + var(--sbb-font-size-text-m) * (var(--sbb-typo-line-height-body-text) / 2) + + (var(--sbb-border-width-1x) / 2) + ); + } } :host([disabled]) { @@ -104,7 +115,7 @@ cursor: var(--sbb-step-label-cursor); position: relative; display: flex; - gap: var(--sbb-spacing-fixed-4x); + gap: var(--sbb-step-label-gap); color: var(--sbb-step-label-color); :host([data-size='s']) & {