refactor: searchbar component

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

@@ -25,6 +25,7 @@ The following props now accept animated styles returned from `useAnimatedStyle`.
 - `Searchbar`: `style`
 - `Snackbar`: `style`
 - `Surface`: `style`
+- `ToggleButton`: `style`
 
 So you can use Reanimated's `useSharedValue` and `useAnimatedStyle` to animate these components instead of the React Native `Animated` API.
 
@@ -70,41 +71,12 @@ You can use the component's color prop where available, or override the correspo
 
 ### Test IDs
 
-Hardcoded default test IDs have been removed for the components listed below:
-
-- `Appbar.Content`: `appbar-content`
-- `Appbar.Header`: `appbar-header`
-- `BottomNavigation`: `bottom-navigation`
-- `BottomNavigation.Bar`: `bottom-navigation-bar`
-- `Button`: `button`
-- `Card`: `card`
-- `Chip`: `chip`
-- `Drawer.CollapsedItem`: `drawer-collapsed-item`
-- `FAB`: `floating-action-button`
-- `FAB.Extended`: `extended-floating-action-button`
-- `FAB.Menu`: `floating-action-button-menu`
-- `IconButton`: `icon-button`
-- `Menu`: `menu`
-- `Menu.Item`: `menu-item`
-- `Modal`: `modal`
-- `ProgressBar`: `progress-bar`
-- `Searchbar`: `search-bar`
-- `Surface`: `surface`
-
-You can specify a `testID` explicitly to restore each component's own test ID.
-
-These components used to also derive test IDs for internal, implementation-only elements by appending a suffix to the `testID` prop (e.g. `${testID}-container`, `${testID}-icon`, `${testID}-outline`). They have been removed entirely.
-
-If you were relying on internal test IDs, update your tests not to rely on internal implementation details and only interact with elements or assert content your users can reach, e.g.: query by role, label, text etc., or `testID` props accepted by the component.
-
-Some components now accept explicit `testID` props for their interactable elements:
-
-- `BottomNavigation`: `barTestID` for the internal `BottomNavigation.Bar`, replacing the previous `${testID}-bar` derivation.
-- `Chip`: `closeIconTestID` for the close icon button.
-- `Dialog` and `Modal`: `overlayTestID` for the overlay displayed behind the content.
-- `Menu`: `overlayTestID` for the overlay displayed behind the menu.
-- `Searchbar`: `searchTestID`, `clearTestID`, and `trailingTestID` for the search, clear, and trailing icon buttons.
-- `Snackbar`: `iconTestID` for the icon button.
+Some hardcoded and generated test IDs have been removed for the following components:
+
+- `Appbar.Header`: `${testID}-root-layer`
+- `Surface`: `surface` and `${testID}-outer-layer`
+
+You can specify a `testID` explicitly and use that value to query the component.
 
 ## Components
 
@@ -189,26 +161,37 @@ e.g.:
 
 ### Searchbar
 
-The misspelled `traileringIcon` props have been renamed:
+The `Searchbar` modes use the latest Material 3 terminology in Paper 6.x:
 
-- **`traileringIcon`** → **`trailingIcon`**
-- **`traileringIconColor`** → **`trailingIconColor`**
-- **`traileringIconAccessibilityLabel`** → **`trailingIconAccessibilityLabel`**
-- **`onTraileringIconPress`** → **`onTrailingIconPress`**
+- **`mode="bar"`** → **`mode="contained"`**
+- **`mode="view"`** → **`mode="divided"`**
 
-```diff
+```tsx
+// Before (v5)
+<Searchbar mode="bar" value={query} onChangeText={setQuery} />
+<Searchbar mode="view" value={query} onChangeText={setQuery} />
+
+// After (v6)
+<Searchbar mode="contained" value={query} onChangeText={setQuery} />
+<Searchbar mode="divided" value={query} onChangeText={setQuery} />
+```
+
+The default `contained` mode adds 24dp horizontal margins and animates them to
+12dp while focused. To keep a full-width Searchbar, provide a horizontal margin;
+this replaces the built-in margin and disables the focus animation:
+
+```tsx
 <Searchbar
-- traileringIcon="microphone"
-- traileringIconColor={colors.onSurfaceVariant}
-- traileringIconAccessibilityLabel="microphone button"
-- onTraileringIconPress={onMicrophonePress}
-+ trailingIcon="microphone"
-+ trailingIconColor={colors.onSurfaceVariant}
-+ trailingIconAccessibilityLabel="microphone button"
-+ onTrailingIconPress={onMicrophonePress}
+  value={query}
+  onChangeText={setQuery}
+  style={{ marginHorizontal: 0 }}
 />
 ```
 
+Any horizontal margin, including `margin`, disables the built-in focus
+animation. Use `marginVertical` when you only need vertical spacing and want to
+keep the animated horizontal margins.
+
 ### 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.
@@ -329,31 +312,3 @@ const theme = {
   style={{ fontSize: 16, color: '#1C1B1F' }}
 />
 ```
-
-### ToggleButton
-
-`ToggleButton`, `ToggleButton.Group` and `ToggleButton.Row` were removed. For an
-icon-only toggle, use `IconButton` with the `selected` prop. For a set of
-mutually exclusive options, use `SegmentedButtons`.
-
-```tsx
-// Before (v5)
-<ToggleButton.Group value={value} onValueChange={setValue}>
-  <ToggleButton icon="format-bold" value="bold" />
-  <ToggleButton icon="format-italic" value="italic" />
-</ToggleButton.Group>
-
-// After (v6)
-<>
-  <IconButton
-    icon="format-bold"
-    selected={value === 'bold'}
-    onPress={() => setValue('bold')}
-  />
-  <IconButton
-    icon="format-italic"
-    selected={value === 'italic'}
-    onPress={() => setValue('italic')}
-  />
-</>
-```

docs/component-docs.config.ts

@@ -130,7 +130,10 @@ const pages = {
     RadioButtonIOS: 'RadioButton/RadioButtonIOS',
     RadioButtonItem: 'RadioButton/RadioButtonItem',
   },
-  Searchbar: 'Searchbar',
+  Searchbar: {
+    Searchbar: 'Searchbar/Searchbar',
+    SearchbarResults: 'Searchbar/SearchbarResults',
+  },
   SegmentedButtons: {
     SegmentedButtons: 'SegmentedButtons/SegmentedButtons',
   },

docs/src/data/screenshots.ts

@@ -126,8 +126,8 @@ export const screenshots = {
   },
   'RadioButton.Item': 'screenshots/radio-item.ios.png',
   Searchbar: {
-    bar: 'screenshots/searchbar.png',
-    view: 'screenshots/searchbar-view.png',
+    contained: 'screenshots/searchbar.png',
+    divided: 'screenshots/searchbar-view.png',
   },
   SegmentedButtons: {
     'single select': 'screenshots/segmented-button-single-select.png',

docs/src/data/themeColors.ts

@@ -272,11 +272,11 @@ export const themeColors = {
   },
   Searchbar: {
     '-': {
-      backgroundColor: 'theme.colors.elevation.level3',
-      placeholderTextColor: 'theme.colors.onSurface',
-      textColor: 'theme.colors.onSurfaceVariant',
+      backgroundColor: 'theme.colors.surfaceContainerHigh',
+      placeholderTextColor: 'theme.colors.onSurfaceVariant',
+      textColor: 'theme.colors.onSurface',
       selectionColor: 'theme.colors.primary',
-      iconColor: 'theme.colors.onSurfaceVariant',
+      iconColor: 'theme.colors.onSurface',
       trailingIconColor: 'theme.colors.onSurfaceVariant',
       dividerColor: 'theme.colors.outline',
     },

example/src/Examples/SearchbarExample.tsx

@@ -19,64 +19,64 @@ const SearchExample = () => {
   const [isVisible, setIsVisible] = React.useState(false);
   const [searchQueries, setSearchQuery] = React.useState({
     searchBarMode: '',
-    trailingIcon: '',
-    trailingIconWithRightItem: '',
+    traileringIcon: '',
+    traileringIconWithRightItem: '',
     rightItem: '',
     loadingBarMode: '',
     searchViewMode: '',
     searchWithoutBottomLine: '',
     loadingViewMode: '',
     clickableBack: '',
     clickableDrawer: '',
-    clickableLoading: '',
+    withResults: '',
   });
 
   const { colors } = useTheme();
 
   return (
     <>
       <ScreenWrapper>
-        <List.Section title="Bar mode">
+        <List.Section title="Contained mode">
           <Searchbar
             placeholder="Search"
             onChangeText={(query) =>
               setSearchQuery({ ...searchQueries, searchBarMode: query })
             }
             value={searchQueries.searchBarMode}
             style={styles.searchbar}
-            mode="bar"
+            mode="contained"
           />
           <Searchbar
-            placeholder="Trailing icon"
+            placeholder="Trailering icon"
             onChangeText={(query) =>
-              setSearchQuery({ ...searchQueries, trailingIcon: query })
+              setSearchQuery({ ...searchQueries, traileringIcon: query })
             }
-            value={searchQueries.trailingIcon}
-            trailingIcon={'microphone'}
-            trailingIconColor={
+            value={searchQueries.traileringIcon}
+            traileringIcon={'microphone'}
+            traileringIconColor={
               isVisible ? Palette.error40 : colors.onSurfaceVariant
             }
-            trailingIconAccessibilityLabel={'microphone button'}
-            onTrailingIconPress={() => setIsVisible(true)}
+            traileringIconAccessibilityLabel={'microphone button'}
+            onTraileringIconPress={() => setIsVisible(true)}
             style={styles.searchbar}
-            mode="bar"
+            mode="contained"
           />
           <Searchbar
-            mode="bar"
-            placeholder="Trailing icon with right item"
+            mode="contained"
+            placeholder="Trailering icon with right item"
             onChangeText={(query) =>
               setSearchQuery({
                 ...searchQueries,
-                trailingIconWithRightItem: query,
+                traileringIconWithRightItem: query,
               })
             }
-            value={searchQueries.trailingIconWithRightItem}
-            trailingIcon={'microphone'}
-            trailingIconColor={
+            value={searchQueries.traileringIconWithRightItem}
+            traileringIcon={'microphone'}
+            traileringIconColor={
               isVisible ? Palette.error40 : colors.onSurfaceVariant
             }
-            trailingIconAccessibilityLabel={'microphone button'}
-            onTrailingIconPress={() => setIsVisible(true)}
+            traileringIconAccessibilityLabel={'microphone button'}
+            onTraileringIconPress={() => setIsVisible(true)}
             right={(props) => (
               <Avatar.Image
                 {...props}
@@ -87,7 +87,7 @@ const SearchExample = () => {
             style={styles.searchbar}
           />
           <Searchbar
-            mode="bar"
+            mode="contained"
             placeholder="Right item"
             onChangeText={(query) =>
               setSearchQuery({
@@ -115,12 +115,12 @@ const SearchExample = () => {
             }
             value={searchQueries.loadingBarMode}
             style={styles.searchbar}
-            mode="bar"
+            mode="contained"
             loading
-            trailingIcon={'microphone'}
+            traileringIcon={'microphone'}
           />
         </List.Section>
-        <List.Section title="View mode">
+        <List.Section title="Divided mode (deprecated)">
           <Searchbar
             placeholder="Search"
             onChangeText={(query) =>
@@ -131,7 +131,7 @@ const SearchExample = () => {
             }
             value={searchQueries.searchViewMode}
             style={styles.searchbar}
-            mode="view"
+            mode="divided"
           />
           <Searchbar
             placeholder="Search without bottom line"
@@ -143,7 +143,7 @@ const SearchExample = () => {
             }
             value={searchQueries.searchWithoutBottomLine}
             style={styles.searchbar}
-            mode="view"
+            mode="divided"
             showDivider={false}
           />
           <Searchbar
@@ -156,7 +156,7 @@ const SearchExample = () => {
             }
             value={searchQueries.loadingViewMode}
             style={styles.searchbar}
-            mode="view"
+            mode="divided"
             loading
           />
         </List.Section>
@@ -196,18 +196,30 @@ const SearchExample = () => {
             icon="menu"
             style={styles.searchbar}
           />
+        </List.Section>
+        <List.Section title="With results">
           <Searchbar
-            placeholder="Search"
+            placeholder="Search fruit"
             onChangeText={(query) =>
-              setSearchQuery({
-                ...searchQueries,
-                clickableLoading: query,
-              })
+              setSearchQuery({ ...searchQueries, withResults: query })
             }
-            value={searchQueries.clickableLoading}
-            loading
+            value={searchQueries.withResults}
             style={styles.searchbar}
+            mode="contained"
           />
+          {searchQueries.withResults ? (
+            <Searchbar.Results style={styles.searchbar}>
+              {['Apple', 'Apricot', 'Avocado', 'Banana', 'Blueberry']
+                .filter((fruit) =>
+                  fruit
+                    .toLowerCase()
+                    .includes(searchQueries.withResults.toLowerCase())
+                )
+                .map((fruit) => (
+                  <List.Item key={fruit} title={fruit} />
+                ))}
+            </Searchbar.Results>
+          ) : null}
         </List.Section>
       </ScreenWrapper>
       <Snackbar
@@ -225,7 +237,7 @@ SearchExample.title = 'Searchbar';
 
 const styles = StyleSheet.create({
   searchbar: {
-    margin: 4,
+    marginVertical: 4,
   },
 });