From f93741bfa0309ec026cfec0aa4548eebeefec933 Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:10:05 +0700
Subject: [PATCH 01/14] Added icon change is animated.

---
 .../SegmentedButtons/SegmentedButtonItem.tsx          | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index d88f2a46f9..8d1d59a6e4 100644
--- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -34,6 +34,10 @@ export type Props = {
    * Icon to display for the `SegmentedButtonItem`.
    */
   icon?: IconSource;
+  /**
+   * Whether an icon change is animated.
+   */
+  animated?: boolean;
   /**
    * @supported Available in v5.x with theme version 3
    * Custom color for unchecked Text and Icon.
@@ -106,6 +110,7 @@ export type Props = {
 
 const SegmentedButtonItem = ({
   checked,
+  animated = false,
   accessibilityLabel,
   disabled,
   style,
@@ -202,7 +207,9 @@ const SegmentedButtonItem = ({
       : theme.fonts.labelLarge),
     color: textColor,
   };
-
+  
+  const IconComponent = animated ? CrossFadeIcon : Icon;
+  
   return (
     <View style={[buttonStyle, styles.button, style]}>
       <TouchableRipple
@@ -229,7 +236,7 @@ const SegmentedButtonItem = ({
           ) : null}
           {showIcon ? (
             <Animated.View testID={`${testID}-icon`} style={iconStyle}>
-              <Icon source={icon} size={iconSize} color={textColor} />
+              <IconComponent color={textColor} source={icon ? icon:'progress-question'} size={iconSize} />
             </Animated.View>
           ) : null}
           <Text

From c259d14b57b641bbb166c935c8b70543147b5413 Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:12:01 +0700
Subject: [PATCH 02/14] Update SegmentedButtons.tsx

---
 src/components/SegmentedButtons/SegmentedButtons.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/SegmentedButtons/SegmentedButtons.tsx b/src/components/SegmentedButtons/SegmentedButtons.tsx
index e5ab79629f..52825113ee 100644
--- a/src/components/SegmentedButtons/SegmentedButtons.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtons.tsx
@@ -79,6 +79,7 @@ export type Props = {
    * Density is applied to the height, to allow usage in denser UIs
    */
   density?: 'regular' | 'small' | 'medium' | 'high';
+  animated?: boolean;
   style?: StyleProp<ViewStyle>;
   theme?: ThemeProp;
 } & ConditionalValue;
@@ -132,6 +133,7 @@ const SegmentedButtons = ({
   buttons,
   multiSelect,
   density,
+  animated,
   style,
   theme: themeOverrides,
 }: Props) => {
@@ -172,6 +174,7 @@ const SegmentedButtons = ({
             {...item}
             key={i}
             checked={checked}
+            animated={animated}
             segment={segment}
             density={density}
             onPress={onPress}

From 8afc4298abedc64b218767817e5eaf5f4b779a25 Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:15:08 +0700
Subject: [PATCH 03/14] Update SegmentedButtonItem.tsx

---
 src/components/SegmentedButtons/SegmentedButtonItem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index 8d1d59a6e4..7cafe8fa9c 100644
--- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -24,6 +24,7 @@ import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
+import CrossFadeIcon from '../../../src/components/CrossFadeIcon';
 
 export type Props = {
   /**

From 34c3ca74bf492c24dc066d5e0cf1805c0201e00e Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:24:18 +0700
Subject: [PATCH 04/14] Update SegmentedButtonItem.tsx

---
 src/components/SegmentedButtons/SegmentedButtonItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index 7cafe8fa9c..46120030e4 100644
--- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -24,7 +24,7 @@ import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
-import CrossFadeIcon from '../../../src/components/CrossFadeIcon';
+import CrossFadeIcon from '../CrossFadeIcon';
 
 export type Props = {
   /**

From 06406946731fcbad6fd211a72e7b3e1a7ce489fa Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:33:40 +0700
Subject: [PATCH 05/14] Update SegmentedButtonItem.tsx

---
 src/components/SegmentedButtons/SegmentedButtonItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index 46120030e4..219f83b5e9 100644
--- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -20,11 +20,11 @@ import {
   getSegmentedButtonDensityPadding,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
+import CrossFadeIcon from '../CrossFadeIcon';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
-import CrossFadeIcon from '../CrossFadeIcon';
 
 export type Props = {
   /**

From a671ed8a4adeb21566c2b72d787f2ac5ade15383 Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:44:57 +0700
Subject: [PATCH 06/14] Update SegmentedButtonItem.tsx

---
 src/components/SegmentedButtons/SegmentedButtonItem.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index 219f83b5e9..ce302e539f 100644
--- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -237,7 +237,11 @@ const SegmentedButtonItem = ({
           ) : null}
           {showIcon ? (
             <Animated.View testID={`${testID}-icon`} style={iconStyle}>
-              <IconComponent color={textColor} source={icon ? icon:'progress-question'} size={iconSize} />
+              <IconComponent
+                color={textColor}
+                source={icon ? icon : 'progress-question'}
+                size={iconSize}
+              />
             </Animated.View>
           ) : null}
           <Text

From 1cd40123e39c819762ecd02691cdcc35e9225ba8 Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:48:47 +0700
Subject: [PATCH 07/14] Update SegmentedButtonItem.tsx

---
 src/components/SegmentedButtons/SegmentedButtonItem.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index ce302e539f..92b588cc66 100644
--- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -208,9 +208,7 @@ const SegmentedButtonItem = ({
       : theme.fonts.labelLarge),
     color: textColor,
   };
-  
   const IconComponent = animated ? CrossFadeIcon : Icon;
-  
   return (
     <View style={[buttonStyle, styles.button, style]}>
       <TouchableRipple

From fac696d5f52ad35121bd643c40a9a3d840a25f32 Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Fri, 8 Nov 2024 15:32:02 +0700
Subject: [PATCH 08/14] Update SegmentedButtons.tsx

---
 src/components/SegmentedButtons/SegmentedButtons.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/SegmentedButtons/SegmentedButtons.tsx b/src/components/SegmentedButtons/SegmentedButtons.tsx
index 52825113ee..1558dc5ac6 100644
--- a/src/components/SegmentedButtons/SegmentedButtons.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtons.tsx
@@ -53,6 +53,7 @@ export type Props = {
    * - `icon`: icon to display for the item
    * - `disabled`: whether the button is disabled
    * - `accessibilityLabel`: acccessibility label for the button. This is read by the screen reader when the user taps the button.
+   * - `numberOfLines`: label text number of lines of the button
    * - `checkedColor`: custom color for checked Text and Icon
    * - `uncheckedColor`: custom color for unchecked Text and Icon
    * - `onPress`: callback that is called when button is pressed
@@ -66,6 +67,7 @@ export type Props = {
     icon?: IconSource;
     disabled?: boolean;
     accessibilityLabel?: string;
+    numberOfLines?: number;
     checkedColor?: string;
     uncheckedColor?: string;
     onPress?: (event: GestureResponderEvent) => void;

From 9b3ae8582ca00f6cd4b4d6e114ea17c78f5d2cc3 Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Fri, 8 Nov 2024 15:37:12 +0700
Subject: [PATCH 09/14] Update SegmentedButtonItem.tsx

---
 src/components/SegmentedButtons/SegmentedButtonItem.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index 92b588cc66..3a5532cd40 100644
--- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -78,6 +78,10 @@ export type Props = {
    * Label text of the button.
    */
   label?: string;
+  /**
+   * Label text number of lines of the button.
+   */
+  numberOfLines?: number;
   /**
    * Button segment.
    */
@@ -124,6 +128,7 @@ const SegmentedButtonItem = ({
   icon,
   testID,
   label,
+  numberOfLines,
   onPress,
   segment,
   density = 'regular',
@@ -209,6 +214,7 @@ const SegmentedButtonItem = ({
     color: textColor,
   };
   const IconComponent = animated ? CrossFadeIcon : Icon;
+  const NumberOfLines = numberOfLines ? numberOfLines : 1;
   return (
     <View style={[buttonStyle, styles.button, style]}>
       <TouchableRipple
@@ -246,7 +252,7 @@ const SegmentedButtonItem = ({
             variant="labelLarge"
             style={[styles.label, labelTextStyle, labelStyle]}
             selectable={false}
-            numberOfLines={1}
+            numberOfLines={NumberOfLines}
             maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
             testID={`${testID}-label`}
           >

From 29b77930b8254191de895134da25cede32052fd6 Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:00:09 +0700
Subject: [PATCH 10/14] Update Button.tsx

---
 src/components/Button/Button.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 64a049a63d..cc97ac2c2d 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -130,6 +130,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Specifies the largest possible scale a text font can reach.
    */
   maxFontSizeMultiplier?: number;
+  /**
+   * Label text number Of Lines of the button.
+   */
+  noOfLines?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the button text.
@@ -186,6 +190,7 @@ const Button = (
     onPressOut,
     onLongPress,
     delayLongPress,
+    noOfLines,
     style,
     theme: themeOverrides,
     uppercase: uppercaseProp,
@@ -266,6 +271,7 @@ const Button = (
 
   const borderRadius = (isV3 ? 5 : 1) * roundness;
   const iconSize = isV3 ? 18 : 16;
+  const numberOfLines = noOfLines ? 1 : noOfLines;
 
   const { backgroundColor, borderColor, textColor, borderWidth } =
     getButtonColors({
@@ -383,7 +389,7 @@ const Button = (
           <Text
             variant="labelLarge"
             selectable={false}
-            numberOfLines={1}
+            numberOfLines={numberOfLines}
             testID={`${testID}-text`}
             style={[
               styles.label,

From e57f88ce4e217d5ac4e966e9207d69bf09b4e805 Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:08:25 +0700
Subject: [PATCH 11/14] Update Button.tsx

---
 src/components/Button/Button.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index cc97ac2c2d..64a049a63d 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -130,10 +130,6 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Specifies the largest possible scale a text font can reach.
    */
   maxFontSizeMultiplier?: number;
-  /**
-   * Label text number Of Lines of the button.
-   */
-  noOfLines?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the button text.
@@ -190,7 +186,6 @@ const Button = (
     onPressOut,
     onLongPress,
     delayLongPress,
-    noOfLines,
     style,
     theme: themeOverrides,
     uppercase: uppercaseProp,
@@ -271,7 +266,6 @@ const Button = (
 
   const borderRadius = (isV3 ? 5 : 1) * roundness;
   const iconSize = isV3 ? 18 : 16;
-  const numberOfLines = noOfLines ? 1 : noOfLines;
 
   const { backgroundColor, borderColor, textColor, borderWidth } =
     getButtonColors({
@@ -389,7 +383,7 @@ const Button = (
           <Text
             variant="labelLarge"
             selectable={false}
-            numberOfLines={numberOfLines}
+            numberOfLines={1}
             testID={`${testID}-text`}
             style={[
               styles.label,

From a8242c0d6598570b66f2515f0a467c3a1786cd16 Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:15:47 +0700
Subject: [PATCH 12/14] Update Button.tsx

Label text number Of Lines of the button.
---
 src/components/Button/Button.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 64a049a63d..cc97ac2c2d 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -130,6 +130,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Specifies the largest possible scale a text font can reach.
    */
   maxFontSizeMultiplier?: number;
+  /**
+   * Label text number Of Lines of the button.
+   */
+  noOfLines?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the button text.
@@ -186,6 +190,7 @@ const Button = (
     onPressOut,
     onLongPress,
     delayLongPress,
+    noOfLines,
     style,
     theme: themeOverrides,
     uppercase: uppercaseProp,
@@ -266,6 +271,7 @@ const Button = (
 
   const borderRadius = (isV3 ? 5 : 1) * roundness;
   const iconSize = isV3 ? 18 : 16;
+  const numberOfLines = noOfLines ? 1 : noOfLines;
 
   const { backgroundColor, borderColor, textColor, borderWidth } =
     getButtonColors({
@@ -383,7 +389,7 @@ const Button = (
           <Text
             variant="labelLarge"
             selectable={false}
-            numberOfLines={1}
+            numberOfLines={numberOfLines}
             testID={`${testID}-text`}
             style={[
               styles.label,

From a9b253087982dd24d41391ac93dad2050edad01a Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:27:10 +0700
Subject: [PATCH 13/14] Update Button.tsx

---
 src/components/Button/Button.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index cc97ac2c2d..64a049a63d 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -130,10 +130,6 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Specifies the largest possible scale a text font can reach.
    */
   maxFontSizeMultiplier?: number;
-  /**
-   * Label text number Of Lines of the button.
-   */
-  noOfLines?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the button text.
@@ -190,7 +186,6 @@ const Button = (
     onPressOut,
     onLongPress,
     delayLongPress,
-    noOfLines,
     style,
     theme: themeOverrides,
     uppercase: uppercaseProp,
@@ -271,7 +266,6 @@ const Button = (
 
   const borderRadius = (isV3 ? 5 : 1) * roundness;
   const iconSize = isV3 ? 18 : 16;
-  const numberOfLines = noOfLines ? 1 : noOfLines;
 
   const { backgroundColor, borderColor, textColor, borderWidth } =
     getButtonColors({
@@ -389,7 +383,7 @@ const Button = (
           <Text
             variant="labelLarge"
             selectable={false}
-            numberOfLines={numberOfLines}
+            numberOfLines={1}
             testID={`${testID}-text`}
             style={[
               styles.label,

From 1c676aa2293c492b210f909c259e93250d4be13e Mon Sep 17 00:00:00 2001
From: Aravind <36630532+aravind3566@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:43:01 +0700
Subject: [PATCH 14/14] Update Button.tsx

---
 src/components/Button/Button.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index cc97ac2c2d..99f1188c1c 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -133,7 +133,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Label text number Of Lines of the button.
    */
-  noOfLines?: number;
+  numberOfLines?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the button text.
@@ -190,7 +190,7 @@ const Button = (
     onPressOut,
     onLongPress,
     delayLongPress,
-    noOfLines,
+    numberOfLines,
     style,
     theme: themeOverrides,
     uppercase: uppercaseProp,
@@ -271,7 +271,7 @@ const Button = (
 
   const borderRadius = (isV3 ? 5 : 1) * roundness;
   const iconSize = isV3 ? 18 : 16;
-  const numberOfLines = noOfLines ? 1 : noOfLines;
+  const NumberOfLines = numberOfLines ? numberOfLines : 1;
 
   const { backgroundColor, borderColor, textColor, borderWidth } =
     getButtonColors({
@@ -389,7 +389,7 @@ const Button = (
           <Text
             variant="labelLarge"
             selectable={false}
-            numberOfLines={numberOfLines}
+            numberOfLines={NumberOfLines}
             testID={`${testID}-text`}
             style={[
               styles.label,