From cc89daea6f2edc2152c4672688b02c55e9ab4677 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Tue, 17 Dec 2024 10:00:22 +0100 Subject: [PATCH] fix: review Jeri/Lukas --- src/elements/stepper/step/step.ts | 8 +++--- src/elements/stepper/stepper/readme.md | 18 ++++++------ src/elements/stepper/stepper/stepper.ts | 38 ++++++++++++------------- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/src/elements/stepper/step/step.ts b/src/elements/stepper/step/step.ts index bd5413b0cd..022793d554 100644 --- a/src/elements/stepper/step/step.ts +++ b/src/elements/stepper/step/step.ts @@ -19,10 +19,10 @@ import style from './step.scss?lit&inline'; let nextId = 0; export type SbbStepValidateEventDetails = { - currentIndex?: number; - currentStep?: SbbStepElement; - nextIndex?: number; - nextStep?: SbbStepElement; + currentIndex: number | null; + currentStep: SbbStepElement | null; + nextIndex: number | null; + nextStep: SbbStepElement | null; }; /** diff --git a/src/elements/stepper/stepper/readme.md b/src/elements/stepper/stepper/readme.md index 79e723bd5f..46f52b261c 100644 --- a/src/elements/stepper/stepper/readme.md +++ b/src/elements/stepper/stepper/readme.md @@ -103,15 +103,15 @@ Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-s ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | -------------------------------- | ------------------ | --------------------------------------------------------------------------------- | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. | -| `linear` | `linear` | public | `boolean` | `false` | If set to true, only the current and previous labels can be clicked and selected. | -| `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' / 's' (lean)` | Size variant, either s or m. | -| `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | --------------------------- | ------------------ | --------------------------------------------------------------------------------- | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| null` | `null` | Overrides the behaviour of `orientation` property. | +| `linear` | `linear` | public | `boolean` | `false` | If set to true, only the current and previous labels can be clicked and selected. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Steps orientation, either horizontal or vertical. | +| `selected` | - | public | `SbbStepElement \| null` | | The currently selected step. | +| `selectedIndex` | `selected-index` | public | `number \| null` | | The currently selected step index. | +| `size` | `size` | public | `'s' \| 'm'` | `'m' / 's' (lean)` | Size variant, either s or m. | +| `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. | ## Methods diff --git a/src/elements/stepper/stepper/stepper.ts b/src/elements/stepper/stepper/stepper.ts index 375ff93d14..011474ad07 100644 --- a/src/elements/stepper/stepper/stepper.ts +++ b/src/elements/stepper/stepper/stepper.ts @@ -37,16 +37,16 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { /** Overrides the behaviour of `orientation` property. */ @property({ attribute: 'horizontal-from', reflect: true }) - public set horizontalFrom(value: SbbHorizontalFrom | undefined) { - this._horizontalFrom = value && breakpoints.includes(value) ? value : undefined; + public set horizontalFrom(value: SbbHorizontalFrom | null) { + this._horizontalFrom = value && breakpoints.includes(value) ? value : null; if (this._horizontalFrom && this._loaded) { this._checkOrientation(); } } - public get horizontalFrom(): SbbHorizontalFrom | undefined { + public get horizontalFrom(): SbbHorizontalFrom | null { return this._horizontalFrom; } - private _horizontalFrom?: SbbHorizontalFrom | undefined; + private _horizontalFrom: SbbHorizontalFrom | null = null; /** Steps orientation, either horizontal or vertical. */ @property({ reflect: true }) @@ -60,24 +60,24 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { /** The currently selected step. */ @property({ attribute: false }) - public set selected(step: SbbStepElement | undefined) { + public set selected(step: SbbStepElement | null) { if (this._loaded) { this._select(step); } } - public get selected(): SbbStepElement | undefined { - return this.querySelector?.('sbb-step[data-selected]') ?? undefined; + public get selected(): SbbStepElement | null { + return this.querySelector?.('sbb-step[data-selected]') ?? null; } /** The currently selected step index. */ @property({ attribute: 'selected-index', type: Number }) - public set selectedIndex(index: number | undefined) { - if (this._loaded && index !== undefined) { + public set selectedIndex(index: number | null) { + if (this._loaded && index !== null) { this._select(this.steps[index]); } } - public get selectedIndex(): number | undefined { - return this.selected ? this.steps.indexOf(this.selected) : undefined; + public get selectedIndex(): number | null { + return this.selected ? this.steps.indexOf(this.selected) : null; } /** The steps of the stepper. */ @@ -95,14 +95,14 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { /** Selects the next step. */ public next(): void { - if (this.selectedIndex !== undefined) { + if (this.selectedIndex !== null) { this._select(this.steps[this.selectedIndex + 1]); } } /** Selects the previous step. */ public previous(): void { - if (this.selectedIndex !== undefined) { + if (this.selectedIndex !== null) { this._select(this.steps[this.selectedIndex - 1]); } } @@ -122,7 +122,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { } } - private _isValidStep(step: SbbStepElement | undefined): boolean { + private _isValidStep(step: SbbStepElement | null): boolean { if (!step || (!this.linear && step.label?.hasAttribute('disabled'))) { return false; } @@ -131,7 +131,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { return step === this.steps[0]; } - if (this.linear && this.selectedIndex !== undefined) { + if (this.linear && this.selectedIndex !== null) { const index = this.steps.indexOf(step); return index < this.selectedIndex || index === this.selectedIndex + 1; } @@ -139,15 +139,15 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { return true; } - private _select(step: SbbStepElement | undefined): void { + private _select(step: SbbStepElement | null): void { if (!this._isValidStep(step)) { return; } const validatePayload: SbbStepValidateEventDetails = { currentIndex: this.selectedIndex, currentStep: this.selected, - nextIndex: this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined, - nextStep: this.selectedIndex !== undefined ? this.steps[this.selectedIndex + 1] : undefined, + nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null, + nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null, }; if (this.selected && !this.selected.validate(validatePayload)) { return; @@ -181,7 +181,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { } private _calculateLabelOffsetTop(): number | undefined { - if (this.selectedIndex === undefined) { + if (this.selectedIndex === null) { return; } let offset = 0;