fix(segment): update segment content to disabled when button is

Author: brandyscarney

core/src/components/segment-button/segment-button.tsx

@@ -72,6 +72,27 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
       addEventListener(segmentEl, 'ionSelect', this.updateState);
       addEventListener(segmentEl, 'ionStyle', this.updateStyle);
     }
+
+    // Return if there is no contentId defined
+    if (!this.contentId) return;
+
+    // Attempt to find the Segment Content by its contentId
+    const segmentContent = document.getElementById(this.contentId) as HTMLIonSegmentContentElement | null;
+
+    // If no associated Segment Content exists, log an error and return
+    if (!segmentContent) {
+      console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+      return;
+    }
+
+    // Ensure the found element is a valid ION-SEGMENT-CONTENT
+    if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
+      console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
+      return;
+    }
+
+    // Set the disabled state of the Segment Content based on the button's disabled state
+    segmentContent.disabled = this.disabled;
   }
 
   disconnectedCallback() {

core/src/components/segment-view/segment-view.tsx

@@ -82,6 +82,8 @@ export class SegmentView implements ComponentInterface {
     }
 
     // Update active content ID and scroll to the segment content
+    // TODO this is erroring because all of the segment contents are disabled
+    // in the last example
     this.activeContentId = segmentContent.id;
     this.setContent(segmentContent.id);
 

core/src/components/segment-view/test/disabled/index.html

@@ -60,7 +60,7 @@
           </ion-segment-button>
         </ion-segment>
         <ion-segment-view>
-          <ion-segment-content disabled id="all">All</ion-segment-content>
+          <ion-segment-content id="all">All</ion-segment-content>
           <ion-segment-content id="favorites">Favorites</ion-segment-content>
         </ion-segment-view>
 
@@ -77,7 +77,7 @@
         </ion-segment>
         <ion-segment-view>
           <ion-segment-content id="paid">Paid</ion-segment-content>
-          <ion-segment-content disabled id="free">Free</ion-segment-content>
+          <ion-segment-content id="free">Free</ion-segment-content>
           <ion-segment-content id="top">Top</ion-segment-content>
         </ion-segment-view>
 
@@ -97,8 +97,8 @@
         </ion-segment>
         <ion-segment-view>
           <ion-segment-content id="a">a</ion-segment-content>
-          <ion-segment-content disabled id="b">b</ion-segment-content>
-          <ion-segment-content disabled id="c">c</ion-segment-content>
+          <ion-segment-content id="b">b</ion-segment-content>
+          <ion-segment-content id="c">c</ion-segment-content>
           <ion-segment-content id="d">d</ion-segment-content>
         </ion-segment-view>