feat: add long labels

sbb-design-systems · Mar 15, 2024 · 6b18dc2 · 6b18dc2
1 parent 3aca1ec
commit 6b18dc2
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/src/components/stepper/step-label/step-label.scss b/src/components/stepper/step-label/step-label.scss
@@ -9,8 +9,6 @@
   --sbb-step-label-prefix-size: #{sbb.px-to-rem-build(36)};
   --sbb-step-label-prefix-border-style: solid;
   --sbb-step-label-prefix-background-color: var(--sbb-color-white);
-
-  position: relative;
 }
 
 :host([data-selected]) {
@@ -63,6 +61,8 @@
 }
 
 .sbb-step-label__text {
+  @include sbb.ellipsis;
+
   text-wrap: nowrap;
 }
 

diff --git a/src/components/stepper/stepper/stepper.scss b/src/components/stepper/stepper/stepper.scss
@@ -73,6 +73,8 @@
 ::slotted(sbb-step-label) {
   @include sbb.text-xxs--regular;
 
+  position: relative;
+  min-width: 0;
   max-width: fit-content;
 
   :host([orientation='vertical']) & {

diff --git a/src/components/stepper/stepper/stepper.stories.ts b/src/components/stepper/stepper/stepper.stories.ts
@@ -117,6 +117,46 @@ const Template = (args: Args): TemplateResult => html`
   </sbb-stepper>
 `;
 
+const LongLabelsTemplate = (args: Args): TemplateResult => html`
+  <sbb-stepper ${sbbSpread(args)} aria-label="Purpose of this flow" selected-index="0">
+    <sbb-step-label
+      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</sbb-step-label
+    >
+    <sbb-step>
+      <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">First step content.</div>
+      <sbb-button size="m" sbb-stepper-next>Next</sbb-button>
+    </sbb-step>
+    <sbb-step-label
+      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</sbb-step-label
+    >
+    <sbb-step>
+      <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">Second step content.</div>
+      <sbb-secondary-button size="m" sbb-stepper-previous>Back</sbb-secondary-button>
+      <sbb-button size="m" sbb-stepper-next>Next</sbb-button>
+    </sbb-step>
+    <sbb-step-label
+      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</sbb-step-label
+    >
+    <sbb-step>
+      <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">Third step content.</div>
+      <sbb-secondary-button size="m" sbb-stepper-previous>Back</sbb-secondary-button>
+      <sbb-button size="m" sbb-stepper-next>Next</sbb-button>
+    </sbb-step>
+    <sbb-step-label
+      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</sbb-step-label
+    >
+    <sbb-step>
+      <div style="margin-block-end: var(--sbb-spacing-fixed-4x)">Forth step content.</div>
+      <sbb-secondary-button size="m" sbb-stepper-previous>Back</sbb-secondary-button>
+      <sbb-button size="m" sbb-stepper-next>Submit</sbb-button>
+    </sbb-step>
+  </sbb-stepper>
+`;
+
 export const Default: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
@@ -145,6 +185,12 @@ export const HorizontalFromSmall: StoryObj = {
   },
 };
 
+export const LongLabels: StoryObj = {
+  render: LongLabelsTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
 const meta: Meta = {
   decorators: [
     (story) => html` <div style="padding: 2rem;">${story()} ${textBlock()}</div> `,