From ec95ae5cd38e3d2b9ec9fdbc9e237fa1241f7a4e Mon Sep 17 00:00:00 2001
From: Morritz <12800230+Morritz@users.noreply.github.com>
Date: Wed, 24 May 2023 16:07:57 +0200
Subject: [PATCH] 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                                 |  1 +
 core/api.txt                                         |  4 ++--
 core/src/components.d.ts                             | 12 ++++++------
 .../src/components/segment-button/segment-button.tsx |  3 ++-
 core/src/components/segment/segment-interface.ts     |  4 +++-
 core/src/components/segment/segment.tsx              |  8 ++++----
 packages/react/src/components/index.ts               |  1 +
 packages/vue/src/index.ts                            |  1 +
 8 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/angular/src/index.ts b/angular/src/index.ts
index 7227fabae5..b92167e481 100644
--- a/angular/src/index.ts
+++ b/angular/src/index.ts
@@ -117,6 +117,7 @@ export {
   SearchbarInputEventDetail,
   SegmentChangeEventDetail,
   SegmentCustomEvent,
+  SegmentValue,
   SelectChangeEventDetail,
   SelectCustomEvent,
   TabsCustomEvent,
diff --git a/core/api.txt b/core/api.txt
index 407da7f2ee..ef311f982b 100644
--- a/core/api.txt
+++ b/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
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 55fabe7a3e..2883d8eb43 100644
--- a/core/src/components.d.ts
+++ b/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 {
         /**
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index 80bc3c589a..26954fb6cb 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/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();
diff --git a/core/src/components/segment/segment-interface.ts b/core/src/components/segment/segment-interface.ts
index 1ae52cdc0b..6325e802f8 100644
--- a/core/src/components/segment/segment-interface.ts
+++ b/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 {
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index e1862d2fdc..f07d7b91ef 100644
--- a/core/src/components/segment/segment.tsx
+++ b/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.
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 6e218fc3df..bb295f09a3 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -72,6 +72,7 @@ export {
   SearchbarInputEventDetail,
   SegmentChangeEventDetail,
   SegmentCustomEvent,
+  SegmentValue,
   SelectChangeEventDetail,
   SelectCustomEvent,
   TabsCustomEvent,
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 49b02afa66..158a2c9ffe 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -112,6 +112,7 @@ export {
   SearchbarInputEventDetail,
   SegmentChangeEventDetail,
   SegmentCustomEvent,
+  SegmentValue,
   SelectChangeEventDetail,
   SelectCustomEvent,
   TabsCustomEvent,