fix(segment): remove segment-view-id

Author: Tanner Reits

core/src/components.d.ts

@@ -2678,10 +2678,6 @@ export namespace Components {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable": boolean;
-        /**
-          * The `id` of the segment view that this segment component should be linked to.
-         */
-        "segmentViewId"?: string;
         /**
           * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
          */
@@ -7487,10 +7483,6 @@ declare namespace LocalJSX {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable"?: boolean;
-        /**
-          * The `id` of the segment view that this segment component should be linked to.
-         */
-        "segmentViewId"?: string;
         /**
           * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
          */

core/src/components/segment/segment.tsx

@@ -132,11 +132,6 @@ export class Segment implements ComponentInterface {
    */
   @Prop() selectOnFocus = false;
 
-  /**
-   * The `id` of the segment view that this segment component should be linked to.
-   */
-  @Prop() segmentViewId?: string;
-
   /**
    * Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.
    *
@@ -366,23 +361,13 @@ export class Segment implements ComponentInterface {
   }
 
   private getSegmentView() {
-    if (!this.segmentViewId) {
-      return null;
-    }
-
-    const segmentViewEl = document.getElementById(this.segmentViewId);
-
-    if (!segmentViewEl) {
-      console.warn(`Segment: Unable to find 'ion-segment-view' with id="${this.segmentViewId}"`);
-      return null;
-    }
-
-    if (segmentViewEl.tagName !== 'ION-SEGMENT-VIEW') {
-      console.warn(`Segment: Element with id="${this.segmentViewId}" is not an <ion-segment-view> element.`);
-      return null;
-    }
-
-    return segmentViewEl as HTMLIonSegmentViewElement;
+    const buttons = this.getButtons();
+    // Get the first button with a contentId
+    const firstContentId = buttons.find((button: HTMLIonSegmentButtonElement) => button.contentId);
+    // Get the segment content with an id matching the button's contentId
+    const segmentContent = document.querySelector(`ion-segment-content[id="${firstContentId?.contentId}"]`);
+    // Return the segment view for that matching segment content
+    return segmentContent?.closest('ion-segment-view');
   }
 
   @Listen('ionSegmentViewScroll', { target: 'body' })

packages/angular/src/directives/proxies.ts

@@ -1952,14 +1952,14 @@ This event will not emit when programmatically setting the `value` property.
 
 
 @ProxyCmp({
-  inputs: ['color', 'disabled', 'mode', 'scrollable', 'segmentViewId', 'selectOnFocus', 'swipeGesture', 'value']
+  inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value']
 })
 @Component({
   selector: 'ion-segment',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'mode', 'scrollable', 'segmentViewId', 'selectOnFocus', 'swipeGesture', 'value'],
+  inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'],
 })
 export class IonSegment {
   protected el: HTMLElement;

packages/vue/src/proxies.ts

@@ -738,7 +738,6 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment, JSX.IonS
   'swipeGesture',
   'value',
   'selectOnFocus',
-  'segmentViewId',
   'ionChange',
   'ionSelect',
   'ionStyle'