refactor: searchbar component

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

@@ -287,6 +287,39 @@ The `overlayAccessibilityLabel` prop was renamed to `dismissAccessibilityLabel`:
 
 ### Searchbar
 
+The `Searchbar` modes use the latest Material 3 terminology in Paper 6.x:
+
+- **`mode="bar"`** → **`mode="contained"`**
+- **`mode="view"`** → **`mode="divided"`**
+
+```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 margin for that
+axis; it replaces the built-in margin and disables the focus animation:
+
+```tsx
+<Searchbar
+  value={query}
+  onChangeText={setQuery}
+  style={{ marginHorizontal: 0 }}
+/>
+```
+
+Only a margin naming that axis - `marginHorizontal`, `marginStart`, `marginEnd`,
+`marginLeft` or `marginRight` - replaces the animated one. The `margin`
+shorthand is less specific, so the horizontal margins keep animating around it.
+Use `marginVertical` when you only need vertical spacing and want to keep the
+animated horizontal margins.
+
 The misspelled `traileringIcon` props have been renamed:
 
 - **`traileringIcon`** → **`trailingIcon`**

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

@@ -29,22 +29,23 @@ const SearchExample = () => {
     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"
@@ -59,10 +60,10 @@ const SearchExample = () => {
             trailingIconAccessibilityLabel={'microphone button'}
             onTrailingIconPress={() => setIsVisible(true)}
             style={styles.searchbar}
-            mode="bar"
+            mode="contained"
           />
           <Searchbar
-            mode="bar"
+            mode="contained"
             placeholder="Trailing icon with right item"
             onChangeText={(query) =>
               setSearchQuery({
@@ -87,7 +88,7 @@ const SearchExample = () => {
             style={styles.searchbar}
           />
           <Searchbar
-            mode="bar"
+            mode="contained"
             placeholder="Right item"
             onChangeText={(query) =>
               setSearchQuery({
@@ -115,12 +116,12 @@ const SearchExample = () => {
             }
             value={searchQueries.loadingBarMode}
             style={styles.searchbar}
-            mode="bar"
+            mode="contained"
             loading
             trailingIcon={'microphone'}
           />
         </List.Section>
-        <List.Section title="View mode">
+        <List.Section title="Divided mode (deprecated)">
           <Searchbar
             placeholder="Search"
             onChangeText={(query) =>
@@ -131,7 +132,7 @@ const SearchExample = () => {
             }
             value={searchQueries.searchViewMode}
             style={styles.searchbar}
-            mode="view"
+            mode="divided"
           />
           <Searchbar
             placeholder="Search without bottom line"
@@ -143,7 +144,7 @@ const SearchExample = () => {
             }
             value={searchQueries.searchWithoutBottomLine}
             style={styles.searchbar}
-            mode="view"
+            mode="divided"
             showDivider={false}
           />
           <Searchbar
@@ -156,7 +157,7 @@ const SearchExample = () => {
             }
             value={searchQueries.loadingViewMode}
             style={styles.searchbar}
-            mode="view"
+            mode="divided"
             loading
           />
         </List.Section>
@@ -209,6 +210,30 @@ const SearchExample = () => {
             style={styles.searchbar}
           />
         </List.Section>
+        <List.Section title="With results">
+          <Searchbar
+            placeholder="Search fruit"
+            onChangeText={(query) =>
+              setSearchQuery({ ...searchQueries, withResults: query })
+            }
+            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
         visible={isVisible}
@@ -225,7 +250,7 @@ SearchExample.title = 'Searchbar';
 
 const styles = StyleSheet.create({
   searchbar: {
-    margin: 4,
+    marginVertical: 4,
   },
 });