refactor(segment): add missing lifecycle hook and fix helper text dis…

…play
telekom · Oct 17, 2024 · 42ae0a6 · 42ae0a6
1 parent c883847
commit 42ae0a6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 6 deletions.
diff --git a/packages/components/src/components/segment/segment.tsx b/packages/components/src/components/segment/segment.tsx
@@ -84,7 +84,9 @@ export class Segment {
   async setFocus() {
     this.focusableElement.focus();
   }
-
+  componentWillLoad() {
+    this.handleIcon();
+  }
   componentWillUpdate() {
     this.handleIcon();
   }

diff --git a/packages/components/src/components/segmented-button/segmented-button.tsx b/packages/components/src/components/segmented-button/segmented-button.tsx
@@ -136,6 +136,7 @@ export class SegmentedButton {
     });
     this.setState(tempState);
     this.selectedIndex = this.getSelectedIndex();
+    this.showHelperText = this.shouldShowHelperText();
   }
   componentDidLoad() {
     const longestButtonWidth = this.getLongestButtonWidth();
@@ -153,13 +154,17 @@ export class SegmentedButton {
 
   componentWillUpdate() {
     this.selectedIndex = this.getSelectedIndex();
-    this.showHelperText = false;
+    this.showHelperText = this.shouldShowHelperText();
+  }
+  shouldShowHelperText() {
+    let showHelperText = false;
     if (
       this.invalid &&
       this.status.filter((e) => e.selected === true).length <= 0
     ) {
-      this.showHelperText = true;
+      showHelperText = true;
     }
+    return showHelperText;
   }
 
   getSelectedIndex() {

diff --git a/packages/components/src/html/segment-button.html b/packages/components/src/html/segment-button.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
     />
-    <title>Loading spinners</title>
+    <title>Segment Buttons</title>
 
     <script type="module" src="build/scale-components.esm.js"></script>
     <script nomodule src="build/scale-components.js"></script>
@@ -15,6 +15,7 @@
       section {
         padding: 1rem;
       }
+
       .bg-black {
         background: black;
         color: white;
@@ -32,17 +33,48 @@
         <scale-segment>Huawei</scale-segment>
       </scale-segmented-button>
     </scale-collapsible>
-
+    <div style="height: 20px"></div>
     <scale-segmented-button>
       <scale-segment>Apple</scale-segment>
       <scale-segment>One+</scale-segment>
       <scale-segment>Samsung</scale-segment>
       <scale-segment>Huawei</scale-segment>
     </scale-segmented-button>
-
+    <div style="height: 20px"></div>
     <scale-segmented-button>
       <scale-segment selected>Label</scale-segment>
       <scale-segment selected>Label</scale-segment>
     </scale-segmented-button>
+    <div style="height: 20px"></div>
+    <scale-segmented-button invalid>
+      <scale-segment>
+        <scale-icon-device-device-phone slot="segment-icon">
+        </scale-icon-device-device-phone>
+        Apple
+      </scale-segment>
+      <scale-segment>
+        <scale-icon-device-device-phone slot="segment-icon">
+        </scale-icon-device-device-phone>
+        One+
+      </scale-segment>
+      <scale-segment>
+        <scale-icon-device-device-phone slot="segment-icon">
+        </scale-icon-device-device-phone>
+        Samsung
+      </scale-segment>
+      <scale-segment>
+        <scale-icon-device-device-phone slot="segment-icon">
+        </scale-icon-device-device-phone>
+        Huawei
+      </scale-segment>
+    </scale-segmented-button>
+    <div style="height: 20px"></div>
+
+    <scale-segmented-button multi-select>
+      <scale-segment selected>Apple</scale-segment>
+      <scale-segment selected>One+</scale-segment>
+      <scale-segment>Samsung</scale-segment>
+      <scale-segment>Huawei</scale-segment>
+    </scale-segmented-button>
   </body>
 </html>