fix: rename misspelled props and various typos

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;

src/components/Menu/MenuItem.tsx

@@ -46,11 +46,11 @@ export type Props = {
   /**
    * @supported Available in v5.x with theme version 3
    *
-   * Sets min height with densed layout.
+   * Sets min height with dense layout.
    */
   dense?: 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/RadioButton/RadioButtonItem.tsx

@@ -34,7 +34,7 @@ export type Props = {
    */
   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/Searchbar.tsx

@@ -82,25 +82,25 @@ export type Props = Omit<TextInputProps, 'style'> & {
   clearTestID?: string;
   /**
    * @supported Available in v5.x with theme version 3
-   * Icon name for the right trailering icon button.
+   * Icon name for the right trailing icon button.
    * Works only when `mode` is set to "bar". It won't be displayed if `loading` is set to `true`.
    */
-  traileringIcon?: IconSource;
+  trailingIcon?: IconSource;
   /**
    * @supported Available in v5.x with theme version 3
-   * Custom color for the right trailering icon, default will be derived from theme
+   * Custom color for the right trailing icon, default will be derived from theme
    */
-  traileringIconColor?: ColorValue;
+  trailingIconColor?: ColorValue;
   /**
-   * Callback to execute on the right trailering icon button press.
+   * Callback to execute on the right trailing icon button press.
    */
-  onTraileringIconPress?: (e: GestureResponderEvent) => void;
+  onTrailingIconPress?: (e: GestureResponderEvent) => void;
   /**
-   * Accessibility label for the right trailering icon button. This is read by the screen reader when the user taps the button.
+   * Accessibility label for the right trailing icon button. This is read by the screen reader when the user taps the button.
    */
-  traileringIconAccessibilityLabel?: string;
+  trailingIconAccessibilityLabel?: string;
   /**
-   * testID for the right trailering icon button.
+   * testID for the right trailing icon button.
    */
   trailingTestID?: string;
   /**
@@ -183,11 +183,11 @@ const Searchbar = ({
   clearAccessibilityLabel = 'clear',
   clearTestID,
   onClearIconPress,
-  traileringIcon,
-  traileringIconColor,
-  traileringIconAccessibilityLabel,
+  trailingIcon,
+  trailingIconColor,
+  trailingIconAccessibilityLabel,
   trailingTestID,
-  onTraileringIconPress,
+  onTrailingIconPress,
   right,
   mode = 'bar',
   showDivider = true,
@@ -242,8 +242,8 @@ const Searchbar = ({
 
   const isBarMode = mode === 'bar';
   const inputTextAlign = direction === 'rtl' ? 'right' : 'left';
-  const shouldRenderTraileringIcon =
-    isBarMode && traileringIcon && !loading && (!value || right !== undefined);
+  const shouldRenderTrailingIcon =
+    isBarMode && trailingIcon && !loading && (!value || right !== undefined);
 
   return (
     <Surface
@@ -333,14 +333,14 @@ const Searchbar = ({
           />
         </View>
       )}
-      {shouldRenderTraileringIcon ? (
+      {shouldRenderTrailingIcon ? (
         <IconButton
           role="button"
           borderless
-          onPress={onTraileringIconPress}
-          iconColor={traileringIconColor || colors.onSurfaceVariant}
-          icon={traileringIcon}
-          aria-label={traileringIconAccessibilityLabel}
+          onPress={onTrailingIconPress}
+          iconColor={trailingIconColor || colors.onSurfaceVariant}
+          icon={trailingIcon}
+          aria-label={trailingIconAccessibilityLabel}
           testID={trailingTestID}
         />
       ) : null}

src/components/SegmentedButtons/SegmentedButtonItem.tsx

@@ -59,7 +59,7 @@ export type Props = {
    */
   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/Surface.tsx

@@ -171,7 +171,7 @@ export type Props = Omit<ViewProps, 'pointerEvents' | 'style'> &
 const Surface = ({
   elevation = 1,
   children,
-  theme: overridenTheme,
+  theme: overriddenTheme,
   style,
   backgroundColor: customBackgroundColor,
   borderRadius,
@@ -194,7 +194,7 @@ const Surface = ({
   ref,
   ...rest
 }: Props) => {
-  const theme = useInternalTheme(overridenTheme);
+  const theme = useInternalTheme(overriddenTheme);
 
   const { colors } = theme;
 

src/components/TouchableRipple/TouchableRipple.tsx

@@ -24,7 +24,7 @@ export type Props = PressableProps & {
    */
   borderless?: 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?: Object;

src/components/Typography/Text.tsx

@@ -127,7 +127,7 @@ const Text = ({
         textStyle = [style, font];
       }
 
-      // Case two:  Nested `Text` has specified `styles` which intefere
+      // Case two:  Nested `Text` has specified `styles` which interfere
       //            with font properties, from the parent's `variant`. For example:
       //              <Chip>
       //                <Text style={{fontSize: 30}}>Nested</Text>

src/components/__tests__/Appbar/Appbar.test.tsx

@@ -89,7 +89,7 @@ describe('renderAppbarContent', () => {
     expect(result).toHaveLength(3);
   });
 
-  it('should render only children types specifed in renderOnly', () => {
+  it('should render only children types specified in renderOnly', () => {
     const result = renderAppbarContent({
       children,
       isDark: false,

src/components/__tests__/ListUtils.test.tsx

@@ -29,7 +29,7 @@ it('returns styles for left item without description', () => {
   expect(style).toStrictEqual({ ...styles.leftItemV3, marginVertical: 0 });
 });
 
-it('returns styles for left item w/ desctiption', () => {
+it('returns styles for left item w/ description', () => {
   const style = getLeftStyles(true, description);
   expect(style).toStrictEqual({
     ...styles.leftItemV3,
@@ -46,7 +46,7 @@ it('returns styles for right item without description', () => {
   expect(style).toStrictEqual({ ...styles.rightItemV3, marginVertical: 0 });
 });
 
-it('returns styles for right item w/ desctiption', () => {
+it('returns styles for right item w/ description', () => {
   const style = getRightStyles(true, description);
   expect(style).toStrictEqual({
     ...styles.rightItemV3,