Skip to content

Commit db6c93e

Browse files
greg-in-a-boxgreg-in-a-box
authored
fix(stylelint): Bump to v16 (#4058)
1 parent 8a794ad commit db6c93e

File tree

79 files changed

+574
-1619
lines changed

Some content is hidden

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

79 files changed

+574
-1619
lines changed

‎package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"lint": "npm-run-all lint:*",
6565
"lint:js": "eslint --max-warnings=0 .",
6666
"lint:ts": "tsc",
67-
"lint:css": "stylelint \"src/**/*.scss\" --syntax scss",
67+
"lint:css": "stylelint \"src/**/*.scss\"",
6868
"prebuild:es": "npm-run-all copy:styles ts:defs copy:flow",
6969
"release": "yarn release:beta",
7070
"release:beta": "DIST=beta BRANCH=master ./scripts/release.sh",
@@ -128,7 +128,7 @@
128128
"@box/box-ai-content-answers": "^0.113.0",
129129
"@box/cldr-data": "^34.2.0",
130130
"@box/combobox-with-api": "^0.28.4",
131-
"@box/frontend": "^10.0.1",
131+
"@box/frontend": "^11.0.0",
132132
"@box/item-icon": "^0.9.83",
133133
"@box/languages": "^1.0.0",
134134
"@box/metadata-editor": "^0.97.3",
@@ -241,7 +241,7 @@
241241
"msw-storybook-addon": "^2.0.2",
242242
"npm-run-all": "^4.1.5",
243243
"pikaday": "^1.8.0",
244-
"postcss": "^8.4.31",
244+
"postcss": "^8.5.3",
245245
"postcss-loader": "^8.1.1",
246246
"prettier": "^3.2.5",
247247
"prettier-eslint-cli": "^5.0.0",
@@ -281,10 +281,10 @@
281281
"storybook-react-intl": "^3.1.1",
282282
"string-replace-loader": "^3.1.0",
283283
"styled-components": "5.0.0",
284-
"stylelint": "^12.0.0",
285-
"stylelint-config-rational-order": "^0.1.2",
286-
"stylelint-config-standard": "^19.0.0",
287-
"stylelint-order": "^3.1.1",
284+
"stylelint": "^16.18.0",
285+
"stylelint-config-standard": "^38.0.0",
286+
"stylelint-config-standard-scss": "^14.0.0",
287+
"stylelint-order": "^6.0.4",
288288
"tabbable": "^1.1.3",
289289
"ts-loader": "^6.2.1",
290290
"typescript": "5.2.2",

‎scripts/lint-staged.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ module.exports = {
33
'*.md': ['prettier --write --parser=markdown', 'git add'],
44
'*.json': ['prettier --write --parser=json', 'git add'],
55
'*.html': ['prettier --write --parser=html', 'git add'],
6-
'*.scss': ['prettier --write --parser=scss', 'stylelint --syntax scss --fix', 'git add'],
7-
'*.css': ['prettier --write --parser=css', 'stylelint --syntax css --fix', 'git add'],
6+
'*.scss': ['prettier --write --parser=scss', 'stylelint --fix', 'git add'],
7+
'*.css': ['prettier --write --parser=css', 'stylelint --fix', 'git add'],
88
};

‎src/components/badgeable/Badgeable.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33

44
$badgeable-position-offset: 1px;
55
$badgeable-icon-size: 14px;
6-
7-
$badgeable-position: ($badgeable-icon-size * .5);
6+
$badgeable-position: ($badgeable-icon-size * 0.5);
87

98
%badge {
109
position: absolute;

‎src/components/category-selector/CategorySelector.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,9 @@
4545

4646
&:focus {
4747
border-color: $bdl-box-blue;
48-
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 1px 2px rgba(0, 0, 0, .1);
48+
box-shadow:
49+
inset 0 0 0 1px rgb(255 255 255 / 80%),
50+
0 1px 2px rgb(0 0 0 / 10%);
4951
}
5052
}
5153
}

‎src/components/date-picker/_pikaday.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
&.is-bound {
2424
position: absolute;
25-
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
25+
box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
2626

2727
&.bottom-aligned {
2828
margin-top: 5px;
@@ -120,7 +120,7 @@
120120
&.bdl-is-disabled,
121121
&.is-disabled {
122122
&::before {
123-
opacity: .2;
123+
opacity: 0.2;
124124
}
125125
}
126126
}
@@ -142,7 +142,7 @@
142142
&.bdl-is-disabled,
143143
&.is-disabled {
144144
&::after {
145-
opacity: .2;
145+
opacity: 0.2;
146146
}
147147
}
148148
}
@@ -165,7 +165,7 @@
165165

166166
th,
167167
td {
168-
width: 14.285714285714286%;
168+
width: 14.2857%;
169169
}
170170

171171
> thead > tr {
@@ -203,6 +203,6 @@
203203
.bdl-is-disabled .pika-button,
204204
.is-outside-current-month .pika-button {
205205
cursor: default;
206-
opacity: .3;
206+
opacity: 0.3;
207207
pointer-events: none;
208208
}

‎src/components/dropdown-menu/DropdownMenu.scss

+4-9
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,10 @@
2323
.bdl-DropdownMenu--responsive {
2424
&.dropdown-menu-enabled {
2525
position: fixed;
26-
top: 0;
27-
right: 0;
28-
bottom: 0;
29-
left: 0;
26+
inset: 0;
3027
margin-top: 0;
3128
margin-bottom: $bdl-header-height;
29+
3230
// cancels out the tether inline styling without having to set enabled=false
3331
transform: none !important;
3432
}
@@ -49,16 +47,13 @@
4947
left: 0;
5048
display: flex;
5149
height: $bdl-header-height;
52-
padding: ($bdl-grid-unit * 3) ($bdl-grid-unit * 3);
50+
padding: ($bdl-grid-unit * 3);
5351
background-color: $white;
5452
box-shadow: $bdl-header-box-shadow;
5553
}
5654

5755
.submenu:not(.is-hidden) {
58-
top: 100%;
59-
right: 0;
60-
bottom: auto;
61-
left: auto;
56+
inset: 100% 0 auto auto;
6257

6358
&.is-right-bottom-aligned {
6459
top: auto;

‎src/components/flyout/Flyout.scss

+1-4
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,7 @@
3434

3535
.bdl-Overlay > .overlay {
3636
position: fixed;
37-
top: 0;
38-
right: 0;
39-
bottom: 0;
40-
left: 0;
37+
inset: 0;
4138
margin: 0;
4239
padding: 0;
4340
background-color: $white;

‎src/components/grid-view/GridViewSlot.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
.bdl-GridViewSlot-content {
1212
height: 100%;
1313
border: 1px solid $bdl-gray-10;
14-
box-shadow: 0 1px 5px rgba(50, 50, 50, .1);
14+
box-shadow: 0 1px 5px rgb(50 50 50 / 10%);
1515

1616
&:hover,
1717
&:active,

‎src/components/guide-tooltip/GuideTooltip.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $bdl-guide-tooltip-max-width: 408px;
2626
.bdl-GuideTooltip-image {
2727
margin-right: -($bdl-grid-unit * 6);
2828
margin-left: -($bdl-grid-unit * 6);
29-
padding: ($bdl-grid-unit * 4) 0 ($bdl-grid-unit * 5) 0;
29+
padding: ($bdl-grid-unit * 4) 0 ($bdl-grid-unit * 5);
3030
text-align: center;
3131

3232
img {
@@ -48,7 +48,7 @@ $bdl-guide-tooltip-max-width: 408px;
4848

4949
.bdl-GuideTooltip-title,
5050
.bdl-GuideTooltip-body {
51-
letter-spacing: .3px;
51+
letter-spacing: 0.3px;
5252
}
5353

5454
button.bdl-GuideTooltip-previousButton,

‎src/components/label-pill/LabelPill.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
top: 2px;
5151

5252
path {
53-
fill: currentColor;
53+
fill: currentcolor;
5454
}
5555
}
5656

‎src/components/loading-indicator/LoadingIndicatorWrapper.scss

+2-5
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@
55

66
.loading-indicator-veil {
77
position: absolute;
8-
top: 0;
9-
right: 0;
10-
bottom: 0;
11-
left: 0;
8+
inset: 0;
129
z-index: 1;
1310
display: flex;
1411

@@ -17,7 +14,7 @@
1714
}
1815

1916
&.blur-content {
20-
background-color: rgba($bdl-gray-02, .75);
17+
background-color: rgba($bdl-gray-02, 0.75);
2118
}
2219

2320
&.hide-content {

‎src/components/media/Media.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
// the media content, ie, an avatar
1010
.bdl-Media-figure {
1111
flex: 0 0 auto;
12-
align-self: flex-start;
13-
justify-self: flex-start;
12+
place-self: flex-start flex-start;
1413
margin: 0 10px 0 0;
1514
padding: 0;
1615
}

‎src/components/modal/Modal.scss

+8-17
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
**************************************/
77
@keyframes popup_bounce_in {
88
0% {
9-
transform: scale3d(.1, .1, 1);
9+
transform: scale3d(0.1, 0.1, 1);
1010
}
1111

1212
100% {
@@ -17,10 +17,7 @@
1717
// Container modal div
1818
.modal {
1919
position: fixed;
20-
top: 0;
21-
right: 0;
22-
bottom: 0;
23-
left: 0;
20+
inset: 0;
2421
z-index: $modal-dialog-z-index;
2522
display: flex;
2623
flex: 1;
@@ -32,7 +29,7 @@
3229
.modal-dialog {
3330
border: none;
3431
box-shadow: none;
35-
animation: popup_bounce_in .3s;
32+
animation: popup_bounce_in 0.3s;
3633
}
3734

3835
.modal-header {
@@ -63,7 +60,7 @@
6360
background-color: $white;
6461
background-clip: padding-box;
6562
border-radius: $bdl-border-radius-size-xlarge;
66-
box-shadow: 0 1px 1px 1px fade-out($black, .95);
63+
box-shadow: 0 1px 1px 1px fade-out($black, 0.95);
6764
}
6865

6966
.modal-title {
@@ -113,12 +110,9 @@
113110

114111
.modal-backdrop {
115112
position: fixed;
116-
top: 0;
117-
right: 0;
118-
bottom: 0;
119-
left: 0;
113+
inset: 0;
120114
z-index: -1; // .modal creates a new stacking context. Let's just make sure that backdrop is below dialog.
121-
background: fade-out($black, .25);
115+
background: fade-out($black, 0.25);
122116
}
123117

124118
.modal-actions {
@@ -143,10 +137,7 @@
143137

144138
.modal-container {
145139
position: fixed;
146-
top: 0;
147-
right: 0;
148-
bottom: 0;
149-
left: 0;
140+
inset: 0;
150141
z-index: 89;
151142
display: flex;
152143
}
@@ -184,7 +175,7 @@
184175
flex-basis: 100%;
185176
margin-top: $responsive-modal-header-height;
186177
margin-bottom: $responsive-modal-actions-height;
187-
padding: 24px 16px 12px 16px;
178+
padding: 24px 16px 12px;
188179
overflow: auto;
189180
}
190181

‎src/components/nav-sidebar/NavSidebar.scss

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
z-index: 2;
55
width: 200px;
66
padding: 25px 10px 0 20px;
7-
overflow-x: hidden;
8-
overflow-y: auto;
7+
overflow: hidden auto;
98
background-color: $bdl-gray-02;
109
border-right: 1px solid $bdl-gray-10;
1110
}
@@ -18,7 +17,7 @@
1817
color: $bdl-gray-40;
1918
font-size: 10px;
2019
line-height: 28px;
21-
letter-spacing: .1em;
20+
letter-spacing: 0.1em;
2221
text-transform: uppercase;
2322
}
2423

‎src/components/pill-selector-dropdown/PillSelector.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,15 @@
2121
width: 262px;
2222
margin-top: 5px;
2323
padding: 5px;
24-
overflow-x: hidden;
25-
overflow-y: auto;
24+
overflow: hidden auto;
2625
background-color: $white;
2726
border: 1px solid darken($white, 20%);
2827
border-radius: $bdl-border-radius-size-med;
29-
box-shadow: inset 0 1px 1px fade-out($black, .92);
28+
box-shadow: inset 0 1px 1px fade-out($black, 0.92);
3029
cursor: text;
31-
transition: border-color linear .15s, box-shadow linear .15s;
30+
transition:
31+
border-color linear 0.15s,
32+
box-shadow linear 0.15s;
3233
-webkit-font-smoothing: antialiased;
3334

3435
&:hover {

‎src/components/pill-selector-dropdown/RoundPill.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@import './mixins';
66

77
.bdl-RoundPill {
8-
@include bdl-RoundPill();
8+
@include bdl-RoundPill;
99
}
1010

1111
.bdl-RoundPill-avatar,
@@ -45,7 +45,7 @@
4545
}
4646

4747
.bdl-RoundPill--disabled {
48-
opacity: .5;
48+
opacity: 0.5;
4949

5050
.bdl-RoundPill-closeBtn {
5151
cursor: default;

0 commit comments

Comments
 (0)