diff --git a/.changeset/khaki-walls-wash.md b/.changeset/khaki-walls-wash.md new file mode 100644 index 00000000000..284ed59ed21 --- /dev/null +++ b/.changeset/khaki-walls-wash.md @@ -0,0 +1,7 @@ +--- +'@shopify/stylelint-polaris': major +'@shopify/polaris': minor +'polaris.shopify.com': minor +--- + +Enabled the `custom-property-disallowed-list` rule and added deprecated v10 custom properties. diff --git a/polaris-react/src/components/AlphaFilters/AlphaFilters.scss b/polaris-react/src/components/AlphaFilters/AlphaFilters.scss index ac4dde7e0a1..d0e8944b9ea 100644 --- a/polaris-react/src/components/AlphaFilters/AlphaFilters.scss +++ b/polaris-react/src/components/AlphaFilters/AlphaFilters.scss @@ -163,7 +163,7 @@ .AddFilterActivatorMultiple { position: sticky; - z-index: var(--p-z-1); + z-index: var(--p-z-index-1); top: 0; right: 0; display: flex; @@ -227,7 +227,7 @@ .MultiplePinnedFilterClearAll { transform: translateX(-8px); position: relative; - z-index: var(--p-z-1); + z-index: var(--p-z-index-1); margin-left: 0; padding-right: var(--p-space-4); } diff --git a/polaris-react/src/components/AlphaTabs/AlphaTabs.scss b/polaris-react/src/components/AlphaTabs/AlphaTabs.scss index c3b13f011a7..99cdd158316 100644 --- a/polaris-react/src/components/AlphaTabs/AlphaTabs.scss +++ b/polaris-react/src/components/AlphaTabs/AlphaTabs.scss @@ -101,7 +101,7 @@ &:not([aria-disabled='true']):active { background-color: var(--p-color-bg-active); color: var(--p-color-text); - z-index: var(--p-z-1); + z-index: var(--p-z-index-1); } path { @@ -257,7 +257,7 @@ &:not([aria-disabled='true']):active { background-color: var(--p-color-bg-active); - z-index: var(--p-z-1); + z-index: var(--p-z-index-1); } &[aria-disabled='true'] { diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.scss b/polaris-react/src/components/IndexFilters/IndexFilters.scss index c597b62124a..c8fb12807d6 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.scss +++ b/polaris-react/src/components/IndexFilters/IndexFilters.scss @@ -20,7 +20,7 @@ $spinner-size: 20px; z-index: var(--p-z-index-1); top: 56px; width: 100vw; - box-shadow: var(--p-shadow-top-bar); + box-shadow: var(--p-shadow-sm); } .IndexFilters.IndexFiltersStickyFlush { diff --git a/polaris-react/src/components/TopBar/components/Menu/tests/Menu.test.tsx b/polaris-react/src/components/TopBar/components/Menu/tests/Menu.test.tsx index ba6893d18a9..9505419bb90 100644 --- a/polaris-react/src/components/TopBar/components/Menu/tests/Menu.test.tsx +++ b/polaris-react/src/components/TopBar/components/Menu/tests/Menu.test.tsx @@ -121,23 +121,6 @@ describe('', () => { expect(menu).toContainReactComponent(Message); }); - describe('isFullHeight', () => { - it('passes isFullHeight to popover as false if menu is not provided a message', () => { - const {message, ...rest} = defaultProps; - const menu = mountWithApp(); - - expect(menu).toContainReactComponent(Popover, {fullHeight: false}); - }); - - it('passes isFullHeight to popover as true if menu is provided a message', () => { - const menu = mountWithApp(); - - expect(menu).toContainReactComponent(Popover, { - fullHeight: true, - }); - }); - }); - describe('accessibilityLabel', () => { it('passes accessibilityLabel to the popover activator', () => { const menu = mountWithApp( diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-custom-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-custom-property-disallowed-list.md new file mode 100644 index 00000000000..cdf8a9c77a4 --- /dev/null +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-custom-property-disallowed-list.md @@ -0,0 +1,15 @@ +--- +title: colors/custom-property-disallowed-list +description: Disallows use of legacy color custom properties. +keywords: + - stylelint + - colors + - colors rules +--- + +```diff +// Do ++ color: var(--p-color-text-caution); +// Don't +- color: var(--p-text-warning); +``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md index 824b16099c4..795a964a1e9 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-global-disallowed-list.md @@ -1,23 +1,12 @@ --- title: colors/global-disallowed-list -description: Disallows use of legacy color custom properties and mixin map data. +description: Disallows use of legacy color Sass APIs. keywords: - stylelint - colors - colors rules --- -Disallows use of legacy custom properties. - -```diff -// Do -+ border: transparent; -// Don't -- border: var(--p-override-transparent); -``` - -Disallows use of legacy mixin map data. - ```diff // Don't - @type map $filter-palette-data: $polaris-color-filters; diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-custom-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-custom-property-disallowed-list.md new file mode 100644 index 00000000000..e816eb6418a --- /dev/null +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-custom-property-disallowed-list.md @@ -0,0 +1,15 @@ +--- +title: depth/custom-property-disallowed-list +description: Disallows use of legacy shadow custom properties. +keywords: + - stylelint + - depth + - depth rules +--- + +```diff +// Do ++ box-shadow: var(--p-shadow-md); +// Don't +- box-shadow: var(--p-shadow-deep) +``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md index f24ecca8847..ad4096c1f1c 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md @@ -1,6 +1,6 @@ --- title: depth/global-disallowed-list -description: Disallows use of legacy shadow custom properties and Sass mixin data. +description: Disallows use of legacy depth Sass APIs. keywords: - stylelint - depth @@ -8,8 +8,6 @@ keywords: --- ```diff -// Do -+ box-shadow: var(--p-shadow-card); // Don't -- box-shadow: var(--p-card-shadow); +- @type map $depth-data: $shadows-data; ``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-custom-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-custom-property-disallowed-list.md new file mode 100644 index 00000000000..10a5872c8ed --- /dev/null +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-custom-property-disallowed-list.md @@ -0,0 +1,15 @@ +--- +title: layout/custom-property-disallowed-list +description: Disallows use of legacy layout custom properties. +keywords: + - stylelint + - layout + - layout rules +--- + +```diff +// Do ++ +// Don't +- height: var(--p-choice-size); +``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md index b2d9b3e197b..20dded5bc1f 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md @@ -1,6 +1,6 @@ --- title: layout/global-disallowed-list -description: Disallows use of legacy custom properties and Sass mixin map data. +description: Disallows use of legacy layout Sass APIs. keywords: - stylelint - layout @@ -9,7 +9,7 @@ keywords: ```diff // Do -+ ++ width: 240px !default; // Don't -- height: var(--p-choice-size); +- width: $navigation-width; ``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md index 0e9b09b855e..11cf625cfdc 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/motion-global-disallowed-list.md @@ -1,6 +1,6 @@ --- title: motion/global-disallowed-list -description: Disallows use of legacy Polaris motion tokens. +description: Disallows use of legacy motion Sass APIs. keywords: - stylelint - motion @@ -9,7 +9,7 @@ keywords: ```diff // Do -+ transition: var(--p-duration-100) var(--p-ease); ++ transition: var(--p-duration-500) var(--p-ease); // Don't -- transition: var(--p-duration-1-0-0) var(--p-ease); +- duration: $skeleton-shimmer-duration var(--p-ease); ``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-custom-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-custom-property-disallowed-list.md new file mode 100644 index 00000000000..db6772eb075 --- /dev/null +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-custom-property-disallowed-list.md @@ -0,0 +1,15 @@ +--- +title: shape/custom-property-disallowed-list +description: Disallows use of legacy shape custom properties. +keywords: + - stylelint + - shape + - shape rules +--- + +```diff +// Do ++ border-radius: var(--p-border-radius-2); +// Don't +- border-radius: var(--p-border-radius-large); +``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-global-disallowed-list.md deleted file mode 100644 index 3b51aea38c3..00000000000 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-global-disallowed-list.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: shape/global-disallowed-list -description: Disallows use of legacy Polaris shape tokens and mixin map data. -keywords: - - stylelint - - shape - - shape rules ---- - -```diff -// Do -+ border-radius: var(--p-border-radius-2); -// Don't -- border-radius: var(--p-border-radius-wide); -``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-custom-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-custom-property-disallowed-list.md new file mode 100644 index 00000000000..3fc4524bf72 --- /dev/null +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-custom-property-disallowed-list.md @@ -0,0 +1,15 @@ +--- +title: spacing/custom-property-disallowed-list +description: Disallows use of legacy spacing custom properties. +keywords: + - stylelint + - spacing + - spacing rules +--- + +```diff +// Do ++ margin-bottom: var(--p-space-025); +// Don't +- margin-bottom: var(--p-choice-margin); +``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-global-disallowed-list.md index 559e7884150..33d78877561 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-global-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-global-disallowed-list.md @@ -1,6 +1,6 @@ --- title: spacing/global-disallowed-list -description: Disallows use of legacy spacing custom properties and Sass mixin data. +description: Disallows use of legacy spacing Sass APIs. keywords: - stylelint - spacing @@ -8,8 +8,6 @@ keywords: --- ```diff -// Do -+ margin-bottom: var(--p-space-1); // Don't -- margin-bottom: var(--p-text-field-spinner-offset); +- @type map $spacing-data: $polaris-spacing; ``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md index f06f411ed2b..d4b8aa58c56 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/typography-global-disallowed-list.md @@ -1,6 +1,6 @@ --- title: typography/global-disallowed-list -description: Disallows use of legacy Polaris typography tokens and mixin map data. +description: Disallows use of legacy typography Sass APIs. keywords: - stylelint - typography diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-custom-property-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-custom-property-disallowed-list.md new file mode 100644 index 00000000000..715e7c28da2 --- /dev/null +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-custom-property-disallowed-list.md @@ -0,0 +1,15 @@ +--- +title: z-index/custom-property-disallowed-list +description: Disallows use of legacy z-index custom properties. +keywords: + - stylelint + - z-index + - z-index rules +--- + +```diff +// Do ++ z-index: var(--p-z-index-1); +// Don't +- z-index: var(--p-z-1); +``` diff --git a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md index 647289c5c87..6908614f2d3 100644 --- a/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md +++ b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md @@ -1,6 +1,6 @@ --- title: z-index/global-disallowed-list -description: Disallows the use of legacy z-index custom properties and Sass mixin data. +description: Disallows use of legacy z-index Sass APIs. keywords: - stylelint - z-index @@ -8,8 +8,6 @@ keywords: --- ```diff -// Do -+ z-index: var(--p-z-1); // Don't -- z-index(toast, $fixed-element-stacking-order); +- @type map $elevation-data: $global-elements; ``` diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js index 7c04d6dc2dc..84b8b2d1dcc 100644 --- a/stylelint-polaris/index.js +++ b/stylelint-polaris/index.js @@ -33,6 +33,232 @@ const disallowedUnits = [ 'pt', ]; +const disallowedVarsColor = [ + // Legacy custom properties + '--p-override-transparent', + '--p-badge-mix-blend-mode', + '--p-text-warning', + '--p-text-success', + '--p-text-subdued-on-dark', + '--p-text-subdued', + '--p-text-primary-pressed', + '--p-text-primary-hovered', + '--p-text-primary', + '--p-text-on-primary', + '--p-text-on-interactive', + '--p-text-on-dark', + '--p-text-on-critical', + '--p-text-highlight', + '--p-text-disabled', + '--p-text-critical', + '--p-text', + '--p-surface-warning-subdued-pressed', + '--p-surface-warning-subdued-hovered', + '--p-surface-warning-subdued', + '--p-surface-warning', + '--p-surface-success-subdued-pressed', + '--p-surface-success-subdued-hovered', + '--p-surface-success-subdued ', + '--p-surface-success', + '--p-surface-subdued', + '--p-surface-selected-pressed', + '--p-surface-selected-hovered', + '--p-surface-selected', + '--p-surface-search-field-dark', + '--p-surface-search-field', + '--p-surface-primary-selected-pressed', + '--p-surface-primary-selected-hovered', + '--p-surface-primary-selected', + '--p-surface-pressed-dark', + '--p-surface-pressed', + '--p-surface-neutral-subdued-dark', + '--p-surface-neutral-subdued', + '--p-surface-neutral-pressed', + '--p-surface-neutral-hovered', + '--p-surface-neutral-disabled', + '--p-surface-neutral', + '--p-surface-hovered-dark', + '--p-surface-hovered', + '--p-surface-highlight-subdued-pressed', + '--p-surface-highlight-subdued-hovered', + '--p-surface-highlight-subdued', + '--p-surface-highlight', + '--p-surface-disabled', + '--p-surface-depressed', + '--p-surface-dark', + '--p-surface-critical-subdued-pressed', + '--p-surface-critical-subdued-hovered', + '--p-surface-critical-subdued-depressed', + '--p-surface-critical-subdued', + '--p-surface-critical', + '--p-surface-attention', + '--p-surface', + '--p-shadow-color-picker-dragger', + '--p-shadow-color-picker', + '--p-overlay', + '--p-interactive-pressed-on-dark', + '--p-interactive-pressed', + '--p-interactive-on-dark', + '--p-interactive-hovered', + '--p-interactive-disabled', + '--p-interactive-critical-pressed', + '--p-interactive-critical-hovered', + '--p-interactive-critical-disabled', + '--p-interactive-critical', + '--p-interactive', + '--p-icon-warning', + '--p-icon-success', + '--p-icon-subdued', + '--p-icon-pressed', + '--p-icon-on-primary', + '--p-icon-on-interactive', + '--p-icon-on-dark', + '--p-icon-on-critical', + '--p-icon-hovered', + '--p-icon-highlight', + '--p-icon-disabled', + '--p-icon-critical', + '--p-icon-attention', + '--p-icon', + '--p-hint-from-direct-light', + '--p-focused', + '--p-divider-dark', + '--p-divider', + '--p-decorative-two-text', + '--p-decorative-two-surface', + '--p-decorative-two-icon', + '--p-decorative-three-text', + '--p-decorative-three-surface', + '--p-decorative-three-icon', + '--p-decorative-one-text', + '--p-decorative-one-surface', + '--p-decorative-one-icon', + '--p-decorative-four-text', + '--p-decorative-four-surface', + '--p-decorative-four-icon', + '--p-decorative-five-text', + '--p-decorative-five-surface', + '--p-decorative-five-icon', + '--p-border-warning-subdued', + '--p-border-warning', + '--p-border-success-subdued', + '--p-border-success', + '--p-border-subdued', + '--p-border-shadow-subdued', + '--p-border-shadow', + '--p-border-on-dark', + '--p-border-neutral-subdued', + '--p-border-hovered', + '--p-border-highlight-subdued', + '--p-border-highlight', + '--p-border-disabled', + '--p-border-depressed', + '--p-border-critical-subdued', + '--p-border-critical-disabled', + '--p-border-critical', + '--p-border', + '--p-background-selected', + '--p-background-pressed', + '--p-background-hovered', + '--p-background', + '--p-backdrop', + '--p-action-secondary-pressed-dark', + '--p-action-secondary-pressed', + '--p-action-secondary-hovered-dark', + '--p-action-secondary-hovered', + '--p-action-secondary-disabled', + '--p-action-secondary-depressed', + '--p-action-secondary', + '--p-action-primary-pressed', + '--p-action-primary-hovered', + '--p-action-primary-disabled', + '--p-action-primary-depressed', + '--p-action-primary', + '--p-action-critical-pressed', + '--p-action-critical-hovered', + '--p-action-critical-disabled', + '--p-action-critical-depressed', + '--p-action-critical', +]; + +const disallowedVarsDepth = [ + // Legacy custom properties + '--p-button-drop-shadow', + '--p-button-inner-shadow', + '--p-button-pressed-inner-shadow', + '--p-card-shadow', + '--p-popover-shadow', + '--p-modal-shadow', + '--p-top-bar-shadow', + '--p-shadow-transparent', + '--p-shadow-faint', + '--p-shadow-base', + '--p-shadow-deep', + '--p-shadow-button', + '--p-shadow-top-bar', + '--p-shadow-card', + '--p-shadow-popover', + '--p-shadow-layer', + '--p-shadow-modal', + '--p-shadows-inset-button', + '--p-shadows-inset-button-pressed', +]; + +const disallowedVarsLayout = [ + // Legacy custom properties + '--p-range-slider-thumb-size-base', + '--p-range-slider-thumb-size-active', + '--p-choice-size', + '--p-icon-size-small', + '--p-icon-size-medium', +]; + +const disallowedVarsShape = [ + // Legacy custom properties + '--p-border-radius-base', + '--p-border-radius-large', + '--p-border-radius-wide', + '--p-border-radius-half', + '--p-control-border-width', + '--p-thin-border-subdued', + '--p-banner-border-default', + '--p-banner-border-success', + '--p-banner-border-highlight', + '--p-banner-border-warning', + '--p-banner-border-critical', + '--p-text-field-focus-ring-offset', + '--p-border-base', + '--p-border-dark', + '--p-border-transparent', + '--p-border-divider', + '--p-border-divider-on-dark', +]; + +const disallowedVarsSpace = [ + // Legacy custom properties + '--p-button-group-item-spacing', + '--p-choice-margin', + '--p-text-field-spinner-offset', + '--p-frame-offset', +]; + +const disallowedVarsZIndex = [ + // Legacy custom properties + '--p-override-loading-z-index', + '--p-z-1', + '--p-z-2', + '--p-z-3', + '--p-z-4', + '--p-z-5', + '--p-z-6', + '--p-z-7', + '--p-z-8', + '--p-z-9', + '--p-z-10', + '--p-z-11', + '--p-z-12', +]; + /** * @type {import('./plugins/coverage').PrimaryOptions} The stylelint-polaris/coverage rule expects a 3-dimensional rule config that groups Stylelint rules by coverage categories. It reports problems with dynamic rule names by appending the category to the coverage plugin's rule name @@ -68,6 +294,10 @@ const stylelintPolarisCoverageOptions = { 'ms-high-contrast-color', ].map(matchNameRegExp), }, + 'polaris/custom-property-disallowed-list': { + disallowedProperties: disallowedVarsColor, + disallowedValues: {'/.+/': disallowedVarsColor}, + }, 'polaris/global-disallowed-list': [ // Legacy mixin map-get data /\$polaris-colors/, @@ -199,6 +429,10 @@ const stylelintPolarisCoverageOptions = { 'polaris/at-rule-disallowed-list': { include: ['layout-flex-fix', 'safe-area-for'].map(matchNameRegExp), }, + 'polaris/custom-property-disallowed-list': { + disallowedProperties: disallowedVarsLayout, + disallowedValues: {'/.+/': disallowedVarsLayout}, + }, 'polaris/global-disallowed-list': [ // Legacy mixin map-get data /\$layout-width-data/, @@ -207,10 +441,6 @@ const stylelintPolarisCoverageOptions = { /\$large-thumbnail-size/, /\$medium-thumbnail-size/, /\$thumbnail-sizes/, - // Legacy custom properties - /--p-range-slider-thumb-size-base/, - /--p-range-slider-thumb-size-active/, - /--p-choice-size/, ], }, { @@ -229,13 +459,13 @@ const stylelintPolarisCoverageOptions = { '/^gap/': disallowedUnits, }, ], + 'polaris/custom-property-disallowed-list': { + disallowedProperties: disallowedVarsSpace, + disallowedValues: {'/.+/': disallowedVarsSpace}, + }, 'polaris/global-disallowed-list': [ // Legacy mixin map-get data /\$polaris-spacing/, - // Legacy custom properties - /--p-button-group-item-spacing/, - /--p-choice-margin/, - /--p-text-field-spinner-offset/, ], }, { @@ -262,20 +492,10 @@ const stylelintPolarisCoverageOptions = { 'no-focus-ring', ].map(matchNameRegExp), }, - 'polaris/global-disallowed-list': [ - // Legacy custom properties - // /--p-border-radius-base/, - /--p-border-radius-wide/, - // /--p-border-radius-full/, - /--p-control-border-width/, - /--p-thin-border-subdued/, - /--p-banner-border-default/, - /--p-banner-border-success/, - /--p-banner-border-highlight/, - /--p-banner-border-warning/, - /--p-banner-border-critical/, - /--p-text-field-focus-ring-offset/, - ], + 'polaris/custom-property-disallowed-list': { + disallowedProperties: disallowedVarsShape, + disallowedValues: {'/.+/': disallowedVarsShape}, + }, }, { message: 'Please use a Polaris shape token', @@ -290,6 +510,10 @@ const stylelintPolarisCoverageOptions = { }, ], 'property-disallowed-list': ['text-shadow'], + 'polaris/custom-property-disallowed-list': { + disallowedProperties: disallowedVarsDepth, + disallowedValues: {'/.+/': disallowedVarsDepth}, + }, 'polaris/global-disallowed-list': [ // Legacy mixin map-get data /\$shadows-data/, @@ -309,12 +533,14 @@ const stylelintPolarisCoverageOptions = { }, ], 'function-disallowed-list': ['z-index'].map(matchNameRegExp), + 'polaris/custom-property-disallowed-list': { + disallowedProperties: disallowedVarsZIndex, + disallowedValues: {'/.+/': disallowedVarsZIndex}, + }, 'polaris/global-disallowed-list': [ // Legacy mixin map-get data /\$fixed-element-stacking-order/, /\$global-elements/, - // Legacy custom properties - /--p-override-loading-z-index/, ], }, { @@ -469,6 +695,7 @@ module.exports = { './plugins/global-disallowed-list', './plugins/at-rule-disallowed-list', './plugins/custom-property-allowed-list', + './plugins/custom-property-disallowed-list', './plugins/media-query-allowed-list', './plugins/declaration-property-value-disallowed-list', ], diff --git a/stylelint-polaris/plugins/global-disallowed-list/index.test.js b/stylelint-polaris/plugins/global-disallowed-list/index.test.js index a692b7cfbdb..0ed11d6dc82 100644 --- a/stylelint-polaris/plugins/global-disallowed-list/index.test.js +++ b/stylelint-polaris/plugins/global-disallowed-list/index.test.js @@ -25,15 +25,5 @@ testRule({ endLine: 1, endColumn: 32, }, - { - code: '.a { color: var(--p-token); }', - description: 'Uses something on the disallowed list', - message: - 'Unexpected disallowed value "--p-token" (polaris/global-disallowed-list)', - line: 1, - column: 17, - endLine: 1, - endColumn: 26, - }, ], });