[IndexTable] Change scroll bar container z-index so that it is under the Card shadow bevel #11411
+9
−3
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
…the Card shadow bevel
|
/snapit |
|
🫰✨ Thanks @sophschneider! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20240108175303yarn add @shopify/polaris@0.0.0-snapshot-release-20240108175303yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20240108175303yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20240108175303 |
lgriffee
approved these changes
Jan 8, 2024
Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
Merged
sophschneider
pushed a commit
that referenced
this pull request
Jan 10, 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/polaris@12.7.0 ### Minor Changes - [#11304](#11304) [`9c57cc1c2`](9c57cc1) Thanks [@yurm04](https://github.com/yurm04)! - [Tooltip] Added `min-width` to `TooltipOverlay` - [#11403](#11403) [`2bcc7bda5`](2bcc7bd) Thanks [@yurm04](https://github.com/yurm04)! - [Navigation] Updated `padding-top` to `space-100` for small viewports - [#11231](#11231) [`3a0228815`](3a02288) Thanks [@thyleung](https://github.com/thyleung)! - - Added the `paddingBlockEnd` prop to the `IndexTableHeading` interface to support additional right padding - Fixed sortable `IndexTable` headings with a tooltip not being right aligned properly - [#9019](#9019) [`ba1c813c2`](ba1c813) Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to Storybook v7 with Vite - [#11400](#11400) [`befded29d`](befded2) Thanks [@yurm04](https://github.com/yurm04)! - [Dialog] Removed `sizeSmall` max-width for small viewports - [#11374](#11374) [`f631b229f`](f631b22) Thanks [@kyledurand](https://github.com/kyledurand)! - Added as prop to InlineStack Added span and list item element types to BlockStack - [#11212](#11212) [`7d056dea2`](7d056de) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Refactored `Button` styles and bevel ### Patch Changes - [#11411](#11411) [`7202e1605`](7202e16) Thanks [@sophschneider](https://github.com/sophschneider)! - Changed `IndexTable` scroll bar container z-index so that it is under the `Card` shadow bevel - [#11363](#11363) [`c356dd5e5`](c356dd5) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed Button padding regression in Safari 14 - [#11364](#11364) [`bf9539536`](bf95395) Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Fixes shadow and bevel of basic button - [#11224](#11224) [`ea8e5510e`](ea8e551) Thanks [@sophschneider](https://github.com/sophschneider)! - Updated margins for TextField prefixes - [#11366](#11366) [`b62cf7356`](b62cf73) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed segmented button divider regression - [#11383](#11383) [`a1c141669`](a1c1416) Thanks [@jhalvorson](https://github.com/jhalvorson)! - [IndexTable] use the correct index for the sticky header when rows are selectable - [#11373](#11373) [`97c3979ba`](97c3979) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed Button active state regression when used with activators such as Popover - [#11342](#11342) [`9484d55ca`](9484d55) Thanks [@jhalvorson](https://github.com/jhalvorson)! - [IndexTable] Fixed aligment issues with the sticky header - [#11401](#11401) [`5604728ee`](5604728) Thanks [@ardakaracizmeli](https://github.com/ardakaracizmeli)! - Changed the icon color from icon-magic to text-magic for the Magic tone of the Badge component. - Updated dependencies \[[`9f7e5b682`](9f7e5b6)]: - @shopify/polaris-tokens@8.5.0 ## @shopify/polaris-tokens@8.5.0 ### Minor Changes - [#11345](#11345) [`9f7e5b682`](9f7e5b6) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added missing color tokens for Shopify Mobile ## @shopify/polaris-migrator@0.26.7 ### Patch Changes - Updated dependencies \[[`9f7e5b682`](9f7e5b6)]: - @shopify/polaris-tokens@8.5.0 - @shopify/stylelint-polaris@15.0.7 ## @shopify/stylelint-polaris@15.0.7 ### Patch Changes - Updated dependencies \[[`9f7e5b682`](9f7e5b6)]: - @shopify/polaris-tokens@8.5.0 ## polaris-for-vscode@0.9.3 ### Patch Changes - Updated dependencies \[[`9f7e5b682`](9f7e5b6)]: - @shopify/polaris-tokens@8.5.0 ## polaris.shopify.com@0.61.5 ### Patch Changes - [#11402](#11402) [`8fc829d39`](8fc829d) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed html output for examples that have portals - [#11385](#11385) [`7bfb9bd48`](7bfb9bd) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed props table feedback link, added footer link to create component issues - Updated dependencies \[[`9c57cc1c2`](9c57cc1), [`7202e1605`](7202e16), [`2bcc7bda5`](2bcc7bd), [`c356dd5e5`](c356dd5), [`bf9539536`](bf95395), [`ea8e5510e`](ea8e551), [`3a0228815`](3a02288), [`b62cf7356`](b62cf73), [`a1c141669`](a1c1416), [`97c3979ba`](97c3979), [`ba1c813c2`](ba1c813), [`befded29d`](befded2), [`9484d55ca`](9484d55), [`f631b229f`](f631b22), [`5604728ee`](5604728), [`7d056dea2`](7d056de), [`9f7e5b682`](9f7e5b6)]: - @shopify/polaris@12.7.0 - @shopify/polaris-tokens@8.5.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
3 tasks
sophschneider
added a commit
that referenced
this pull request
Jan 18, 2024
) ### WHY are these changes introduced? Part of Shopify/polaris-internal#1343 ### WHAT is this pull request doing? Lower `Filter` container z-index (currently `100`) to be below `Card`'s shadow bevel z-index which is `32`. This is a similar bug/fix as [this issue](#11411). |Before|After| |-|-| |<img width="503" alt="Screenshot 2024-01-17 at 3 53 30 PM" src="https://github.com/Shopify/polaris/assets/20652326/88edab7c-aed8-44b8-9f5c-b9bd319405dc">|<img width="382" alt="Screenshot 2024-01-17 at 4 48 45 PM" src="https://github.com/Shopify/polaris/assets/20652326/7dc33fc8-333b-4e1d-afa7-f3efed5ad7a1">| ### How to 🎩 https://admin.web.web-kkgf.sophie-schneider.us.spin.dev/store/shop1/orders 1. Press search button on index table or verify shadow bevel is on the filter search bar in this story https://5d559397bae39100201eedc1-vszwcambil.chromatic.com/?path=/story/all-components-indexfilters--with-filtering-by-default (vs.[ on prod](https://storybook.polaris.shopify.com/?path=/story/all-components-indexfilters--with-filtering-by-default)) ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [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: Laura Griffee <laura@mailzone.com>
AnnaCheba
pushed a commit
to AnnaCheba/polaris
that referenced
this pull request
Apr 22, 2024
…the Card shadow bevel (Shopify#11411) ### WHY are these changes introduced? Part of Shopify/polaris-internal#1341 ### WHAT is this pull request doing? Before, the `IndexTable` scrollbar container was z-index `35` which was under the `ShadowBevel` of `LegacyCard` (z-index `101`) but on top of the `ShadowBevel` on `Card` (z-index `32`). This PR lowers the scrollbar container to z-index `30`. This bug was not caught before as all our `IndexTable` stories were using `LegacyCard`. |Before|After| |-|-| |<img width="979" alt="Screenshot 2024-01-08 at 1 24 13 PM" src="https://github.com/Shopify/polaris/assets/20652326/b1666baa-17cb-410d-8603-a08f55b6877e">|<img width="986" alt="Screenshot 2024-01-08 at 1 21 54 PM" src="https://github.com/Shopify/polaris/assets/20652326/fd56db1d-2f84-47fc-aea6-f88d28a240c8">| |<img width="765" alt="Screenshot 2024-01-08 at 12 49 54 PM" src="https://github.com/Shopify/polaris/assets/20652326/46ca9d65-bd34-4bb9-8949-c8280f9ef59d">|<img width="766" alt="Screenshot 2024-01-08 at 12 48 13 PM" src="https://github.com/Shopify/polaris/assets/20652326/652442be-0e17-4a44-881c-ed476a0d23b4">| ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [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: Chloe Rice <chloerice@users.noreply.github.com>
ascherkus
pushed a commit
to ascherkus/polaris
that referenced
this pull request
Feb 19, 2025
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@12.7.0 ### Minor Changes - [Shopify#11304](Shopify#11304) [`9c57cc1c2`](Shopify@1fdb180) Thanks [@yurm04](https://github.com/yurm04)! - [Tooltip] Added `min-width` to `TooltipOverlay` - [Shopify#11403](Shopify#11403) [`2bcc7bda5`](Shopify@d13af64) Thanks [@yurm04](https://github.com/yurm04)! - [Navigation] Updated `padding-top` to `space-100` for small viewports - [Shopify#11231](Shopify#11231) [`3a0228815`](Shopify@728a418) Thanks [@thyleung](https://github.com/thyleung)! - - Added the `paddingBlockEnd` prop to the `IndexTableHeading` interface to support additional right padding - Fixed sortable `IndexTable` headings with a tooltip not being right aligned properly - [Shopify#9019](Shopify#9019) [`ba1c813c2`](Shopify@d9178be) Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to Storybook v7 with Vite - [Shopify#11400](Shopify#11400) [`befded29d`](Shopify@a5bcdca) Thanks [@yurm04](https://github.com/yurm04)! - [Dialog] Removed `sizeSmall` max-width for small viewports - [Shopify#11374](Shopify#11374) [`f631b229f`](Shopify@6229245) Thanks [@kyledurand](https://github.com/kyledurand)! - Added as prop to InlineStack Added span and list item element types to BlockStack - [Shopify#11212](Shopify#11212) [`7d056dea2`](Shopify@9e0ad2b) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Refactored `Button` styles and bevel ### Patch Changes - [Shopify#11411](Shopify#11411) [`7202e1605`](Shopify@b3ede5a) Thanks [@sophschneider](https://github.com/sophschneider)! - Changed `IndexTable` scroll bar container z-index so that it is under the `Card` shadow bevel - [Shopify#11363](Shopify#11363) [`c356dd5e5`](Shopify@af66cc6) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed Button padding regression in Safari 14 - [Shopify#11364](Shopify#11364) [`bf9539536`](Shopify@f3a22e0) Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Fixes shadow and bevel of basic button - [Shopify#11224](Shopify#11224) [`ea8e5510e`](Shopify@785951b) Thanks [@sophschneider](https://github.com/sophschneider)! - Updated margins for TextField prefixes - [Shopify#11366](Shopify#11366) [`b62cf7356`](Shopify@3b96ff2) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed segmented button divider regression - [Shopify#11383](Shopify#11383) [`a1c141669`](Shopify@fad62e1) Thanks [@jhalvorson](https://github.com/jhalvorson)! - [IndexTable] use the correct index for the sticky header when rows are selectable - [Shopify#11373](Shopify#11373) [`97c3979ba`](Shopify@42bf65e) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed Button active state regression when used with activators such as Popover - [Shopify#11342](Shopify#11342) [`9484d55ca`](Shopify@812a04e) Thanks [@jhalvorson](https://github.com/jhalvorson)! - [IndexTable] Fixed aligment issues with the sticky header - [Shopify#11401](Shopify#11401) [`5604728ee`](Shopify@f3add43) Thanks [@ardakaracizmeli](https://github.com/ardakaracizmeli)! - Changed the icon color from icon-magic to text-magic for the Magic tone of the Badge component. - Updated dependencies \[[`9f7e5b682`](Shopify@69cad76)]: - @shopify/polaris-tokens@8.5.0 ## @shopify/polaris-tokens@8.5.0 ### Minor Changes - [Shopify#11345](Shopify#11345) [`9f7e5b682`](Shopify@69cad76) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added missing color tokens for Shopify Mobile ## @shopify/polaris-migrator@0.26.7 ### Patch Changes - Updated dependencies \[[`9f7e5b682`](Shopify@69cad76)]: - @shopify/polaris-tokens@8.5.0 - @shopify/stylelint-polaris@15.0.7 ## @shopify/stylelint-polaris@15.0.7 ### Patch Changes - Updated dependencies \[[`9f7e5b682`](Shopify@69cad76)]: - @shopify/polaris-tokens@8.5.0 ## polaris-for-vscode@0.9.3 ### Patch Changes - Updated dependencies \[[`9f7e5b682`](Shopify@69cad76)]: - @shopify/polaris-tokens@8.5.0 ## polaris.shopify.com@0.61.5 ### Patch Changes - [Shopify#11402](Shopify#11402) [`8fc829d39`](Shopify@11cb418) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed html output for examples that have portals - [Shopify#11385](Shopify#11385) [`7bfb9bd48`](Shopify@94b768b) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed props table feedback link, added footer link to create component issues - Updated dependencies \[[`9c57cc1c2`](Shopify@1fdb180), [`7202e1605`](Shopify@b3ede5a), [`2bcc7bda5`](Shopify@d13af64), [`c356dd5e5`](Shopify@af66cc6), [`bf9539536`](Shopify@f3a22e0), [`ea8e5510e`](Shopify@785951b), [`3a0228815`](Shopify@728a418), [`b62cf7356`](Shopify@3b96ff2), [`a1c141669`](Shopify@fad62e1), [`97c3979ba`](Shopify@42bf65e), [`ba1c813c2`](Shopify@d9178be), [`befded29d`](Shopify@a5bcdca), [`9484d55ca`](Shopify@812a04e), [`f631b229f`](Shopify@6229245), [`5604728ee`](Shopify@f3add43), [`7d056dea2`](Shopify@9e0ad2b), [`9f7e5b682`](Shopify@69cad76)]: - @shopify/polaris@12.7.0 - @shopify/polaris-tokens@8.5.0 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.
WHY are these changes introduced?
Part of https://github.com/Shopify/polaris-internal/issues/1341
WHAT is this pull request doing?
Before, the
IndexTablescrollbar container was z-index35which was under theShadowBevelofLegacyCard(z-index101) but on top of theShadowBevelonCard(z-index32). This PR lowers the scrollbar container to z-index30. This bug was not caught before as all ourIndexTablestories were usingLegacyCard.🎩 checklist