[TopBar] convert to grid and center align search field

Shopify · Jul 20, 2023 · 07e9ac0 · 07e9ac0
1 parent 6e202c1
commit 07e9ac0
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 29 deletions.
diff --git a/.changeset/spicy-elephants-clap.md 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
@@ -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,40 +153,30 @@ $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} {
     position: relative;
   }
 }
 
-.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
@@ -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
@@ -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