From 98d2e7a367271826646320dcfbb28a8fd099ed96 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Tue, 30 Jan 2024 17:43:31 +0100 Subject: [PATCH] fix: review pt.8 - apply icon-name mixin in the whole project --- src/components/checkbox/checkbox/checkbox.ts | 15 +++---------- src/components/checkbox/checkbox/readme.md | 22 +++++++++---------- .../expansion-panel-header.ts | 18 ++++----------- .../expansion-panel-header/readme.md | 2 +- src/components/option/option/option.ts | 21 ++++++------------ src/components/option/option/readme.md | 2 +- src/components/tabs/tab-title/readme.md | 2 +- src/components/tabs/tab-title/tab-title.ts | 21 +++++++----------- src/components/tag/tag/readme.md | 20 ++++++++--------- src/components/tag/tag/tag.ts | 17 ++++---------- src/components/toast/readme.md | 2 +- src/components/toast/toast.ts | 21 ++++++------------ src/components/toggle-check/readme.md | 2 +- src/components/toggle-check/toggle-check.ts | 12 ++++------ src/components/toggle/toggle-option/readme.md | 12 +++++----- .../toggle/toggle-option/toggle-option.ts | 13 +++-------- 16 files changed, 72 insertions(+), 130 deletions(-) diff --git a/src/components/checkbox/checkbox/checkbox.ts b/src/components/checkbox/checkbox/checkbox.ts index d614c5178e7..392adf2a52a 100644 --- a/src/components/checkbox/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox/checkbox.ts @@ -6,6 +6,7 @@ import { ref } from 'lit/directives/ref.js'; import { LanguageController, NamedSlotStateController, + SbbIconNameMixin, UpdateScheduler, } from '../../core/common-behaviors'; import { setAttributes } from '../../core/dom'; @@ -48,7 +49,7 @@ export type SbbCheckboxSize = 's' | 'm'; * @event {CustomEvent} didChange - Deprecated. used for React. Will probably be removed once React 19 is available. */ @customElement('sbb-checkbox') -export class SbbCheckboxElement extends UpdateScheduler(LitElement) { +export class SbbCheckboxElement extends UpdateScheduler(SbbIconNameMixin(LitElement)) { public static override styles: CSSResultGroup = style; public static readonly events = { didChange: 'didChange', @@ -88,12 +89,6 @@ export class SbbCheckboxElement extends UpdateScheduler(LitElement) { /** Whether the checkbox is indeterminate. */ @property({ reflect: true, type: Boolean }) public indeterminate = false; - /** - * The icon name we want to use, choose from the small icon variants from the ui-icons category - * from https://icons.app.sbb.ch (optional). - */ - @property({ attribute: 'icon-name', reflect: true }) public iconName?: string; - /** The label position relative to the labelIcon. Defaults to end */ @property({ attribute: 'icon-placement', reflect: true }) public iconPlacement: SbbIconPlacement = 'end'; @@ -300,11 +295,7 @@ export class SbbCheckboxElement extends UpdateScheduler(LitElement) { - - - ${this.iconName ? html`` : nothing} - - + ${this.renderIconSlot()} ${this._selectionPanelElement ? html`` : nothing} diff --git a/src/components/checkbox/checkbox/readme.md b/src/components/checkbox/checkbox/readme.md index d4efe9c3225..fdaa26cc658 100644 --- a/src/components/checkbox/checkbox/readme.md +++ b/src/components/checkbox/checkbox/readme.md @@ -72,17 +72,17 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ---------------- | ------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| `value` | `value` | public | `string \| undefined` | | Value of checkbox. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the checkbox is disabled. | -| `required` | `required` | public | `boolean` | `false` | Whether the checkbox is required. | -| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | -| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from https://icons.app.sbb.ch (optional). | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | -| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Label size variant, either m or s. | +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | ---------------- | ------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `value` | `value` | public | `string \| undefined` | | Value of checkbox. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the checkbox is disabled. | +| `required` | `required` | public | `boolean` | `false` | Whether the checkbox is required. | +| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | +| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | +| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Label size variant, either m or s. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | ## Events diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts index fdec4ac72d2..0c009d6c665 100644 --- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts +++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts @@ -1,11 +1,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit'; import { html, LitElement, nothing } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement } from 'lit/decorators.js'; import { NamedSlotStateController, resolveButtonRenderVariables, SbbDisabledMixin, + SbbIconNameMixin, } from '../../core/common-behaviors'; import { setAttribute, setAttributes, toggleDatasetEntry } from '../../core/dom'; import { @@ -27,19 +28,12 @@ import '../../icon'; * @event {CustomEvent} toggleExpanded - Notifies that the `sbb-expansion-panel` has to expand. */ @customElement('sbb-expansion-panel-header') -export class SbbExpansionPanelHeaderElement extends SbbDisabledMixin(LitElement) { +export class SbbExpansionPanelHeaderElement extends SbbDisabledMixin(SbbIconNameMixin(LitElement)) { public static override styles: CSSResultGroup = style; public static readonly events = { toggleExpanded: 'toggleExpanded', } as const; - /** - * The icon name we want to use, choose from the small icon variants - * from the ui-icons category from here - * https://icons.app.sbb.ch. - */ - @property({ attribute: 'icon-name', reflect: true }) public iconName?: string; - /** Notifies that the `sbb-expansion-panel` has to expand. */ private _toggleExpanded: EventEmitter = new EventEmitter( this, @@ -98,11 +92,7 @@ export class SbbExpansionPanelHeaderElement extends SbbDisabledMixin(LitElement) return html` - - ${this.iconName ? html`` : nothing} - - + ${this.renderIconSlot()} ${!this.disabled diff --git a/src/components/expansion-panel/expansion-panel-header/readme.md b/src/components/expansion-panel/expansion-panel-header/readme.md index 0071ee61253..37dad59ef0c 100644 --- a/src/components/expansion-panel/expansion-panel-header/readme.md +++ b/src/components/expansion-panel/expansion-panel-header/readme.md @@ -37,8 +37,8 @@ When the element is clicked, the `toggleExpanded` event is emitted. | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | --------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | ## Events diff --git a/src/components/option/option/option.ts b/src/components/option/option/option.ts index e0213d08e76..fd5be28649f 100644 --- a/src/components/option/option/option.ts +++ b/src/components/option/option/option.ts @@ -3,7 +3,11 @@ import { html, LitElement, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { assignId } from '../../core/a11y'; -import { NamedSlotStateController, SbbDisabledMixin } from '../../core/common-behaviors'; +import { + NamedSlotStateController, + SbbDisabledMixin, + SbbIconNameMixin, +} from '../../core/common-behaviors'; import { isSafari, isValidAttribute, @@ -36,7 +40,7 @@ export type SbbOptionVariant = 'autocomplete' | 'select'; * @event {CustomEvent} optionSelected - Emits when an option was selected by user. */ @customElement('sbb-option') -export class SbbOptionElement extends SbbDisabledMixin(LitElement) { +export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitElement)) { public static override styles: CSSResultGroup = style; public static readonly events = { selectionChange: 'optionSelectionChange', @@ -46,13 +50,6 @@ export class SbbOptionElement extends SbbDisabledMixin(LitElement) { /** Value of the option. */ @property() public value?: string; - /** - * The icon name we want to use, choose from the small icon variants - * from the ui-icons category from here - * https://icons.app.sbb.ch. - */ - @property({ attribute: 'icon-name', reflect: true }) public iconName?: string; - /** Whether the option is currently active. */ @property({ reflect: true, type: Boolean }) public active?: boolean; @@ -267,11 +264,7 @@ export class SbbOptionElement extends SbbDisabledMixin(LitElement) {
${!isMultiple - ? html` - - ${this.iconName ? html`` : nothing} - - ` + ? html` ${this.renderIconSlot()} ` : nothing} diff --git a/src/components/option/option/readme.md b/src/components/option/option/readme.md index 2ff83468b0a..c255f7574a0 100644 --- a/src/components/option/option/readme.md +++ b/src/components/option/option/readme.md @@ -62,10 +62,10 @@ If the label slot contains only a **text node**, it is possible to search for te | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | | `value` | `value` | public | `string \| undefined` | | Value of the option. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `active` | `active` | public | `boolean \| undefined` | | Whether the option is currently active. | | `selected` | `selected` | public | `boolean` | `false` | Whether the option is selected. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | ## Methods diff --git a/src/components/tabs/tab-title/readme.md b/src/components/tabs/tab-title/readme.md index 57a5f9886b5..514c14b068a 100644 --- a/src/components/tabs/tab-title/readme.md +++ b/src/components/tabs/tab-title/readme.md @@ -41,9 +41,9 @@ It is possible to display the component in `disabled` state by using the self-na | ---------- | ----------- | ------- | ------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `level` | `level` | public | `TitleLevel \| undefined` | `'1'` | The level will correspond to the heading tag generated in the title. Use this property to generate the appropriate header tag, taking SEO into consideration. | | `active` | `active` | public | `boolean \| undefined` | | Active tab state | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tab. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | ## Slots diff --git a/src/components/tabs/tab-title/tab-title.ts b/src/components/tabs/tab-title/tab-title.ts index 9e268be4494..4a26a928eee 100644 --- a/src/components/tabs/tab-title/tab-title.ts +++ b/src/components/tabs/tab-title/tab-title.ts @@ -1,9 +1,13 @@ import type { CSSResultGroup, TemplateResult } from 'lit'; -import { LitElement, nothing } from 'lit'; +import { LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { html, unsafeStatic } from 'lit/static-html.js'; -import { NamedSlotStateController, SbbDisabledMixin } from '../../core/common-behaviors'; +import { + NamedSlotStateController, + SbbDisabledMixin, + SbbIconNameMixin, +} from '../../core/common-behaviors'; import type { TitleLevel } from '../../title'; import style from './tab-title.scss?lit&inline'; @@ -17,7 +21,7 @@ import '../../icon'; * @slot amount - Provide a number to show an amount to the right of the title. */ @customElement('sbb-tab-title') -export class SbbTabTitleElement extends SbbDisabledMixin(LitElement) { +export class SbbTabTitleElement extends SbbDisabledMixin(SbbIconNameMixin(LitElement)) { public static override styles: CSSResultGroup = style; /** @@ -29,13 +33,6 @@ export class SbbTabTitleElement extends SbbDisabledMixin(LitElement) { /** Active tab state */ @property({ reflect: true, type: Boolean }) public active?: boolean; - /** - * The icon name we want to use, choose from the small icon variants - * from the ui-icons category from here - * https://icons.app.sbb.ch. - */ - @property({ attribute: 'icon-name', reflect: true }) public iconName?: string; - /** Amount displayed inside the tab. */ @property({ reflect: true }) public amount?: string; @@ -52,9 +49,7 @@ export class SbbTabTitleElement extends SbbDisabledMixin(LitElement) {
<${unsafeStatic(TAGNAME)} class="sbb-tab-title"> - - ${this.iconName ? html`` : nothing} - + ${this.renderIconSlot()} diff --git a/src/components/tag/tag/readme.md b/src/components/tag/tag/readme.md index 3cf0e18a28a..0a318cc442f 100644 --- a/src/components/tag/tag/readme.md +++ b/src/components/tag/tag/readme.md @@ -47,16 +47,16 @@ The state is reflected via `aria-pressed` attribute. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | ------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tag. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the tag is checked. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from https://icons.app.sbb.ch (optional). | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `ButtonType \| undefined` | | The type attribute to use for the button. | -| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | -| `value` | `value` | public | `string \| undefined` | | The value attribute to use for the button. | -| `form` | `form` | public | `string \| undefined` | | The
element to associate the button with. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | ------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tag. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the tag is checked. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `type` | `type` | public | `ButtonType \| undefined` | | The type attribute to use for the button. | +| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | +| `value` | `value` | public | `string \| undefined` | | The value attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Events diff --git a/src/components/tag/tag/tag.ts b/src/components/tag/tag/tag.ts index 919bce61d94..1da71601c11 100644 --- a/src/components/tag/tag/tag.ts +++ b/src/components/tag/tag/tag.ts @@ -1,5 +1,5 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; -import { html, nothing } from 'lit'; +import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { @@ -7,6 +7,7 @@ import { resolveButtonRenderVariables, SbbDisabledMixin, SbbButtonBaseElement, + SbbIconNameMixin, } from '../../core/common-behaviors'; import { setAttributes } from '../../core/dom'; import { @@ -42,7 +43,7 @@ export type SbbTagStateChange = Extract< * @event {CustomEvent} change - Change event emitter */ @customElement('sbb-tag') -export class SbbTagElement extends SbbDisabledMixin(SbbButtonBaseElement) { +export class SbbTagElement extends SbbDisabledMixin(SbbIconNameMixin(SbbButtonBaseElement)) { public static override styles: CSSResultGroup = style; public static readonly events = { stateChange: 'stateChange', @@ -57,12 +58,6 @@ export class SbbTagElement extends SbbDisabledMixin(SbbButtonBaseElement) { /** Whether the tag is checked. */ @property({ reflect: true, type: Boolean }) public checked = false; - /** - * The icon name we want to use, choose from the small icon variants from the ui-icons category - * from https://icons.app.sbb.ch (optional). - */ - @property({ attribute: 'icon-name', reflect: true }) public iconName?: string; - private _handleCheckedChange(currentValue: boolean, previousValue: boolean): void { if (currentValue !== previousValue) { this._stateChange.emit({ type: 'checked', checked: currentValue }); @@ -160,11 +155,7 @@ export class SbbTagElement extends SbbDisabledMixin(SbbButtonBaseElement) { return html` - - - ${this.iconName ? html`` : nothing} - - + ${this.renderIconSlot()} diff --git a/src/components/toast/readme.md b/src/components/toast/readme.md index cdb5b408162..e4509d7c39d 100644 --- a/src/components/toast/readme.md +++ b/src/components/toast/readme.md @@ -101,11 +101,11 @@ Unless strictly necessary, we advise you not to wrap it preventively and let the | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | ------------------- | ------- | ---------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | `timeout` | `timeout` | public | `number` | `6000` | The length of time in milliseconds to wait before automatically dismissing the toast. If 0, it stays open indefinitely. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The name of the icon, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `position` | `position` | public | `SbbToastPosition` | `'bottom-center'` | The position where to place the toast. | | `dismissible` | `dismissible` | public | `boolean` | `false` | Whether the toast has a close button. | | `politeness` | `politeness` | public | `'polite' \| 'assertive' \| 'off'` | `'polite'` | The ARIA politeness level. Check https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA\_Live\_Regions#live\_regions for further info | | `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | ## Methods diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts index f9de7d2be80..dbaaf5b2e70 100644 --- a/src/components/toast/toast.ts +++ b/src/components/toast/toast.ts @@ -3,7 +3,11 @@ import { html, LitElement, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import type { SbbButtonElement, SbbButtonLinkElement } from '../button'; -import { LanguageController, NamedSlotStateController } from '../core/common-behaviors'; +import { + LanguageController, + NamedSlotStateController, + SbbIconNameMixin, +} from '../core/common-behaviors'; import { isFirefox, isValidAttribute, setAttribute } from '../core/dom'; import { composedPathHasAttribute, EventEmitter, ConnectedAbortController } from '../core/eventing'; import { i18nCloseAlert } from '../core/i18n'; @@ -33,7 +37,7 @@ const toastRefs = new Set(); * @event {CustomEvent} didClose - Emits whenever the `sbb-toast` is closed. */ @customElement('sbb-toast') -export class SbbToastElement extends LitElement { +export class SbbToastElement extends SbbIconNameMixin(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { willOpen: 'willOpen', @@ -48,13 +52,6 @@ export class SbbToastElement extends LitElement { */ @property({ type: Number }) public timeout = 6000; - /** - * The name of the icon, choose from the small icon variants - * from the ui-icons category from here - * https://icons.app.sbb.ch. - */ - @property({ attribute: 'icon-name', reflect: true }) public iconName?: string; - /** The position where to place the toast. */ @property({ reflect: true }) public position: SbbToastPosition = 'bottom-center'; @@ -251,11 +248,7 @@ export class SbbToastElement extends LitElement { role=${this._role ?? nothing} @animationend=${this._onToastAnimationEnd} > -
- - ${this.iconName ? html`` : nothing} - -
+
${this.renderIconSlot()}
diff --git a/src/components/toggle-check/readme.md b/src/components/toggle-check/readme.md index eea6499f55e..9004f6fbc37 100644 --- a/src/components/toggle-check/readme.md +++ b/src/components/toggle-check/readme.md @@ -57,7 +57,7 @@ you can not provide it and then use `aria-label` to specify an appropriate label | `value` | `value` | public | `string \| undefined` | | Value of toggle-check. | | `name` | `name` | public | `string \| undefined` | | Name of the toggle-check. | | `size` | `size` | public | `'s' \| 'm'` | `'s'` | Size variant, either m or s. | -| `iconName` | `icon-name` | public | `string` | `'tick-small'` | The svg name for the true state - default -> 'tick-small' | +| `iconName` | `icon-name` | public | `string \| undefined` | `'tick-small'` | The svg name for the true state - default -> 'tick-small' | | `required` | `required` | public | `boolean` | `false` | The required prop for the required state. | | `labelPosition` | `label-position` | public | `'before' \| 'after' \| undefined` | `'after'` | The label position relative to the toggle. Defaults to 'after' | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | diff --git a/src/components/toggle-check/toggle-check.ts b/src/components/toggle-check/toggle-check.ts index c46021fa918..a72ba3c8d7b 100644 --- a/src/components/toggle-check/toggle-check.ts +++ b/src/components/toggle-check/toggle-check.ts @@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit'; import { html, LitElement, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { SbbDisabledMixin } from '../core/common-behaviors'; +import { SbbDisabledMixin, SbbIconNameMixin } from '../core/common-behaviors'; import { findShadowInput, setAttributes } from '../core/dom'; import { HandlerRepository, @@ -24,7 +24,7 @@ import '../icon'; * @event {CustomEvent} didChange - Deprecated. used for React. Will probably be removed once React 19 is available. */ @customElement('sbb-toggle-check') -export class SbbToggleCheckElement extends SbbDisabledMixin(LitElement) { +export class SbbToggleCheckElement extends SbbDisabledMixin(SbbIconNameMixin(LitElement)) { public static override styles: CSSResultGroup = style; public static readonly events = { didChange: 'didChange', @@ -43,7 +43,7 @@ export class SbbToggleCheckElement extends SbbDisabledMixin(LitElement) { @property({ reflect: true }) public size: 's' | 'm' = 's'; /** The svg name for the true state - default -> 'tick-small' */ - @property({ attribute: 'icon-name' }) public iconName = 'tick-small'; + @property({ attribute: 'icon-name' }) public override iconName = 'tick-small'; /** The required prop for the required state. */ @property({ reflect: true, type: Boolean }) public required = false; @@ -150,11 +150,7 @@ export class SbbToggleCheckElement extends SbbDisabledMixin(LitElement) { - - - ${this.iconName ? html`` : nothing} - - + ${this.renderIconSlot()} diff --git a/src/components/toggle/toggle-option/readme.md b/src/components/toggle/toggle-option/readme.md index e8d2a0d9a51..aae4d418b40 100644 --- a/src/components/toggle/toggle-option/readme.md +++ b/src/components/toggle/toggle-option/readme.md @@ -31,12 +31,12 @@ The component can be displayed in `checked` or `disabled` states using the self- ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------------- | ------- | -------------------------------------- | -| `checked` | `checked` | public | `boolean` | `false` | Whether the toggle-option is checked. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the toggle option is disabled. | -| `iconName` | `icon-name` | public | `string \| undefined` | | Name of the icon for ``. | -| `value` | `value` | public | `string \| null` | `null` | Value of toggle-option. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | --------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `checked` | `checked` | public | `boolean` | `false` | Whether the toggle-option is checked. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the toggle option is disabled. | +| `value` | `value` | public | `string \| null` | `null` | Value of toggle-option. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | ## Slots diff --git a/src/components/toggle/toggle-option/toggle-option.ts b/src/components/toggle/toggle-option/toggle-option.ts index d9a99840134..1f2bcd23993 100644 --- a/src/components/toggle/toggle-option/toggle-option.ts +++ b/src/components/toggle/toggle-option/toggle-option.ts @@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit'; import { LitElement, html, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { NamedSlotStateController } from '../../core/common-behaviors'; +import { NamedSlotStateController, SbbIconNameMixin } from '../../core/common-behaviors'; import { setAttribute } from '../../core/dom'; import { ConnectedAbortController, EventEmitter } from '../../core/eventing'; import '../../icon'; @@ -17,7 +17,7 @@ import style from './toggle-option.scss?lit&inline'; * @slot icon - Slot used to render the `sbb-icon`. */ @customElement('sbb-toggle-option') -export class SbbToggleOptionElement extends LitElement { +export class SbbToggleOptionElement extends SbbIconNameMixin(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { stateChange: 'stateChange', @@ -52,11 +52,6 @@ export class SbbToggleOptionElement extends LitElement { } private _disabled: boolean = false; - /** - * Name of the icon for ``. - */ - @property({ attribute: 'icon-name', reflect: true }) public iconName?: string; - /** * Value of toggle-option. */ @@ -160,9 +155,7 @@ export class SbbToggleOptionElement extends LitElement { @click=${(event: PointerEvent) => event.stopPropagation()} />