[Page] prevent vertical content shift of header with metadata and actions #10545

mattkubej · 2023-09-18T23:15:03Z

WHY are these changes introduced?

Fixes https://github.com/Shopify/web/issues/103405

Inconsistent Header height within the Page component is leading to the Header shifting vertically when navigating between pages with different properties enabled (e.g. metadata, actions). This pull request makes adjustments to combat the shifting.

WHAT is this pull request doing?

Consistent Header row height of 28px
- Header Title will always have 2px of vertical padding to bring the 24px line height to 28px in total for the container
- Allow for bleeding of the Title metadata, so metadata can be larger than Title without impacting alignment (e.g. Location picker)
Removes vertical alignment and margin-top of Title metadata, which had no impact to aesthetic
Reorganizes CSS to make class/style relationships clearer
Adds new Storybook to highlight problem

NOTE: This is a bit of a bandaid fix. We should likely rewrite this component to utilize a grid layout to have a more resilient solution for achieving the desired aesthetic, but considering the variability in configurations of this component that is a sizable effort. However, I think we'd need to understand the desired aesthetic when a subtitle exists along with title metadata content that is larger than the title to determine the optimal solution.

How to 🎩

Spin - Web
Spin - Polaris Storybook

Validate when navigating amongst root pages (e.g. draft orders, products) that the Page Header does not shift with/without the presence of title metadata and actions. Also, validate that the Header row has contents vertically centered.

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

mattkubej · 2023-09-18T23:20:41Z

/snapit

github-actions · 2023-09-18T23:24: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-migrator@0.0.0-snapshot-release-20230918232254

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

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

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

### WHY are these changes introduced? The noScroll prop on our modal should stop the scroll effect. This would be useful in cases where scrolls are already in the children components. https://github.com/Shopify/polaris/assets/113911518/ba755e78-851a-4809-b3a3-5e31a8d7a7db We are using this throughout Shopify on our resource pickers where noScroll is set to true. The issue is right now Banner is scrolling and causing a double scroll https://github.com/Shopify/polaris/assets/113911518/ddaf01b6-1592-4a34-a36d-6e4e0e9b6f2c ### WHAT is this pull request doing? We are simply adding the `overflow-y: hidden`. `overflow-x: hidden` is already present but that only stops horizontal scroll ### How to 🎩 Add and remove the onScroll props to see scroll ability disappear. (You might need to shorten your window to get the scroll if your text isn't long enough) <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React, {useState, useCallback} from 'react'; import {Page, Modal, Button} from '../src'; export function Playground() { const [active, setActive] = useState(true); const handleChange = useCallback(() => setActive(!active), [active]); const activator = <Button onClick={handleChange}>Open</Button>; return ( <Page title="Playground"> {activator} <Modal activator={activator} title="Reach more shoppers with Instagram product tags" open={active} onClose={handleChange} noScroll > Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram. Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram. Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram. Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram. Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram. Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram. Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram. Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram. </Modal> </Page> ); } ``` </details> ### 🎩 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) Co-authored-by: kellydanma <kelly.ma@mail.mcgill.ca>

Revert for making #10580 part of v12.x.x ### WHY are these changes introduced? Closes https://github.com/Shopify/core-issues/issues/60374 We believe giving users more visibility to the move column actions will enhance their experience. ### WHAT is this pull request doing?  1. Create an `EditColumnsButton` that handles the markup for the edit column action. 2. Add a new property to `<IndexFilters/>` called `showEditColumns`, that when is true, renders the `<EditColumnsButton/>` 3. Add storybook and test implementations. https://github.com/Shopify/polaris/assets/5873627/5368e55f-839d-48eb-9362-dbe7d0e1a098 **Updated order or buttons:** ![Screenshot 2023-09-20 at 14 05 28](https://github.com/Shopify/polaris/assets/5873627/4ada4c7a-4182-469b-b506-aea01432f170)  ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) 1. Run storybook. 2. Go to IndexFilters > With Edit Columns Button. 3. Play with the new button ✨ <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 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) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

mattkubej · 2023-10-02T23:54:37Z

/snapit

github-actions · 2023-10-02T23:58:37Z

🫰✨ 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-migrator@0.0.0-snapshot-release-20231002235641

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

mrcthms

Looks good, nice work!

sam-b-rose

🎩 looks good! Can we target the 12.x.x branch? We are tee'ing up the next major release this week and v12 is likely the next version be be shipped.

Also fine with having this fix in main but we'll also want to resolve any conflicts and ensure these changes are properly carried over to 12.x.x

ouellettejordan

Tested spin link and looks good to me 👍

mattkubej · 2023-10-03T15:36:43Z

🎩 looks good! Can we target the 12.x.x branch? We are tee'ing up the next major release this week and v12 is likely the next version be be shipped.

Yea, I can do that, but I won't be able to get to that until this evening if that's alright @sam-b-rose

Adds support for `@custom-media` using the [postcss-global-data](https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-global-data/README.md) and [postcss-custom-media](https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-custom-media/README.md) plugins. See `Text` component example of how this will migrate our breakpoints away from the current SCSS method: <img width="630" alt="Screenshot 2023-10-02 at 3 05 03 PM" src="https://github.com/Shopify/polaris/assets/11774595/613b1f32-eb96-4a14-8dc8-188536493efe">

mattkubej · 2023-10-11T01:57:41Z

/snapit

mattkubej · 2023-10-11T03:13:04Z

/snapit

Run `yarn changeset pre exit` to exit prerelease mode. This was also [done in `main`](560897e) before releasing v12. Snapshots won't work when in prerelease mode. We can now exit prerelease since v12 has been officially released. See the [Changesets Prerelease documentation](https://github.com/changesets/changesets/blob/main/docs/prereleases.md) for more details.

…ions

sam-b-rose · 2023-10-11T14:07:05Z

/snapit

github-actions · 2023-10-11T14:11:41Z

🫰✨ Thanks @sam-b-rose! Your snapshots have been published to npm.

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

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

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

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

mattkubej · 2023-10-11T16:22:09Z

/snapit

github-actions · 2023-10-11T16:27:16Z

🫰✨ 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@0.0.0-snapshot-release-20231011162506

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

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

mattkubej · 2023-11-14T00:56:53Z

Closing in favor of #11168 due to the v12 changes

…hopify#11168) ### WHY are these changes introduced? Refresh of Shopify#10545 post v12 Fixes: Shopify/web#103405 Inconsistent Header height within the `Page` component is leading to the Header shifting vertically when navigating between pages with different properties enabled (e.g. metadata, actions). This pull request makes adjustments to combat the shifting. ### WHAT is this pull request doing? - Consistent Header row height of 28px - Header Title will always have 2px of vertical padding to bring the 24px line height to 28px in total for the container - Allow for bleeding of the Title metadata, so metadata can be larger than Title without impacting alignment (e.g. Location picker) - Removes vertical alignment and margin-top of Title metadata, which had no impact to aesthetic - Reorganizes CSS to make class/style relationships clearer - Adds new Storybook to highlight problem NOTE: This is a bit of a bandaid fix. We should likely rewrite this component to utilize a grid layout to have a more resilient solution for achieving the desired aesthetic, but considering the variability in configurations of this component that is a sizable effort. However, I think we'd need to understand the desired aesthetic when a subtitle exists along with title metadata content that is larger than the title to determine the optimal solution. ### How to 🎩 [Spin - Web](https://admin.web.polaris-page-header-position.matt-kubej.us.spin.dev/store/shop1/orders?inContextTimeframe=none) [Spin - Polaris Storybook](https://storybook.web.polaris-page-header-position.matt-kubej.us.spin.dev/?path=/story/all-components-page--with-content-after-title-and-subtitle) Validate when navigating amongst root pages (e.g. draft orders, products) that the Page Header does not shift with/without the presence of title metadata and actions. Also, validate that the Header row has contents vertically centered. ### 🎩 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) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

mattkubej force-pushed the page/header-vertical-alignment branch from 4368825 to d2ad246 Compare September 18, 2023 23:15

mattkubej requested review from sarahill, kyledurand, mrcthms and ouellettejordan September 18, 2023 23:48

sophschneider and others added 3 commits September 29, 2023 16:00

Remove v12 beta in changelog

8db861d

mattkubej force-pushed the page/header-vertical-alignment branch from d2ad246 to 3906a7d Compare October 2, 2023 23:47

mattkubej requested review from a team as code owners October 2, 2023 23:47

mattkubej force-pushed the page/header-vertical-alignment branch from a7f163d to 195296c Compare October 2, 2023 23:51

mrcthms approved these changes Oct 3, 2023

View reviewed changes

sam-b-rose approved these changes Oct 3, 2023

View reviewed changes

ouellettejordan approved these changes Oct 3, 2023

View reviewed changes

sarahill approved these changes Oct 3, 2023

View reviewed changes

mattkubej changed the base branch from main to v12.x.x October 11, 2023 01:47

mattkubej changed the base branch from v12.x.x to main October 11, 2023 01:48

mattkubej force-pushed the page/header-vertical-alignment branch from 195296c to 60e65c1 Compare October 11, 2023 01:54

mattkubej changed the base branch from main to v12.x.x October 11, 2023 01:54

mattkubej force-pushed the page/header-vertical-alignment branch from 60e65c1 to d9bf2a8 Compare October 11, 2023 01:57

mattkubej force-pushed the page/header-vertical-alignment branch 2 times, most recently from eeef22b to 46c125d Compare October 11, 2023 02:51

sam-b-rose and others added 2 commits October 11, 2023 09:12

[Page] prevent vertical content shift of header with metadata and act…

ef49094

…ions

mattkubej force-pushed the page/header-vertical-alignment branch from 46c125d to ef49094 Compare October 11, 2023 13:35

sophschneider force-pushed the v12.x.x branch from 6386a1b to 18b37f8 Compare November 2, 2023 15:04

Base automatically changed from v12.x.x to main November 2, 2023 19:39

mattkubej mentioned this pull request Nov 14, 2023

[Page] prevent vertical content shift of header title with metadata #11168

Merged

5 tasks

mattkubej closed this Nov 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Page] prevent vertical content shift of header with metadata and actions #10545

[Page] prevent vertical content shift of header with metadata and actions #10545

Uh oh!

mattkubej commented Sep 18, 2023 •

edited

Loading

Uh oh!

mattkubej commented Sep 18, 2023

Uh oh!

github-actions bot commented Sep 18, 2023

Uh oh!

mattkubej commented Oct 2, 2023

Uh oh!

github-actions bot commented Oct 2, 2023

Uh oh!

mrcthms left a comment

Uh oh!

sam-b-rose left a comment

Uh oh!

ouellettejordan left a comment

Uh oh!

mattkubej commented Oct 3, 2023 •

edited

Loading

Uh oh!

mattkubej commented Oct 11, 2023

Uh oh!

mattkubej commented Oct 11, 2023

Uh oh!

sam-b-rose commented Oct 11, 2023

Uh oh!

github-actions bot commented Oct 11, 2023

Uh oh!

mattkubej commented Oct 11, 2023

Uh oh!

github-actions bot commented Oct 11, 2023

Uh oh!

mattkubej commented Nov 14, 2023

Uh oh!

Uh oh!

[Page] prevent vertical content shift of header with metadata and actions #10545

[Page] prevent vertical content shift of header with metadata and actions #10545

Uh oh!

Conversation

mattkubej commented Sep 18, 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 Sep 18, 2023

Uh oh!

github-actions bot commented Sep 18, 2023

Uh oh!

mattkubej commented Oct 2, 2023

Uh oh!

github-actions bot commented Oct 2, 2023

Uh oh!

mrcthms left a comment

Choose a reason for hiding this comment

Uh oh!

sam-b-rose left a comment

Choose a reason for hiding this comment

Uh oh!

ouellettejordan left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

mattkubej commented Oct 11, 2023

Uh oh!

mattkubej commented Oct 11, 2023

Uh oh!

sam-b-rose commented Oct 11, 2023

Uh oh!

github-actions bot commented Oct 11, 2023

Uh oh!

mattkubej commented Oct 11, 2023

Uh oh!

github-actions bot commented Oct 11, 2023

Uh oh!

mattkubej commented Nov 14, 2023

Uh oh!

Uh oh!

mattkubej commented Sep 18, 2023 •

edited

Loading

mattkubej commented Oct 3, 2023 •

edited

Loading