[Frame] Add custom scrollbar styles for reframe #11965
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
/snapit |
|
🫰✨ Thanks @sophschneider! Your snapshots have been published to npm. Test the snapshots by updating your "@shopify/polaris-migrator": "0.0.0-snapshot-20240501202738",
"@shopify/polaris": "0.0.0-snapshot-20240501202738",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240501202738",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240501202738" |
sophschneider
force-pushed
the
frame-scrollbar
branch
from
10dd9c1 to
ea8a9a8
Compare
|
/snapit |
|
🫰✨ Thanks @sophschneider! Your snapshots have been published to npm. Test the snapshots by updating your "@shopify/polaris-migrator": "0.0.0-snapshot-20240501235837",
"@shopify/polaris": "0.0.0-snapshot-20240501235837",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240501235837",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240501235837" |
sophschneider
force-pushed
the
frame-scrollbar
branch
from
bc899b0 to
3282622
Compare
sophschneider
force-pushed
the
frame-scrollbar
branch
from
3282622 to
7d3cf44
Compare
|
/snapit |
|
🫰✨ Thanks @sophschneider! Your snapshots have been published to npm. Test the snapshots by updating your "@shopify/polaris-migrator": "0.0.0-snapshot-20240503143119",
"@shopify/polaris": "0.0.0-snapshot-20240503143119",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240503143119",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240503143119" |
sophschneider
force-pushed
the
frame-scrollbar
branch
from
7d3cf44 to
dfe1051
Compare
|
/snapit |
|
🫰✨ Thanks @sophschneider! Your snapshots have been published to npm. Test the snapshots by updating your "@shopify/polaris-migrator": "0.0.0-snapshot-20240503184723",
"@shopify/polaris": "0.0.0-snapshot-20240503184723",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240503184723",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240503184723" |
sophschneider
changed the title
|
/snapit |
|
putting this back in draft as we get feedback on two options |
|
🫰✨ Thanks @sophschneider! Your snapshots have been published to npm. Test the snapshots by updating your "@shopify/polaris-migrator": "0.0.0-snapshot-20240506135640",
"@shopify/polaris": "0.0.0-snapshot-20240506135640",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240506135640",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240506135640" |
sophschneider
force-pushed
the
frame-scrollbar
branch
from
6a6f4c0 to
aa13811
Compare
sophschneider
force-pushed
the
frame-scrollbar
branch
from
aa13811 to
9852e50
Compare
sophschneider
changed the title
sophschneider
requested review from
alex-page,
sam-b-rose and
gwyneplaine
as code owners
|
/snapit |
|
🫰✨ Thanks @sophschneider! Your snapshots have been published to npm. Test the snapshots by updating your "@shopify/polaris-migrator": "0.0.0-snapshot-20240506163636",
"@shopify/polaris": "0.0.0-snapshot-20240506163636",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240506163636",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240506163636" |
kyledurand
approved these changes
May 6, 2024
| @@ -462,6 +472,38 @@ | |||
|
|
|||
| .Scrollable { | |||
| width: 100%; | |||
|
|
|||
| /* Not using the spaacer custom property so the space is applied always */ | |||
There was a problem hiding this comment.
Suggested change
| /* Not using the spaacer custom property so the space is applied always */ | |
| /* Not using the spacer custom property so the space is applied always */ |
laurkim
approved these changes
May 6, 2024
Merged
chloerice
pushed a commit
that referenced
this pull request
May 6, 2024
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/[email protected] ### 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/[email protected] ## @shopify/[email protected] ### 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/[email protected] ### Patch Changes - Updated dependencies \[[`12dbc2cd8`](12dbc2c), [`8ce6211c9`](8ce6211), [`7a702388d`](7a70238)]: - @shopify/[email protected] - @shopify/[email protected] ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`12dbc2cd8`](12dbc2c), [`8ce6211c9`](8ce6211), [`7a702388d`](7a70238)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`12dbc2cd8`](12dbc2c), [`8ce6211c9`](8ce6211), [`7a702388d`](7a70238)]: - @shopify/[email protected] ## [email protected] ### 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/[email protected] - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Edit: updated to use custom scrollbar styles instead of native ones
WHY are these changes introduced?
Fixes https://github.com/Shopify/polaris-backlog/issues/1379
WHAT is this pull request doing?
https://admin.web.custom-scroll.sophie-schneider.us.spin.dev/store/shop1
2pxmargin to the right of the scrollbarwebkitpseudo selector doesn't respect user's OS scroll settingswebkitpseudo selector so this changes the scrollbar color depending on whether or not the user is hovering over the full scroll containerPotential future improvements
See demo below where there isn't a layout shift for the "Always show scrollbars" setting on but it causes the content to look off centre because of the gutter.
How to 🎩
https://admin.web.custom-scroll.sophie-schneider.us.spin.dev/store/shop1
Tophat with OS scroll settings set to "Always" and "When scrolling"
Check on chrome, firefox, safari, edge
🎩 checklist