diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx
index d1ff4da799..434fb6402d 100644
--- a/src/components/BottomNavigation/BottomNavigation.tsx
+++ b/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 ? (
) : null}
{routes.map((route, index) => {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 219b51f1d3..36ff1d5c53 100644
--- a/src/components/Button/Button.tsx
+++ b/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,
diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx
index 5d20d505dc..cc4ec0b1bb 100644
--- a/src/components/FAB/AnimatedFAB.tsx
+++ b/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}
diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
index 66f3ed8f6b..7d067740f5 100644
--- a/src/components/FAB/FAB.tsx
+++ b/src/components/FAB/FAB.tsx
@@ -195,7 +195,7 @@ const FAB = forwardRef(
ref
) => {
const theme = useInternalTheme(themeOverrides);
- const uppercase = uppercaseProp || !theme.isV3;
+ const uppercase = uppercaseProp ?? !theme.isV3;
const { current: visibility } = React.useRef(
new Animated.Value(visible ? 1 : 0)
);
@@ -309,6 +309,7 @@ const FAB = forwardRef(
{
transform: [{ scale: 1.5 }],
});
});
+
+it('renders FAB without uppercase styling if uppercase prop is falsy', () => {
+ const { getByTestId } = render(
+ {}}
+ 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(
+ {}}
+ icon="plus"
+ testID="animated-fab"
+ style={styles.background}
+ extended={false}
+ uppercase
+ />
+ );
+
+ expect(getByTestId('animated-fab-text')).toHaveStyle({
+ textTransform: 'uppercase',
+ });
+});
diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx
index 5966a069c7..6a72e1439b 100644
--- a/src/components/__tests__/BottomNavigation.test.tsx
+++ b/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(
+ 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(
+ 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(
+ 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(
+ 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
diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx
index d8f5e61d3d..eae12e7d78 100644
--- a/src/components/__tests__/Button.test.tsx
+++ b/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(
+
+ );
+
+ expect(getByTestId('button-text')).toHaveStyle({
+ textTransform: 'uppercase',
+ });
+ });
+
+ it('does not apply uppercase styles if uppercase prop is falsy', () => {
+ const { getByTestId } = render(
+
+ );
+
+ 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(
diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx
index b52ad90e73..1124ef8b32 100644
--- a/src/components/__tests__/FAB.test.tsx
+++ b/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(
+ {}} 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(
+ {}} 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(
+ {}} 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(
diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
index 4f5d6f3cb3..c86a4261c6 100644
--- a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
@@ -284,6 +284,7 @@ exports[`renders animated fab 1`] = `
"writingDirection": "ltr",
}
}
+ testID="animated-fab-text"
/>
@@ -575,6 +576,7 @@ exports[`renders animated fab with label on the left 1`] = `
"writingDirection": "ltr",
}
}
+ testID="animated-fab-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
diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
index c434345296..e23ec5a8f2 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -263,6 +263,7 @@ exports[`render visible banner, with custom theme 1`] = `
],
]
}
+ testID="button-text"
>
first
@@ -706,6 +707,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
],
]
}
+ testID="button-text"
>
first
@@ -985,6 +987,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
],
]
}
+ testID="button-text"
>
first
@@ -1133,6 +1136,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
],
]
}
+ testID="button-text"
>
second
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
index b0048ddf73..a42403e304 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
@@ -142,6 +142,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
false,
]
}
+ testID="bottom-navigation-bar-content-wrapper"
>
Button with accessibility hint
@@ -288,6 +289,7 @@ exports[`renders button with an accessibility label 1`] = `
],
]
}
+ testID="button-text"
>
Button with accessibility label
@@ -436,6 +438,7 @@ exports[`renders button with button color 1`] = `
],
]
}
+ testID="button-text"
>
Custom Button
@@ -584,6 +587,7 @@ exports[`renders button with color 1`] = `
],
]
}
+ testID="button-text"
>
Custom Button
@@ -732,6 +736,7 @@ exports[`renders button with custom testID 1`] = `
],
]
}
+ testID="custom:testID-text"
>
Button with custom testID
@@ -936,6 +941,7 @@ exports[`renders button with icon 1`] = `
],
]
}
+ testID="button-text"
>
Icon Button
@@ -1142,6 +1148,7 @@ exports[`renders button with icon in reverse order 1`] = `
],
]
}
+ testID="button-text"
>
Right Icon
@@ -1291,6 +1298,7 @@ exports[`renders contained contained with mode 1`] = `
],
]
}
+ testID="button-text"
>
Contained Button
@@ -1439,6 +1447,7 @@ exports[`renders disabled button 1`] = `
],
]
}
+ testID="button-text"
>
Disabled Button
@@ -1795,6 +1804,7 @@ exports[`renders loading button 1`] = `
],
]
}
+ testID="button-text"
>
Loading Button
@@ -1944,6 +1954,7 @@ exports[`renders outlined button with mode 1`] = `
],
]
}
+ testID="button-text"
>
Outlined Button
@@ -2092,6 +2103,7 @@ exports[`renders text button by default 1`] = `
],
]
}
+ testID="button-text"
>
Text Button
@@ -2240,6 +2252,7 @@ exports[`renders text button with mode 1`] = `
],
]
}
+ testID="button-text"
>
Text Button
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
index 898077920c..d05e3575b1 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
@@ -1791,6 +1791,7 @@ exports[`renders data table pagination with options select 1`] = `
],
]
}
+ testID="button-text"
>
2
diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
index 12933a2b3c..2cb7237609 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
@@ -928,6 +928,7 @@ exports[`renders extended FAB 1`] = `
],
]
}
+ testID="fab-text"
>
Add items
@@ -1145,6 +1146,7 @@ exports[`renders extended FAB with custom size prop 1`] = `
],
]
}
+ testID="fab-text"
>
Add items
diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
index 93dc3d3acb..eea5ecdb7e 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -152,6 +152,7 @@ Array [
],
]
}
+ testID="button-text"
>
Open menu
@@ -656,6 +657,7 @@ exports[`renders not visible menu 1`] = `
],
]
}
+ testID="button-text"
>
Open menu
@@ -820,6 +822,7 @@ Array [
],
]
}
+ testID="button-text"
>
Open menu
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
index d1d8adb167..612c3b4333 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
@@ -481,6 +481,7 @@ exports[`renders snackbar with action button 1`] = `
],
]
}
+ testID="button-text"
>
Undo