refactor(segment): link the button and content with content-id and id

core/api.txt

@@ -1541,6 +1541,7 @@ ion-segment,css-prop,--background,ios
 ion-segment,css-prop,--background,md
 
 ion-segment-button,shadow
+ion-segment-button,prop,contentId,string | undefined,undefined,false,true
 ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
@@ -1609,6 +1610,7 @@ ion-segment-button,part,native
 ion-segment-content,shadow
 
 ion-segment-view,shadow
+ion-segment-view,method,setContent,setContent(id: string) => Promise<void>
 
 ion-select,shadow
 ion-select,prop,cancelText,string,'Cancel',false,false

core/src/components.d.ts

@@ -2690,6 +2690,10 @@ export namespace Components {
         "value"?: SegmentValue;
     }
     interface IonSegmentButton {
+        /**
+          * The `id` of the segment content.
+         */
+        "contentId"?: string;
         /**
           * If `true`, the user cannot interact with the segment button.
          */
@@ -2715,6 +2719,7 @@ export namespace Components {
     interface IonSegmentContent {
     }
     interface IonSegmentView {
+        "setContent": (id: string) => Promise<void>;
     }
     interface IonSelect {
         /**
@@ -7465,6 +7470,10 @@ declare namespace LocalJSX {
         "value"?: SegmentValue;
     }
     interface IonSegmentButton {
+        /**
+          * The `id` of the segment content.
+         */
+        "contentId"?: string;
         /**
           * If `true`, the user cannot interact with the segment button.
          */

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

@@ -36,6 +36,11 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
 
   @State() checked = false;
 
+  /**
+   * The `id` of the segment content.
+   */
+  @Prop({ reflect: true }) contentId?: string;
+
   /**
    * If `true`, the user cannot interact with the segment button.
    */

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

@@ -4,6 +4,8 @@
 :host {
   display: flex;
 
+  height: 100%;
+
   overflow-x: scroll;
   scroll-snap-type: x mandatory;
 

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

@@ -1,6 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Listen, h } from '@stencil/core';
-import { addEventListener, removeEventListener } from '@utils/helpers';
+import { Component, Element, Host, Listen, Method, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-segment-view',
@@ -8,76 +7,59 @@ import { addEventListener, removeEventListener } from '@utils/helpers';
   shadow: true,
 })
 export class SegmentView implements ComponentInterface {
-  private segmentEl: HTMLIonSegmentElement | null = null;
-
   @Element() el!: HTMLElement;
 
   @Listen('scroll')
-  segmentViewScroll(ev: any) {
-    const { segmentEl } = this;
+  handleScroll(ev: any) {
+    const { scrollLeft, offsetWidth } = ev.target;
+    const atSnappingPoint = scrollLeft % offsetWidth === 0;
 
-    const atSnappingPoint = ev.target.scrollLeft % ev.target.offsetWidth === 0;
+    if (!atSnappingPoint) return;
 
-    if (atSnappingPoint) {
-      const index = Math.round(ev.target.scrollLeft / ev.target.offsetWidth);
-      const segmentButton = this.getSegmentButtonAtIndex(index);
+    const index = Math.round(scrollLeft / offsetWidth);
+    const segmentContent = this.getSegmentContentAtIndex(index);
 
-      if (segmentEl) {
-        segmentEl.value = segmentButton.value;
-      }
-    }
+    if (segmentContent === null || segmentContent === undefined) {
+      return;
     }
 
-  connectedCallback() {
-    const segmentEl = (this.segmentEl = document.querySelector(`ion-segment[view=${this.el.id}]`));
-    if (segmentEl) {
-      addEventListener(segmentEl, 'ionChange', this.updateSection);
+    const segmentButton = this.getSegmentButtonById(segmentContent.id) as HTMLIonSegmentButtonElement;
+    const segment = this.getParentSegment(segmentButton);
+
+    if (segment) {
+      segment.value = segmentButton.value;
     }
   }
 
-  disconnectedCallback() {
-    const segmentEl = this.segmentEl;
-    if (segmentEl) {
-      removeEventListener(segmentEl, 'ionChange', this.updateSection);
-      this.segmentEl = null;
-    }
-  }
+  @Method()
+  async setContent(id: string) {
+    const contents = this.getSegmentContents();
+    const index = contents.findIndex((content) => content.id === id);
 
-  private updateSection = () => {
-    const { segmentEl } = this;
+    if (index === -1) return;
 
-    if (segmentEl) {
-      const value = segmentEl.value;
-      const index = this.getSegmentButtonIndexWithValue(value);
-      this.setSection(index);
-    }
-  };
-
-  private setSection = (index: number) => {
-    const sectionWidth = this.el.offsetWidth;
+    const contentWidth = this.el.offsetWidth;
     this.el.scrollTo({
       top: 0,
-      left: index * sectionWidth,
+      left: index * contentWidth,
       behavior: 'smooth',
     });
-  };
-
-  private getSegmentButtons(): HTMLIonSegmentButtonElement[] {
-    const { segmentEl } = this;
-
-    if (!segmentEl) {
-      return [];
   }
 
-    return Array.from(segmentEl.querySelectorAll('ion-segment-button'));
+  private getSegmentContents(): HTMLIonSegmentContentElement[] {
+    return Array.from(this.el.querySelectorAll('ion-segment-content'));
   }
 
-  private getSegmentButtonAtIndex(index: number) {
-    return this.getSegmentButtons()[index];
+  private getSegmentContentAtIndex(index: number) {
+    return this.getSegmentContents()[index];
   }
 
-  private getSegmentButtonIndexWithValue(value: any) {
-    return this.getSegmentButtons().findIndex((b) => b.value === value);
+  private getSegmentButtonById(id: string) {
+    return document.querySelector(`ion-segment-button[content-id="${id}"]`);
+  }
+
+  private getParentSegment(button: Element) {
+    return button.closest('ion-segment');
   }
 
   render() {

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

@@ -12,37 +12,56 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      ion-segment-view {
+        height: 200px;
+      }
+
+      ion-segment-content:nth-of-type(even) {
+        background: lightblue;
+      }
+
+      ion-segment-content:nth-of-type(odd) {
+        background: lightpink;
+      }
+    </style>
   </head>
 
-  <body onload="listenForEvent()">
+  <body>
     <ion-app>
       <ion-header>
         <ion-toolbar>
           <ion-title>Segment View - Basic</ion-title>
         </ion-toolbar>
+      </ion-header>
 
+      <ion-content>
         <ion-toolbar>
-          <ion-segment view="myView" value="Paid">
-            <ion-segment-button value="Paid">
+          <ion-segment value="Paid">
+            <ion-segment-button content-id="paid" value="Paid">
               <ion-label>Paid</ion-label>
             </ion-segment-button>
-            <ion-segment-button value="Free">
+            <ion-segment-button content-id="free" value="Free">
               <ion-label>Free</ion-label>
             </ion-segment-button>
-            <ion-segment-button value="Top">
+            <ion-segment-button content-id="top" value="Top">
               <ion-label>Top</ion-label>
             </ion-segment-button>
           </ion-segment>
         </ion-toolbar>
-      </ion-header>
-
-      <ion-content>
-        <ion-segment-view id="myView">
-          <ion-segment-content> Paid </ion-segment-content>
-          <ion-segment-content> Free </ion-segment-content>
-          <ion-segment-content> Top </ion-segment-content>
+        <ion-segment-view>
+          <ion-segment-content id="paid">Paid</ion-segment-content>
+          <ion-segment-content id="free">Free</ion-segment-content>
+          <ion-segment-content id="top">Top</ion-segment-content>
         </ion-segment-view>
       </ion-content>
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
     </ion-app>
   </body>
 </html>

core/src/components/segment/segment.tsx

@@ -307,6 +307,7 @@ export class Segment implements ComponentInterface {
 
     this.value = current.value;
     this.setCheckedClasses();
+    this.updateSegmentView();
   }
 
   private setCheckedClasses() {
@@ -322,6 +323,24 @@ export class Segment implements ComponentInterface {
     }
   }
 
+  private updateSegmentView() {
+    const buttons = this.getButtons();
+    const button = buttons.find((btn) => btn.value === this.value);
+
+    // If the button does not have a contentId then there is
+    // no associated segment view to update
+    if (!button?.contentId) {
+      return;
+    }
+
+    const content = document.getElementById(button.contentId);
+    const segmentView = content?.closest('ion-segment-view');
+
+    if (segmentView) {
+      segmentView.setContent(button.contentId);
+    }
+  }
+
   private scrollActiveButtonIntoView(smoothScroll = true) {
     const { scrollable, value, el } = this;
 

packages/angular/src/directives/proxies.ts

@@ -1984,14 +1984,14 @@ This event will not emit when programmatically setting the `value` property.
 
 
 @ProxyCmp({
-  inputs: ['disabled', 'layout', 'mode', 'type', 'value']
+  inputs: ['contentId', 'disabled', 'layout', 'mode', 'type', 'value']
 })
 @Component({
   selector: 'ion-segment-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled', 'layout', 'mode', 'type', 'value'],
+  inputs: ['contentId', 'disabled', 'layout', 'mode', 'type', 'value'],
 })
 export class IonSegmentButton {
   protected el: HTMLElement;
@@ -2027,6 +2027,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
 
 
 @ProxyCmp({
+  methods: ['setContent']
 })
 @Component({
   selector: 'ion-segment-view',

packages/angular/standalone/src/directives/proxies.ts

@@ -1818,14 +1818,14 @@ export declare interface IonRow extends Components.IonRow {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonSegmentButton,
-  inputs: ['disabled', 'layout', 'mode', 'type', 'value']
+  inputs: ['contentId', 'disabled', 'layout', 'mode', 'type', 'value']
 })
 @Component({
   selector: 'ion-segment-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled', 'layout', 'mode', 'type', 'value'],
+  inputs: ['contentId', 'disabled', 'layout', 'mode', 'type', 'value'],
   standalone: true
 })
 export class IonSegmentButton {
@@ -1864,7 +1864,8 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
 
 
 @ProxyCmp({
-  defineCustomElementFn: defineIonSegmentView
+  defineCustomElementFn: defineIonSegmentView,
+  methods: ['setContent']
 })
 @Component({
   selector: 'ion-segment-view',

packages/vue/src/proxies.ts

@@ -746,6 +746,7 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment, JSX.IonS
 
 
 export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButton, JSX.IonSegmentButton["value"]>('ion-segment-button', defineIonSegmentButton, [
+  'contentId',
   'disabled',
   'layout',
   'type',