From 541e5920b8218808b86c00f61ffc156de0e1b9ad Mon Sep 17 00:00:00 2001
From: Matt Kubej <86790511+mattkubej@users.noreply.github.com>
Date: Fri, 21 Jul 2023 11:20:02 -0400
Subject: [PATCH] [TopBar] grid alignment and center search (#9765)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Updates the `TopBar` component, so that the search field sits center of
the viewport with large screens. It becomes slightly offset and expands
to fill its column at smaller viewports.

Note: after additional review there are adjustments within this PR that
are not represented within the illustrated specification. Those
adjustments are listed below.

- Without editions, the search field will have a max-width of 580px
- With editions, the search field will have a max-width of 480px
- Search field remains centered, but collapses to account for left and
right content
- At medium breakpoint and above, 24px gap between columns
- Below medium breakpoint, 4px gap between columns

<details>
<summary>Specifications</summary>


![image](https://github.com/Shopify/polaris/assets/86790511/b7423c80-a9ca-4989-84e8-2997835ed9ed)
</details>

### WHAT is this pull request doing?

Switches the `TopBar` to a grid layout, which adjusts the column
configuration based on breakpoint. Additionally, the `TopBar` takes
responsibility for managing the width of the search field rather than
the search field itself. The search field will just need to expand (i.e.
width 100%) to fill its container within the `TopBar` component. This
places the `TopBar` in finer control of the layout of the `TopBar`,
specifically with regards to alignment of the search field.

### How to 🎩

-
[Storybook](https://storybook.web.polaris-top-bar.matt-kubej.us.spin.dev/?path=/story/all-components-topbar--default)
- [Spin
web](https://admin.web.polaris-top-bar.matt-kubej.us.spin.dev/store/shop1)
(associated [PR](https://github.com/Shopify/web/pull/98702) containing
required web changes)

1. Validate the `TopBar` aligns with the specifications at various
viewports
2. Repeat step 1 with editions enabled.

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] ~~Updated the component's `README.md` with documentation changes~~
(component does not have a README)
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/spicy-elephants-clap.md            |  5 ++
 .../src/components/TopBar/TopBar.scss         | 59 +++++++++++--------
 .../src/components/TopBar/TopBar.tsx          | 10 ++--
 .../components/SearchField/SearchField.scss   |  1 -
 4 files changed, 46 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/spicy-elephants-clap.md

diff --git a/.changeset/spicy-elephants-clap.md b/.changeset/spicy-elephants-clap.md
new file mode 100644
index 00000000000..a0a92fbd427
--- /dev/null
+++ b/.changeset/spicy-elephants-clap.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+[TopBar] convert to grid and center align search field
diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss
index b57ae87c558..6ec80607024 100644
--- a/polaris-react/src/components/TopBar/TopBar.scss
+++ b/polaris-react/src/components/TopBar/TopBar.scss
@@ -1,18 +1,39 @@
 @import '../../styles/common';
 @import './variables';
 
-$icon-size: 20px;
+$navigation-column-width: 240px;
+$search-column-width: 580px;
+$search-column-width-se23: 480px;
+
+$left-column: 1fr;
+$left-column-md-up: minmax($navigation-column-width, 1fr);
+$search-column: minmax(auto, $search-column-width);
+$search-column-se23: minmax(auto, $search-column-width-se23);
+$right-column: 1fr;
 
 .TopBar {
   position: relative;
-  display: flex;
+  display: grid;
+  grid-template-columns: $left-column $search-column $right-column;
+  align-items: center;
   height: $top-bar-height;
   box-shadow: var(--p-shadow-sm);
   background-color: var(--p-color-bg);
+  gap: var(--p-space-1);
 
   #{$se23} & {
     background-color: var(--p-color-bg-inverse);
     box-shadow: var(--p-shadow-xs);
+    grid-template-columns: $left-column $search-column-se23 $right-column;
+  }
+
+  @media #{$p-breakpoints-md-up} {
+    gap: var(--p-space-6);
+    grid-template-columns: $left-column-md-up $search-column $right-column;
+
+    #{$se23} & {
+      grid-template-columns: $left-column-md-up $search-column-se23 $right-column;
+    }
   }
 
   &::after {
@@ -132,12 +153,16 @@ $icon-size: 20px;
   // stylelint-enable selector-max-specificity
 }
 
-.Contents {
+.LeftContent {
+  display: flex;
+}
+
+.Search {
   z-index: var(--p-z-index-1);
   display: flex;
   flex: 1 1 auto;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
   height: 100%;
 
   @media #{$p-breakpoints-md-up} {
@@ -145,27 +170,13 @@ $icon-size: 20px;
   }
 }
 
-.SearchField {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include page-layout;
-  position: relative;
-  width: 100%;
-  margin: 0;
-  max-width: none;
-  margin-right: var(--p-space-1);
-
-  @media #{$p-breakpoints-xl-up} {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    margin-left: calc((100% - #{$page-max-width}) / 2);
-  }
-
-  #{$se23} & {
-    padding: 0;
+.RightContent {
+  display: flex;
+  justify-content: flex-end;
+}
 
-    @media #{$p-breakpoints-md-up} {
-      padding: 0 var(--p-space-6);
-    }
-  }
+.SecondaryMenu {
+  margin-left: var(--p-space-2);
 }
 
 .SecondaryMenu svg {
diff --git a/polaris-react/src/components/TopBar/TopBar.tsx b/polaris-react/src/components/TopBar/TopBar.tsx
index 3cf1ea28ae9..3631f10b4ee 100644
--- a/polaris-react/src/components/TopBar/TopBar.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.tsx
@@ -142,10 +142,12 @@ export const TopBar: React.FunctionComponent<TopBarProps> & {
 
   return (
     <div className={styles.TopBar}>
-      {navigationButtonMarkup}
-      {contextMarkup}
-      <div className={styles.Contents}>
-        <div className={styles.SearchField}>{searchMarkup}</div>
+      <div className={styles.LeftContent}>
+        {navigationButtonMarkup}
+        {contextMarkup}
+      </div>
+      <div className={styles.Search}>{searchMarkup}</div>
+      <div className={styles.RightContent}>
         <div className={styles.SecondaryMenu}>{secondaryMenu}</div>
         {userMenu}
       </div>
diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
index 0954c551feb..eb935cc37f8 100644
--- a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
@@ -23,7 +23,6 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   align-items: center;
   border: var(--p-border-width-1) solid transparent;
   width: 100%;
-  max-width: $search-max-width;
 }
 // We have both a focused class and a focus pseudo selector here
 // because we allow "faked" focus for when the search is still