fix: review

sbb-design-systems · Nov 4, 2024 · 2232027 · 2232027
1 parent 33fda76
commit 2232027
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 68 deletions.
diff --git a/src/elements/chip-label/__snapshots__/chip-label.snapshot.spec.snap.js b/src/elements/chip-label/__snapshots__/chip-label.snapshot.spec.snap.js
@@ -12,7 +12,7 @@ snapshots["sbb-chip-label renders DOM"] =
 /* end snapshot sbb-chip-label renders DOM */
 
 snapshots["sbb-chip-label renders Shadow DOM"] = 
-`<span class="sbb-chip">
+`<span class="sbb-chip-label">
   <span class="sbb-chip__text-wrapper">
     <slot>
     </slot>

diff --git a/src/elements/chip-label/chip-label.scss b/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;
 }
diff --git a/src/elements/chip-label/chip-label.ts b/src/elements/chip-label/chip-label.ts
@@ -24,7 +24,7 @@ class SbbChipLabelElement 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>

diff --git a/src/elements/chip-label/readme.md b/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 -->

diff --git a/src/elements/core/styles/mixins/chip.scss b/src/elements/core/styles/mixins/chip.scss
@@ -2,45 +2,45 @@
 @use './helpers';
 @use './typo';
 
-@mixin chip-variables--color-milk {
-  --sbb-chip-color: var(--sbb-color-granite);
-  --sbb-chip-background-color: var(--sbb-color-milk);
+@mixin chip-label-variables--color-milk {
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-background-color: var(--sbb-color-milk);
 }
 
-@mixin chip-variables--color-charcoal {
-  --sbb-chip-color: var(--sbb-color-white);
-  --sbb-chip-background-color: var(--sbb-color-charcoal);
+@mixin chip-label-variables--color-charcoal {
+  --sbb-chip-label-color: var(--sbb-color-white);
+  --sbb-chip-label-background-color: var(--sbb-color-charcoal);
 }
 
-@mixin chip-variables--color-white {
-  --sbb-chip-color: var(--sbb-color-granite);
-  --sbb-chip-background-color: var(--sbb-color-white);
+@mixin chip-label-variables--color-white {
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-background-color: var(--sbb-color-white);
 }
 
-@mixin chip-variables--color-granite {
-  --sbb-chip-color: var(--sbb-color-white);
-  --sbb-chip-background-color: var(--sbb-color-granite);
+@mixin chip-label-variables--color-granite {
+  --sbb-chip-label-color: var(--sbb-color-white);
+  --sbb-chip-label-background-color: var(--sbb-color-granite);
 }
 
-@mixin chip-variables--size-xxs {
-  --sbb-chip-padding-block: 0em;
-  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);
+@mixin chip-label-variables--size-xxs {
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
   --sbb-text-font-size: var(--sbb-font-size-text-xxs);
 }
 
-@mixin chip-variables--size-xs {
-  --sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-3x);
+@mixin chip-label-variables--size-xs {
+  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);
   --sbb-text-font-size: var(--sbb-font-size-text-xs);
 }
 
-@mixin chip-variables--size-s {
-  --sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);
-  --sbb-chip-padding-inline: var(--sbb-spacing-fixed-4x);
+@mixin chip-label-variables--size-s {
+  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);
   --sbb-text-font-size: var(--sbb-font-size-text-s);
 }
 
-@mixin chip-rules {
+@mixin chip-label-rules {
   @include typo.text;
 
   // We need an even value to make it work smoothly in Safari
@@ -50,12 +50,12 @@
   justify-content: center;
   height: calc(
     var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) +
-      var(--sbb-chip-padding-block) * 2
+      var(--sbb-chip-label-padding-block) * 2
   );
-  background-color: var(--sbb-chip-background-color);
-  padding-inline: var(--sbb-chip-padding-inline);
+  background-color: var(--sbb-chip-label-background-color);
+  padding-inline: var(--sbb-chip-label-padding-inline);
   border-radius: var(--sbb-border-radius-infinity);
-  color: var(--sbb-chip-color);
+  color: var(--sbb-chip-label-color);
 
   // Overflow hidden needed because line-height can be taller than height which can cause weird layout shifting
   overflow: hidden;
@@ -66,30 +66,30 @@
   }
 }
 
-@mixin chip-rules-ellipsis {
+@mixin chip-label-rules-ellipsis {
   @include helpers.ellipsis;
 
   display: inline-block;
 }
 
 @mixin chip($color: milk, $size: xxs) {
   @if $color == milk {
-    @include chip-variables--color-milk;
+    @include chip-label-variables--color-milk;
   } @else if $color == charcoal {
-    @include chip-variables--color-charcoal;
+    @include chip-label-variables--color-charcoal;
   } @else if $color == white {
-    @include chip-variables--color-white;
+    @include chip-label-variables--color-white;
   } @else if $color == granite {
-    @include chip-variables--color-granite;
+    @include chip-label-variables--color-granite;
   }
 
   @if $size == xxs {
-    @include chip-variables--size-xxs;
+    @include chip-label-variables--size-xxs;
   } @else if $size == xs {
-    @include chip-variables--size-xs;
+    @include chip-label-variables--size-xs;
   } @else if $size == s {
-    @include chip-variables--size-s;
+    @include chip-label-variables--size-s;
   }
 
-  @include chip-rules;
+  @include chip-label-rules;
 }
diff --git a/src/elements/teaser-hero/teaser-hero.scss b/src/elements/teaser-hero/teaser-hero.scss
@@ -11,7 +11,7 @@
   outline: none !important;
 
   --sbb-teaser-hero-brightness-hover: var(--sbb-hover-image-brightness);
-  --sbb-teaser-hero-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto
+  --sbb-teaser-hero-chip-label-inset: var(--sbb-spacing-responsive-xxxs) auto auto
     var(--sbb-spacing-responsive-xxxs);
 
   @include sbb.panel-variables;
@@ -70,6 +70,6 @@ sbb-image {
 
 ::slotted([slot='chip']) {
   position: absolute;
-  inset: var(--sbb-teaser-hero-chip-inset);
+  inset: var(--sbb-teaser-hero-chip-label-inset);
   z-index: 2;
 }
diff --git a/src/elements/teaser-hero/teaser-hero.stories.ts b/src/elements/teaser-hero/teaser-hero.stories.ts
@@ -111,7 +111,7 @@ const defaultArgs: Args = {
   'chip-label': undefined,
 };
 
-const chip = (content: string): TemplateResult => html`
+const chipLabelTemplate = (content: string): TemplateResult => html`
   <sbb-chip-label slot="chip">${content}</sbb-chip-label>
 `;
 
@@ -121,7 +121,7 @@ const TemplateSbbTeaserHeroDefault = ({
   ...args
 }: Args): TemplateResult => html`
   <sbb-teaser-hero ${sbbSpread(args)}
-    >${content} ${chipLabel ? chip(chipLabel) : nothing}
+    >${content} ${chipLabel ? chipLabelTemplate(chipLabel) : nothing}
   </sbb-teaser-hero>
 `;
 

diff --git a/src/elements/teaser/__snapshots__/teaser.snapshot.spec.snap.js b/src/elements/teaser/__snapshots__/teaser.snapshot.spec.snap.js
@@ -26,7 +26,7 @@ snapshots["sbb-teaser renders after centered Shadow DOM"] =
     </span>
     <span class="sbb-teaser__text">
       <sbb-chip-label
-        class="sbb-teaser__chip"
+        class="sbb-teaser__chip-label"
         color="charcoal"
         size="xxs"
       >
@@ -79,7 +79,7 @@ snapshots["sbb-teaser renders after with title level set Shadow DOM"] =
     </span>
     <span class="sbb-teaser__text">
       <sbb-chip-label
-        class="sbb-teaser__chip"
+        class="sbb-teaser__chip-label"
         color="charcoal"
         size="xxs"
       >
@@ -144,7 +144,7 @@ snapshots["sbb-teaser renders below with projected content Shadow DOM"] =
     </span>
     <span class="sbb-teaser__text">
       <sbb-chip-label
-        class="sbb-teaser__chip"
+        class="sbb-teaser__chip-label"
         color="charcoal"
         size="xxs"
       >

diff --git a/src/elements/teaser/readme.md b/src/elements/teaser/readme.md
@@ -17,7 +17,7 @@ Simple teaser example:
 ## Slots
 
 The default slot is reserved for the description. The component displays the `image` and the `title` with the self-named slots.
-It's also possible to display a [sbb-chip](/docs/elements-sbb-chip--docs) using the `chip` slot.
+It's also possible to display a [sbb-chip-label](/docs/elements-sbb-chip-label--docs) using the `chip` slot.
 
 ```html
 <sbb-teaser href="https://www.sbb.ch" title-level="2">
@@ -75,7 +75,7 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 | -------------------- | --------------------- | ------- | ---------------------------------------- | ------------------ | ------------------------------------------------------------------------- |
 | `accessibilityLabel` | `accessibility-label` | public  | `string`                                 | `''`               | This will be forwarded as aria-label to the inner anchor element.         |
 | `alignment`          | `alignment`           | public  | `'after-centered' \| 'after' \| 'below'` | `'after-centered'` | Teaser variant - define the position and the alignment of the text block. |
-| `chipContent`        | `chip-content`        | public  | `string`                                 | `''`               | Content of chip.                                                          |
+| `chipContent`        | `chip-content`        | public  | `string`                                 | `''`               | Content of chip label.                                                    |
 | `download`           | `download`            | public  | `boolean`                                | `false`            | Whether the browser will show the download dialog on click.               |
 | `href`               | `href`                | public  | `string`                                 | `''`               | The href value you want to link to.                                       |
 | `rel`                | `rel`                 | public  | `string`                                 | `''`               | The relationship of the linked URL as space-separated link types.         |
@@ -88,6 +88,6 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 | Name    | Description                                     |
 | ------- | ----------------------------------------------- |
 |         | Use the unnamed slot to render the description. |
-| `chip`  | Slot used to render the sbb-chip label.         |
+| `chip`  | Slot used to render the sbb-chip-label.         |
 | `image` | Slot used to render the image.                  |
 | `title` | Slot used to render the title.                  |
diff --git a/src/elements/teaser/teaser.scss b/src/elements/teaser/teaser.scss
@@ -111,7 +111,7 @@
   }
 }
 
-.sbb-teaser__chip {
+.sbb-teaser__chip-label {
   display: block;
   max-width: fit-content;
   margin-block-end: var(--sbb-spacing-fixed-1x);

diff --git a/src/elements/teaser/teaser.ts b/src/elements/teaser/teaser.ts
@@ -15,7 +15,7 @@ import '../title.js';
  * It displays an interactive image with caption.
  *
  * @slot image - Slot used to render the image.
- * @slot chip - Slot used to render the sbb-chip label.
+ * @slot chip - Slot used to render the sbb-chip-label.
  * @slot title - Slot used to render the title.
  * @slot - Use the unnamed slot to render the description.
  */
@@ -37,7 +37,7 @@ class SbbTeaserElement extends SbbLinkBaseElement {
   @property({ attribute: 'title-content' })
   public accessor titleContent: string = '';
 
-  /** Content of chip. */
+  /** Content of chip label. */
   @forceType()
   @property({ attribute: 'chip-content', reflect: true, converter: omitEmptyConverter })
   public accessor chipContent: string = '';
@@ -49,7 +49,7 @@ class SbbTeaserElement extends SbbLinkBaseElement {
           <slot name="image"></slot>
         </span>
         <span class="sbb-teaser__text">
-          <sbb-chip-label size="xxs" color="charcoal" class="sbb-teaser__chip">
+          <sbb-chip-label size="xxs" color="charcoal" class="sbb-teaser__chip-label">
             <slot name="chip">${this.chipContent}</slot>
           </sbb-chip-label>
           <sbb-title level=${this.titleLevel} visual-level="5" class="sbb-teaser__lead">

diff --git a/...al-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.scss b/...al-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.scss
@@ -12,11 +12,11 @@ sbb-chip-label {
 }
 
 sbb-chip-label[color='custom-green'] {
-  --sbb-chip-color: var(--sbb-color-white);
-  --sbb-chip-background-color: var(--sbb-color-green);
+  --sbb-chip-label-color: var(--sbb-color-white);
+  --sbb-chip-label-background-color: var(--sbb-color-green);
 }
 
 sbb-chip-label[color='custom-red'] {
-  --sbb-chip-color: var(--sbb-color-white);
-  --sbb-chip-background-color: var(--sbb-color-red125);
+  --sbb-chip-label-color: var(--sbb-color-white);
+  --sbb-chip-label-background-color: var(--sbb-color-red125);
 }