Add animation to Segmented Button icons

src/components/SegmentedButtons/SegmentedButtonItem.tsx

@@ -20,6 +20,7 @@ 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';
@@ -34,6 +35,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.
@@ -73,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.
    */
@@ -106,6 +115,7 @@ export type Props = {
 
 const SegmentedButtonItem = ({
   checked,
+  animated = false,
   accessibilityLabel,
   disabled,
   style,
@@ -118,6 +128,7 @@ const SegmentedButtonItem = ({
   icon,
   testID,
   label,
+  numberOfLines,
   onPress,
   segment,
   density = 'regular',
@@ -202,7 +213,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
@@ -229,14 +241,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

@@ -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;
@@ -79,6 +81,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 +135,7 @@ const SegmentedButtons = ({
   buttons,
   multiSelect,
   density,
+  animated,
   style,
   theme: themeOverrides,
 }: Props) => {
@@ -172,6 +176,7 @@ const SegmentedButtons = ({
             {...item}
             key={i}
             checked={checked}
+            animated={animated}
             segment={segment}
             density={density}
             onPress={onPress}