[Frame] Reframe polish: sticky manager and offset #11945

sophschneider · 2024-04-24T23:01:09Z

WHY are these changes introduced?

Part of #1470

WHAT is this pull request doing?

Accounts for Frame offset prop behind dynamicTopBarAndReframe project
Update AppProvider to pass the new reframe scroll container to the stickyManager
Fixes popover scrolls by wrapping frame content in a Scrollable

How to 🎩

https://admin.web.frame-polish.sophie-schneider.us.spin.dev/store/shop1

Frame offset story with feature flag on
Check on spin with beta flag on that index tables are sticking to top of reframe

Scroll to bottom of page to variants and the header should stick, adjust window height

Check "Skip to content" button with beta flag off and on
Check that popovers scroll with content
Check no layout shift for when scrollbar is hidden/shows with scrollbar set to "always" in settings

🎩 checklist

Tested a snapshot
Tested on mobile
Tested on multiple browsers

sophschneider · 2024-04-24T23:01:17Z

/snapit

sophschneider · 2024-04-24T23:20:09Z

/snapit

github-actions · 2024-04-24T23:22:17Z

🫰✨ Thanks @sophschneider! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240424232044"

sophschneider · 2024-04-25T15:16:01Z

/snapit

github-actions · 2024-04-25T15:18:16Z

🫰✨ Thanks @sophschneider! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240425151648"

kyledurand · 2024-04-25T16:06:55Z

Looks like we may need to adjust content spacing as well:

content-shift.mp4

kyledurand · 2024-04-25T16:09:08Z

Seeing some popover funk. Not sure if spin was updated properly

popovers-stuck.mp4

sophschneider · 2024-04-25T16:16:28Z

@kyledurand thanks! Yeah I saw the popover thing too, I think its because the scroll container used to be on document and now its not falling back properly because the whole app isn't wrapped in a scrollable. I'll try and fix it in this PR! Would probably be worth it for me to do a full document audit in polaris to see what else relies on the document scroll container

sophschneider · 2024-04-25T16:18:44Z

moving this back to draft as I fix the above things! ill retag for review after

sophschneider · 2024-04-29T18:40:51Z

/snapit

sophschneider · 2024-04-29T18:53:09Z

/snapit

github-actions · 2024-04-29T18:55:29Z

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

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

"@shopify/polaris-migrator": "0.0.0-snapshot-20240429185346",
"@shopify/polaris": "0.0.0-snapshot-20240429185346",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240429185346",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240429185346"

sophschneider · 2024-04-30T17:18:41Z

/snapit

github-actions · 2024-04-30T17:21:00Z

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

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

"@shopify/polaris-migrator": "0.0.0-snapshot-20240430171916",
"@shopify/polaris": "0.0.0-snapshot-20240430171916",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240430171916",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240430171916"

sophschneider · 2024-04-30T17:32:53Z

/snapit

github-actions · 2024-04-30T17:35:35Z

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

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

"@shopify/polaris-migrator": "0.0.0-snapshot-20240430173334",
"@shopify/polaris": "0.0.0-snapshot-20240430173334",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240430173334",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240430173334"

sophschneider · 2024-05-01T00:20:07Z

/snapit

github-actions · 2024-05-01T00:22:39Z

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

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

"@shopify/polaris-migrator": "0.0.0-snapshot-20240501002056",
"@shopify/polaris": "0.0.0-snapshot-20240501002056",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240501002056",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240501002056"

sophschneider · 2024-05-01T01:43:00Z

/snapit

github-actions · 2024-05-01T01:45:21Z

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

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

"@shopify/polaris-migrator": "0.0.0-snapshot-20240501014340",
"@shopify/polaris": "0.0.0-snapshot-20240501014340",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240501014340",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240501014340"

sophschneider · 2024-05-01T02:01:49Z

/snapit

github-actions · 2024-05-01T02:08:13Z

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

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

"@shopify/polaris-migrator": "0.0.0-snapshot-20240501020632",
"@shopify/polaris": "0.0.0-snapshot-20240501020632",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240501020632",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240501020632"

sophschneider · 2024-05-01T13:49:59Z

polaris-react/src/components/Frame/Frame.module.css

+  }
+
+  .hasSidebar & {
+    transition: width var(--p-motion-duration-250) var(--p-motion-ease);


I have an issue https://github.com/Shopify/polaris-backlog/issues/1606 to update these to transforms for performance

sophschneider · 2024-05-01T13:57:09Z

/snapit

github-actions · 2024-05-01T13:59:22Z

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

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

"@shopify/polaris-migrator": "0.0.0-snapshot-20240501135743",
"@shopify/polaris": "0.0.0-snapshot-20240501135743",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240501135743",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240501135743"

sophschneider · 2024-05-01T14:24:32Z

@kyledurand theres still a bit of a layout shift but its due to the changes in scroll gutter, it should be just a bit!

kyledurand

Code and 🎩 look good! I'm slightly worried about changing the shadow bevel wrapper to fixed positioning but I couldn't find any issues 👍

laurkim

💯

sophschneider · 2024-05-01T17:18:39Z

@kyledurand yeah I had to do that because scrolling to anchor tags was causing some janky behaviour moving the shadow bevel container. ill let you know if I see any issues with it!

@kyledurand

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@13.3.0 ### Minor Changes - [#11979](#11979) [`982491f0f`](982491f) Thanks [@kyledurand](https://github.com/kyledurand)! - Added `animateIn` transition option to Collapsible - [#11967](#11967) [`e50472f85`](e50472f) Thanks [@kyledurand](https://github.com/kyledurand)! - Added `variant` prop to Collapsible ### Patch Changes - [#11976](#11976) [`4f3bf9948`](4f3bf99) Thanks [@chloerice](https://github.com/chloerice)! - Fixed sibling `FormLayout.Item` widths not remaining equal when wrapped in `FormLayout.Group` - [#11945](#11945) [`b59743a76`](b59743a) Thanks [@sophschneider](https://github.com/sophschneider)! - Added offset width to reframe `Frame` and passed reframe scroll container to sticky manager in `AppProvider` - [#11965](#11965) [`7a702388d`](7a70238) Thanks [@sophschneider](https://github.com/sophschneider)! - Added scrollbar styles for reframe - [#11944](#11944) [`d1d69e919`](d1d69e9) Thanks [@stefanlegg](https://github.com/stefanlegg)! - Add support for hiding selectable checkbox on a per `IndexTable.Row` basis via `hideSelectable` prop\` - [#11947](#11947) [`995079cc7`](995079c) Thanks [@sophschneider](https://github.com/sophschneider)! - Fixed `Sticky` to update sticky items when props change - Updated dependencies \[[`12dbc2cd8`](12dbc2c), [`8ce6211c9`](8ce6211), [`7a702388d`](7a70238)]: - @shopify/polaris-tokens@9.1.0 ## @shopify/polaris-tokens@9.1.0 ### Minor Changes - [#11965](#11965) [`7a702388d`](7a70238) Thanks [@sophschneider](https://github.com/sophschneider)! - Added `color-scrollbar-thumb-bg` token ### Patch Changes - [#11981](#11981) [`12dbc2cd8`](12dbc2c) Thanks [@sophschneider](https://github.com/sophschneider)! - Updated internal only whiteAlpha scale and dark experimental theme with new values - [#11853](#11853) [`8ce6211c9`](8ce6211) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added `"sideEffect": "false"` to the `package.json` to enable treeshaking ## @shopify/polaris-migrator@1.0.2 ### Patch Changes - Updated dependencies \[[`12dbc2cd8`](12dbc2c), [`8ce6211c9`](8ce6211), [`7a702388d`](7a70238)]: - @shopify/polaris-tokens@9.1.0 - @shopify/stylelint-polaris@16.0.2 ## @shopify/stylelint-polaris@16.0.2 ### Patch Changes - Updated dependencies \[[`12dbc2cd8`](12dbc2c), [`8ce6211c9`](8ce6211), [`7a702388d`](7a70238)]: - @shopify/polaris-tokens@9.1.0 ## polaris-for-vscode@1.0.2 ### Patch Changes - Updated dependencies \[[`12dbc2cd8`](12dbc2c), [`8ce6211c9`](8ce6211), [`7a702388d`](7a70238)]: - @shopify/polaris-tokens@9.1.0 ## polaris.shopify.com@1.0.5 ### Patch Changes - Updated dependencies \[[`4f3bf9948`](4f3bf99), [`b59743a76`](b59743a), [`12dbc2cd8`](12dbc2c), [`982491f0f`](982491f), [`7a702388d`](7a70238), [`8ce6211c9`](8ce6211), [`e50472f85`](e50472f), [`d1d69e919`](d1d69e9), [`995079cc7`](995079c), [`7a702388d`](7a70238)]: - @shopify/polaris@13.3.0 - @shopify/polaris-tokens@9.1.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

sophschneider added the #gsd:38420 Top bar and global reframe project label Apr 24, 2024

sophschneider marked this pull request as ready for review April 25, 2024 15:29

sophschneider requested review from kyledurand, laurkim and yurm04 and removed request for laurkim April 25, 2024 15:30

sophschneider marked this pull request as draft April 25, 2024 16:18

sophschneider removed request for kyledurand, laurkim and yurm04 April 25, 2024 16:19

sophschneider force-pushed the sticky-and-offset branch 2 times, most recently from 2cdb657 to 97bb2cf Compare April 29, 2024 18:52

sophschneider force-pushed the sticky-and-offset branch from f30a0c5 to 6c57a39 Compare April 30, 2024 17:32

Add back in scrollbar safe area

2866177

sophschneider force-pushed the sticky-and-offset branch 2 times, most recently from d3e33dd to 0ef181c Compare May 1, 2024 01:23

sophschneider force-pushed the sticky-and-offset branch from 0ef181c to 26c580c Compare May 1, 2024 01:56

Subtract frame offset from width

dedd85a

sophschneider force-pushed the sticky-and-offset branch from 26c580c to 00387cd Compare May 1, 2024 13:47

sophschneider commented May 1, 2024

View reviewed changes

Update ShadowBevel id

2986df1

sophschneider force-pushed the sticky-and-offset branch from 00387cd to 2986df1 Compare May 1, 2024 13:51

Update changeset

7238109

sophschneider marked this pull request as ready for review May 1, 2024 14:11

sophschneider requested review from kyledurand, laurkim and yurm04 May 1, 2024 14:13

kyledurand approved these changes May 1, 2024

View reviewed changes

laurkim approved these changes May 1, 2024

View reviewed changes

sophschneider merged commit b59743a into main May 1, 2024

sophschneider deleted the sticky-and-offset branch May 1, 2024 17:18

shopify-github-actions-access bot mentioned this pull request May 3, 2024

Version Packages #11946

Merged

[Frame] Reframe polish: sticky manager and offset #11945

[Frame] Reframe polish: sticky manager and offset #11945

Uh oh!

Conversation

sophschneider commented Apr 24, 2024 • 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!

sophschneider commented Apr 24, 2024

Uh oh!

sophschneider commented Apr 24, 2024

Uh oh!

github-actions bot commented Apr 24, 2024

Uh oh!

sophschneider commented Apr 25, 2024

Uh oh!

github-actions bot commented Apr 25, 2024

Uh oh!

kyledurand commented Apr 25, 2024

Uh oh!

kyledurand commented Apr 25, 2024

Uh oh!

sophschneider commented Apr 25, 2024

Uh oh!

sophschneider commented Apr 25, 2024

Uh oh!

sophschneider commented Apr 29, 2024

Uh oh!

sophschneider commented Apr 29, 2024

Uh oh!

github-actions bot commented Apr 29, 2024

Uh oh!

sophschneider commented Apr 30, 2024

Uh oh!

github-actions bot commented Apr 30, 2024

Uh oh!

sophschneider commented Apr 30, 2024

Uh oh!

github-actions bot commented Apr 30, 2024

Uh oh!

sophschneider commented May 1, 2024

Uh oh!

github-actions bot commented May 1, 2024

Uh oh!

sophschneider commented May 1, 2024

Uh oh!

github-actions bot commented May 1, 2024

Uh oh!

sophschneider commented May 1, 2024

Uh oh!

github-actions bot commented May 1, 2024

Uh oh!

sophschneider May 1, 2024

Choose a reason for hiding this comment

Uh oh!

sophschneider commented May 1, 2024

Uh oh!

github-actions bot commented May 1, 2024

Uh oh!

sophschneider commented May 1, 2024

Uh oh!

kyledurand left a comment

Choose a reason for hiding this comment

Uh oh!

laurkim left a comment

Choose a reason for hiding this comment

Uh oh!

sophschneider commented May 1, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sophschneider commented Apr 24, 2024 •

edited

Loading