fix: change trailering to trailing (#3840)

Author: jahirfiquitiva

example/src/Examples/SearchbarExample.tsx

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

src/components/Searchbar.tsx

@@ -84,29 +84,29 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
   clearAccessibilityLabel?: 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?: string;
+  trailingIconColor?: string;
   /**
    * @supported Available in v5.x with theme version 3
-   * Color of the trailering icon ripple effect.
+   * Color of the trailing icon ripple effect.
    */
-  traileringRippleColor?: ColorValue;
+  trailingRippleColor?: ColorValue;
   /**
    * @supported Available in v5.x with theme version 3
-   * 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;
   /**
    * @supported Available in v5.x with theme version 3
    * Callback which returns a React element to display on the right side.
@@ -187,11 +187,11 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
       clearIcon,
       clearAccessibilityLabel = 'clear',
       onClearIconPress,
-      traileringIcon,
-      traileringIconColor,
-      traileringIconAccessibilityLabel,
-      traileringRippleColor: customTraileringRippleColor,
-      onTraileringIconPress,
+      trailingIcon,
+      trailingIconColor,
+      trailingIconAccessibilityLabel,
+      trailingRippleColor: customTrailingRippleColor,
+      onTrailingIconPress,
       right,
       mode = 'bar',
       showDivider = true,
@@ -243,8 +243,8 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
     const iconColor = customIconColor || onSurfaceVariant;
     const rippleColor =
       customRippleColor || color(onSurfaceVariant).alpha(0.32).rgb().string();
-    const traileringRippleColor =
-      customTraileringRippleColor ||
+    const trailingRippleColor =
+      customTrailingRippleColor ||
       color(onSurfaceVariant).alpha(0.32).rgb().string();
 
     const font = {
@@ -256,11 +256,8 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
     };
 
     const isBarMode = mode === 'bar';
-    const shouldRenderTraileringIcon =
-      isBarMode &&
-      traileringIcon &&
-      !loading &&
-      (!value || right !== undefined);
+    const shouldRenderTrailingIcon =
+      isBarMode && trailingIcon && !loading && (!value || right !== undefined);
 
     return (
       <Surface
@@ -362,16 +359,16 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
             />
           </View>
         )}
-        {shouldRenderTraileringIcon ? (
+        {shouldRenderTrailingIcon ? (
           <IconButton
             accessibilityRole="button"
             borderless
-            onPress={onTraileringIconPress}
-            iconColor={traileringIconColor || onSurfaceVariant}
-            rippleColor={traileringRippleColor}
-            icon={traileringIcon}
-            accessibilityLabel={traileringIconAccessibilityLabel}
-            testID={`${testID}-trailering-icon`}
+            onPress={onTrailingIconPress}
+            iconColor={trailingIconColor || onSurfaceVariant}
+            rippleColor={trailingRippleColor}
+            icon={trailingIcon}
+            accessibilityLabel={trailingIconAccessibilityLabel}
+            testID={`${testID}-trailing-icon`}
           />
         ) : null}
         {isBarMode &&

src/components/__tests__/Searchbar.test.tsx

@@ -151,75 +151,75 @@ it('render clear icon with custom ripple color', () => {
   expect(clearIconContainer.props.rippleColor).toBe('purple');
 });
 
-it('renders trailering icon when mode is set to "bar"', () => {
+it('renders trailing icon when mode is set to "bar"', () => {
   const { getByTestId } = render(
     <Searchbar
       testID="search-bar"
       value={''}
-      traileringIcon={'microphone'}
+      trailingIcon={'microphone'}
       mode="bar"
     />
   );
 
-  expect(getByTestId('search-bar-trailering-icon')).toBeTruthy();
+  expect(getByTestId('search-bar-trailing-icon')).toBeTruthy();
 });
 
-it('renders trailering icon with press functionality', () => {
-  const onTraileringIconPressMock = jest.fn();
+it('renders trailing icon with press functionality', () => {
+  const onTrailingIconPressMock = jest.fn();
 
   const { getByTestId } = render(
     <Searchbar
       testID="search-bar"
       value={''}
-      traileringIcon={'microphone'}
-      onTraileringIconPress={onTraileringIconPressMock}
+      trailingIcon={'microphone'}
+      onTrailingIconPress={onTrailingIconPressMock}
       mode="bar"
     />
   );
 
-  fireEvent(getByTestId('search-bar-trailering-icon'), 'onPress');
-  expect(onTraileringIconPressMock).toHaveBeenCalledTimes(1);
+  fireEvent(getByTestId('search-bar-trailing-icon'), 'onPress');
+  expect(onTrailingIconPressMock).toHaveBeenCalledTimes(1);
 });
 
-it('renders trailering icon with custom ripple colors', () => {
+it('renders trailing icon with custom ripple colors', () => {
   const { getByTestId } = render(
     <Searchbar
       testID="search-bar"
       value={''}
-      traileringRippleColor={'purple'}
-      traileringIcon={'microphone'}
+      trailingRippleColor={'purple'}
+      trailingIcon={'microphone'}
       mode="bar"
     />
   );
 
-  const traileringIconContainer = getByTestId(
-    'search-bar-trailering-icon-container'
+  const trailingIconContainer = getByTestId(
+    'search-bar-trailing-icon-container'
   ).props.children;
-  expect(traileringIconContainer.props.rippleColor).toBe('purple');
+  expect(trailingIconContainer.props.rippleColor).toBe('purple');
 });
 
-it('renders clear icon instead of trailering icon', () => {
+it('renders clear icon instead of trailing icon', () => {
   const { getByTestId, update, queryByTestId } = render(
     <Searchbar
       testID="search-bar"
       value={''}
-      traileringIcon={'microphone'}
+      trailingIcon={'microphone'}
       mode="bar"
     />
   );
 
-  expect(getByTestId('search-bar-trailering-icon')).toBeTruthy();
+  expect(getByTestId('search-bar-trailing-icon')).toBeTruthy();
 
   update(
     <Searchbar
       testID="search-bar"
       value={'test'}
-      traileringIcon={'microphone'}
+      trailingIcon={'microphone'}
       mode="bar"
     />
   );
 
-  expect(queryByTestId('search-bar-trailering-icon')).toBeNull();
+  expect(queryByTestId('search-bar-trailing-icon')).toBeNull();
   expect(getByTestId('search-bar-icon-wrapper')).toBeTruthy();
 });