refactor: re-structure common behaviors (#2533)

Closes #2534 BREAKING CHANGE: Changed several internal class names. Consumers shouldn't be affected.
sbb-design-systems · Apr 2, 2024 · 906d576 · 906d576
1 parent f8316f0
commit 906d576
Show file tree

Hide file tree

Showing 248 changed files with 914 additions and 898 deletions.
diff --git a/CODING_STANDARDS.md b/CODING_STANDARDS.md
@@ -101,7 +101,7 @@ components which require basic button or link functionality have to extend the c
 and they need to implement the `renderTemplate` method, which should return the component's inner content.
 
 ```ts
-import { SbbButtonBaseElement } from '../../core/common-behaviors';
+import { SbbButtonBaseElement } from '../../core/base-elements';
 import { html } from 'lit';
 
 @customElement('my-custom-button')
@@ -133,10 +133,9 @@ As the language can be changed dynamically, you have to listen to the `sbbLangua
 event and re-render the view. This can be done by marking the field with `@state` and using the language change handler (see code below).
 
 ```ts
-import { LanguageController } from '../core/common-behaviors';
-
+import { SbbLanguageController } from '../core/controllers';
 export class Component extends LitElement {
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   protected override render(): TemplateResult {
     return html` ... ${i18nExample[this._language.current]} ... `;

diff --git a/src/components/accordion/accordion.stories.ts b/src/components/accordion/accordion.stories.ts
@@ -13,7 +13,7 @@ import { html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread';
 import { SbbExpansionPanelElement } from '../expansion-panel';
 
 import readme from './readme.md?raw';

diff --git a/src/components/accordion/accordion.ts b/src/components/accordion/accordion.ts
@@ -2,8 +2,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbHydrationMixin } from '../core/common-behaviors';
-import { ConnectedAbortController } from '../core/eventing';
+import { SbbConnectedAbortController } from '../core/controllers';
+import { SbbHydrationMixin } from '../core/mixins';
 import { SbbExpansionPanelElement } from '../expansion-panel';
 import type { SbbTitleLevel } from '../title';
 
@@ -51,7 +51,7 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
   }
   private _multi: boolean = false;
 
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
 
   private _closePanels(e: CustomEvent): void {
     if ((e.target as HTMLElement)?.tagName !== 'SBB-EXPANSION-PANEL' || this.multi) {

diff --git a/src/components/action-group/action-group.stories.ts b/src/components/action-group/action-group.stories.ts
@@ -5,7 +5,7 @@ import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../storybook/helpers/spread';
 
 import readme from './readme.md?raw';
 import './action-group';

diff --git a/src/components/alert/alert-group/alert-group.stories.ts b/src/components/alert/alert-group/alert-group.stories.ts
@@ -5,7 +5,7 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread';
 
 import { SbbAlertGroupElement } from './alert-group';
 import readme from './readme.md?raw';

diff --git a/src/components/alert/alert-group/alert-group.ts b/src/components/alert/alert-group/alert-group.ts
@@ -3,8 +3,9 @@ import { LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
+import { SbbConnectedAbortController } from '../../core/controllers';
 import { setAttribute } from '../../core/dom';
-import { EventEmitter, ConnectedAbortController } from '../../core/eventing';
+import { EventEmitter } from '../../core/eventing';
 import type { SbbTitleLevel } from '../../title';
 import { SbbAlertElement } from '../alert';
 
@@ -54,7 +55,7 @@ export class SbbAlertGroupElement extends LitElement {
   /** Emits when `sbb-alert-group` becomes empty. */
   private _empty: EventEmitter<void> = new EventEmitter(this, SbbAlertGroupElement.events.empty);
 
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
 
   private _removeAlert(event: Event): void {
     const target = event.target as SbbAlertElement;

diff --git a/src/components/alert/alert/alert.stories.ts b/src/components/alert/alert/alert.stories.ts
@@ -5,7 +5,7 @@ import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread';
 
 import { SbbAlertElement } from './alert';
 import readme from './readme.md?raw';

diff --git a/src/components/alert/alert/alert.ts b/src/components/alert/alert/alert.ts
@@ -2,20 +2,17 @@ import { spread } from '@open-wc/lit-helpers';
 import { type CSSResultGroup, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-  LanguageController,
-  type LinkTargetType,
-  SbbIconNameMixin,
-} from '../../core/common-behaviors';
+import type { LinkTargetType } from '../../core/base-elements';
+import { SbbLanguageController } from '../../core/controllers';
 import { EventEmitter } from '../../core/eventing';
 import { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n';
+import { SbbIconNameMixin } from '../../icon';
 import type { SbbTitleLevel } from '../../title';
 
 import style from './alert.scss?lit&inline';
 
 import '../../button/transparent-button';
 import '../../divider';
-import '../../icon';
 import '../../link';
 import '../../title';
 
@@ -100,7 +97,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
     SbbAlertElement.events.dismissalRequested,
   );
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   protected override async firstUpdated(): Promise<void> {
     this._open();

diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts
@@ -4,7 +4,8 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
 import { assignId, getNextElementIndex } from '../core/a11y';
-import { SbbHydrationMixin, SbbNegativeMixin, hostAttributes } from '../core/common-behaviors';
+import { SbbConnectedAbortController } from '../core/controllers';
+import { hostAttributes } from '../core/decorators';
 import {
   setAttribute,
   getDocumentWritingMode,
@@ -13,7 +14,8 @@ import {
   isValidAttribute,
   isBrowser,
 } from '../core/dom';
-import { ConnectedAbortController, EventEmitter } from '../core/eventing';
+import { EventEmitter } from '../core/eventing';
+import { SbbHydrationMixin, SbbNegativeMixin } from '../core/mixins';
 import type { SbbOverlayState } from '../core/overlay';
 import {
   isEventOnElement,
@@ -116,7 +118,7 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
   private _activeItemIndex = -1;
   private _didLoad = false;
   private _isPointerDownEventOnMenu: boolean = false;
-  private _abort = new ConnectedAbortController(this);
+  private _abort = new SbbConnectedAbortController(this);
 
   /**
    * On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.

diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread';
 
 import type { SbbBreadcrumbGroupElement } from './breadcrumb-group';
 import readme from './readme.md?raw';

diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts
@@ -1,23 +1,20 @@
 import {
   type CSSResultGroup,
+  html,
+  nothing,
   LitElement,
   type PropertyValueMap,
   type PropertyValues,
   type TemplateResult,
 } from 'lit';
-import { html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 
 import { getNextElementIndex, isArrowKeyPressed, sbbInputModalityDetector } from '../../core/a11y';
-import {
-  SbbNamedSlotListMixin,
-  hostAttributes,
-  type WithListChildren,
-} from '../../core/common-behaviors';
-import { LanguageController } from '../../core/common-behaviors';
+import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers';
+import { hostAttributes } from '../../core/decorators';
 import { setAttribute } from '../../core/dom';
-import { ConnectedAbortController } from '../../core/eventing';
 import { i18nBreadcrumbEllipsisButtonLabel } from '../../core/i18n';
+import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins';
 import { AgnosticResizeObserver } from '../../core/observers';
 import type { SbbBreadcrumbElement } from '../breadcrumb';
 
@@ -44,8 +41,8 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
   @state() private _state?: 'collapsed' | 'manually-expanded';
 
   private _resizeObserver = new AgnosticResizeObserver(() => this._evaluateCollapsedState());
-  private _abort = new ConnectedAbortController(this);
-  private _language = new LanguageController(this);
+  private _abort = new SbbConnectedAbortController(this);
+  private _language = new SbbLanguageController(this);
   private _markForFocus = false;
 
   private _handleKeyDown(evt: KeyboardEvent): void {

diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread';
 
 import readme from './readme.md?raw';
 

diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.ts
@@ -2,13 +2,10 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import {
-  SbbHydrationMixin,
-  SbbIconNameMixin,
-  SbbLinkBaseElement,
-} from '../../core/common-behaviors';
+import { SbbLinkBaseElement } from '../../core/base-elements';
+import { SbbHydrationMixin } from '../../core/mixins';
+import { SbbIconNameMixin } from '../../icon';
 
-import '../../icon';
 import style from './breadcrumb.scss?lit&inline';
 
 /**

diff --git a/src/components/button/button-link/button-link.ts b/src/components/button/button-link/button-link.ts
@@ -1,7 +1,8 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
+import { SbbLinkBaseElement } from '../../core/base-elements';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins';
 import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**

diff --git a/src/components/button/button-static/button-static.ts b/src/components/button/button-static/button-static.ts
@@ -1,7 +1,8 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
+import { SbbActionBaseElement } from '../../core/base-elements';
+import { SbbDisabledMixin } from '../../core/mixins';
 import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**

diff --git a/src/components/button/button/button.ts b/src/components/button/button/button.ts
@@ -1,7 +1,8 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
+import { SbbButtonBaseElement } from '../../core/base-elements';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins';
 import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**

diff --git a/src/components/button/common/button-common.ts b/src/components/button/common/button-common.ts
@@ -2,19 +2,16 @@ import type { TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import {
-  type AbstractConstructor,
-  hostAttributes,
-  NamedSlotStateController,
-  type SbbActionBaseElement,
-  type SbbDisabledMixinType,
-  SbbIconNameMixin,
-  type SbbIconNameMixinType,
-  SbbNegativeMixin,
-  type SbbNegativeMixinType,
-} from '../../core/common-behaviors';
-
-import '../../icon';
+import type { SbbActionBaseElement } from '../../core/base-elements';
+import { SbbSlotStateController } from '../../core/controllers';
+import { hostAttributes } from '../../core/decorators';
+import type {
+  AbstractConstructor,
+  SbbDisabledMixinType,
+  SbbNegativeMixinType,
+} from '../../core/mixins';
+import { SbbNegativeMixin } from '../../core/mixins';
+import { SbbIconNameMixin, type SbbIconNameMixinType } from '../../icon';
 
 export type SbbButtonCommonElement = SbbButtonCommonElementMixinType & SbbActionBaseElement;
 
@@ -45,7 +42,7 @@ export const SbbButtonCommonElementMixin = <T extends AbstractConstructor<SbbAct
 
     protected constructor(...args: any[]) {
       super(args);
-      new NamedSlotStateController(this);
+      new SbbSlotStateController(this);
     }
 
     protected override renderTemplate(): TemplateResult {

diff --git a/src/components/button/common/button-test-utils.ts b/src/components/button/common/button-test-utils.ts
@@ -1,7 +1,7 @@
 import type { TemplateResult } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread';
 import '../index';
 
 /* eslint-disable lit/binding-positions */

diff --git a/src/components/button/common/common-stories.ts b/src/components/button/common/common-stories.ts
@@ -13,7 +13,7 @@ import type { TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread';
 
 import '../../icon';
 import '../../loading-indicator';

diff --git a/src/components/button/mini-button/mini-button.stories.ts b/src/components/button/mini-button/mini-button.stories.ts
@@ -11,7 +11,7 @@ import type {
 import { html, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread';
 import '../../form-field';
 import './mini-button';
 import { buttonDefaultArgs, buttonDefaultArgTypes } from '../common/button-common-stories';

diff --git a/src/components/button/mini-button/mini-button.ts b/src/components/button/mini-button/mini-button.ts
@@ -1,13 +1,10 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import {
-  NamedSlotStateController,
-  SbbButtonBaseElement,
-  SbbDisabledTabIndexActionMixin,
-  SbbIconNameMixin,
-  SbbNegativeMixin,
-} from '../../core/common-behaviors';
+import { SbbButtonBaseElement } from '../../core/base-elements';
+import { SbbSlotStateController } from '../../core/controllers';
+import { SbbDisabledTabIndexActionMixin, SbbNegativeMixin } from '../../core/mixins';
+import { SbbIconNameMixin } from '../../icon';
 
 import style from './mini-button.scss?lit&inline';
 
@@ -25,7 +22,7 @@ export class SbbMiniButtonElement extends SbbNegativeMixin(
 
   public constructor() {
     super();
-    new NamedSlotStateController(this);
+    new SbbSlotStateController(this);
   }
 
   protected override renderTemplate(): TemplateResult {

diff --git a/src/components/button/secondary-button-link/secondary-button-link.ts b/src/components/button/secondary-button-link/secondary-button-link.ts
@@ -1,7 +1,8 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
+import { SbbLinkBaseElement } from '../../core/base-elements';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins';
 import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**

diff --git a/src/components/button/secondary-button-static/secondary-button-static.ts b/src/components/button/secondary-button-static/secondary-button-static.ts
@@ -1,7 +1,8 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbActionBaseElement, SbbDisabledMixin } from '../../core/common-behaviors';
+import { SbbActionBaseElement } from '../../core/base-elements';
+import { SbbDisabledMixin } from '../../core/mixins';
 import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**

diff --git a/src/components/button/secondary-button/secondary-button.ts b/src/components/button/secondary-button/secondary-button.ts
@@ -1,7 +1,8 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors';
+import { SbbButtonBaseElement } from '../../core/base-elements';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins';
 import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**

diff --git a/src/components/button/tertiary-button-link/tertiary-button-link.ts b/src/components/button/tertiary-button-link/tertiary-button-link.ts
@@ -1,7 +1,8 @@
 import type { CSSResultGroup } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbDisabledTabIndexActionMixin, SbbLinkBaseElement } from '../../core/common-behaviors';
+import { SbbLinkBaseElement } from '../../core/base-elements';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins';
 import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common';
 
 /**