[TopBar] grid alignment and center search #9765

mattkubej · 2023-07-19T20:36:47Z

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

Specifications

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
Spin web (associated PR containing required web changes)

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

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
~~Updated the component's README.md with documentation changes~~ (component does not have a README)
Tophatted documentation changes in the style guide

mattkubej · 2023-07-19T20:48:13Z

/snapit

github-actions · 2023-07-19T20:52:17Z

🫰✨ Thanks @mattkubej! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230719205031

yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230719205031

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20230719205031

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230719205031

yarn add @shopify/polaris@0.0.0-snapshot-release-20230719205031

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230719205031

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230719205031

mattkubej · 2023-07-19T22:27:04Z

/snapit

github-actions · 2023-07-19T22:31:08Z

🫰✨ Thanks @mattkubej! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230719222929

yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230719222929

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20230719222929

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230719222929

yarn add @shopify/polaris@0.0.0-snapshot-release-20230719222929

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230719222929

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230719222929

mattkubej · 2023-07-20T01:42:31Z

/snapit

github-actions · 2023-07-20T01:46:34Z

🫰✨ Thanks @mattkubej! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230720014451

yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230720014451

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20230720014451

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230720014451

yarn add @shopify/polaris@0.0.0-snapshot-release-20230720014451

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230720014451

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230720014451

mattkubej · 2023-07-20T20:04:42Z

/snapit

github-actions · 2023-07-20T20:08:33Z

🫰✨ Thanks @mattkubej! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230720200649

yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230720200649

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20230720200649

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230720200649

yarn add @shopify/polaris@0.0.0-snapshot-release-20230720200649

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230720200649

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230720200649

mattkubej · 2023-07-20T22:54:41Z

/snapit

github-actions · 2023-07-20T22:58:41Z

🫰✨ Thanks @mattkubej! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230720225658

yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230720225658

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20230720225658

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230720225658

yarn add @shopify/polaris@0.0.0-snapshot-release-20230720225658

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230720225658

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230720225658

mattkubej · 2023-07-20T23:02:18Z

/snapit

github-actions · 2023-07-20T23:06:14Z

🫰✨ Thanks @mattkubej! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230720230431

yarn add @shopify/polaris-codemods@0.0.0-snapshot-release-20230720230431

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20230720230431

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230720230431

yarn add @shopify/polaris@0.0.0-snapshot-release-20230720230431

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20230720230431

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230720230431

mattkubej · 2023-07-20T23:07:13Z

/snapit

github-actions · 2023-07-20T23:12:34Z

🫰✨ Thanks @mattkubej! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230720231002

yarn add @shopify/polaris@0.0.0-snapshot-release-20230720231002

@heyjoethomas

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris-icons@7.6.0 ### Minor Changes - [#9777](#9777) [`8228de0f6`](8228de0) Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Added social media icons ## @shopify/polaris@11.9.0 ### Minor Changes - [#9761](#9761) [`ce3e516a2`](ce3e516) Thanks [@aveline](https://github.com/aveline)! - Added `readOnly` prop to `Labelled` component - [#9770](#9770) [`571acc166`](571acc1) Thanks [@zaquille-oneil](https://github.com/zaquille-oneil)! - Updating TextField to support ArrowUp and ArrowDown keypresses for "integer" type ### Patch Changes - [#9765](#9765) [`541e5920b`](541e592) Thanks [@mattkubej](https://github.com/mattkubej)! - [TopBar] convert to grid and center align search field - Updated dependencies \[[`8228de0f6`](8228de0)]: - @shopify/polaris-icons@7.6.0 ## @shopify/polaris-cli@0.2.24 ## polaris.shopify.com@0.56.2 ### Patch Changes - Updated dependencies \[[`ce3e516a2`](ce3e516), [`8228de0f6`](8228de0), [`571acc166`](571acc1), [`541e5920b`](541e592)]: - @shopify/polaris@11.9.0 - @shopify/polaris-icons@7.6.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

### 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

@heyjoethomas

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris-icons@7.6.0 ### Minor Changes - [Shopify#9777](Shopify#9777) [`8228de0f6`](Shopify@8228de0) Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Added social media icons ## @shopify/polaris@11.9.0 ### Minor Changes - [Shopify#9761](Shopify#9761) [`ce3e516a2`](Shopify@ce3e516) Thanks [@aveline](https://github.com/aveline)! - Added `readOnly` prop to `Labelled` component - [Shopify#9770](Shopify#9770) [`571acc166`](Shopify@571acc1) Thanks [@zaquille-oneil](https://github.com/zaquille-oneil)! - Updating TextField to support ArrowUp and ArrowDown keypresses for "integer" type ### Patch Changes - [Shopify#9765](Shopify#9765) [`541e5920b`](Shopify@541e592) Thanks [@mattkubej](https://github.com/mattkubej)! - [TopBar] convert to grid and center align search field - Updated dependencies \[[`8228de0f6`](Shopify@8228de0)]: - @shopify/polaris-icons@7.6.0 ## @shopify/polaris-cli@0.2.24 ## polaris.shopify.com@0.56.2 ### Patch Changes - Updated dependencies \[[`ce3e516a2`](Shopify@ce3e516), [`8228de0f6`](Shopify@8228de0), [`571acc166`](Shopify@571acc1), [`541e5920b`](Shopify@541e592)]: - @shopify/polaris@11.9.0 - @shopify/polaris-icons@7.6.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

### 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](Shopify/web#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

@heyjoethomas

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris-icons@7.6.0 ### Minor Changes - [Shopify#9777](Shopify#9777) [`8228de0f6`](Shopify@920f1c3) Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Added social media icons ## @shopify/polaris@11.9.0 ### Minor Changes - [Shopify#9761](Shopify#9761) [`ce3e516a2`](Shopify@4ac8815) Thanks [@aveline](https://github.com/aveline)! - Added `readOnly` prop to `Labelled` component - [Shopify#9770](Shopify#9770) [`571acc166`](Shopify@6ff428e) Thanks [@zaquille-oneil](https://github.com/zaquille-oneil)! - Updating TextField to support ArrowUp and ArrowDown keypresses for "integer" type ### Patch Changes - [Shopify#9765](Shopify#9765) [`541e5920b`](Shopify@7040c61) Thanks [@mattkubej](https://github.com/mattkubej)! - [TopBar] convert to grid and center align search field - Updated dependencies \[[`8228de0f6`](Shopify@920f1c3)]: - @shopify/polaris-icons@7.6.0 ## @shopify/polaris-cli@0.2.24 ## polaris.shopify.com@0.56.2 ### Patch Changes - Updated dependencies \[[`ce3e516a2`](Shopify@4ac8815), [`8228de0f6`](Shopify@920f1c3), [`571acc166`](Shopify@6ff428e), [`541e5920b`](Shopify@7040c61)]: - @shopify/polaris@11.9.0 - @shopify/polaris-icons@7.6.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

mattkubej force-pushed the top-bar/grid-alignment-center-search branch 2 times, most recently from ddc37ac to f3653a7 Compare July 20, 2023 01:38

mattkubej marked this pull request as ready for review July 20, 2023 02:34

mattkubej mentioned this pull request Jul 20, 2023

Improve scrollbar experience in the admin #9701

Merged

5 tasks

mattkubej force-pushed the top-bar/grid-alignment-center-search branch 2 times, most recently from bb56785 to f84237c Compare July 20, 2023 22:58

[TopBar] convert to grid and center align search field

07e9ac0

mattkubej force-pushed the top-bar/grid-alignment-center-search branch from f84237c to 07e9ac0 Compare July 20, 2023 23:07

sam-b-rose approved these changes Jul 21, 2023

View reviewed changes

mattkubej merged commit 541e592 into main Jul 21, 2023

mattkubej deleted the top-bar/grid-alignment-center-search branch July 21, 2023 15:20

shopify-github-actions-access bot mentioned this pull request Jul 21, 2023

Version Packages #9778

Merged

[TopBar] grid alignment and center search #9765

[TopBar] grid alignment and center search #9765

Uh oh!

Conversation

mattkubej commented Jul 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

Uh oh!

mattkubej commented Jul 19, 2023

Uh oh!

github-actions bot commented Jul 19, 2023

Uh oh!

mattkubej commented Jul 19, 2023

Uh oh!

github-actions bot commented Jul 19, 2023

Uh oh!

mattkubej commented Jul 20, 2023

Uh oh!

github-actions bot commented Jul 20, 2023

Uh oh!

mattkubej commented Jul 20, 2023

Uh oh!

github-actions bot commented Jul 20, 2023

Uh oh!

mattkubej commented Jul 20, 2023

Uh oh!

github-actions bot commented Jul 20, 2023

Uh oh!

mattkubej commented Jul 20, 2023

Uh oh!

github-actions bot commented Jul 20, 2023

Uh oh!

mattkubej commented Jul 20, 2023

Uh oh!

github-actions bot commented Jul 20, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mattkubej commented Jul 19, 2023 •

edited

Loading