refactor: rename components with Element suffix (#2275)

This PR renames the web components with the Element suffix (e.g. `SbbAccordion` to `SbbAccordionElement`). This prevents name conflicts when consuming both element and React component (and in the future also Angular component).
sbb-design-systems · Dec 7, 2023 · 2c4cf25 · 2c4cf25
1 parent b0aa362
commit 2c4cf25
Show file tree

Hide file tree

Showing 244 changed files with 1,619 additions and 1,819 deletions.
diff --git a/ci/lit-migration.mts b/ci/lit-migration.mts
@@ -1064,7 +1064,7 @@ declare global {
       if (ts.isVariableStatement(node) && node.getText().match(/(element: E2EElement|page: E2EPage)/)) {
         mutator.insertAt(node, '/** NOTE: These are too hard to migrate and are prone to errors :/ \n'
         + '  * consider that the E2EPage is now the \'document\' (you should just delete it) \n'
-        + '  * and that the E2EElement equivalent is directly the SbbComponent (e.g. SbbTimeInput) */ \n');
+        + '  * and that the E2EElement equivalent is directly the SbbComponent (e.g. SbbTimeInputElement) */ \n');
       }
 
       if (ts.isCallExpression(node) && (node.expression.getText() === 'it' || node.expression.getText() === 'beforeEach')) {

diff --git a/src/components/accordion/accordion.e2e.ts b/src/components/accordion/accordion.e2e.ts
@@ -2,13 +2,13 @@ import { assert, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing';
-import { SbbExpansionPanel } from '../expansion-panel';
-import type { SbbExpansionPanelHeader } from '../expansion-panel';
+import { SbbExpansionPanelElement } from '../expansion-panel';
+import type { SbbExpansionPanelHeaderElement } from '../expansion-panel';
 
-import { SbbAccordion } from './accordion';
+import { SbbAccordionElement } from './accordion';
 
 describe('sbb-accordion', () => {
-  let element: SbbAccordion;
+  let element: SbbAccordionElement;
 
   beforeEach(async () => {
     element = await fixture(html`
@@ -30,7 +30,7 @@ describe('sbb-accordion', () => {
   });
 
   it('renders', async () => {
-    assert.instanceOf(element, SbbAccordion);
+    assert.instanceOf(element, SbbAccordionElement);
   });
 
   it('should set accordion context on expansion panel', async () => {
@@ -44,7 +44,7 @@ describe('sbb-accordion', () => {
   });
 
   it('should set accordion context on expansion panel when removing and adding expansion-panels', async () => {
-    let panels: SbbExpansionPanel[];
+    let panels: SbbExpansionPanelElement[];
 
     element.querySelector('sbb-expansion-panel').remove();
     await waitForLitRender(element);
@@ -101,13 +101,13 @@ describe('sbb-accordion', () => {
   });
 
   it('should close others when expanding and multi = false', async () => {
-    const willOpenEventSpy = new EventSpy(SbbExpansionPanel.events.willOpen);
-    const panelOne: SbbExpansionPanel = element.querySelector('#panel-1');
-    const headerOne: SbbExpansionPanelHeader = element.querySelector('#header-1');
-    const panelTwo: SbbExpansionPanel = element.querySelector('#panel-2');
-    const headerTwo: SbbExpansionPanelHeader = element.querySelector('#header-2');
-    const panelThree: SbbExpansionPanel = element.querySelector('#panel-3');
-    const headerThree: SbbExpansionPanelHeader = element.querySelector('#header-3');
+    const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
+    const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1');
+    const headerOne: SbbExpansionPanelHeaderElement = element.querySelector('#header-1');
+    const panelTwo: SbbExpansionPanelElement = element.querySelector('#panel-2');
+    const headerTwo: SbbExpansionPanelHeaderElement = element.querySelector('#header-2');
+    const panelThree: SbbExpansionPanelElement = element.querySelector('#panel-3');
+    const headerThree: SbbExpansionPanelHeaderElement = element.querySelector('#header-3');
 
     for (const panel of [panelOne, panelTwo, panelThree]) {
       expect(panel.expanded).to.be.equal(false);
@@ -138,13 +138,13 @@ describe('sbb-accordion', () => {
   it('should not change others when expanding and multi = false', async () => {
     element.multi = true;
     await waitForLitRender(element);
-    const willOpenEventSpy = new EventSpy(SbbExpansionPanel.events.willOpen);
-    const panelOne: SbbExpansionPanel = element.querySelector('#panel-1');
-    const headerOne: SbbExpansionPanelHeader = element.querySelector('#header-1');
-    const panelTwo: SbbExpansionPanel = element.querySelector('#panel-2');
-    const headerTwo: SbbExpansionPanelHeader = element.querySelector('#header-2');
-    const panelThree: SbbExpansionPanel = element.querySelector('#panel-3');
-    const headerThree: SbbExpansionPanelHeader = element.querySelector('#header-3');
+    const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
+    const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1');
+    const headerOne: SbbExpansionPanelHeaderElement = element.querySelector('#header-1');
+    const panelTwo: SbbExpansionPanelElement = element.querySelector('#panel-2');
+    const headerTwo: SbbExpansionPanelHeaderElement = element.querySelector('#header-2');
+    const panelThree: SbbExpansionPanelElement = element.querySelector('#panel-3');
+    const headerThree: SbbExpansionPanelHeaderElement = element.querySelector('#header-3');
 
     for (const panel of [panelOne, panelTwo, panelThree]) {
       expect(panel.expanded).to.be.equal(false);
@@ -175,17 +175,17 @@ describe('sbb-accordion', () => {
   it('should close all panels except the first when multi changes from true to false', async () => {
     element.multi = true;
     await waitForLitRender(element);
-    const panelOne: SbbExpansionPanel = element.querySelector('#panel-1');
-    const panelTwo: SbbExpansionPanel = element.querySelector('#panel-2');
-    const headerTwo: SbbExpansionPanelHeader = element.querySelector('#header-2');
-    const panelThree: SbbExpansionPanel = element.querySelector('#panel-3');
-    const headerThree: SbbExpansionPanelHeader = element.querySelector('#header-3');
+    const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1');
+    const panelTwo: SbbExpansionPanelElement = element.querySelector('#panel-2');
+    const headerTwo: SbbExpansionPanelHeaderElement = element.querySelector('#header-2');
+    const panelThree: SbbExpansionPanelElement = element.querySelector('#panel-3');
+    const headerThree: SbbExpansionPanelHeaderElement = element.querySelector('#header-3');
 
     for (const panel of [panelOne, panelTwo, panelThree]) {
       expect(panel.expanded).to.be.equal(false);
     }
 
-    const willOpenEventSpy = new EventSpy(SbbExpansionPanel.events.willOpen);
+    const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
 
     headerTwo.click();
     await waitForCondition(() => willOpenEventSpy.events.length === 1);

diff --git a/src/components/accordion/accordion.stories.ts b/src/components/accordion/accordion.stories.ts
@@ -7,7 +7,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../core/dom';
-import { SbbExpansionPanel } from '../expansion-panel';
+import { SbbExpansionPanelElement } from '../expansion-panel';
 
 import readme from './readme.md?raw';
 import './accordion';
@@ -244,10 +244,10 @@ const meta: Meta = {
     },
     actions: {
       handles: [
-        SbbExpansionPanel.events.willOpen,
-        SbbExpansionPanel.events.didOpen,
-        SbbExpansionPanel.events.willClose,
-        SbbExpansionPanel.events.didClose,
+        SbbExpansionPanelElement.events.willOpen,
+        SbbExpansionPanelElement.events.didOpen,
+        SbbExpansionPanelElement.events.willClose,
+        SbbExpansionPanelElement.events.didClose,
       ],
     },
     docs: {

diff --git a/src/components/accordion/accordion.ts b/src/components/accordion/accordion.ts
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 
 import { toggleDatasetEntry } from '../core/dom';
 import { ConnectedAbortController } from '../core/eventing';
-import { SbbExpansionPanel } from '../expansion-panel';
+import { SbbExpansionPanelElement } from '../expansion-panel';
 import type { TitleLevel } from '../title';
 
 import style from './accordion.scss?lit&inline';
@@ -14,7 +14,7 @@ import style from './accordion.scss?lit&inline';
  * @slot - Use the unnamed slot to add `sbb-expansion-panel` elements.
  */
 @customElement('sbb-accordion')
-export class SbbAccordion extends LitElement {
+export class SbbAccordionElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
   /** The heading level for the sbb-expansion-panel-headers within the component. */
@@ -71,7 +71,7 @@ export class SbbAccordion extends LitElement {
     this._expansionPanels.forEach((panel) => (panel.titleLevel = this.titleLevel));
   }
 
-  private get _expansionPanels(): SbbExpansionPanel[] {
+  private get _expansionPanels(): SbbExpansionPanelElement[] {
     return Array.from(this.querySelectorAll?.('sbb-expansion-panel') ?? []);
   }
 
@@ -81,7 +81,7 @@ export class SbbAccordion extends LitElement {
       return;
     }
 
-    expansionPanels.forEach((panel: SbbExpansionPanel) => {
+    expansionPanels.forEach((panel: SbbExpansionPanelElement) => {
       panel.titleLevel = this.titleLevel;
       panel.disableAnimation = this.disableAnimation;
       toggleDatasetEntry(panel, 'accordionFirst', false);
@@ -95,7 +95,7 @@ export class SbbAccordion extends LitElement {
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener(
-      SbbExpansionPanel.events.willOpen,
+      SbbExpansionPanelElement.events.willOpen,
       (e: CustomEvent) => this._closePanels(e),
       { signal },
     );
@@ -113,6 +113,6 @@ export class SbbAccordion extends LitElement {
 declare global {
   interface HTMLElementTagNameMap {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    'sbb-accordion': SbbAccordion;
+    'sbb-accordion': SbbAccordionElement;
   }
 }
diff --git a/src/components/action-group/action-group.e2e.ts b/src/components/action-group/action-group.e2e.ts
@@ -1,14 +1,14 @@
 import { assert, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { SbbButton } from '../button';
+import { SbbButtonElement } from '../button';
 import { waitForLitRender } from '../core/testing';
-import { SbbLink } from '../link';
+import { SbbLinkElement } from '../link';
 
-import { SbbActionGroup } from './action-group';
+import { SbbActionGroupElement } from './action-group';
 
 describe('sbb-action-group', () => {
-  let element: SbbActionGroup;
+  let element: SbbActionGroupElement;
 
   beforeEach(async () => {
     element = await fixture(html`
@@ -26,14 +26,14 @@ describe('sbb-action-group', () => {
   });
 
   it('renders', async () => {
-    assert.instanceOf(element, SbbActionGroup);
+    assert.instanceOf(element, SbbActionGroupElement);
   });
 
   describe('property sync', () => {
     it('should sync default size with sbb-button', async () => {
       const links = Array.from(
         document.querySelectorAll('sbb-action-group sbb-button'),
-      ) as SbbButton[];
+      ) as SbbButtonElement[];
       expect(links.every((l) => l.size === 'l')).to.be.ok;
     });
 
@@ -42,20 +42,24 @@ describe('sbb-action-group', () => {
       await waitForLitRender(element);
       const links = Array.from(
         document.querySelectorAll('sbb-action-group sbb-button'),
-      ) as SbbButton[];
+      ) as SbbButtonElement[];
       expect(links.every((l) => l.size === 'm')).to.be.ok;
     });
 
     it('should update attributes with link-size="s"', async () => {
       element.setAttribute('link-size', 's');
       await waitForLitRender(element);
-      const links = Array.from(document.querySelectorAll('sbb-action-group sbb-link')) as SbbLink[];
+      const links = Array.from(
+        document.querySelectorAll('sbb-action-group sbb-link'),
+      ) as SbbLinkElement[];
       expect(links.every((l) => l.size === 's')).to.be.ok;
     });
 
     it('should apply variant block to sbb-link', async () => {
       await waitForLitRender(element);
-      const links = Array.from(document.querySelectorAll('sbb-action-group sbb-link')) as SbbLink[];
+      const links = Array.from(
+        document.querySelectorAll('sbb-action-group sbb-link'),
+      ) as SbbLinkElement[];
       expect(links.every((l) => l.variant === 'block')).to.be.ok;
     });
   });

diff --git a/src/components/action-group/action-group.spec.ts b/src/components/action-group/action-group.spec.ts
@@ -1,9 +1,9 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { SbbButton } from '../button';
+import { SbbButtonElement } from '../button';
 
-import { SbbActionGroup } from './action-group';
+import { SbbActionGroupElement } from './action-group';
 import '.';
 
 describe('sbb-action-group', () => {
@@ -43,8 +43,8 @@ describe('sbb-action-group', () => {
 
   describe('property sync', () => {
     const assertButtons = (
-      root: SbbActionGroup,
-      assertion: (link: SbbButton) => boolean,
+      root: SbbActionGroupElement,
+      assertion: (link: SbbButtonElement) => boolean,
     ): boolean => Array.from(root.querySelectorAll('sbb-button')).every(assertion);
 
     it('should sync default button-size property with sbb-button', async () => {
@@ -58,7 +58,7 @@ describe('sbb-action-group', () => {
             Link
           </sbb-link>
         </sbb-action-group>
-      `)) as SbbActionGroup;
+      `)) as SbbActionGroupElement;
       expect(assertButtons(root, (b) => b.size === 'l')).to.be.ok;
     });
 
@@ -73,7 +73,7 @@ describe('sbb-action-group', () => {
             Link
           </sbb-link>
         </sbb-action-group>
-      `)) as SbbActionGroup;
+      `)) as SbbActionGroupElement;
       expect(assertButtons(root, (b) => b.size === 'm')).to.be.ok;
     });
 
@@ -88,7 +88,7 @@ describe('sbb-action-group', () => {
             Link
           </sbb-link>
         </sbb-action-group>
-      `)) as SbbActionGroup;
+      `)) as SbbActionGroupElement;
       expect(Array.from(root.querySelectorAll('sbb-link')).every((l) => l.variant === 'block')).to
         .be.ok;
     });
@@ -104,7 +104,7 @@ describe('sbb-action-group', () => {
             Link
           </sbb-link>
         </sbb-action-group>
-      `)) as SbbActionGroup;
+      `)) as SbbActionGroupElement;
       expect(Array.from(root.querySelectorAll('sbb-link')).every((l) => l.size === 's')).to.be.ok;
     });
   });

diff --git a/src/components/action-group/action-group.ts b/src/components/action-group/action-group.ts
@@ -13,7 +13,7 @@ import style from './action-group.scss?lit&inline';
  * @slot - Use the unnamed slot to add `sbb-link` or `sbb-button` elements to the `sbb-action-group`.
  */
 @customElement('sbb-action-group')
-export class SbbActionGroup extends LitElement {
+export class SbbActionGroupElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
   /**
@@ -80,6 +80,6 @@ export class SbbActionGroup extends LitElement {
 declare global {
   interface HTMLElementTagNameMap {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    'sbb-action-group': SbbActionGroup;
+    'sbb-action-group': SbbActionGroupElement;
   }
 }
diff --git a/src/components/alert/alert-group/alert-group.e2e.ts b/src/components/alert/alert-group/alert-group.e2e.ts
@@ -1,16 +1,16 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { SbbButton } from '../../button';
+import { SbbButtonElement } from '../../button';
 import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing';
 
-import { SbbAlertGroup } from './alert-group';
+import { SbbAlertGroupElement } from './alert-group';
 
 import '.';
 import '../alert';
 
 describe('sbb-alert-group', () => {
-  let element: SbbAlertGroup;
+  let element: SbbAlertGroupElement;
 
   it('should handle events ond states on interacting with alerts', async () => {
     const alertGroupId = 'alertgroup';
@@ -28,8 +28,8 @@ describe('sbb-alert-group', () => {
         <sbb-alert title-content="Interruption" href="www.sbb.ch">Second</sbb-alert>
       </sbb-alert-group>
     `);
-    const didDismissAlertSpy = new EventSpy(SbbAlertGroup.events.didDismissAlert);
-    const emptySpy = new EventSpy(SbbAlertGroup.events.empty);
+    const didDismissAlertSpy = new EventSpy(SbbAlertGroupElement.events.didDismissAlert);
+    const emptySpy = new EventSpy(SbbAlertGroupElement.events.empty);
 
     // When rendering initially
     await waitForLitRender(element);
@@ -43,7 +43,7 @@ describe('sbb-alert-group', () => {
     // When clicking on close button of the first alert
     const closeButton = element
       .querySelector('sbb-alert')
-      .shadowRoot.querySelector('.sbb-alert__close-button-wrapper sbb-button') as SbbButton;
+      .shadowRoot.querySelector('.sbb-alert__close-button-wrapper sbb-button') as SbbButtonElement;
 
     closeButton.focus();
     closeButton.click();
@@ -66,7 +66,7 @@ describe('sbb-alert-group', () => {
     (
       element
         .querySelector('sbb-alert')
-        .shadowRoot.querySelector('.sbb-alert__close-button-wrapper sbb-button') as SbbButton
+        .shadowRoot.querySelector('.sbb-alert__close-button-wrapper sbb-button') as SbbButtonElement
     ).click();
     await waitForLitRender(element);
 
@@ -95,7 +95,7 @@ describe('sbb-alert-group', () => {
     element = await fixture(
       html`<sbb-alert-group accessibility-title="Disruptions"></sbb-alert-group>`,
     );
-    const emptySpy = new EventSpy(SbbAlertGroup.events.empty);
+    const emptySpy = new EventSpy(SbbAlertGroupElement.events.empty);
 
     // Then no title should be rendered and no empty event fired
     expect(element.shadowRoot.querySelector('.sbb-alert-group__title')).to.be.null;