fix: fix overriding default props (#3643)

src/components/BottomNavigation/BottomNavigation.tsx

@@ -397,9 +397,9 @@ const BottomNavigation = ({
   const theme = useInternalTheme(themeOverrides);
   const { bottom, left, right } = useSafeAreaInsets();
   const { scale } = theme.animation;
-  const compact = compactProp || !theme.isV3;
+  const compact = compactProp ?? !theme.isV3;
   let shifting =
-    shiftingProp || (theme.isV3 ? false : navigationState.routes.length > 3);
+    shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3);
 
   if (shifting && navigationState.routes.length < 2) {
     shifting = false;
@@ -817,6 +817,7 @@ const BottomNavigation = ({
               },
             ]}
             accessibilityRole={'tablist'}
+            testID={`${testID}-bar-content-wrapper`}
           >
             {shifting ? (
               <Animated.View
@@ -850,6 +851,7 @@ const BottomNavigation = ({
                     }),
                   },
                 ]}
+                testID={`${testID}-bar-content-ripple`}
               />
             ) : null}
             {routes.map((route, index) => {

src/components/Button/Button.tsx

@@ -195,7 +195,7 @@ const Button = ({
     [mode]
   );
   const { roundness, isV3, animation } = theme;
-  const uppercase = uppercaseProp || !theme.isV3;
+  const uppercase = uppercaseProp ?? !theme.isV3;
 
   const isElevationEntitled =
     !disabled && (isV3 ? isMode('elevated') : isMode('contained'));
@@ -351,6 +351,7 @@ const Button = ({
             variant="labelLarge"
             selectable={false}
             numberOfLines={1}
+            testID={`${testID}-text`}
             style={[
               styles.label,
               !isV3 && styles.md2Label,

src/components/FAB/AnimatedFAB.tsx

@@ -209,7 +209,7 @@ const AnimatedFAB = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const uppercase: boolean = uppercaseProp || !theme.isV3;
+  const uppercase: boolean = uppercaseProp ?? !theme.isV3;
   const isIOS = Platform.OS === 'ios';
   const isAnimatedFromRight = animateFrom === 'right';
   const isIconStatic = iconMode === 'static';
@@ -478,6 +478,7 @@ const AnimatedFAB = ({
             textStyle,
           ]}
           theme={theme}
+          testID={`${testID}-text`}
         >
           {label}
         </AnimatedText>

src/components/FAB/FAB.tsx

@@ -195,7 +195,7 @@ const FAB = forwardRef<View, Props>(
     ref
   ) => {
     const theme = useInternalTheme(themeOverrides);
-    const uppercase = uppercaseProp || !theme.isV3;
+    const uppercase = uppercaseProp ?? !theme.isV3;
     const { current: visibility } = React.useRef<Animated.Value>(
       new Animated.Value(visible ? 1 : 0)
     );
@@ -309,6 +309,7 @@ const FAB = forwardRef<View, Props>(
               <Text
                 variant="labelLarge"
                 selectable={false}
+                testID={`${testID}-text`}
                 style={[
                   styles.label,
                   uppercase && styles.uppercaseLabel,

src/components/__tests__/AnimatedFAB.test.tsx

@@ -95,3 +95,41 @@ it('animated value changes correctly', () => {
     transform: [{ scale: 1.5 }],
   });
 });
+
+it('renders FAB without uppercase styling if uppercase prop is falsy', () => {
+  const { getByTestId } = render(
+    <AnimatedFAB
+      label="text"
+      animateFrom="left"
+      onPress={() => {}}
+      icon="plus"
+      testID="animated-fab"
+      style={styles.background}
+      extended={false}
+      uppercase={false}
+    />
+  );
+
+  expect(getByTestId('animated-fab-text')).not.toHaveStyle({
+    textTransform: 'uppercase',
+  });
+});
+
+it('renders FAB with uppercase styling if uppercase prop is truthy', () => {
+  const { getByTestId } = render(
+    <AnimatedFAB
+      label="text"
+      animateFrom="left"
+      onPress={() => {}}
+      icon="plus"
+      testID="animated-fab"
+      style={styles.background}
+      extended={false}
+      uppercase
+    />
+  );
+
+  expect(getByTestId('animated-fab-text')).toHaveStyle({
+    textTransform: 'uppercase',
+  });
+});

src/components/__tests__/BottomNavigation.test.tsx

@@ -408,6 +408,72 @@ it('renders bottom navigation with getLazy', () => {
   expect(tree.queryByTestId('RouteScreen: 2')).toBeNull();
 });
 
+it('applies maxTabBarWidth styling if compact prop is truthy', () => {
+  const { getByTestId } = render(
+    <BottomNavigation
+      navigationState={createState(0, 5)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      getLazy={({ route }) => route.key === 'key-2'}
+      shifting={false}
+      testId="bottom-navigation"
+      compact
+    />
+  );
+
+  expect(getByTestId('bottom-navigation-bar-content-wrapper')).toHaveStyle({
+    maxWidth: 480,
+  });
+});
+
+it('does not apply maxTabBarWidth styling if compact prop is falsy', () => {
+  const { getByTestId } = render(
+    <BottomNavigation
+      navigationState={createState(0, 5)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      getLazy={({ route }) => route.key === 'key-2'}
+      shifting={false}
+      testId="bottom-navigation"
+      compact={false}
+    />
+  );
+
+  expect(getByTestId('bottom-navigation-bar-content-wrapper')).not.toHaveStyle({
+    maxWidth: 480,
+  });
+});
+
+it('displays ripple animation view if shifting is truthy', () => {
+  const { getByTestId } = render(
+    <BottomNavigation
+      navigationState={createState(0, 5)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      getLazy={({ route }) => route.key === 'key-2'}
+      testId="bottom-navigation"
+      shifting
+    />
+  );
+
+  expect(getByTestId('bottom-navigation-bar-content-ripple')).toBeDefined();
+});
+
+it('does not display ripple animation view if shifting is falsy', () => {
+  const { queryByTestId } = render(
+    <BottomNavigation
+      navigationState={createState(0, 5)}
+      onIndexChange={jest.fn()}
+      renderScene={({ route }) => route.title}
+      getLazy={({ route }) => route.key === 'key-2'}
+      testId="bottom-navigation"
+      shifting={false}
+    />
+  );
+
+  expect(queryByTestId('bottom-navigation-bar-content-ripple')).toBeNull();
+});
+
 describe('getActiveTintColor', () => {
   it.each`
     activeColor  | defaultColor | useV3    | expected

src/components/__tests__/Button.test.tsx

@@ -154,6 +154,32 @@ it('should execute onPressOut', () => {
   expect(onPressOutMock).toHaveBeenCalledTimes(1);
 });
 
+describe('button text styles', () => {
+  it('applies uppercase styles if uppercase prop is truthy', () => {
+    const { getByTestId } = render(
+      <Button testID="button" uppercase>
+        Test
+      </Button>
+    );
+
+    expect(getByTestId('button-text')).toHaveStyle({
+      textTransform: 'uppercase',
+    });
+  });
+
+  it('does not apply uppercase styles if uppercase prop is falsy', () => {
+    const { getByTestId } = render(
+      <Button testID="button" uppercase={false}>
+        Test
+      </Button>
+    );
+
+    expect(getByTestId('button-text')).not.toHaveStyle({
+      textTransform: 'uppercase',
+    });
+  });
+});
+
 describe('button icon styles', () => {
   it('should return correct icon styles for compact text button', () => {
     const { getByTestId } = render(

src/components/__tests__/FAB.test.tsx

@@ -146,6 +146,36 @@ it('renders FAB with custom border radius', () => {
   expect(getByTestId('fab-container')).toHaveStyle({ borderRadius: 0 });
 });
 
+it('renders FAB without uppercase styling by default', () => {
+  const { getByTestId } = render(
+    <FAB onPress={() => {}} label="Add items" testID="fab" />
+  );
+
+  expect(getByTestId('fab-text')).not.toHaveStyle({
+    textTransform: 'uppercase',
+  });
+});
+
+it('renders FAB without uppercase styling if uppercase prop is falsy', () => {
+  const { getByTestId } = render(
+    <FAB onPress={() => {}} label="Add items" testID="fab" uppercase={false} />
+  );
+
+  expect(getByTestId('fab-text')).not.toHaveStyle({
+    textTransform: 'uppercase',
+  });
+});
+
+it('renders FAB with uppercase styling if uppercase prop is truthy', () => {
+  const { getByTestId } = render(
+    <FAB onPress={() => {}} label="Add items" testID="fab" uppercase />
+  );
+
+  expect(getByTestId('fab-text')).toHaveStyle({
+    textTransform: 'uppercase',
+  });
+});
+
 (['small', 'medium', 'large'] as const).forEach((size) => {
   it(`renders ${size} FAB with correct size and border radius`, () => {
     const { getByTestId } = render(

src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap

@@ -284,6 +284,7 @@ exports[`renders animated fab 1`] = `
               "writingDirection": "ltr",
             }
           }
+          testID="animated-fab-text"
         />
       </View>
     </View>
@@ -575,6 +576,7 @@ exports[`renders animated fab with label on the left 1`] = `
               "writingDirection": "ltr",
             }
           }
+          testID="animated-fab-text"
         >
           text
         </Text>
@@ -868,6 +870,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
               "writingDirection": "ltr",
             }
           }
+          testID="animated-fab-text"
         >
           text
         </Text>

src/components/__tests__/__snapshots__/Banner.test.tsx.snap

@@ -263,6 +263,7 @@ exports[`render visible banner, with custom theme 1`] = `
                             ],
                           ]
                         }
+                        testID="button-text"
                       >
                         first
                       </Text>
@@ -706,6 +707,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                             ],
                           ]
                         }
+                        testID="button-text"
                       >
                         first
                       </Text>
@@ -985,6 +987,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                             ],
                           ]
                         }
+                        testID="button-text"
                       >
                         first
                       </Text>
@@ -1133,6 +1136,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                             ],
                           ]
                         }
+                        testID="button-text"
                       >
                         second
                       </Text>