feat(segment): simplify things, prevent disabled

Author: Tanner Reits

core/src/components.d.ts

@@ -2676,6 +2676,10 @@ 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.
          */
@@ -2717,10 +2721,6 @@ export namespace Components {
         "value": SegmentValue;
     }
     interface IonSegmentContent {
-        /**
-          * If `true`, the segment content will not be displayed.
-         */
-        "disabled": boolean;
     }
     interface IonSegmentView {
         /**
@@ -4443,11 +4443,10 @@ declare global {
     };
     interface HTMLIonSegmentViewElementEventMap {
         "ionSegmentViewScroll": {
-    scrollDirection: string;
-    scrollDistance: number;
-    scrollDistancePercentage: number;
+    scrollRatio: number;
+    isManualScroll: boolean;
   };
-        "ionSegmentViewScrollEnd": { activeContentId: string };
+        "ionSegmentViewScrollEnd": void;
         "ionSegmentViewScrollStart": void;
     }
     interface HTMLIonSegmentViewElement extends Components.IonSegmentView, HTMLStencilElement {
@@ -7490,6 +7489,10 @@ 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.
          */
@@ -7530,10 +7533,6 @@ declare namespace LocalJSX {
         "value"?: SegmentValue;
     }
     interface IonSegmentContent {
-        /**
-          * If `true`, the segment content will not be displayed.
-         */
-        "disabled"?: boolean;
     }
     interface IonSegmentView {
         /**
@@ -7544,14 +7543,13 @@ declare namespace LocalJSX {
           * Emitted when the segment view is scrolled.
          */
         "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<{
-    scrollDirection: string;
-    scrollDistance: number;
-    scrollDistancePercentage: number;
+    scrollRatio: number;
+    isManualScroll: boolean;
   }>) => void;
         /**
           * Emitted when the segment view scroll has ended.
          */
-        "onIonSegmentViewScrollEnd"?: (event: IonSegmentViewCustomEvent<{ activeContentId: string }>) => void;
+        "onIonSegmentViewScrollEnd"?: (event: IonSegmentViewCustomEvent<void>) => void;
         "onIonSegmentViewScrollStart"?: (event: IonSegmentViewCustomEvent<void>) => void;
     }
     interface IonSelect {

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

@@ -91,8 +91,11 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
       return;
     }
 
-    // Set the disabled state of the Segment Content based on the button's disabled state
-    segmentContent.disabled = this.disabled;
+    // Prevent buttons from being disabled when associated with segment content
+    if (this.disabled) {
+      console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+      this.disabled = false;
+    }
   }
 
   disconnectedCallback() {

core/src/components/segment-content/segment-content.ios.scss

@@ -3,7 +3,3 @@
 
 // iOS Segment Content
 // --------------------------------------------------
-
-:host(.segment-content-disabled) {
-  opacity: $segment-button-ios-opacity-disabled;
-}

core/src/components/segment-content/segment-content.md.scss

@@ -3,7 +3,3 @@
 
 // Material Design Segment Content
 // --------------------------------------------------
-
-:host(.segment-content-disabled) {
-  opacity: $segment-button-md-opacity-disabled;
-}

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

@@ -3,6 +3,7 @@
 
 :host {
   scroll-snap-align: center;
+  scroll-snap-stop: always;
 
   flex-shrink: 0;
 

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Host, Prop, h } from '@stencil/core';
+import { Component, Host, h } from '@stencil/core';
 
 @Component({
   tag: 'ion-segment-content',
@@ -10,20 +10,9 @@ import { Component, Host, Prop, h } from '@stencil/core';
   shadow: true,
 })
 export class SegmentContent implements ComponentInterface {
-  /**
-   * If `true`, the segment content will not be displayed.
-   */
-  @Prop() disabled = false;
-
   render() {
-    const { disabled } = this;
-
     return (
-      <Host
-        class={{
-          'segment-content-disabled': disabled,
-        }}
-      >
+      <Host>
         <slot></slot>
       </Host>
     );

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

@@ -10,10 +10,9 @@ import { Component, Element, Event, Host, Listen, Method, Prop, h } from '@stenc
   shadow: true,
 })
 export class SegmentView implements ComponentInterface {
-  private initialScrollLeft?: number;
-  private previousScrollLeft = 0;
   private scrollEndTimeout: ReturnType<typeof setTimeout> | null = null;
   private isTouching = false;
+  private isManualScroll = true;
 
   @Element() el!: HTMLElement;
 
@@ -26,61 +25,27 @@ export class SegmentView implements ComponentInterface {
    * Emitted when the segment view is scrolled.
    */
   @Event() ionSegmentViewScroll!: EventEmitter<{
-    scrollDirection: string;
-    scrollDistance: number;
-    scrollDistancePercentage: number;
+    scrollRatio: number;
+    isManualScroll: boolean;
   }>;
 
   /**
    * Emitted when the segment view scroll has ended.
    */
-  @Event() ionSegmentViewScrollEnd!: EventEmitter<{ activeContentId: string }>;
+  @Event() ionSegmentViewScrollEnd!: EventEmitter<void>;
 
   @Event() ionSegmentViewScrollStart!: EventEmitter<void>;
 
-  private activeContentId = '';
-
   @Listen('scroll')
   handleScroll(ev: Event) {
-    const { initialScrollLeft, previousScrollLeft } = this;
-    const { scrollLeft, offsetWidth } = ev.target as HTMLElement;
-
-    // Set initial scroll position if it's undefined
-    this.initialScrollLeft = initialScrollLeft ?? scrollLeft;
-
-    // Determine the scroll direction based on the previous scroll position
-    const scrollDirection = scrollLeft > previousScrollLeft ? 'right' : 'left';
-    this.previousScrollLeft = scrollLeft;
+    const { scrollLeft, scrollWidth, clientWidth } = ev.target as HTMLElement;
+    const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
 
-    // Calculate the distance scrolled based on the initial scroll position
-    // and then transform it to a percentage of the segment view width
-    const scrollDistance = scrollLeft - this.initialScrollLeft;
-    const scrollDistancePercentage = Math.abs(scrollDistance) / offsetWidth;
-
-    // Emit the scroll direction and distance
     this.ionSegmentViewScroll.emit({
-      scrollDirection,
-      scrollDistance,
-      scrollDistancePercentage,
+      scrollRatio,
+      isManualScroll: this.isManualScroll,
     });
 
-    // Check if the scroll is at a snapping point and return if not
-    const atSnappingPoint = scrollLeft % offsetWidth === 0;
-    if (!atSnappingPoint) return;
-
-    // Find the current segment content based on the scroll position
-    const currentIndex = Math.round(scrollLeft / offsetWidth);
-
-    // Recursively search for the next enabled content in the scroll direction
-    const segmentContent = this.getNextEnabledContent(currentIndex, scrollDirection);
-
-    // Exit if no valid segment content found
-    if (!segmentContent) return;
-
-    // Update active content ID and scroll to the segment content
-    this.activeContentId = segmentContent.id;
-    this.setContent(segmentContent.id);
-
     // Reset the timeout to check for scroll end
     this.resetScrollEndTimeout();
   }
@@ -127,13 +92,11 @@ export class SegmentView implements ComponentInterface {
    * reset the scroll position and emit the scroll end event.
    */
   private checkForScrollEnd() {
-    const activeContent = this.getSegmentContents().find(content => content.id === this.activeContentId);
-
     // Only emit scroll end event if the active content is not disabled and
     // the user is not touching the segment view
-    if (activeContent?.disabled === false && !this.isTouching) {
-      this.ionSegmentViewScrollEnd.emit({ activeContentId: this.activeContentId });
-      this.initialScrollLeft = undefined;
+    if (!this.isTouching) {
+      this.ionSegmentViewScrollEnd.emit();
+      this.isManualScroll = true;
     }
   }
 
@@ -151,6 +114,8 @@ export class SegmentView implements ComponentInterface {
 
     if (index === -1) return;
 
+    this.isManualScroll = false;
+
     const contentWidth = this.el.offsetWidth;
     this.el.scrollTo({
       top: 0,
@@ -163,28 +128,6 @@ export class SegmentView implements ComponentInterface {
     return Array.from(this.el.querySelectorAll('ion-segment-content'));
   }
 
-  /**
-   * Recursively find the next enabled segment content based on the scroll direction.
-   * If no enabled content is found, it will return null.
-   */
-  private getNextEnabledContent(index: number, direction: string): HTMLIonSegmentContentElement | null {
-    const contents = this.getSegmentContents();
-
-    // Stop if we reach the beginning or end of the content array
-    if (index < 0 || index >= contents.length) return null;
-
-    const segmentContent = contents[index];
-
-    // If the content is not disabled, return it
-    if (!segmentContent.disabled) {
-      return segmentContent;
-    }
-
-    // Otherwise, keep searching in the same direction
-    const nextIndex = direction === 'right' ? index + 1 : index - 1;
-    return this.getNextEnabledContent(nextIndex, direction);
-  }
-
   render() {
     const { disabled } = this;