fix(core/workflow): add flexible layout (#1219)

Co-authored-by: Daniel Leroux <[email protected]>

.changeset/wise-games-relate.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/workflow): add flexible layout

packages/core/src/components/workflow-step/workflow-step.scss

@@ -10,19 +10,34 @@
 @import 'common-variables';
 @import 'mixins/shadow-dom/component';
 
+:host(:not(.host-vertical)) {
+  width: 12rem;
+  height: 4rem;
+  min-width: 2rem;
+  min-height: 4rem;
+  max-width: 12rem;
+}
+
+:host(.host-vertical) {
+  width: 100%;
+  height: 4rem;
+  min-width: 4rem;
+  min-height: 2rem;
+  max-height: 12rem;
+}
+
 :host {
   @include ix-component;
+  display: inline-block;
+  position: relative;
 
   .step {
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: var(--theme-workflow-step--background);
     border-radius: var(--theme-workflow--border-radius);
-    width: auto;
     padding: 1.125rem 0 $small-space 0;
-    height: 4rem;
-    width: 12.75rem;
 
     .wrapper {
       display: flex;
@@ -52,7 +67,7 @@
 
         &.selected {
           background-color: var(
-            --theme-workflow-step-icon-default--color--selected
+              --theme-workflow-step-icon-default--color--selected
           );
         }
 
@@ -61,7 +76,7 @@
 
           &.selected {
             background-color: var(
-              --theme-workflow-step-icon-done--color--selected
+                --theme-workflow-step-icon-done--color--selected
             );
           }
         }
@@ -93,18 +108,24 @@
 
     .text {
       margin-top: $default-space;
-      width: auto;
+      width: 100%;
       padding: 0 $small-space;
+
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      text-align: center;
     }
 
     &.vertical {
       flex-direction: row;
       padding: 0;
+      height: 100%;
 
       .wrapper {
         width: auto;
         padding-left: 1.125rem;
-        height: 4rem;
+        height: 100%;
 
         .line {
           width: 0.125rem;
@@ -127,9 +148,9 @@
       }
 
       .text {
-        margin-top: 0;
-        margin-left: $default-space;
+        margin: 0 $default-space;
         padding: 0;
+        width: auto;
       }
     }
 

packages/core/src/components/workflow-step/workflow-step.tsx

@@ -157,7 +157,10 @@ export class WorkflowStep {
     ) : null;
 
     return (
-      <Host onClick={() => this.onStepClick()}>
+      <Host
+        class={{ 'host-vertical': this.vertical }}
+        onClick={() => this.onStepClick()}
+      >
         <div
           tabIndex={0}
           class={{

packages/core/src/components/workflow-steps/workflow-steps.scss

@@ -12,12 +12,18 @@
 
 :host {
   @include ix-component;
+  display: block;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  min-width: 2rem;
 
   .steps {
     display: flex;
+    height: 100%;
 
     &.vertical {
-      display: block;
+      flex-direction: column;
     }
   }
 }