Skip to content

Commit

Permalink
refactor: replace isolated SbbSlotStateController usage with decora…
Browse files Browse the repository at this point in the history
…tor (#2856)

This PR replaces the constructor usage of `SbbSlotStateController` with the decorator `slotChange`, which applies the `SbbSlotStateController` internally.
  • Loading branch information
kyubisation authored Jul 1, 2024
1 parent 53c03d8 commit fa91b76
Show file tree
Hide file tree
Showing 28 changed files with 100 additions and 173 deletions.
9 changes: 2 additions & 7 deletions src/elements/button/common/button-common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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()}
Expand Down
8 changes: 2 additions & 6 deletions src/elements/button/mini-button/mini-button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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();
}
Expand Down
9 changes: 3 additions & 6 deletions src/elements/checkbox/checkbox-group/checkbox-group.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;

Expand Down Expand Up @@ -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;
Expand Down
8 changes: 2 additions & 6 deletions src/elements/checkbox/checkbox-panel/checkbox-panel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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)),
) {
Expand All @@ -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);

Expand Down
12 changes: 4 additions & 8 deletions src/elements/checkbox/checkbox/checkbox.ts
Original file line number Diff line number Diff line change
@@ -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.
*
Expand All @@ -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),
) {
Expand All @@ -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">
Expand Down
1 change: 1 addition & 0 deletions src/elements/core/decorators.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './decorators/host-attributes.js';
export * from './decorators/slot-state.js';
2 changes: 1 addition & 1 deletion src/elements/core/decorators/host-attributes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ function applyAttributes(
*
* @example
*
* @customElement('my-element)
* @hostAttributes({
* role: 'region'
* })
* @customElement('my-element)
* export class MyElement extends LitElement {
* ...
* }
Expand Down
25 changes: 25 additions & 0 deletions src/elements/core/decorators/slot-state.ts
Original file line number Diff line number Diff line change
@@ -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),
);
}
};
9 changes: 3 additions & 6 deletions src/elements/file-selector/file-selector.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 = {
Expand Down Expand Up @@ -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();
Expand Down
16 changes: 5 additions & 11 deletions src/elements/form-field/form-field/form-field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;

Expand Down Expand Up @@ -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;
Expand Down
8 changes: 2 additions & 6 deletions src/elements/link-list/link-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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);

Expand Down
9 changes: 2 additions & 7 deletions src/elements/link/common/link-common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
Expand All @@ -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>`;
}
Expand Down
8 changes: 2 additions & 6 deletions src/elements/navigation/navigation-list/navigation-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand All @@ -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);

Expand Down
10 changes: 3 additions & 7 deletions src/elements/navigation/navigation-section/navigation-section.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -37,6 +37,7 @@ let nextId = 0;
@hostAttributes({
slot: 'navigation-section',
})
@slotState()
export class SbbNavigationSectionElement extends SbbUpdateSchedulerMixin(LitElement) {
public static override styles: CSSResultGroup = style;

Expand Down Expand Up @@ -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.
*/
Expand Down
Loading

0 comments on commit fa91b76

Please sign in to comment.