fix(segmented-button): adjusted code from comments and fixed snap

Author: glebbo-dev

packages/components/src/components/segmented-button/__snapshots__/segmented-button.spec.ts.snap

@@ -7,10 +7,10 @@ exports[`SegmentedButton should match selected button snapshot 1`] = `
       <slot></slot>
     </div>
   </mock:shadow-root>
-  <scale-segment adjacent-siblings="right" aria-description-translation="$position $selected" position="1" selected="true" selected-index="-1" size="small">
+  <scale-segment adjacent-siblings="right" aria-description-translation="$position $selected" position="0" selected="true" selected-index="-1" size="small">
     Label
   </scale-segment>
-  <scale-segment adjacent-siblings="left" aria-description-translation="$position $selected" position="2" selected="true" selected-index="-1" size="small">
+  <scale-segment adjacent-siblings="left" aria-description-translation="$position $selected" position="1" selected="true" selected-index="-1" size="small">
     Label
   </scale-segment>
 </scale-segmented-button>
@@ -23,6 +23,9 @@ exports[`SegmentedButton should match standard snapshot 1`] = `
       <slot></slot>
     </div>
   </mock:shadow-root>
+  <scale-segment adjacent-siblings="" aria-description-translation="$position $selected" position="0" selected="false" selected-index="-1" size="small">
+    Label
+  </scale-segment>
   <scale-segment adjacent-siblings="" aria-description-translation="$position $selected" position="1" selected="false" selected-index="-1" size="small">
     Label
   </scale-segment>
@@ -32,8 +35,5 @@ exports[`SegmentedButton should match standard snapshot 1`] = `
   <scale-segment adjacent-siblings="" aria-description-translation="$position $selected" position="3" selected="false" selected-index="-1" size="small">
     Label
   </scale-segment>
-  <scale-segment adjacent-siblings="" aria-description-translation="$position $selected" position="4" selected="false" selected-index="-1" size="small">
-    Label
-  </scale-segment>
 </scale-segmented-button>
 `;

packages/components/src/components/segmented-button/segmented-button.tsx

@@ -15,7 +15,6 @@ import {
   h,
   Host,
   Element,
-  State,
   Listen,
   Event,
   EventEmitter,
@@ -45,8 +44,6 @@ export class SegmentedButton {
   slottedSegments = 0;
 
   @Element() hostElement: HTMLElement;
-  /** state */
-  @State() status: SegmentStatus[] = [];
   /** (optional) The size of the button */
   @Prop() size?: 'small' | 'medium' | 'large' = 'small';
   /** (optional) Allow more than one button to be selected */
@@ -79,9 +76,6 @@ export class SegmentedButton {
   showHelperText = false;
   @Listen('scaleClick')
   scaleClickHandler(ev: { detail: { id: string; selected: boolean } }) {
-    if (this.status.length === 0) {
-      return;
-    }
     let tempState = this.getAllSegments().map((segment) => {
       return {
         id: segment.getAttribute('segment-id') || segment.segmentId,
@@ -158,15 +152,11 @@ export class SegmentedButton {
   }
 
   componentWillUpdate() {
-    this.selectedIndex = this.getSelectedIndex();
     this.showHelperText = this.shouldShowHelperText();
   }
   shouldShowHelperText() {
     let showHelperText = false;
-    if (
-      this.invalid &&
-      this.status.filter((e) => e.selected === true).length <= 0
-    ) {
+    if (this.invalid && this.selectedIndex < 0) {
       showHelperText = true;
     }
     return showHelperText;
@@ -246,9 +236,9 @@ export class SegmentedButton {
         tempState[i].selected ? 'true' : 'false'
       );
     });
-    this.status = tempState;
+    this.selectedIndex = this.getSelectedIndex();
     if (!isInitial) {
-      emitEvent(this, 'scaleChange', { status: this.status, segments });
+      emitEvent(this, 'scaleChange', { segments });
     }
   }