fix: correct border radius based on roundness (#4260)

src/components/Chip/Chip.tsx

@@ -197,7 +197,7 @@ const Chip = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { isV3 } = theme;
+  const { isV3, roundness } = theme;
 
   const { current: elevation } = React.useRef<Animated.Value>(
     new Animated.Value(isV3 && elevated ? 1 : 0)
@@ -237,7 +237,7 @@ const Chip = ({
   });
 
   const opacity = isV3 ? 0.38 : 0.26;
-  const defaultBorderRadius = isV3 ? 8 : 16;
+  const defaultBorderRadius = roundness * (isV3 ? 2 : 4);
   const iconSize = isV3 ? 18 : 16;
 
   const {

src/components/FAB/utils.ts

@@ -366,7 +366,7 @@ const v3LargeSize = {
 const getCustomFabSize = (customSize: number, roundness: number) => ({
   height: customSize,
   width: customSize,
-  borderRadius: customSize / roundness,
+  borderRadius: roundness === 0 ? 0 : customSize / roundness,
 });
 
 export const getFabStyle = ({

src/components/__tests__/Chip.test.tsx

@@ -79,6 +79,18 @@ it('renders active chip if only onLongPress handler is passed', () => {
   });
 });
 
+it('renders chip with zero border radius', () => {
+  const { getByTestId } = render(
+    <Chip testID="active-chip" theme={{ roundness: 0 }}>
+      Active chip
+    </Chip>
+  );
+
+  expect(getByTestId('active-chip')).toHaveStyle({
+    borderRadius: 0,
+  });
+});
+
 describe('getChipColors - text color', () => {
   it('should return correct disabled color, for theme version 3', () => {
     expect(

src/components/__tests__/FAB.test.tsx

@@ -138,6 +138,14 @@ it('renders FAB with custom border radius', () => {
   expect(getByTestId('fab-container')).toHaveStyle({ borderRadius: 0 });
 });
 
+it('renders FAB with zero border radius', () => {
+  const { getByTestId } = render(
+    <FAB theme={{ roundness: 0 }} onPress={() => {}} icon="plus" testID="fab" />
+  );
+
+  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" />