refactor(sbb-chip-label): rename chip to chip-label (#3188)

BREAKING CHANGE: sbb-chip has been renamed to sbb-chip-label.

Replace all sbb-chip occurrences with sbb-chip-label.
Replace all sbb-chip-* SASS mixin occurrences with sbb-chip-label-*.
Replace all sbb-chip-* CSS variables occurrences with sbb-chip-label-*.

---------

Co-authored-by: Jeremias Peier <jeremias.peier@sbb.ch>

src/elements/chip-label.ts

@@ -0,0 +1 @@
+export * from './chip-label/chip-label.js';

src/elements/chip-label/__snapshots__/chip-label.snapshot.spec.snap.js

@@ -0,0 +1,55 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-chip-label renders DOM"] = 
+`<sbb-chip-label
+  color="milk"
+  size="xxs"
+>
+  Label
+</sbb-chip-label>
+`;
+/* end snapshot sbb-chip-label renders DOM */
+
+snapshots["sbb-chip-label renders Shadow DOM"] = 
+`<span class="sbb-chip-label">
+  <span class="sbb-chip__text-wrapper">
+    <slot>
+    </slot>
+  </span>
+</span>
+`;
+/* end snapshot sbb-chip-label renders Shadow DOM */
+
+snapshots["sbb-chip-label renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-chip-label renders A11y tree Chrome */
+
+snapshots["sbb-chip-label renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Label"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-chip-label renders A11y tree Firefox */
+

src/elements/chip/chip.scss → src/elements/chip-label/chip-label.scss

@@ -8,41 +8,41 @@
 }
 
 :host([color='milk']) {
-  @include sbb.chip-variables--color-milk;
+  @include sbb.chip-label-variables--color-milk;
 }
 
 :host([color='charcoal']) {
-  @include sbb.chip-variables--color-charcoal;
+  @include sbb.chip-label-variables--color-charcoal;
 }
 
 :host([color='white']) {
-  @include sbb.chip-variables--color-white;
+  @include sbb.chip-label-variables--color-white;
 }
 
 :host([color='granite']) {
-  @include sbb.chip-variables--color-granite;
+  @include sbb.chip-label-variables--color-granite;
 }
 
 :host([size='xxs']) {
-  @include sbb.chip-variables--size-xxs;
+  @include sbb.chip-label-variables--size-xxs;
 }
 
 :host([size='xs']) {
-  @include sbb.chip-variables--size-xs;
+  @include sbb.chip-label-variables--size-xs;
 }
 
 :host([size='s']) {
-  @include sbb.chip-variables--size-s;
+  @include sbb.chip-label-variables--size-s;
 }
 
-.sbb-chip {
-  @include sbb.chip-rules;
+.sbb-chip-label {
+  @include sbb.chip-label-rules;
 
   & {
     display: flex;
   }
 }
 
 .sbb-chip__text-wrapper {
-  @include sbb.chip-rules-ellipsis;
+  @include sbb.chip-label-rules-ellipsis;
 }

src/elements/chip/chip.snapshot.spec.ts → src/elements/chip-label/chip-label.snapshot.spec.ts

@@ -3,16 +3,16 @@ import { html } from 'lit/static-html.js';
 
 import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
-import type { SbbChipElement } from './chip.js';
+import type { SbbChipLabelElement } from './chip-label.js';
 
-import './chip.js';
+import './chip-label.js';
 
-describe(`sbb-chip`, () => {
-  let element: SbbChipElement;
+describe(`sbb-chip-label`, () => {
+  let element: SbbChipLabelElement;
 
   describe('renders', () => {
     beforeEach(async () => {
-      element = await fixture(html`<sbb-chip>Label</sbb-chip>`);
+      element = await fixture(html`<sbb-chip-label>Label</sbb-chip-label>`);
     });
 
     it('DOM', async () => {

src/elements/chip-label/chip-label.spec.ts

@@ -0,0 +1,15 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../core/testing/private.js';
+
+import { SbbChipLabelElement } from './chip-label.js';
+
+describe(`sbb-chip-label`, () => {
+  it('renders', async () => {
+    const element: SbbChipLabelElement = await fixture(
+      html`<sbb-chip-label>Label</sbb-chip-label>`,
+    );
+    assert.instanceOf(element, SbbChipLabelElement);
+  });
+});

src/elements/chip-label/chip-label.ssr.spec.ts

@@ -0,0 +1,20 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit';
+
+import { ssrHydratedFixture } from '../core/testing/private.js';
+
+import { SbbChipLabelElement } from './chip-label.js';
+
+describe(`sbb-chip-label ssr`, () => {
+  let root: SbbChipLabelElement;
+
+  beforeEach(async () => {
+    root = await ssrHydratedFixture(html`<sbb-chip-label>Label</sbb-chip-label>`, {
+      modules: ['./chip-label.js'],
+    });
+  });
+
+  it('renders', () => {
+    assert.instanceOf(root, SbbChipLabelElement);
+  });
+});

src/elements/chip/chip.stories.ts → src/elements/chip-label/chip-label.stories.ts

@@ -8,7 +8,7 @@ import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 
-import './chip.js';
+import './chip-label.js';
 
 const size: InputType = {
   control: {
@@ -43,11 +43,13 @@ const defaultArgs: Args = {
 };
 
 const Template = ({ label, ...args }: Args): TemplateResult => html`
-  <sbb-chip ${sbbSpread(args)}>${label}</sbb-chip>
+  <sbb-chip-label ${sbbSpread(args)}>${label}</sbb-chip-label>
 `;
 
 const TemplateFixedWidth = ({ label, ...args }: Args): TemplateResult => html`
-  <sbb-chip ${sbbSpread(args)} style=${styleMap({ width: '10rem' })}> ${label} </sbb-chip>
+  <sbb-chip-label ${sbbSpread(args)} style=${styleMap({ width: '10rem' })}>
+    ${label}
+  </sbb-chip-label>
 `;
 
 export const MilkXXS: StoryObj = {
@@ -130,7 +132,7 @@ const meta: Meta = {
       extractComponentDescription: () => readme,
     },
   },
-  title: 'elements/sbb-chip',
+  title: 'elements/sbb-chip-label',
 };
 
 export default meta;

src/elements/chip/chip.ts → src/elements/chip-label/chip-label.ts

@@ -2,16 +2,16 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import style from './chip.scss?lit&inline';
+import style from './chip-label.scss?lit&inline';
 
 /**
  * It displays brief and compact information.
  *
- * @slot - Use the unnamed slot to add content to the `sbb-chip`.
+ * @slot - Use the unnamed slot to add content to the `sbb-chip-label`.
  */
 export
-@customElement('sbb-chip')
-class SbbChipElement extends LitElement {
+@customElement('sbb-chip-label')
+class SbbChipLabelElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
   /** Size of the chip. */
@@ -24,7 +24,7 @@ class SbbChipElement extends LitElement {
 
   protected override render(): TemplateResult {
     return html`
-      <span class="sbb-chip">
+      <span class="sbb-chip-label">
         <span class="sbb-chip__text-wrapper">
           <slot></slot>
         </span>
@@ -36,6 +36,6 @@ class SbbChipElement extends LitElement {
 declare global {
   interface HTMLElementTagNameMap {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    'sbb-chip': SbbChipElement;
+    'sbb-chip-label': SbbChipLabelElement;
   }
 }

src/elements/chip/chip.visual.spec.ts → src/elements/chip-label/chip-label.visual.spec.ts

@@ -2,9 +2,9 @@ import { html } from 'lit';
 
 import { describeViewports, visualDiffDefault } from '../core/testing/private.js';
 
-import './chip.js';
+import './chip-label.js';
 
-describe(`sbb-chip`, () => {
+describe(`sbb-chip-label`, () => {
   const sizeCases = ['xxs', 'xs', 's'];
   const colorCases = ['milk', 'charcoal', 'white', 'granite'];
 
@@ -14,7 +14,9 @@ describe(`sbb-chip`, () => {
       it(
         `size=${size}`,
         visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(html` <sbb-chip size=${size}> Label </sbb-chip> `);
+          await setup.withFixture(html`
+            <sbb-chip-label size=${size as 'xxs' | 'xs' | 's'}> Label </sbb-chip-label>
+          `);
         }),
       );
     }
@@ -24,9 +26,16 @@ describe(`sbb-chip`, () => {
       it(
         `color=${color}`,
         visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(html` <sbb-chip color=${color}> Label </sbb-chip> `, {
-            backgroundColor: color === 'white' ? 'var(--sbb-color-granite)' : undefined,
-          });
+          await setup.withFixture(
+            html`
+              <sbb-chip-label color=${color as 'milk' | 'charcoal' | 'white' | 'granite'}>
+                Label
+              </sbb-chip-label>
+            `,
+            {
+              backgroundColor: color === 'white' ? 'var(--sbb-color-granite)' : undefined,
+            },
+          );
         }),
       );
     }
@@ -35,7 +44,9 @@ describe(`sbb-chip`, () => {
       `fixed width`,
       visualDiffDefault.with(async (setup) => {
         await setup.withFixture(html`
-          <sbb-chip style="width: 10rem"> This is a very long label which will be cut. </sbb-chip>
+          <sbb-chip-label style="width: 10rem">
+            This is a very long label which will be cut.
+          </sbb-chip-label>
         `);
       }),
     );

src/elements/chip/readme.md → src/elements/chip-label/readme.md

@@ -10,11 +10,11 @@ It's possible to choose among three different values for the `size` property (`s
 and four different values for the `color` property (`charcoal`, `granite`, `white` and `milk`, which is the default).
 
 ```html
-<sbb-chip color="charcoal" size="s">Label</sbb-chip>
+<sbb-chip-label color="charcoal" size="s">Label</sbb-chip-label>
 
-<sbb-chip color="granite" size="xs">Label</sbb-chip>
+<sbb-chip-label color="granite" size="xs">Label</sbb-chip-label>
 
-<sbb-chip color="white">Label</sbb-chip>
+<sbb-chip-label color="white">Label</sbb-chip-label>
 ```
 
 <!-- Auto Generated Below -->
@@ -28,6 +28,6 @@ and four different values for the `color` property (`charcoal`, `granite`, `whit
 
 ## Slots
 
-| Name | Description                                            |
-| ---- | ------------------------------------------------------ |
-|      | Use the unnamed slot to add content to the `sbb-chip`. |
+| Name | Description                                                  |
+| ---- | ------------------------------------------------------------ |
+|      | Use the unnamed slot to add content to the `sbb-chip-label`. |