SearchBar enhancement e2e test and documentation

Author: markdevocht

playground/e2e/SearchBar.test.js

@@ -16,6 +16,17 @@ describe.e2e(':ios: SearchBar', () => {
     await elementById(TestIDs.HIDE_SEARCH_BAR_BTN).tap();
     await expect(elementByTraits(['searchField'])).toBeNotVisible();
   });
+
+  it('find magnifying button in integrated placement and tap it', async () => {
+    await elementById(TestIDs.TOGGLE_PLACEMENT_BTN).tap();
+    await elementById(TestIDs.SHOW_SEARCH_BAR_BTN).tap();
+    const searchButton = element(
+      by.type('_UIButtonBarButton').and(by.label('Search')).withAncestor(by.type('UINavigationBar'))
+    );
+    await expect(searchButton).toBeVisible();
+    await searchButton.tap();
+    await expect(elementByTraits(['searchField'])).toBeVisible();
+  });
 });
 
 describe.e2e(':ios: SearchBar Modal', () => {
@@ -38,4 +49,16 @@ describe.e2e(':ios: SearchBar Modal', () => {
     await elementById(TestIDs.DISMISS_MODAL_TOPBAR_BTN).tap();
     await expect(elementById(TestIDs.OPTIONS_TAB)).toBeVisible();
   });
-});
+
+  it('find magnifying button in integrated placement and tap it', async () => {
+    await elementById(TestIDs.TOGGLE_PLACEMENT_BTN).tap();
+    await elementById(TestIDs.SHOW_SEARCH_BAR_BTN).tap();
+    const searchButton = element(
+      by.type('UISearchBarTextField').withAncestor(by.type('_UIFloatingBarContainerView'))
+    );
+    await expect(searchButton).toExist();
+    await expect(element(by.type('_UISearchBarFieldEditor'))).not.toExist();
+    await searchButton.tap();
+    await expect(element(by.type('_UISearchBarFieldEditor'))).toExist();
+  });
+});

playground/src/screens/SearchBar.tsx

@@ -6,7 +6,7 @@ import Button from '../components/Button';
 import Navigation from '../services/Navigation';
 import testIDs from '../testIDs';
 
-const { HIDE_TOP_BAR_BTN, SHOW_TOP_BAR_BTN, SHOW_SEARCH_BAR_BTN, HIDE_SEARCH_BAR_BTN, TOP_BAR } =
+const { HIDE_TOP_BAR_BTN, SHOW_TOP_BAR_BTN, SHOW_SEARCH_BAR_BTN, HIDE_SEARCH_BAR_BTN, TOP_BAR, TOGGLE_PLACEMENT_BTN } =
   testIDs;
 
 interface Props extends NavigationProps { }
@@ -38,6 +38,7 @@ export default class SearchBar extends React.Component<Props> {
         <Button label="Show SearchBar" testID={SHOW_SEARCH_BAR_BTN} onPress={this.showSearchBar} />
         <Button
           label={`Toggle Placement (${this.state.placement})`}
+          testID={TOGGLE_PLACEMENT_BTN}
           onPress={this.togglePlacement}
         />
       </Root>
@@ -83,7 +84,13 @@ export default class SearchBar extends React.Component<Props> {
     Navigation.mergeOptions(this, {
       topBar: {
         searchBar: {
-          visible: true,
+          visible: false,
+        },
+      },
+    });
+    Navigation.mergeOptions(this, {
+      topBar: {
+        searchBar: {
           placement: newPlacement,
         },
       },

playground/src/screens/SearchBarModal.tsx

@@ -5,9 +5,9 @@ import Root from '../components/Root';
 import Navigation from '../services/Navigation';
 import testIDs from '../testIDs';
 
-const { SHOW_SEARCH_BAR_BTN, HIDE_SEARCH_BAR_BTN, TOP_BAR } = testIDs;
+const { SHOW_SEARCH_BAR_BTN, HIDE_SEARCH_BAR_BTN, TOP_BAR, TOGGLE_PLACEMENT_BTN } = testIDs;
 
-interface Props extends NavigationProps {}
+interface Props extends NavigationProps { }
 
 export default class SearchBarModal extends React.Component<Props> {
   static options() {
@@ -36,6 +36,7 @@ export default class SearchBarModal extends React.Component<Props> {
         <Button label="Show SearchBar" testID={SHOW_SEARCH_BAR_BTN} onPress={this.showSearchBar} />
         <Button
           label={`Toggle Placement (${this.state.placement})`}
+          testID={TOGGLE_PLACEMENT_BTN}
           onPress={this.togglePlacement}
         />
       </Root>
@@ -67,7 +68,13 @@ export default class SearchBarModal extends React.Component<Props> {
     Navigation.mergeOptions(this, {
       topBar: {
         searchBar: {
-          visible: true,
+          visible: false,
+        },
+      },
+    });
+    Navigation.mergeOptions(this, {
+      topBar: {
+        searchBar: {
           placement: newPlacement,
         },
       },

playground/src/testIDs.ts

@@ -218,6 +218,7 @@ const testIDs = {
   TOGGLE_REACT_DECLARED_MODAL: 'TOGGLE_REACT_DECLARED_MODAL',
   REPLACE_TAB_TEST_ID: 'REPLACE_TAB_TEST_ID',
   REPLACED_TAB: 'REPLACED_TAB',
+  TOGGLE_PLACEMENT_BTN: 'TOGGLE_PLACEMENT_BTN',
   MOUNTED_SCREENS_TEXT: 'MOUNTED_SCREENS_TEXT',
   SCREEN_ROOT: 'SCREEN_ROOT',
   SCREEN_ROOT_LIST: 'SCREEN_ROOT_LIST',

website/docs/api/topBar-searchBar.mdx

@@ -58,3 +58,10 @@ sidebar_label: Layout
 | Type                    | Required | Platform | Description                                           |
 | ----------------------- | -------- | -------- | ----------------------------------------------------- |
 | string                  | No       | iOS      | The text value of "Cancel" button in the UISearchBar. |
+
+## `placement`
+
+| Type                    | Required | Platform | Description                                                                             |
+| ----------------------- | -------- | -------- | --------------------------------------------------------------------------------------- |
+| string                  | No       | iOS 26   | 'stacked' (default) or 'integrated' where 'integrated' is the new iOS 26 look and feel. |
+