fix: long labels on vertical orientation

sbb-design-systems · Mar 16, 2024 · 9df4fba · 9df4fba
1 parent 62089ac
commit 9df4fba
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/src/components/stepper/step-label/step-label.scss b/src/components/stepper/step-label/step-label.scss
@@ -47,29 +47,39 @@
   @include sbb.text-l--bold;
 
   cursor: pointer;
+  position: relative;
   display: flex;
-  align-items: center;
   gap: var(--sbb-spacing-fixed-4x);
   color: var(--sbb-step-label-color);
 }
 
 .sbb-step-label__prefix {
+  position: relative;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  min-width: var(--sbb-step-label-prefix-size);
-  min-height: var(--sbb-step-label-prefix-size);
+  width: var(--sbb-step-label-prefix-size);
+  height: var(--sbb-step-label-prefix-size);
   border-radius: 50%;
   border: var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style)
     var(--sbb-step-label-prefix-border-color);
   background-color: var(--sbb-step-label-prefix-background-color);
+  inset-block-start: calc(
+    1em * (var(--sbb-typo-line-height-body-text) / 2) + (var(--sbb-border-width-1x) / 2) -
+      (var(--sbb-step-label-prefix-size) / 2)
+  );
   transition: background-color var(--sbb-animation-duration-6x) ease;
+
+  &::before {
+    content: var(--sbb-step-label-counter);
+  }
 }
 
 .sbb-step-label__text {
-  @include sbb.ellipsis;
-
-  text-wrap: nowrap;
+  :host([data-orientation='horizontal']) & {
+    @include sbb.ellipsis;
+  }
 }
 
 sbb-icon {

diff --git a/src/components/stepper/stepper/stepper.scss b/src/components/stepper/stepper/stepper.scss
@@ -96,10 +96,14 @@
     cursor: pointer;
     position: absolute;
     color: var(--sbb-step-label-color);
-    inset-block-start: calc(var(--sbb-step-label-prefix-size) / 2);
+    inset-block-start: calc(
+      var(--sbb-font-size-text-l) * (var(--sbb-typo-line-height-body-text) / 2) +
+        (var(--sbb-border-width-1x) / 2)
+    );
     inset-inline-start: calc(var(--sbb-step-label-prefix-size) / 2);
     transform: translate(-50%, -50%);
     line-height: 1;
+    z-index: 1;
   }
 }
 

diff --git a/src/components/stepper/stepper/stepper.stories.ts b/src/components/stepper/stepper/stepper.stories.ts
@@ -413,6 +413,12 @@ export const LongLabels: StoryObj = {
   args: { ...defaultArgs },
 };
 
+export const LongLabelsVertical: StoryObj = {
+  render: LongLabelsTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, orientation: orientation.options[1] },
+};
+
 const meta: Meta = {
   decorators: [
     (story) => html` <div style="padding: 2rem;">${story()}</div> `,

diff --git a/src/components/stepper/stepper/stepper.ts b/src/components/stepper/stepper/stepper.ts
@@ -201,6 +201,7 @@ export class SbbStepperElement extends LitElement {
     this.steps.forEach((step) => {
       step.slot = this.orientation === 'horizontal' ? 'step' : 'step-label';
       step.setAttribute('data-orientation', this.orientation);
+      step.label?.setAttribute('data-orientation', this.orientation);
     });
   }