Skip to content

Rename z-index tokens #7607

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

Rename z-index tokens #7607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8acdc96
Rename z-index tokens
lgriffee Nov 1, 2022
64eee8b
Merge branch 'v11-major' of https://github.com/Shopify/polaris into r…
lgriffee Nov 1, 2022
a7038dc
Add migration guidance
lgriffee Nov 1, 2022
b8a7bd8
Merge branch 'v11-major' of https://github.com/Shopify/polaris into r…
lgriffee Nov 17, 2022
44a168f
Merge branch 'v11-major' into rename-z-index-tokens
alex-page Jan 30, 2023
f8be5ca
Add migration documentation for v11
alex-page Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions documentation/guides/migrating-from-v10-to-v11.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,22 @@ We've removed the following deprecated prop from the Collapsible component:
We are removing low usage components from Polaris. We love fun but we also want to ensure we are shipping exactly what our users need. If you want to use this in your project feel free to copy the [component sourcecode](https://github.com/Shopify/polaris/blob/%40shopify/polaris%4010.24.0/polaris-react/src/components/KonamiCode/KonamiCode.tsx).

## Tokens

### Renamed z-index tokens

We've changed the naming of our `z-index` tokens from `--p-z-*` to `--p-z-index-*` to improve clarity.

| Before | After |
| ---------- | ---------------- |
| `--p-z-1` | `--p-z-index-1` |
| `--p-z-2` | `--p-z-index-2` |
| `--p-z-3` | `--p-z-index-3` |
| `--p-z-4` | `--p-z-index-4` |
| `--p-z-5` | `--p-z-index-5` |
| `--p-z-6` | `--p-z-index-6` |
| `--p-z-7` | `--p-z-index-7` |
| `--p-z-8` | `--p-z-index-8` |
| `--p-z-9` | `--p-z-index-9` |
| `--p-z-10` | `--p-z-index-10` |
| `--p-z-11` | `--p-z-index-11` |
| `--p-z-12` | `--p-z-index-12` |
24 changes: 12 additions & 12 deletions polaris-migrator/src/migrations/scss-replace-z-index/scss-replace-z-index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,21 @@ interface PluginOptions extends Options, NamespaceOptions {}
const processed = Symbol('processed');

const zIndexMap = {
content: '--p-z-1',
overlay: '--p-z-2',
content: '--p-z-index-1',
overlay: '--p-z-index-2',
};

const fixedElementStackingOrder = {
'global-ribbon': '--p-z-3',
'top-bar': '--p-z-4',
'context-bar': '--p-z-5',
'small-screen-loading-bar': '--p-z-6',
'nav-backdrop': '--p-z-7',
nav: '--p-z-8',
'skip-to-content': '--p-z-9',
backdrop: '--p-z-10',
modal: '--p-z-11',
toast: '--p-z-12',
'global-ribbon': '--p-z-index-3',
'top-bar': '--p-z-index-4',
'context-bar': '--p-z-index-5',
'small-screen-loading-bar': '--p-z-index-6',
'nav-backdrop': '--p-z-index-7',
nav: '--p-z-index-8',
'skip-to-content': '--p-z-index-9',
backdrop: '--p-z-index-10',
modal: '--p-z-index-11',
toast: '--p-z-index-12',
};

function isValidElement<
Expand Down
12 changes: 6 additions & 6 deletions polaris-migrator/src/migrations/scss-replace-z-index/tests/scss-replace-z-index.output.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,25 @@ $someElement: (

.scenario-1 {
/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
/* z-index: var(--p-z-1) + 1; */
/* z-index: var(--p-z-index-1) + 1; */
z-index: z-index(content) + 1;
background-color: var(--p-background);
}

.scenario-2 {
/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
/* z-index: var(--p-z-2) + 1; */
/* z-index: var(--p-z-index-2) + 1; */
z-index: z-index(overlay) + 1;
background-color: var(--p-background);
}

.scenario-3 {
z-index: var(--p-z-1);
z-index: var(--p-z-index-1);
background-color: var(--p-background);
}

.scenario-4 {
z-index: var(--p-z-2);
z-index: var(--p-z-index-2);
background-color: var(--p-background);
}

Expand All @@ -35,7 +35,7 @@ $someElement: (

.scenario-6 {
/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
/* z-index: calc(var(--p-z-2) + var(--p-z-1)); */
/* z-index: calc(var(--p-z-index-2) + var(--p-z-index-1)); */
z-index: calc(z-index(overlay) + z-index(content));
}

Expand All @@ -44,5 +44,5 @@ $someElement: (
}

.scenario-8 {
z-index: var(--p-z-11);
z-index: var(--p-z-index-11);
}
12 changes: 6 additions & 6 deletions polaris-migrator/src/migrations/scss-replace-z-index/tests/with-namespace.output.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,25 @@ $someElement: (

.scenario-1 {
/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
/* z-index: var(--p-z-1) + 1; */
/* z-index: var(--p-z-index-1) + 1; */
z-index: legacy-polaris-v8.z-index(content) + 1;
background-color: var(--p-background);
}

.scenario-2 {
/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
/* z-index: var(--p-z-2) + 1; */
/* z-index: var(--p-z-index-2) + 1; */
z-index: legacy-polaris-v8.z-index(overlay) + 1;
background-color: var(--p-background);
}

.scenario-3 {
z-index: var(--p-z-1);
z-index: var(--p-z-index-1);
background-color: var(--p-background);
}

.scenario-4 {
z-index: var(--p-z-2);
z-index: var(--p-z-index-2);
background-color: var(--p-background);
}

Expand All @@ -37,7 +37,7 @@ $someElement: (
.scenario-6 {
/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
/* z-index: calc(
var(--p-z-2) + var(--p-z-1)
var(--p-z-index-2) + var(--p-z-index-1)
); */
z-index: calc(
legacy-polaris-v8.z-index(overlay) + legacy-polaris-v8.z-index(content)
Expand All @@ -51,5 +51,5 @@ $someElement: (
}

.scenario-8 {
z-index: var(--p-z-11);
z-index: var(--p-z-index-11);
}
5 changes: 2 additions & 3 deletions polaris-react/src/components/Backdrop/Backdrop.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
.Backdrop {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-10);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-10);
top: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
right: 0;
Expand All @@ -23,5 +22,5 @@
}

.belowNavigation {
z-index: var(--p-z-7);
z-index: var(--p-z-index-7);
}
2 changes: 1 addition & 1 deletion polaris-react/src/components/DataTable/DataTable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,7 @@
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
right: 0;
visibility: hidden;
z-index: var(--p-z-1);
z-index: var(--p-z-index-1);
}

.StickyHeaderInner {
Expand Down
3 changes: 1 addition & 2 deletions polaris-react/src/components/Filters/Filters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,8 +264,7 @@ $list-filters-footer-height: 70px;
.Backdrop {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-10);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-10);
top: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
right: 0;
Expand Down
20 changes: 7 additions & 13 deletions polaris-react/src/components/Frame/Frame.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@
.Navigation {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-8);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-8);
top: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
left: 0;
Expand Down Expand Up @@ -155,8 +154,7 @@
.TopBar {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-4);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-4);
top: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
left: 0;
Expand All @@ -181,8 +179,7 @@
.ContextualSaveBar {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-5);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-5);
top: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
left: 0;
Expand Down Expand Up @@ -248,8 +245,7 @@
.GlobalRibbonContainer {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-3);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-3);
bottom: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
width: 100%;
Expand Down Expand Up @@ -277,8 +273,7 @@
.LoadingBar {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-6);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-6);
top: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
right: 0;
Expand All @@ -297,7 +292,7 @@
}

.hasTopBar & {
z-index: var(--p-z-6);
z-index: var(--p-z-index-6);
}
}
}
Expand All @@ -307,8 +302,7 @@
--pc-frame-skip-vertical-offset: 10px;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-9);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-9);
top: var(--pc-frame-skip-vertical-offset);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
left: calc(var(--p-space-2) + var(--pc-frame-offset));
Expand Down
3 changes: 1 addition & 2 deletions polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@
.ToastManager {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-12);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-12);
right: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
left: 0;
Expand Down
3 changes: 1 addition & 2 deletions polaris-react/src/components/MediaCard/MediaCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,7 @@
.Popover {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: absolute;
z-index: var(--p-z-2);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-2);
top: var(--p-space-4);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
right: var(--p-space-5);
Expand Down
3 changes: 1 addition & 2 deletions polaris-react/src/components/Modal/components/Dialog/Dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ $breakpoints-height-limit-up: '(min-height: #{breakpoint($height-limit + $vertic
.Container {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-11);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-11);
top: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
right: 0;
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.PositionedOverlay {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: absolute;
z-index: var(--p-z-2);
z-index: var(--p-z-index-2);
}

.fixed {
Expand Down
3 changes: 1 addition & 2 deletions polaris-react/src/components/Sheet/Sheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ $sheet-desktop-width: 380px;
.Container {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
z-index: var(--p-z-11);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-11);
top: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
right: 0;
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/Sheet/Sheet.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,7 @@ export function WithSearchableListbox() {
style={{
padding: 'var(--p-space-4) var(--p-space-2)',
position: 'sticky',
zIndex: 'var(--p-z-12)',
zIndex: 'var(--p-z-index-12)',
width: '100%',
background: 'var(--p-surface)',
}}
Expand Down
3 changes: 1 addition & 2 deletions polaris-react/src/components/TopBar/TopBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,7 @@ $icon-size: 20px;
}

.Contents {
z-index: var(--p-z-1);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-1);
display: flex;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
flex: 1 1 auto;
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/TopBar/components/Search/Search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
position: fixed;
visibility: hidden;
z-index: var(--p-z-8);
z-index: var(--p-z-index-8);
pointer-events: none;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
top: $top-bar-height;
Expand Down
3 changes: 1 addition & 2 deletions ...ris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@
left: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
right: 0;
z-index: var(--p-z-7);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-7);
height: 100%;
}

Expand Down
4 changes: 1 addition & 3 deletions polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
--pc-search-field-input: 2;
--pc-search-field-icon: 3;
--pc-search-field-action: 3;
// stylelint-enable
z-index: var(--p-z-11);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
z-index: var(--p-z-index-11);
position: relative;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
display: flex;
Expand Down
Loading