refactor: replace isolated SbbSlotStateController usage with decora…

…tor (#2856) This PR replaces the constructor usage of `SbbSlotStateController` with the decorator `slotChange`, which applies the `SbbSlotStateController` internally.
sbb-design-systems · Jul 1, 2024 · fa91b76 · fa91b76
1 parent 53c03d8
commit fa91b76
Show file tree

Hide file tree

Showing 28 changed files with 100 additions and 173 deletions.
diff --git a/src/elements/button/common/button-common.ts b/src/elements/button/common/button-common.ts
@@ -3,8 +3,7 @@ import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
 import type { SbbActionBaseElement } from '../../core/base-elements.js';
-import { SbbSlotStateController } from '../../core/controllers.js';
-import { hostAttributes } from '../../core/decorators.js';
+import { hostAttributes, slotState } from '../../core/decorators.js';
 import type {
   AbstractConstructor,
   SbbDisabledMixinType,
@@ -33,18 +32,14 @@ export const SbbButtonCommonElementMixin = <T extends AbstractConstructor<SbbAct
   @hostAttributes({
     'data-sbb-button': '',
   })
+  @slotState()
   abstract class SbbButtonCommonElementClass
     extends SbbNegativeMixin(SbbIconNameMixin(superClass))
     implements Partial<SbbButtonCommonElementMixinType>
   {
     /** Size variant, either l or m. */
     @property({ reflect: true }) public size?: SbbButtonSize = 'l';
 
-    protected constructor(...args: any[]) {
-      super(args);
-      new SbbSlotStateController(this);
-    }
-
     protected override renderTemplate(): TemplateResult {
       return html`
         ${super.renderIconSlot()}

diff --git a/src/elements/button/mini-button/mini-button.ts b/src/elements/button/mini-button/mini-button.ts
@@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
-import { SbbSlotStateController } from '../../core/controllers.js';
+import { slotState } from '../../core/decorators.js';
 import { SbbDisabledTabIndexActionMixin, SbbNegativeMixin } from '../../core/mixins.js';
 import { SbbIconNameMixin } from '../../icon.js';
 
@@ -15,16 +15,12 @@ import style from './mini-button.scss?lit&inline';
  * @slot icon - Slot used to display the icon, if one is set
  */
 @customElement('sbb-mini-button')
+@slotState()
 export class SbbMiniButtonElement extends SbbNegativeMixin(
   SbbIconNameMixin(SbbDisabledTabIndexActionMixin(SbbButtonBaseElement)),
 ) {
   public static override styles: CSSResultGroup = style;
 
-  public constructor() {
-    super();
-    new SbbSlotStateController(this);
-  }
-
   protected override renderTemplate(): TemplateResult {
     return super.renderIconSlot();
   }

diff --git a/src/elements/checkbox/checkbox-group/checkbox-group.ts b/src/elements/checkbox/checkbox-group/checkbox-group.ts
@@ -3,7 +3,8 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { getNextElementIndex, interactivityChecker, isArrowKeyPressed } from '../../core/a11y.js';
-import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/controllers.js';
+import { SbbConnectedAbortController } from '../../core/controllers.js';
+import { slotState } from '../../core/decorators.js';
 import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
 import { SbbDisabledMixin } from '../../core/mixins.js';
 import type { SbbCheckboxPanelElement } from '../checkbox-panel.js';
@@ -19,6 +20,7 @@ import style from './checkbox-group.scss?lit&inline';
  * @slot error - Slot used to render a `sbb-form-error` inside the `sbb-checkbox-group`.
  */
 @customElement('sbb-checkbox-group')
+@slotState()
 export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
 
@@ -47,11 +49,6 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) {
 
   private _abort: SbbConnectedAbortController = new SbbConnectedAbortController(this);
 
-  public constructor() {
-    super();
-    new SbbSlotStateController(this);
-  }
-
   public override connectedCallback(): void {
     super.connectedCallback();
     const signal = this._abort.signal;

diff --git a/src/elements/checkbox/checkbox-panel/checkbox-panel.ts b/src/elements/checkbox/checkbox-panel/checkbox-panel.ts
@@ -8,7 +8,7 @@ import {
 } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbSlotStateController } from '../../core/controllers.js';
+import { slotState } from '../../core/decorators.js';
 import { EventEmitter } from '../../core/eventing.js';
 import type {
   SbbCheckedStateChange,
@@ -38,6 +38,7 @@ export type SbbCheckboxPanelStateChange = Extract<
  * @event {InputEvent} input - Event fired on input.
  */
 @customElement('sbb-checkbox-panel')
+@slotState()
 export class SbbCheckboxPanelElement extends SbbPanelMixin(
   SbbCheckboxCommonElementMixin(SbbUpdateSchedulerMixin(LitElement)),
 ) {
@@ -61,11 +62,6 @@ export class SbbCheckboxPanelElement extends SbbPanelMixin(
     { bubbles: true },
   );
 
-  public constructor() {
-    super();
-    new SbbSlotStateController(this);
-  }
-
   protected override async willUpdate(changedProperties: PropertyValues<this>): Promise<void> {
     super.willUpdate(changedProperties);
 

diff --git a/src/elements/checkbox/checkbox/checkbox.ts b/src/elements/checkbox/checkbox/checkbox.ts
@@ -1,15 +1,15 @@
 import { LitElement, html, type CSSResultGroup, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbSlotStateController } from '../../core/controllers.js';
+import { slotState } from '../../core/decorators.js';
 import type { SbbIconPlacement } from '../../core/interfaces.js';
 import { SbbIconNameMixin } from '../../icon.js';
 import { SbbCheckboxCommonElementMixin, checkboxCommonStyle } from '../common.js';
 
-import '../../visual-checkbox.js';
-
 import checkboxStyle from './checkbox.scss?lit&inline';
 
+import '../../visual-checkbox.js';
+
 /**
  * It displays a checkbox enhanced with the SBB Design.
  *
@@ -20,6 +20,7 @@ import checkboxStyle from './checkbox.scss?lit&inline';
  * @event {InputEvent} input - Event fired on input.
  */
 @customElement('sbb-checkbox')
+@slotState()
 export class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(
   SbbIconNameMixin(LitElement),
 ) {
@@ -33,11 +34,6 @@ export class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(
   @property({ attribute: 'icon-placement', reflect: true })
   public iconPlacement: SbbIconPlacement = 'end';
 
-  public constructor() {
-    super();
-    new SbbSlotStateController(this);
-  }
-
   protected override render(): TemplateResult {
     return html`
       <span class="sbb-checkbox-wrapper">

diff --git a/src/elements/core/decorators.ts b/src/elements/core/decorators.ts
@@ -1 +1,2 @@
 export * from './decorators/host-attributes.js';
+export * from './decorators/slot-state.js';
diff --git a/src/elements/core/decorators/host-attributes.ts b/src/elements/core/decorators/host-attributes.ts
@@ -22,10 +22,10 @@ function applyAttributes(
  *
  * @example
  *
+ * @customElement('my-element)
  * @hostAttributes({
  *   role: 'region'
  * })
- * @customElement('my-element)
  * export class MyElement extends LitElement {
  *   ...
  * }

diff --git a/src/elements/core/decorators/slot-state.ts b/src/elements/core/decorators/slot-state.ts
@@ -0,0 +1,25 @@
+import { isServer, type ReactiveElement } from 'lit';
+
+import { SbbSlotStateController } from '../controllers.js';
+import type { AbstractConstructor } from '../mixins.js';
+
+/**
+ * Adds the {@link SbbSlotStateController} to the related element.
+ *
+ * @example
+ *
+ * @customElement('my-element)
+ * @slotState()
+ * export class MyElement extends LitElement {
+ *   ...
+ * }
+ *
+ * @param attributes A record of attributes to apply to the element.
+ */
+export const slotState = () => (target: AbstractConstructor<ReactiveElement>) => {
+  if (!isServer) {
+    (target as typeof ReactiveElement).addInitializer(
+      (instance: ReactiveElement) => new SbbSlotStateController(instance),
+    );
+  }
+};
diff --git a/src/elements/file-selector/file-selector.ts b/src/elements/file-selector/file-selector.ts
@@ -6,7 +6,8 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 
 import type { SbbSecondaryButtonStaticElement } from '../button.js';
 import { sbbInputModalityDetector } from '../core/a11y.js';
-import { SbbLanguageController, SbbSlotStateController } from '../core/controllers.js';
+import { SbbLanguageController } from '../core/controllers.js';
+import { slotState } from '../core/decorators.js';
 import { EventEmitter } from '../core/eventing.js';
 import {
   i18nFileSelectorButtonLabel,
@@ -31,6 +32,7 @@ export type DOMEvent = globalThis.Event;
  * @event {CustomEvent<File[]>} fileChanged - An event which is emitted each time the file list changes.
  */
 @customElement('sbb-file-selector')
+@slotState()
 export class SbbFileSelectorElement extends SbbDisabledMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
@@ -94,11 +96,6 @@ export class SbbFileSelectorElement extends SbbDisabledMixin(LitElement) {
 
   private _language = new SbbLanguageController(this);
 
-  public constructor() {
-    super();
-    new SbbSlotStateController(this);
-  }
-
   private _blockEvent(event: DragEvent): void {
     event.stopPropagation();
     event.preventDefault();

diff --git a/src/elements/form-field/form-field/form-field.ts b/src/elements/form-field/form-field/form-field.ts
@@ -4,20 +4,18 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 import type { SbbInputModality } from '../../core/a11y.js';
 import { sbbInputModalityDetector } from '../../core/a11y.js';
-import {
-  SbbConnectedAbortController,
-  SbbLanguageController,
-  SbbSlotStateController,
-} from '../../core/controllers.js';
+import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
+import { slotState } from '../../core/decorators.js';
 import { isFirefox, setOrRemoveAttribute } from '../../core/dom.js';
 import { i18nOptional } from '../../core/i18n.js';
 import { SbbNegativeMixin } from '../../core/mixins.js';
 import { AgnosticMutationObserver } from '../../core/observers.js';
 import type { SbbSelectElement } from '../../select.js';
-import '../../icon.js';
 
 import style from './form-field.scss?lit&inline';
 
+import '../../icon.js';
+
 let nextId = 0;
 let nextFormFieldErrorId = 0;
 
@@ -33,6 +31,7 @@ const supportedPopupTagNames = ['sbb-autocomplete', 'sbb-select'];
  * @slot error - Use this slot to render an error.
  */
 @customElement('sbb-form-field')
+@slotState()
 export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
 
@@ -125,11 +124,6 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
 
   private _inputAbortController = new AbortController();
 
-  public constructor() {
-    super();
-    new SbbSlotStateController(this);
-  }
-
   public override connectedCallback(): void {
     super.connectedCallback();
     const signal = this._abort.signal;

diff --git a/src/elements/link-list/link-list.ts b/src/elements/link-list/link-list.ts
@@ -2,7 +2,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbSlotStateController } from '../core/controllers.js';
+import { slotState } from '../core/decorators.js';
 import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces.js';
 import { SbbNamedSlotListMixin, SbbNegativeMixin, type WithListChildren } from '../core/mixins.js';
 import type {
@@ -24,6 +24,7 @@ import '../title.js';
  * @slot title - Use this slot to provide a title.
  */
 @customElement('sbb-link-list')
+@slotState()
 export class SbbLinkListElement extends SbbNegativeMixin(
   SbbNamedSlotListMixin<
     SbbBlockLinkElement | SbbBlockLinkButtonElement | SbbBlockLinkStaticElement,
@@ -56,11 +57,6 @@ export class SbbLinkListElement extends SbbNegativeMixin(
   /** The orientation in which the list will be shown vertical or horizontal. */
   @property({ reflect: true }) public orientation: SbbOrientation = 'vertical';
 
-  public constructor() {
-    super();
-    new SbbSlotStateController(this);
-  }
-
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
     super.willUpdate(changedProperties);
 

diff --git a/src/elements/link/common/link-common.ts b/src/elements/link/common/link-common.ts
@@ -3,8 +3,7 @@ import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
 import type { SbbActionBaseElement } from '../../core/base-elements.js';
-import { SbbSlotStateController } from '../../core/controllers.js';
-import { hostAttributes } from '../../core/decorators.js';
+import { hostAttributes, slotState } from '../../core/decorators.js';
 import {
   SbbNegativeMixin,
   type SbbNegativeMixinType,
@@ -24,6 +23,7 @@ export const SbbLinkCommonElementMixin = <T extends AbstractConstructor<SbbActio
   superClass: T,
 ): AbstractConstructor<SbbLinkCommonElementMixinType> & T => {
   @hostAttributes({ 'data-sbb-link': '' })
+  @slotState()
   abstract class SbbLinkCommonElement
     extends SbbNegativeMixin(superClass)
     implements Partial<SbbLinkCommonElementMixinType>
@@ -36,11 +36,6 @@ export const SbbLinkCommonElementMixin = <T extends AbstractConstructor<SbbActio
      */
     @property({ reflect: true }) public size: SbbLinkSize = 's';
 
-    public constructor(...args: any[]) {
-      super(args);
-      new SbbSlotStateController(this);
-    }
-
     protected override renderTemplate(): TemplateResult {
       return html`<slot></slot>`;
     }

diff --git a/src/elements/navigation/navigation-list/navigation-list.ts b/src/elements/navigation/navigation-list/navigation-list.ts
@@ -7,7 +7,7 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbSlotStateController } from '../../core/controllers.js';
+import { slotState } from '../../core/decorators.js';
 import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js';
 import type { SbbNavigationButtonElement } from '../navigation-button.js';
 import type { SbbNavigationLinkElement } from '../navigation-link.js';
@@ -21,6 +21,7 @@ import style from './navigation-list.scss?lit&inline';
  * @slot label - Use this to provide a label element.
  */
 @customElement('sbb-navigation-list')
+@slotState()
 export class SbbNavigationListElement extends SbbNamedSlotListMixin<
   SbbNavigationButtonElement | SbbNavigationLinkElement,
   typeof LitElement
@@ -36,11 +37,6 @@ export class SbbNavigationListElement extends SbbNamedSlotListMixin<
    */
   @property({ reflect: true }) public label?: string;
 
-  public constructor() {
-    super();
-    new SbbSlotStateController(this);
-  }
-
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
     super.willUpdate(changedProperties);
 

diff --git a/src/elements/navigation/navigation-section/navigation-section.ts b/src/elements/navigation/navigation-section/navigation-section.ts
@@ -7,8 +7,8 @@ import {
   getFocusableElements,
   setModalityOnNextFocus,
 } from '../../core/a11y.js';
-import { SbbLanguageController, SbbSlotStateController } from '../../core/controllers.js';
-import { hostAttributes } from '../../core/decorators.js';
+import { SbbLanguageController } from '../../core/controllers.js';
+import { hostAttributes, slotState } from '../../core/decorators.js';
 import { findReferencedElement, isBreakpoint, setOrRemoveAttribute } from '../../core/dom.js';
 import { i18nGoBack } from '../../core/i18n.js';
 import type { SbbOpenedClosedState } from '../../core/interfaces.js';
@@ -37,6 +37,7 @@ let nextId = 0;
 @hostAttributes({
   slot: 'navigation-section',
 })
+@slotState()
 export class SbbNavigationSectionElement extends SbbUpdateSchedulerMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
 
@@ -91,11 +92,6 @@ export class SbbNavigationSectionElement extends SbbUpdateSchedulerMixin(LitElem
   private _windowEventsController!: AbortController;
   private _language = new SbbLanguageController(this);
 
-  public constructor() {
-    super();
-    new SbbSlotStateController(this);
-  }
-
   /**
    * Opens the navigation section on trigger click.
    */