From fcc31523951a7962d623a6c5935dfc85a9e9b3e3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 15:00:36 -0600 Subject: [PATCH 01/21] Enable custom-property-disallowed-list for z-index Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- stylelint-polaris/index.js | 36 ++++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js index 3e1aa171b2c..2b8c411b274 100644 --- a/stylelint-polaris/index.js +++ b/stylelint-polaris/index.js @@ -33,6 +33,23 @@ const disallowedUnits = [ 'pt', ]; +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 @@ -483,24 +500,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/, - /--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/, ], }, { @@ -655,6 +662,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', ], From dfabc43d21543b032e95b57a184bfb262738f98d Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 15:25:44 -0600 Subject: [PATCH 02/21] Enable custom-property-disallowed-list for color --- stylelint-polaris/index.js | 297 +++++++++++++++++++------------------ 1 file changed, 152 insertions(+), 145 deletions(-) diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js index 2b8c411b274..26bb9a04d0f 100644 --- a/stylelint-polaris/index.js +++ b/stylelint-polaris/index.js @@ -50,6 +50,154 @@ const disallowedVarsZIndex = [ '--p-z-12', ]; +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', +]; + /** * @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 @@ -85,156 +233,15 @@ 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/, /\$color-filter-palette-data/, /\$color-palette-data/, - // 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/, ], }, { From ee13af2d62501e8450ccea9d0569bfa86361471a Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 15:27:31 -0600 Subject: [PATCH 03/21] Enable custom-property-disallowed-list for layout --- stylelint-polaris/index.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js index 26bb9a04d0f..ae28d0aed85 100644 --- a/stylelint-polaris/index.js +++ b/stylelint-polaris/index.js @@ -198,6 +198,15 @@ const disallowedVarsColor = [ '--p-action-critical', ]; +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', +]; + /** * @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 @@ -368,6 +377,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/, @@ -376,12 +389,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/, - /--p-icon-size-small/, - /--p-icon-size-medium/, ], }, { From 2681c3ec5184cd8c4df83f367e225b0b5430cb16 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 15:30:52 -0600 Subject: [PATCH 04/21] Enable custom-property-disallowed-list for space --- stylelint-polaris/index.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js index ae28d0aed85..221e6e5cc0c 100644 --- a/stylelint-polaris/index.js +++ b/stylelint-polaris/index.js @@ -207,6 +207,14 @@ const disallowedVarsLayout = [ '--p-icon-size-medium', ]; +const disallowedVarsSpace = [ + // Legacy custom properties + /--p-button-group-item-spacing/, + /--p-choice-margin/, + /--p-text-field-spinner-offset/, + /--p-frame-offset/, +]; + /** * @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 @@ -407,14 +415,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/, - /--p-frame-offset/, ], }, { From b3666bb08a1fcfda8c17b675d0a081b6b5ebbf29 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 15:36:30 -0600 Subject: [PATCH 05/21] Enable custom-property-disallowed-list for shape --- stylelint-polaris/index.js | 53 +++++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 24 deletions(-) diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js index 221e6e5cc0c..a4a2b03acb7 100644 --- a/stylelint-polaris/index.js +++ b/stylelint-polaris/index.js @@ -209,10 +209,31 @@ const disallowedVarsLayout = [ const disallowedVarsSpace = [ // Legacy custom properties - /--p-button-group-item-spacing/, - /--p-choice-margin/, - /--p-text-field-spinner-offset/, - /--p-frame-offset/, + '--p-button-group-item-spacing', + '--p-choice-margin', + '--p-text-field-spinner-offset', + '--p-frame-offset', +]; + +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', ]; /** @@ -448,26 +469,10 @@ const stylelintPolarisCoverageOptions = { 'no-focus-ring', ].map(matchNameRegExp), }, - 'polaris/global-disallowed-list': [ - // 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/, - ], + 'polaris/custom-property-disallowed-list': { + disallowedProperties: disallowedVarsShape, + disallowedValues: {'/.+/': disallowedVarsShape}, + }, }, { message: 'Please use a Polaris shape token', From a69338e1765abcd015eceebd97512349fa3135a3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 15:39:09 -0600 Subject: [PATCH 06/21] Enable custom-property-disallowed-list for depth --- stylelint-polaris/index.js | 47 ++++++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js index a4a2b03acb7..b17b675b541 100644 --- a/stylelint-polaris/index.js +++ b/stylelint-polaris/index.js @@ -236,6 +236,29 @@ const disallowedVarsShape = [ '--p-border-divider-on-dark', ]; +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', +]; + /** * @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 @@ -487,29 +510,13 @@ 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/, - // 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/, ], }, { From 354410851eaf8ec68134585b03ef054ce8df4988 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 15:39:37 -0600 Subject: [PATCH 07/21] Remove custom property test from global-disallowed-list Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- .../plugins/global-disallowed-list/index.test.js | 10 ---------- 1 file changed, 10 deletions(-) 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, - }, ], }); From 873f2b0cfa25e175d2e1deebdf872c0104e32cbb Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 16:55:31 -0600 Subject: [PATCH 08/21] Alpha order disallowedVar groups --- stylelint-polaris/index.js | 90 +++++++++++++++++++------------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js index b17b675b541..84b8b2d1dcc 100644 --- a/stylelint-polaris/index.js +++ b/stylelint-polaris/index.js @@ -33,23 +33,6 @@ const disallowedUnits = [ 'pt', ]; -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', -]; - const disallowedVarsColor = [ // Legacy custom properties '--p-override-transparent', @@ -198,6 +181,29 @@ const disallowedVarsColor = [ '--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', @@ -207,14 +213,6 @@ const disallowedVarsLayout = [ '--p-icon-size-medium', ]; -const disallowedVarsSpace = [ - // Legacy custom properties - '--p-button-group-item-spacing', - '--p-choice-margin', - '--p-text-field-spinner-offset', - '--p-frame-offset', -]; - const disallowedVarsShape = [ // Legacy custom properties '--p-border-radius-base', @@ -236,27 +234,29 @@ const disallowedVarsShape = [ '--p-border-divider-on-dark', ]; -const disallowedVarsDepth = [ +const disallowedVarsSpace = [ // 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', + '--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', ]; /** From d2f8950bbf81bdebda0e1169b53dc7004cc4b6e8 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 16:58:32 -0600 Subject: [PATCH 09/21] Create new rule doc pages for custom-property-disallowed-list token groups --- .../colors-custom-property-disallowed-list.md | 15 +++++++++++++++ .../depth-custom-property-disallowed-list.md | 15 +++++++++++++++ .../layout-custom-property-disallowed-list.md | 15 +++++++++++++++ .../shape-custom-property-disallowed-list.md | 15 +++++++++++++++ .../spacing-custom-property-disallowed-list.md | 15 +++++++++++++++ .../z-index-custom-property-disallowed-list.md | 15 +++++++++++++++ 6 files changed, 90 insertions(+) create mode 100644 polaris.shopify.com/content/tools/stylelint-polaris/rules/colors-custom-property-disallowed-list.md create mode 100644 polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-custom-property-disallowed-list.md create mode 100644 polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-custom-property-disallowed-list.md create mode 100644 polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-custom-property-disallowed-list.md create mode 100644 polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-custom-property-disallowed-list.md create mode 100644 polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-custom-property-disallowed-list.md 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/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/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..0d38d47b4db --- /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 layout legacy 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/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/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/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); +``` From dae3441bd6bcdf5f1d1d08e968141e9b6a90dd7b Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 17:00:41 -0600 Subject: [PATCH 10/21] Update rule doc pages for global-disallowed-list token groups --- .../rules/colors-global-disallowed-list.md | 13 +------------ .../rules/depth-global-disallowed-list.md | 6 ++---- .../rules/layout-global-disallowed-list.md | 6 +++--- .../rules/motion-global-disallowed-list.md | 6 +++--- .../rules/shape-global-disallowed-list.md | 15 --------------- .../rules/spacing-global-disallowed-list.md | 6 ++---- .../rules/typography-global-disallowed-list.md | 2 +- .../rules/z-index-global-disallowed-list.md | 6 ++---- 8 files changed, 14 insertions(+), 46 deletions(-) delete mode 100644 polaris.shopify.com/content/tools/stylelint-polaris/rules/shape-global-disallowed-list.md 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..2baee903679 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 mixin and map data. 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-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/depth-global-disallowed-list.md index f24ecca8847..2d3b5c09074 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 mixin data. 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-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-global-disallowed-list.md index b2d9b3e197b..0a4c1f4e40d 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 mixin and map data. 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..00a8c9a22f8 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 mixin data. 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-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-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/spacing-global-disallowed-list.md index 559e7884150..0feb2caffc1 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 mixin data. 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..4a1600388f3 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 mixin and map data. keywords: - stylelint - typography 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..72fb09b45a0 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 mixin data. 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; ``` From acea51f3ca2ff3bc921a6cb389d97179bebc863c Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 17:04:25 -0600 Subject: [PATCH 11/21] Fix failing lines with new stylelint rules --- polaris-react/src/components/AlphaFilters/AlphaFilters.scss | 4 ++-- polaris-react/src/components/AlphaTabs/AlphaTabs.scss | 4 ++-- polaris-react/src/components/IndexFilters/IndexFilters.scss | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) 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 { From 145654efed39cc92e69ee3a4ad14a15440d1c1d8 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 14 Apr 2023 17:08:13 -0600 Subject: [PATCH 12/21] Add changeset --- .changeset/khaki-walls-wash.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/khaki-walls-wash.md diff --git a/.changeset/khaki-walls-wash.md b/.changeset/khaki-walls-wash.md new file mode 100644 index 00000000000..e49f6193662 --- /dev/null +++ b/.changeset/khaki-walls-wash.md @@ -0,0 +1,7 @@ +--- +'@shopify/polaris': minor +'polaris.shopify.com': minor +'@shopify/stylelint-polaris': minor +--- + +Enable `custom-property-disallowed-list` rule From 97b492bb227b20a532be5abe379b1bcb591e9bae Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 17 Apr 2023 08:54:17 -0600 Subject: [PATCH 13/21] Update .changeset/khaki-walls-wash.md Co-authored-by: Chloe Rice --- .changeset/khaki-walls-wash.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/khaki-walls-wash.md b/.changeset/khaki-walls-wash.md index e49f6193662..122184b16f0 100644 --- a/.changeset/khaki-walls-wash.md +++ b/.changeset/khaki-walls-wash.md @@ -4,4 +4,4 @@ '@shopify/stylelint-polaris': minor --- -Enable `custom-property-disallowed-list` rule +Enabled the `custom-property-disallowed-list` rule From d0a2979287ecc0ef5c5700846f216680dcb622c7 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 17 Apr 2023 09:07:19 -0600 Subject: [PATCH 14/21] Update changeset --- .changeset/khaki-walls-wash.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/khaki-walls-wash.md b/.changeset/khaki-walls-wash.md index 122184b16f0..8949adc13f7 100644 --- a/.changeset/khaki-walls-wash.md +++ b/.changeset/khaki-walls-wash.md @@ -1,7 +1,7 @@ --- +'@shopify/stylelint-polaris': major '@shopify/polaris': minor 'polaris.shopify.com': minor -'@shopify/stylelint-polaris': minor --- -Enabled the `custom-property-disallowed-list` rule +Add deprecated v10 custom properties to `stylelint-polaris` `global-disallowed-list` and enabled the `custom-property-disallowed-list` rule. From 24712c86d21d5c72183dd806e42ac2e4fa00d28a Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 13 Apr 2023 13:48:24 -0600 Subject: [PATCH 15/21] Add deprecated v10 custom properties to `stylelint-polaris` (#8549) --- .changeset/grumpy-cars-hide.md | 5 + stylelint-polaris/index.js | 165 +++++++++++++++++++++++++++++++++ 2 files changed, 170 insertions(+) create mode 100644 .changeset/grumpy-cars-hide.md diff --git a/.changeset/grumpy-cars-hide.md b/.changeset/grumpy-cars-hide.md new file mode 100644 index 00000000000..87ed03fee6d --- /dev/null +++ b/.changeset/grumpy-cars-hide.md @@ -0,0 +1,5 @@ +--- +'@shopify/stylelint-polaris': major +--- + +Add deprecated v10 custom properties to stylelint-polaris global-disallowed-list diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js index 84b8b2d1dcc..d12eaec0296 100644 --- a/stylelint-polaris/index.js +++ b/stylelint-polaris/index.js @@ -303,6 +303,151 @@ const stylelintPolarisCoverageOptions = { /\$polaris-colors/, /\$color-filter-palette-data/, /\$color-palette-data/, + // 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/, ], }, { @@ -517,6 +662,26 @@ const stylelintPolarisCoverageOptions = { 'polaris/global-disallowed-list': [ // Legacy mixin map-get data /\$shadows-data/, + // 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/, ], }, { From 808acefc4459e923b45cd794e25f96cc98184227 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 17 Apr 2023 09:12:54 -0600 Subject: [PATCH 16/21] Revert v10 deprecated custom properties added --- stylelint-polaris/index.js | 165 ------------------------------------- 1 file changed, 165 deletions(-) diff --git a/stylelint-polaris/index.js b/stylelint-polaris/index.js index d12eaec0296..84b8b2d1dcc 100644 --- a/stylelint-polaris/index.js +++ b/stylelint-polaris/index.js @@ -303,151 +303,6 @@ const stylelintPolarisCoverageOptions = { /\$polaris-colors/, /\$color-filter-palette-data/, /\$color-palette-data/, - // 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/, ], }, { @@ -662,26 +517,6 @@ const stylelintPolarisCoverageOptions = { 'polaris/global-disallowed-list': [ // Legacy mixin map-get data /\$shadows-data/, - // 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/, ], }, { From 9938f49f1e1c4c127a07be8709084573476b55fa Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 17 Apr 2023 09:13:30 -0600 Subject: [PATCH 17/21] Remove extra changeset --- .changeset/grumpy-cars-hide.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/grumpy-cars-hide.md diff --git a/.changeset/grumpy-cars-hide.md b/.changeset/grumpy-cars-hide.md deleted file mode 100644 index 87ed03fee6d..00000000000 --- a/.changeset/grumpy-cars-hide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@shopify/stylelint-polaris': major ---- - -Add deprecated v10 custom properties to stylelint-polaris global-disallowed-list From 682e78a02c7f40e996d05e2a2792ac38c412c94f Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 17 Apr 2023 09:19:50 -0600 Subject: [PATCH 18/21] Update polaris.shopify.com/content/tools/stylelint-polaris/rules/layout-custom-property-disallowed-list.md --- .../rules/layout-custom-property-disallowed-list.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 0d38d47b4db..10a5872c8ed 100644 --- 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 @@ -1,6 +1,6 @@ --- title: layout/custom-property-disallowed-list -description: Disallows use of layout legacy custom properties. +description: Disallows use of legacy layout custom properties. keywords: - stylelint - layout From 3ea165802d398a279d7d2141e2351b772eb46343 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 17 Apr 2023 09:27:45 -0600 Subject: [PATCH 19/21] Update .changeset/khaki-walls-wash.md --- .changeset/khaki-walls-wash.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/khaki-walls-wash.md b/.changeset/khaki-walls-wash.md index 8949adc13f7..284ed59ed21 100644 --- a/.changeset/khaki-walls-wash.md +++ b/.changeset/khaki-walls-wash.md @@ -4,4 +4,4 @@ 'polaris.shopify.com': minor --- -Add deprecated v10 custom properties to `stylelint-polaris` `global-disallowed-list` and enabled the `custom-property-disallowed-list` rule. +Enabled the `custom-property-disallowed-list` rule and added deprecated v10 custom properties. From a7af0db3602ab0266269dcd44201e4cae497ffde Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 17 Apr 2023 10:10:52 -0600 Subject: [PATCH 20/21] Update global-disallowed-list token category descriptions --- .../stylelint-polaris/rules/colors-global-disallowed-list.md | 2 +- .../stylelint-polaris/rules/depth-global-disallowed-list.md | 2 +- .../stylelint-polaris/rules/layout-global-disallowed-list.md | 2 +- .../stylelint-polaris/rules/motion-global-disallowed-list.md | 2 +- .../stylelint-polaris/rules/spacing-global-disallowed-list.md | 2 +- .../rules/typography-global-disallowed-list.md | 2 +- .../stylelint-polaris/rules/z-index-global-disallowed-list.md | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) 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 2baee903679..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,6 +1,6 @@ --- title: colors/global-disallowed-list -description: Disallows use of legacy color Sass mixin and map data. +description: Disallows use of legacy color Sass APIs. keywords: - stylelint - colors 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 2d3b5c09074..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 depth Sass mixin data. +description: Disallows use of legacy depth Sass APIs. keywords: - stylelint - depth 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 0a4c1f4e40d..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 layout Sass mixin and map data. +description: Disallows use of legacy layout Sass APIs. keywords: - stylelint - layout 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 00a8c9a22f8..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 motion Sass mixin data. +description: Disallows use of legacy motion Sass APIs. keywords: - stylelint - motion 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 0feb2caffc1..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 Sass mixin data. +description: Disallows use of legacy spacing Sass APIs. keywords: - stylelint - 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 4a1600388f3..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 typography Sass mixin and 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-global-disallowed-list.md b/polaris.shopify.com/content/tools/stylelint-polaris/rules/z-index-global-disallowed-list.md index 72fb09b45a0..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 use of legacy z-index Sass mixin data. +description: Disallows use of legacy z-index Sass APIs. keywords: - stylelint - z-index From 5736dc8d284de2133ad20bb0ed55aa02aa2c14fc Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 17 Apr 2023 11:10:30 -0600 Subject: [PATCH 21/21] Remove failing Menu test Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- .../TopBar/components/Menu/tests/Menu.test.tsx | 17 ----------------- 1 file changed, 17 deletions(-) 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(