Skip to content

Commit 38b2a00

Browse files
aaronccasanovachloericesophschneider
authored
Stylelint Polaris v5 (#7691)
Co-authored-by: Chloe Rice <chloe.rice@shopify.com> Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>
1 parent 7773637 commit 38b2a00

File tree

155 files changed

+3450
-880
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

155 files changed

+3450
-880
lines changed

‎.changeset/purple-knives-enjoy.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/stylelint-polaris': major
3+
---
4+
5+
Stylelint Polaris v5 release

‎.stylelintrc.js‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
11
/** @type {import('stylelint').Config} */
22
module.exports = {
33
extends: ['@shopify/stylelint-plugin/prettier', './stylelint-polaris'],
4-
// Disabling @shopify/stylelint-plugin/configs/core no-unknown-animations as styelint
4+
// Disabling @shopify/stylelint-plugin/configs/core no-unknown-animations as stylelint
55
// is not aware of global Polaris keyframes
66
// TODO: create custom plugin to ensure animation-names match Polaris keyframe names
77
rules: {
8-
'no-unknown-animations': undefined,
8+
'no-unknown-animations': null,
99
'value-keyword-case': ['lower', {camelCaseSvgKeywords: true}],
1010
},
1111
overrides: [
12-
{
13-
files: ['polaris-react/**/*.{css,scss}'],
14-
extends: [
15-
'@shopify/stylelint-plugin/prettier',
16-
'./stylelint-polaris/configs/internal',
17-
],
18-
},
1912
{
2013
files: ['polaris-migrator/**/tests/*.{css,scss}'],
2114
rules: {
22-
'comment-empty-line-before': undefined,
23-
'declaration-property-value-disallowed-list': undefined,
24-
'function-disallowed-list': undefined,
15+
'comment-empty-line-before': null,
16+
'declaration-property-value-disallowed-list': null,
17+
'function-disallowed-list': null,
2518
},
2619
},
2720
],

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
"rollup": "^2.70.2",
8080
"rollup-plugin-node-externals": "^4.0.0",
8181
"size-limit": "^5.0.3",
82-
"stylelint": "^14.1.0",
82+
"stylelint": "^14.15.0",
8383
"ts-node": "^10.7.0",
8484
"turbo": "^1.2.8",
8585
"typescript": "^4.6.3"

‎polaris-react/playground/DetailsPage.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
@import '../src/styles/common';
22

33
.ContextControl {
4+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
45
display: flex;
6+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
57
align-items: center;
68
padding: 0 var(--p-space-3);
9+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
710
height: $top-bar-height;
811
}
912

‎polaris-react/src/components/AccountConnection/AccountConnection.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
}
44

55
.Content {
6-
// stylelint-disable-next-line selector-max-combinators
6+
// stylelint-disable-next-line selector-max-combinators -- generated by polaris-migrator DO NOT COPY
77
> * + * {
88
margin-top: var(--p-space-2);
99
}

‎polaris-react/src/components/ActionList/ActionList.scss‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
.Section:not(:first-child) {
1111
border-top: var(--p-border-divider);
1212

13-
// stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
13+
// stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
1414
> .Section-withoutTitle .Actions {
1515
padding-top: var(--p-space-2);
1616
}
@@ -25,38 +25,49 @@
2525

2626
.ActionList,
2727
.Section:first-child {
28-
// stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
28+
// stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
2929
> .Section-withoutTitle .Actions {
3030
border-top: none;
3131
padding-top: var(--p-space-2);
3232
}
3333
}
3434

3535
.ActionList .Section {
36-
// stylelint-disable-next-line selector-max-class, selector-max-combinators
36+
// stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
3737
.Actions {
3838
padding-top: 0;
3939
}
4040
}
4141

4242
.Item {
43+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
4344
--pc-action-list-image-size: 20px;
45+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
4446
--pc-action-list-item-min-height: var(--p-space-10);
47+
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
4548
--pc-action-list-item-vertical-padding: calc(
4649
(var(--pc-action-list-item-min-height) - var(--p-font-line-height-2)) / 2
4750
);
51+
// stylelint-enable
52+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
4853
@include unstyled-button;
54+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
4955
@include focus-ring;
56+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
5057
display: block;
58+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
5159
width: 100%;
60+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
5261
min-height: var(--pc-action-list-item-min-height);
5362
text-align: left;
5463
text-decoration: none;
5564
cursor: pointer;
65+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
5666
padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2);
5767
border-radius: var(--p-border-radius-1);
5868
border-top: var(--p-border-width-1) solid transparent;
5969
color: inherit;
70+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
6071
@media (forced-colors: active) {
6172
border: var(--p-border-width-1) solid transparent;
6273
}
@@ -68,11 +79,13 @@
6879
}
6980

7081
&:active {
82+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
7183
@include recolor-icon(var(--p-interactive));
7284
background-color: var(--p-surface-pressed);
7385
}
7486

7587
&:focus:not(:active) {
88+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
7689
@include focus-ring($style: 'focused');
7790
outline: var(--p-border-width-3) solid transparent;
7891
}
@@ -82,23 +95,26 @@
8295
}
8396

8497
&.active {
98+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
8599
@include recolor-icon(var(--p-interactive));
86100
background-color: var(--p-surface-selected);
87101

88102
&::before {
103+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
89104
@include list-selected-indicator;
90105
}
91106
}
92107

93108
&.destructive {
109+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
94110
@include recolor-icon(var(--p-icon-critical));
95111
color: var(--p-interactive-critical);
96112

97113
&:hover {
98114
background-color: var(--p-surface-critical-subdued-hovered);
99115
}
100116

101-
// stylelint-disable-next-line selector-max-class
117+
// stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
102118
&:active,
103119
&.active {
104120
background-color: var(--p-surface-critical-subdued-pressed);
@@ -109,48 +125,65 @@
109125
background-image: none;
110126
color: var(--p-text-disabled);
111127

112-
// stylelint-disable-next-line selector-max-class
128+
// stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
113129
.Prefix,
114130
.Suffix {
131+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
115132
@include recolor-icon(var(--p-icon-disabled));
116133
}
117134
}
118135
}
119136

120137
.Content {
138+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
121139
display: flex;
140+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
122141
align-items: center;
123142
}
124143

125144
.Prefix {
145+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
126146
@include recolor-icon(var(--p-icon));
147+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
127148
display: flex;
149+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
128150
flex: 0 0 auto;
151+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
129152
justify-content: center;
153+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
130154
align-items: center;
155+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
131156
height: var(--pc-action-list-image-size);
157+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
132158
width: var(--pc-action-list-image-size);
159+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
133160
border-radius: var(--p-border-radius-base);
134161

135162
// We need the negative margin to ensure that the image does not set
136163
// the minimum height of the action item.
164+
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
137165
margin: calc(-0.5 * var(--pc-action-list-image-size)) var(--p-space-4)
138166
calc(-0.5 * var(--pc-action-list-image-size)) 0;
167+
// stylelint-enable
139168
background-size: cover;
140169
background-position: center center;
141170
}
142171

143172
.Suffix {
173+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
144174
@include recolor-icon(var(--p-icon));
145175
margin-left: var(--p-space-4);
146176
}
147177

148178
.ContentBlock,
149179
.ContentBlockInner {
180+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
150181
display: block;
151182
}
152183

153184
.Text {
185+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
154186
@include layout-flex-fix;
187+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
155188
flex: 1 1 auto;
156189
}

‎polaris-react/src/components/ActionMenu/ActionMenu.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
.ActionMenu {
22
// Needed for JS calculations
3+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
34
width: 100%;
5+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
46
display: flex;
7+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
58
justify-content: flex-end;
69

10+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
711
@media print {
8-
// stylelint-disable-next-line declaration-no-important
12+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
913
display: none !important;
1014
}
1115
}

‎polaris-react/src/components/ActionMenu/components/Actions/Actions.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
@import '../../../../styles/common';
22

33
.ActionsLayout {
4+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
45
display: flex;
56
flex-wrap: wrap;
7+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
68
align-items: center;
9+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
710
justify-content: flex-end;
11+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
812
flex: 1 1 auto;
913

1014
> * {
15+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
1116
flex: 0 0 auto;
1217
}
1318
}

‎polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.RollupActivator {
22
text-align: right;
33
// Override `.iconOnly` negative margins
4-
// stylelint-disable-next-line selector-no-qualifying-type
4+
// stylelint-disable-next-line selector-no-qualifying-type -- generated by polaris-migrator DO NOT COPY
55
button[type='button'] {
66
margin: 0;
77
border: var(--p-border-width-1) solid var(--p-border-neutral-subdued);
8-
// stylelint-disable-next-line selector-max-specificity
8+
// stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
99
&:hover,
1010
&:active,
1111
&:focus {

‎polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
@import '../../../../styles/common';
22

33
.SecondaryAction {
4+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
45
--pc-secondary-action-button-spacing: var(--p-space-3);
5-
// stylelint-disable declaration-no-important
6+
// stylelint-disable declaration-no-important -- generated by polaris-migrator DO NOT COPY
67
a,
78
button {
9+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
810
@include focus-ring($border-width: 1px);
911
background: transparent !important;
1012
box-shadow: none !important;
1113
border-radius: var(--p-border-radius-1) !important;
14+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
1215
padding-left: var(--pc-secondary-action-button-spacing);
16+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
1317
padding-right: var(--pc-secondary-action-button-spacing);
1418

1519
&:hover {
@@ -20,24 +24,27 @@
2024
background: var(--p-background-pressed) !important;
2125
}
2226

27+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
2328
@media #{$p-breakpoints-md-up} {
2429
border: none !important;
30+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
2531
@include focus-ring($border-width: 0);
2632
}
2733
}
2834

2935
&.destructive {
3036
a,
3137
button {
38+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
3239
@include recolor-icon(var(--p-icon-critical));
3340
color: var(--p-interactive-critical);
3441

35-
// stylelint-disable-next-line selector-max-specificity
42+
// stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
3643
&:hover {
3744
background-color: var(--p-surface-critical-subdued-hovered) !important;
3845
}
3946

40-
// stylelint-disable-next-line selector-max-specificity
47+
// stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
4148
&:active {
4249
background-color: var(--p-surface-critical-subdued-pressed) !important;
4350
}

0 commit comments

Comments
 (0)