Animate icon change and update button label text handling

src/components/Button/Button.tsx

@@ -129,6 +129,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Sets additional distance outside of element in which a press can be detected.
    */
   hitSlop?: TouchableRippleProps['hitSlop'];
+  /**
+   * Label text number Of Lines of the button.
+   */
+  numberOfLines?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
   /**
    * Style for the button text.
@@ -185,6 +189,7 @@ const Button = (
     onPressOut,
     onLongPress,
     delayLongPress,
+    numberOfLines,
     style,
     theme: themeOverrides,
     uppercase: uppercaseProp,
@@ -269,6 +274,19 @@ const Button = (
 
   const borderRadius = theme.shapes.corner.largeIncreased;
   const iconSize = 18;
+  const NumberOfLines = numberOfLines ? numberOfLines : 1;
+
+  const { backgroundColor, borderColor, textColor, borderWidth } =
+    getButtonColors({
+      customButtonColor,
+      customTextColor,
+      theme,
+      mode,
+      disabled,
+      dark,
+    });
+  const borderRadius = theme.shapes.corner.largeIncreased;
+  const iconSize = 18;
 
   const {
     backgroundColor,
@@ -400,7 +418,7 @@ const Button = (
           <Text
             variant="labelLarge"
             selectable={false}
-            numberOfLines={1}
+            numberOfLines={NumberOfLines}
             testID={`${testID}-text`}
             style={[
               styles.label,

src/components/SegmentedButtons/SegmentedButtonItem.tsx

@@ -16,6 +16,7 @@ import {
   getSegmentedButtonDensityPadding,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
+import CrossFadeIcon from '../CrossFadeIcon';
 import type { ThemeProp } from '../../types';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
@@ -33,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.
@@ -68,6 +73,10 @@ export type Props = {
    * Label text of the button.
    */
   label?: string;
+  /**
+   * Label text number of lines of the button.
+   */
+  numberOfLines?: number;
   /**
    * Button segment.
    */
@@ -105,6 +114,7 @@ export type Props = {
 
 const SegmentedButtonItem = ({
   checked,
+  animated = false,
   accessibilityLabel,
   disabled,
   style,
@@ -116,6 +126,7 @@ const SegmentedButtonItem = ({
   icon,
   testID,
   label,
+  numberOfLines,
   onPress,
   segment,
   density = 'regular',
@@ -192,7 +203,8 @@ const SegmentedButtonItem = ({
     ...theme.fonts.labelLarge,
     color: textColor,
   };
-
+  const IconComponent = animated ? CrossFadeIcon : Icon;
+  const NumberOfLines = numberOfLines ? numberOfLines : 1;
   return (
     <View style={[buttonStyle, styles.button, style]}>
       <TouchableRipple
@@ -221,14 +233,18 @@ 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
             variant="labelLarge"
             style={[styles.label, labelTextStyle, labelStyle]}
             selectable={false}
-            numberOfLines={1}
+            numberOfLines={NumberOfLines}
             maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
             testID={`${testID}-label`}
           >

src/components/SegmentedButtons/SegmentedButtons.tsx

@@ -52,6 +52,7 @@ export type Props<T extends string = string> = {
    * - `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
@@ -65,6 +66,7 @@ export type Props<T extends string = string> = {
     icon?: IconSource;
     disabled?: boolean;
     accessibilityLabel?: string;
+    numberOfLines?: number;
     checkedColor?: string;
     uncheckedColor?: string;
     onPress?: (event: GestureResponderEvent) => void;
@@ -78,6 +80,7 @@ export type Props<T extends string = string> = {
    * 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<T>;
@@ -131,6 +134,7 @@ const SegmentedButtons = <T extends string = string>({
   buttons,
   multiSelect,
   density,
+  animated,
   style,
   theme: themeOverrides,
 }: Props<T>) => {
@@ -171,6 +175,7 @@ const SegmentedButtons = <T extends string = string>({
             {...item}
             key={i}
             checked={checked}
+            animated={animated}
             segment={segment}
             density={density}
             onPress={onPress}