fix: review

sbb-design-systems · May 24, 2024 · 99cf963 · 99cf963
1 parent ca1469c
commit 99cf963
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 62 deletions.
diff --git a/src/components/stepper/step-label/__snapshots__/step-label.spec.snap.js b/src/components/stepper/step-label/__snapshots__/step-label.spec.snap.js
@@ -1,7 +1,22 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-step-label renders"] = 
+snapshots["sbb-step-label renders - Dom"] = 
+`<sbb-step-label
+  data-action=""
+  data-button=""
+  dir="ltr"
+  id="sbb-step-label-0"
+  role="tab"
+  slot="step-label"
+  tabindex="0"
+>
+  Label
+</sbb-step-label>
+`;
+/* end snapshot sbb-step-label renders - Dom */
+
+snapshots["sbb-step-label renders - ShadomDom"] = 
 `<div class="sbb-step-label">
   <span class="sbb-step-label__prefix">
     <slot name="icon">
@@ -13,9 +28,25 @@ snapshots["sbb-step-label renders"] =
   </span>
 </div>
 `;
-/* end snapshot sbb-step-label renders collapsed */
+/* end snapshot sbb-step-label renders - ShadomDom */
 
-snapshots["sbb-step-label renders with icon"] = 
+snapshots["sbb-step-label renders with icon - Dom"] = 
+`<sbb-step-label
+  data-action=""
+  data-button=""
+  dir="ltr"
+  icon-name="tick-small"
+  id="sbb-step-label-2"
+  role="tab"
+  slot="step-label"
+  tabindex="0"
+>
+  Label
+</sbb-step-label>
+`;
+/* end snapshot sbb-step-label renders with icon - Dom */
+
+snapshots["sbb-step-label renders with icon - ShadowDom"] = 
 `<div class="sbb-step-label">
   <span class="sbb-step-label__prefix">
     <slot name="icon">
@@ -34,9 +65,26 @@ snapshots["sbb-step-label renders with icon"] =
   </span>
 </div>
 `;
-/* end snapshot sbb-step-label renders with icon" */
+/* end snapshot sbb-step-label renders with icon - ShadowDom */
+
+snapshots["sbb-step-label renders disabled - Dom"] = 
+`<sbb-step-label
+  aria-disabled="true"
+  data-action=""
+  data-button=""
+  data-disabled=""
+  dir="ltr"
+  disabled=""
+  id="sbb-step-label-4"
+  role="tab"
+  slot="step-label"
+>
+  Label
+</sbb-step-label>
+`;
+/* end snapshot sbb-step-label renders disabled - Dom */
 
-snapshots["sbb-step-label renders disabled"] = 
+snapshots["sbb-step-label renders disabled - ShadowDom"] = 
 `<div class="sbb-step-label">
   <span class="sbb-step-label__prefix">
     <slot name="icon">
@@ -48,7 +96,7 @@ snapshots["sbb-step-label renders disabled"] =
   </span>
 </div>
 `;
-/* end snapshot sbb-step-label renders disabled" */
+/* end snapshot sbb-step-label renders disabled - ShadowDom */
 
 snapshots["sbb-step-label A11y tree Chrome"] = 
 `<p>
@@ -82,19 +130,3 @@ snapshots["sbb-step-label A11y tree Firefox"] =
 `;
 /* end snapshot sbb-step-label A11y tree Firefox */
 
-snapshots["sbb-step-label A11y tree Safari"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "tab",
-      "name": "Label"
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-step-label A11y tree Safari */
-
diff --git a/src/components/stepper/step-label/step-label.spec.ts b/src/components/stepper/step-label/step-label.spec.ts
@@ -6,57 +6,33 @@ import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 import './step-label.js';
 
 describe('sbb-step-label', () => {
-  it('renders', async () => {
+  it('renders - Dom', async () => {
     const root = await fixture(html`<sbb-step-label>Label</sbb-step-label>`);
+    await expect(root).dom.to.be.equalSnapshot();
+  });
 
-    expect(root).dom.to.be.equal(`
-        <sbb-step-label
-            data-action
-            data-button
-            dir="ltr"
-            id="sbb-step-label-0"
-            role="tab"
-            slot="step-label"
-            tabindex="0"
-        >Label</sbb-step-label>
-    `);
+  it('renders - ShadomDom', async () => {
+    const root = await fixture(html`<sbb-step-label>Label</sbb-step-label>`);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
-  it('renders with icon', async () => {
+  it('renders with icon - Dom', async () => {
     const root = await fixture(html`<sbb-step-label icon-name="tick-small">Label</sbb-step-label>`);
+    await expect(root).dom.to.be.equalSnapshot();
+  });
 
-    expect(root).dom.to.be.equal(`
-        <sbb-step-label
-            data-action
-            data-button
-            dir="ltr"
-            icon-name="tick-small"
-            id="sbb-step-label-1"
-            role="tab"
-            slot="step-label"
-            tabindex="0"
-        >Label</sbb-step-label>
-    `);
+  it('renders with icon - ShadowDom', async () => {
+    const root = await fixture(html`<sbb-step-label icon-name="tick-small">Label</sbb-step-label>`);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
-  it('renders disabled', async () => {
+  it('renders disabled - Dom', async () => {
     const root = await fixture(html`<sbb-step-label disabled>Label</sbb-step-label>`);
+    await expect(root).dom.to.be.equalSnapshot();
+  });
 
-    expect(root).dom.to.be.equal(`
-        <sbb-step-label
-            aria-disabled="true"
-            data-action
-            data-button
-            data-disabled
-            dir="ltr"
-            disabled
-            id="sbb-step-label-2"
-            role="tab"
-            slot="step-label"
-        >Label</sbb-step-label>
-    `);
+  it('renders disabled - ShadowDom', async () => {
+    const root = await fixture(html`<sbb-step-label disabled>Label</sbb-step-label>`);
     await expect(root).shadowDom.to.be.equalSnapshot();
   });
 

diff --git a/src/components/stepper/step/step.scss b/src/components/stepper/step/step.scss
@@ -11,6 +11,7 @@
   --sbb-step-height: 0;
   --sbb-step-animation-duration: var(--sbb-animation-duration-2x);
   --sbb-step-animation-delay: 0;
+  --sbb-step-color: var(--sbb-color-iron);
 
   display: contents;
   position: relative;
@@ -57,7 +58,7 @@
   opacity: var(--sbb-step-opacity);
   visibility: var(--sbb-step-visibility);
   height: var(--sbb-step-height);
-  color: var(--sbb-color-iron);
+  color: var(--sbb-step-color);
   transition: {
     property: opacity, visibility;
     duration: var(--sbb-step-animation-duration);

diff --git a/src/components/stepper/stepper/stepper.stories.ts b/src/components/stepper/stepper/stepper.stories.ts
@@ -90,6 +90,8 @@ const WithSingleFormTemplate = (args: Args): TemplateResult => {
         }
       }}
       @reset=${() => {
+        // This is needed to focus and trigger again the error on the first field
+        // when getting back to it after resetting the stepper.
         setTimeout(() =>
           document.querySelector('input[name="name"]')?.dispatchEvent(new Event('input')),
         );
@@ -207,6 +209,8 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => {
         <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">
           <form
             @reset=${() => {
+              // This is needed to focus and trigger again the error on the first field
+              // when getting back to it after resetting the stepper.
               setTimeout(() =>
                 document.querySelector('input[name="name"]')?.dispatchEvent(new Event('input')),
               );

diff --git a/src/components/stepper/stepper/stepper.ts b/src/components/stepper/stepper/stepper.ts
@@ -219,6 +219,7 @@ export class SbbStepperElement extends LitElement {
       this.orientation = isBreakpoint(this.horizontalFrom) ? 'horizontal' : 'vertical';
       this._updateLabels();
     }
+    // The timeout is needed to make sure that the marker takes the correct step-label size.
     setTimeout(() => this._setMarkerSize(), 0);
   }