fix: rename misspelled props and various typos (#5117)

Author: k0ndee

docs/6.x/docs/guides/fonts.md

@@ -57,7 +57,7 @@ Older Material Design 2 platform-split font configuration (`configureFonts` with
 In the latest version fonts in theme are structured based on the `variant` keys e.g. `displayLarge` or `bodyMedium` which are then used in `Text`'s component throughout the whole library.
 
 :::info
-The default `fontFamily` is different per particular platfrom:
+The default `fontFamily` is different per particular platform:
 
 ```js
 Platform.select({

docs/6.x/docs/guides/migration.md

@@ -188,6 +188,28 @@ e.g.:
 - The default elevation changed from level `1` to level `3`.
 - The `style` prop no longer configures the background color or border radius. You can override `theme.colors.surfaceContainerHigh` and `theme.shapes.corner.extraLarge` using the `theme` prop instead.
 
+### Searchbar
+
+The misspelled `traileringIcon` props have been renamed:
+
+- **`traileringIcon`** → **`trailingIcon`**
+- **`traileringIconColor`** → **`trailingIconColor`**
+- **`traileringIconAccessibilityLabel`** → **`trailingIconAccessibilityLabel`**
+- **`onTraileringIconPress`** → **`onTrailingIconPress`**
+
+```diff
+<Searchbar
+- traileringIcon="microphone"
+- traileringIconColor={colors.onSurfaceVariant}
+- traileringIconAccessibilityLabel="microphone button"
+- onTraileringIconPress={onMicrophonePress}
++ trailingIcon="microphone"
++ trailingIconColor={colors.onSurfaceVariant}
++ trailingIconAccessibilityLabel="microphone button"
++ onTrailingIconPress={onMicrophonePress}
+/>
+```
+
 ### TextInput
 
 The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly.

docs/src/components/ScreenshotTabs.tsx

@@ -16,17 +16,17 @@ const getClassName = (value: string) =>
     : `tabScreenshot${value.includes('full-width') ? 'full-width' : ''}`;
 
 const ScreenshotTabs = ({ screenshotData }: ScreenshotTabsProps) => {
-  const renderScreenhot = (src: string): ReactNode => (
+  const renderScreenshot = (src: string): ReactNode => (
     <img src={withBase(src)} className={getClassName(src)} />
   );
 
   if (typeof screenshotData === 'string') {
-    return renderScreenhot(screenshotData);
+    return renderScreenshot(screenshotData);
   }
 
   const screenshots = Object.entries(screenshotData).map(([key, value]) => (
     <TabItem key={key} value={key} label={key} default>
-      {typeof value === 'string' ? renderScreenhot(value) : null}
+      {typeof value === 'string' ? renderScreenshot(value) : null}
     </TabItem>
   ));
 

docs/src/data/themeColors.ts

@@ -164,7 +164,7 @@ export const themeColors = {
       'textColor/iconColor': 'theme.colors.onTertiaryContainer',
     },
     surface: {
-      backgroundColor: 'theme.colors.elevarion.level3',
+      backgroundColor: 'theme.colors.elevation.level3',
       'textColor/iconColor': 'theme.colors.primary',
     },
   },
@@ -186,7 +186,7 @@ export const themeColors = {
       'textColor/iconColor': 'theme.colors.onTertiaryContainer',
     },
     surface: {
-      backgroundColor: 'theme.colors.elevarion.level3',
+      backgroundColor: 'theme.colors.elevation.level3',
       'textColor/iconColor': 'theme.colors.primary',
     },
   },

example/src/Examples/SearchbarExample.tsx

@@ -19,8 +19,8 @@ const SearchExample = () => {
   const [isVisible, setIsVisible] = React.useState(false);
   const [searchQueries, setSearchQuery] = React.useState({
     searchBarMode: '',
-    traileringIcon: '',
-    traileringIconWithRightItem: '',
+    trailingIcon: '',
+    trailingIconWithRightItem: '',
     rightItem: '',
     loadingBarMode: '',
     searchViewMode: '',
@@ -47,36 +47,36 @@ const SearchExample = () => {
             mode="bar"
           />
           <Searchbar
-            placeholder="Trailering icon"
+            placeholder="Trailing icon"
             onChangeText={(query) =>
-              setSearchQuery({ ...searchQueries, traileringIcon: query })
+              setSearchQuery({ ...searchQueries, trailingIcon: query })
             }
-            value={searchQueries.traileringIcon}
-            traileringIcon={'microphone'}
-            traileringIconColor={
+            value={searchQueries.trailingIcon}
+            trailingIcon={'microphone'}
+            trailingIconColor={
               isVisible ? Palette.error40 : colors.onSurfaceVariant
             }
-            traileringIconAccessibilityLabel={'microphone button'}
-            onTraileringIconPress={() => setIsVisible(true)}
+            trailingIconAccessibilityLabel={'microphone button'}
+            onTrailingIconPress={() => setIsVisible(true)}
             style={styles.searchbar}
             mode="bar"
           />
           <Searchbar
             mode="bar"
-            placeholder="Trailering icon with right item"
+            placeholder="Trailing icon with right item"
             onChangeText={(query) =>
               setSearchQuery({
                 ...searchQueries,
-                traileringIconWithRightItem: query,
+                trailingIconWithRightItem: query,
               })
             }
-            value={searchQueries.traileringIconWithRightItem}
-            traileringIcon={'microphone'}
-            traileringIconColor={
+            value={searchQueries.trailingIconWithRightItem}
+            trailingIcon={'microphone'}
+            trailingIconColor={
               isVisible ? Palette.error40 : colors.onSurfaceVariant
             }
-            traileringIconAccessibilityLabel={'microphone button'}
-            onTraileringIconPress={() => setIsVisible(true)}
+            trailingIconAccessibilityLabel={'microphone button'}
+            onTrailingIconPress={() => setIsVisible(true)}
             right={(props) => (
               <Avatar.Image
                 {...props}
@@ -117,7 +117,7 @@ const SearchExample = () => {
             style={styles.searchbar}
             mode="bar"
             loading
-            traileringIcon={'microphone'}
+            trailingIcon={'microphone'}
           />
         </List.Section>
         <List.Section title="View mode">

src/components/Button/Button.tsx

@@ -74,7 +74,7 @@ export type Props = Omit<ViewProps, 'style'> & {
    */
   uppercase?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;

src/components/Checkbox/CheckboxItem.tsx

@@ -37,7 +37,7 @@ export type Props = {
    */
   onLongPress?: (e: GestureResponderEvent) => void;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;

src/components/Chip/Chip.tsx

@@ -75,7 +75,7 @@ export type Props = Omit<ViewProps, 'style'> & {
    */
   disabled?: boolean;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;

src/components/Drawer/DrawerItem.tsx

@@ -39,7 +39,7 @@ export type Props = ViewProps & {
    */
   onPress?: (e: GestureResponderEvent) => void;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;

src/components/List/ListAccordion.tsx

@@ -67,7 +67,7 @@ export type Props = {
    */
   theme?: ThemeProp;
   /**
-   * Type of background drawabale to display the feedback (Android).
+   * Type of background drawable to display the feedback (Android).
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;