feat(segment, segment-button): update segment value property to accept numbers (#27222)

Issue number: resolves #27221

---------

## What is the current behavior?

The value property of the segment component in Ionic Framework currently
only accepts string values.

## What is the new behavior?

This pull request updates the "value" property of the segment component
to accept a union of string and number types. This allows for more
versatile data input in the segment component, particularly for users
who work with numerical data.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Other information

N/A

angular/src/index.ts

@@ -117,6 +117,7 @@ export {
   SearchbarInputEventDetail,
   SegmentChangeEventDetail,
   SegmentCustomEvent,
+  SegmentValue,
   SelectChangeEventDetail,
   SelectCustomEvent,
   TabsCustomEvent,

core/api.txt

@@ -1184,7 +1184,7 @@ ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
 ion-segment,prop,selectOnFocus,boolean,false,false,false
 ion-segment,prop,swipeGesture,boolean,true,false,false
-ion-segment,prop,value,string | undefined,undefined,false,false
+ion-segment,prop,value,number | string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
 ion-segment,css-prop,--background
 
@@ -1193,7 +1193,7 @@ 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
 ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
-ion-segment-button,prop,value,string,'ion-sb-' + ids++,false,false
+ion-segment-button,prop,value,number | string,'ion-sb-' + ids++,false,false
 ion-segment-button,css-prop,--background
 ion-segment-button,css-prop,--background-checked
 ion-segment-button,css-prop,--background-focused

core/src/components.d.ts

@@ -33,7 +33,7 @@ import { RefresherEventDetail } from "./components/refresher/refresher-interface
 import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
 import { NavigationHookCallback } from "./components/route/route-interface";
 import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
-import { SegmentChangeEventDetail } from "./components/segment/segment-interface";
+import { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
 import { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
@@ -69,7 +69,7 @@ export { RefresherEventDetail } from "./components/refresher/refresher-interface
 export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
 export { NavigationHookCallback } from "./components/route/route-interface";
 export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
-export { SegmentChangeEventDetail } from "./components/segment/segment-interface";
+export { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
 export { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
@@ -2639,7 +2639,7 @@ export namespace Components {
         /**
           * the value of the segment.
          */
-        "value"?: string;
+        "value"?: SegmentValue;
     }
     interface IonSegmentButton {
         /**
@@ -2662,7 +2662,7 @@ export namespace Components {
         /**
           * The value of the segment button.
          */
-        "value": string;
+        "value": SegmentValue;
     }
     interface IonSelect {
         /**
@@ -6714,7 +6714,7 @@ declare namespace LocalJSX {
         /**
           * the value of the segment.
          */
-        "value"?: string;
+        "value"?: SegmentValue;
     }
     interface IonSegmentButton {
         /**
@@ -6736,7 +6736,7 @@ declare namespace LocalJSX {
         /**
           * The value of the segment button.
          */
-        "value"?: string;
+        "value"?: SegmentValue;
     }
     interface IonSelect {
         /**

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

@@ -6,6 +6,7 @@ import { addEventListener, removeEventListener, inheritAttributes } from '@utils
 import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
+import type { SegmentValue } from '../segment/segment-interface';
 
 import type { SegmentButtonLayout } from './segment-button-interface';
 
@@ -53,7 +54,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
   /**
    * The value of the segment button.
    */
-  @Prop() value: string = 'ion-sb-' + ids++;
+  @Prop() value: SegmentValue = 'ion-sb-' + ids++;
   @Watch('value')
   valueChanged() {
     this.updateState();

core/src/components/segment/segment-interface.ts

@@ -1,7 +1,9 @@
 export type SegmentButtonLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
 
+export type SegmentValue = string | number;
+
 export interface SegmentChangeEventDetail {
-  value?: string;
+  value?: SegmentValue;
 }
 
 export interface SegmentCustomEvent extends CustomEvent {

core/src/components/segment/segment.tsx

@@ -9,7 +9,7 @@ import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
 
-import type { SegmentChangeEventDetail } from './segment-interface';
+import type { SegmentChangeEventDetail, SegmentValue } from './segment-interface';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -26,7 +26,7 @@ export class Segment implements ComponentInterface {
   private gesture?: Gesture;
 
   // Value before the segment is dragged
-  private valueBeforeGesture?: string;
+  private valueBeforeGesture?: SegmentValue;
 
   @Element() el!: HTMLIonSegmentElement;
 
@@ -76,10 +76,10 @@ export class Segment implements ComponentInterface {
   /**
    * the value of the segment.
    */
-  @Prop({ mutable: true }) value?: string;
+  @Prop({ mutable: true }) value?: SegmentValue;
 
   @Watch('value')
-  protected valueChanged(value: string | undefined) {
+  protected valueChanged(value: SegmentValue | undefined) {
     /**
      * `ionSelect` is emitted every time the value changes (internal or external changes).
      * Used by `ion-segment-button` to determine if the button should be checked.

packages/react/src/components/index.ts

@@ -72,6 +72,7 @@ export {
   SearchbarInputEventDetail,
   SegmentChangeEventDetail,
   SegmentCustomEvent,
+  SegmentValue,
   SelectChangeEventDetail,
   SelectCustomEvent,
   TabsCustomEvent,

packages/vue/src/index.ts

@@ -112,6 +112,7 @@ export {
   SearchbarInputEventDetail,
   SegmentChangeEventDetail,
   SegmentCustomEvent,
+  SegmentValue,
   SelectChangeEventDetail,
   SelectCustomEvent,
   TabsCustomEvent,