Merge branch 'v6' of https://github.com/callstack/react-native-paper into @hristototov/feat/improve_RTL_handling

Author: Hristo Totov

example/src/Examples/TextInputExample.tsx

@@ -672,7 +672,7 @@ const TextInputExample = () => {
               <TextInput
                 mode="outlined"
                 theme={{
-                  roundness: 25,
+                  shapes: { corner: { extraSmall: 25 } },
                 }}
                 label="Outlined text input with custom roundness"
               />
@@ -681,7 +681,7 @@ const TextInputExample = () => {
               <TextInput
                 mode="outlined"
                 label="Outlined text input without roundness"
-                theme={{ roundness: 0 }}
+                theme={{ shapes: { corner: { extraSmall: 0 } } }}
               />
             </View>
             <View style={styles.inputContainerStyle}>

src/components/Button/Button.tsx

@@ -210,7 +210,7 @@ const Button = (
     },
     [mode]
   );
-  const { roundness, animation } = theme;
+  const { animation } = theme;
   const uppercase = uppercaseProp ?? false;
   const isWeb = Platform.OS === 'web';
 
@@ -271,7 +271,7 @@ const Button = (
     (style) => style.startsWith('border') && style.endsWith('Radius')
   );
 
-  const borderRadius = 5 * roundness;
+  const borderRadius = theme.shapes.corner.largeIncreased;
   const iconSize = 18;
 
   const {

src/components/Card/Card.tsx

@@ -181,7 +181,7 @@ const Card = (
   const { current: elevationDarkAdaptive } = React.useRef<Animated.Value>(
     new Animated.Value(cardElevation)
   );
-  const { animation, dark, mode, roundness } = theme;
+  const { animation, dark, mode } = theme;
 
   const prevDarkRef = React.useRef<boolean>(dark);
   React.useEffect(() => {
@@ -267,7 +267,7 @@ const Card = (
   );
 
   const borderRadiusCombinedStyles = {
-    borderRadius: 3 * roundness,
+    borderRadius: theme.shapes.corner.medium,
     ...borderRadiusStyles,
   };
 

src/components/Card/CardTitle.tsx

@@ -40,7 +40,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  titleVariant?: keyof typeof TypescaleKey;
+  titleVariant?: TypescaleKey;
   /**
    * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node.
    */
@@ -69,7 +69,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  subtitleVariant?: keyof typeof TypescaleKey;
+  subtitleVariant?: TypescaleKey;
   /**
    * Callback which returns a React element to display on the left side.
    */

src/components/Card/utils.tsx

@@ -26,17 +26,15 @@ export const getCardCoverStyle = ({
   index?: number;
   total?: number;
 }) => {
-  const { roundness } = theme;
-
   if (Object.keys(borderRadiusStyles).length > 0) {
     return {
-      borderRadius: 3 * roundness,
+      borderRadius: theme.shapes.corner.medium,
       ...borderRadiusStyles,
     };
   }
 
   return {
-    borderRadius: 3 * roundness,
+    borderRadius: theme.shapes.corner.medium,
   };
 };
 

src/components/Checkbox/CheckboxItem.tsx

@@ -86,7 +86,7 @@ export type Props = {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  labelVariant?: keyof typeof TypescaleKey;
+  labelVariant?: TypescaleKey;
   /**
    * @optional
    */

src/components/Chip/Chip.tsx

@@ -205,7 +205,6 @@ const Chip = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { roundness } = theme;
   const isWeb = Platform.OS === 'web';
 
   const { current: elevation } = React.useRef<Animated.Value>(
@@ -244,7 +243,7 @@ const Chip = ({
   });
 
   const opacity = 0.38;
-  const defaultBorderRadius = roundness * 2;
+  const defaultBorderRadius = theme.shapes.corner.small;
   const iconSize = 18;
 
   const {

src/components/Dialog/Dialog.tsx

@@ -105,8 +105,7 @@ const Dialog = ({
 }: Props) => {
   const { right, left } = useSafeAreaInsets();
   const theme = useInternalTheme(themeOverrides);
-  const { roundness } = theme as Theme;
-  const borderRadius = 7 * roundness;
+  const borderRadius = (theme as Theme).shapes.corner.extraLarge;
 
   const backgroundColor = theme.colors.surfaceContainerHigh;
 

src/components/Drawer/DrawerItem.tsx

@@ -100,15 +100,14 @@ const DrawerItem = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { roundness } = theme;
 
   const backgroundColor = active ? theme.colors.secondaryContainer : undefined;
   const contentColor = active
     ? theme.colors.onSecondaryContainer
     : theme.colors.onSurfaceVariant;
 
   const labelMargin = icon ? 12 : 0;
-  const borderRadius = 7 * roundness;
+  const borderRadius = theme.shapes.corner.extraLarge;
   const font = theme.fonts.labelLarge;
 
   return (

src/components/FAB/utils.ts

@@ -278,10 +278,10 @@ const v3LargeSize = {
   width: 96,
 };
 
-const getCustomFabSize = (customSize: number, roundness: number) => ({
+const getCustomFabSize = (customSize: number) => ({
   height: customSize,
   width: customSize,
-  borderRadius: roundness === 0 ? 0 : customSize / roundness,
+  borderRadius: customSize / 4,
 });
 
 export const getFabStyle = ({
@@ -293,17 +293,15 @@ export const getFabStyle = ({
   size: 'small' | 'medium' | 'large';
   theme: InternalTheme;
 }) => {
-  const { roundness } = theme;
-
-  if (customSize) return getCustomFabSize(customSize, roundness);
+  if (customSize) return getCustomFabSize(customSize);
 
   switch (size) {
     case 'small':
-      return { ...v3SmallSize, borderRadius: 3 * roundness };
+      return { ...v3SmallSize, borderRadius: theme.shapes.corner.medium };
     case 'medium':
-      return { ...v3MediumSize, borderRadius: 4 * roundness };
+      return { ...v3MediumSize, borderRadius: theme.shapes.corner.large };
     case 'large':
-      return { ...v3LargeSize, borderRadius: 7 * roundness };
+      return { ...v3LargeSize, borderRadius: theme.shapes.corner.extraLarge };
   }
 };