Skip to content

Commit 5316273

Browse files
jawinncastastrophe
jawinn
authored and
castastrophe
committed
fix(commons): remove renamed mods marked for deprecation (#2580)
* fix(commons): remove renamed mods marked for deprecation Remove mods that were renamed and previously marked for deprecation, and regenerate mods lists. This will help in reviewing the accuracy of other components' mods lists as they are being migrated to s2. * docs: migration guide notes for mod property deprecations Add notes to components affected by mod property changes in the commons basebutton. * docs(closebutton): updated docs for migration guide and icon size - Removes the "Icon size" variant options, as noted in the closebutton PR. Per Figma changelog "removed icon size as a property". - Updates migration guide with a more organized history. * fix(commons): remove another mod referencing global token Deprecates an additional mod name that was referencing a global token, and updates migration notes for all affected components.
1 parent 0dcb6e2 commit 5316273

File tree

44 files changed

+305
-341
lines changed

Some content is hidden

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

44 files changed

+305
-341
lines changed

‎components/accordion/index.css

+17-17
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
*/
1313

1414
.spectrum-Accordion {
15-
--spectrum-accordion-divider-color: var(--spectrum-gray-200);
16-
--spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color);
17-
--spectrum-accordion-item-content-color: var(--spectrum-body-color);
15+
--spectrum-accordion-divider-color: var(--mod-accordion-divider-color, var(--spectrum-gray-200));
16+
--spectrum-accordion-item-content-disabled-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color));
17+
--spectrum-accordion-item-content-color: var(--mod-accordion-item-content-color, var(--spectrum-body-color));
1818

19-
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
19+
--spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-200));
2020
--spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width);
2121
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
2222
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text);
@@ -63,7 +63,7 @@
6363
--spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color);
6464

6565
--spectrum-accordion-min-block-size: max(
66-
var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)),
66+
var(--spectrum-accordion-item-height),
6767
calc(var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))))
6868
);
6969

@@ -80,24 +80,24 @@
8080
}
8181

8282
.spectrum-Accordion--compact {
83-
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
83+
--spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-100));
8484
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
8585
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
8686

8787
&.spectrum-Accordion--sizeS {
88-
--spectrum-accordion-item-height: var(--spectrum-component-height-75);
88+
--spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-75));
8989
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
9090
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
9191
}
9292

9393
&.spectrum-Accordion--sizeL {
94-
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
94+
--spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-200));
9595
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
9696
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
9797
}
9898

9999
&.spectrum-Accordion--sizeXL {
100-
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
100+
--spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-300));
101101
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
102102
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
103103
}
@@ -128,7 +128,7 @@
128128
}
129129

130130
.spectrum-Accordion--sizeS {
131-
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
131+
--spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-100));
132132
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
133133
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
134134
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
@@ -138,7 +138,7 @@
138138
}
139139

140140
.spectrum-Accordion--sizeL {
141-
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
141+
--spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-300));
142142
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
143143
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
144144
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
@@ -148,7 +148,7 @@
148148
}
149149

150150
.spectrum-Accordion--sizeXL {
151-
--spectrum-accordion-item-height: var(--spectrum-component-height-400);
151+
--spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-400));
152152
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
153153
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
154154
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
@@ -170,17 +170,17 @@
170170

171171
margin: 0;
172172

173-
min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height));
173+
min-block-size: var(--spectrum-accordion-item-height);
174174
min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width));
175175

176176
&:first-child {
177177
border-block-start: 1px solid transparent;
178-
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
178+
border-color: var(--spectrum-accordion-divider-color);
179179
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
180180
}
181181

182182
border-block-end: 1px solid transparent;
183-
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
183+
border-color: var(--spectrum-accordion-divider-color);
184184
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
185185
}
186186

@@ -210,7 +210,7 @@
210210
padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content));
211211
padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text));
212212
display: none;
213-
color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color));
213+
color: var(--spectrum-accordion-item-content-color);
214214
font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight));
215215
font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style));
216216
font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size));
@@ -305,7 +305,7 @@
305305
}
306306

307307
.spectrum-Accordion-itemContent {
308-
color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
308+
color: var(--spectrum-accordion-item-content-disabled-color);
309309
}
310310
}
311311

‎components/actionbar/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/actiongroup": ">=6.0.0 <7.0.0",
29-
"@spectrum-css/closebutton": ">=5.0.0 <6.0.0",
29+
"@spectrum-css/closebutton": ">=5.0.0-next.0",
3030
"@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0",
3131
"@spectrum-css/popover": ">=8.0.0 <9.0.0",
3232
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"

‎components/actionbutton/dist/metadata.json

+4-17
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,6 @@
1919
".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
2020
".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
2121
".spectrum-ActionButton.spectrum-ActionButton--quiet",
22-
".spectrum-ActionButton.spectrum-ActionButton--sizeL",
23-
".spectrum-ActionButton.spectrum-ActionButton--sizeM",
24-
".spectrum-ActionButton.spectrum-ActionButton--sizeS",
25-
".spectrum-ActionButton.spectrum-ActionButton--sizeXL",
26-
".spectrum-ActionButton.spectrum-ActionButton--sizeXS",
2722
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
2823
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
2924
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
@@ -89,10 +84,7 @@
8984
"--mod-actionbutton-label-color",
9085
"--mod-actionbutton-min-width",
9186
"--mod-actionbutton-static-content-color",
92-
"--mod-actionbutton-text-to-visual",
93-
"--mod-animation-duration-100",
94-
"--mod-line-height-100",
95-
"--mod-sans-font-family-stack"
87+
"--mod-actionbutton-text-to-visual"
9688
],
9789
"component": [
9890
"--spectrum-action-button-edge-to-hold-icon-extra-large",
@@ -169,18 +161,10 @@
169161
"--spectrum-component-height-300",
170162
"--spectrum-component-height-50",
171163
"--spectrum-component-height-75",
172-
"--spectrum-corner-radius-medium-size-extra-large",
173-
"--spectrum-corner-radius-medium-size-extra-small",
174-
"--spectrum-corner-radius-medium-size-large",
175-
"--spectrum-corner-radius-medium-size-medium",
176-
"--spectrum-corner-radius-medium-size-small",
177-
"--spectrum-disabled-background-color",
178164
"--spectrum-disabled-border-color",
179165
"--spectrum-disabled-content-color",
180-
"--spectrum-disabled-static-black-background-color",
181166
"--spectrum-disabled-static-black-border-color",
182167
"--spectrum-disabled-static-black-content-color",
183-
"--spectrum-disabled-static-white-background-color",
184168
"--spectrum-disabled-static-white-border-color",
185169
"--spectrum-disabled-static-white-content-color",
186170
"--spectrum-focus-indicator-color",
@@ -215,12 +199,15 @@
215199
"--spectrum-text-to-visual-300",
216200
"--spectrum-text-to-visual-50",
217201
"--spectrum-text-to-visual-75",
202+
"--spectrum-transparent-black-100",
203+
"--spectrum-transparent-black-200",
218204
"--spectrum-transparent-black-400",
219205
"--spectrum-transparent-black-500",
220206
"--spectrum-transparent-black-600",
221207
"--spectrum-transparent-black-700",
222208
"--spectrum-transparent-black-800",
223209
"--spectrum-transparent-black-900",
210+
"--spectrum-transparent-white-200",
224211
"--spectrum-transparent-white-400",
225212
"--spectrum-transparent-white-500",
226213
"--spectrum-transparent-white-600",

‎components/alertbanner/dist/metadata.json

-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@
5353
"--spectrum-alert-banner-start-edge",
5454
"--spectrum-alert-banner-text-to-button-horizontal",
5555
"--spectrum-alert-banner-text-to-button-vertical",
56-
"--spectrum-alert-banner-text-to-divider",
5756
"--spectrum-alert-banner-top-icon",
5857
"--spectrum-alert-banner-top-text",
5958
"--spectrum-alert-banner-top-to-text",

‎components/alertbanner/index.css

+7-5
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
--spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
2525
--spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
2626
--spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
27-
--spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300);
2827
--spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
2928
--spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
3029
--spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
@@ -34,20 +33,23 @@
3433
--spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
3534
--spectrum-alert-banner-font-color: var(--spectrum-white);
3635

37-
/* settings for nested Divider */
36+
/* @passthrough start -- settings for nested Divider */
3837
--mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider));
3938
--mod-divider-vertical-height: auto;
4039
--mod-divider-vertical-align: stretch;
40+
/* @passthrough end */
4141

42-
/* settings for nested Button */
42+
/* @passthrough start -- settings for nested Button */
4343
--mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button));
44-
--mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider));
44+
--mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-spacing-300));
4545
--mod-button-margin-left: auto;
46+
/* @passthrough end */
4647

47-
/* settings for nested CloseButton */
48+
/* @passthrough start -- settings for nested CloseButton */
4849
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
4950
--mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
5051
--mod-closebutton-align-self: flex-start;
52+
/* @passthrough end */
5153

5254
display: none;
5355
justify-content: space-between;

‎components/alertbanner/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"main": "dist/index.css",
2727
"peerDependencies": {
2828
"@spectrum-css/button": ">=14.0.0 <15.0.0",
29-
"@spectrum-css/closebutton": ">=5.0.0 <6.0.0",
29+
"@spectrum-css/closebutton": ">=5.0.0-next.0",
3030
"@spectrum-css/divider": ">=5.0.0 <6.0.0",
3131
"@spectrum-css/icon": ">=9.0.0 <10.0.0",
3232
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"

‎components/alertdialog/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
--spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300);
4141
--spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300);
4242

43-
/* mods for nested component */
43+
/* @passthrough -- mods for nested component */
4444
--mod-buttongroup-justify-content: flex-end;
4545
}
4646

‎components/button/dist/metadata.json

-3
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@
6868
"a.spectrum-Button"
6969
],
7070
"modifiers": [
71-
"--mod-animation-duration-100",
7271
"--mod-bold-font-weight",
7372
"--mod-button-animation-duration",
7473
"--mod-button-background-color-default",
@@ -114,8 +113,6 @@
114113
"--mod-button-top-to-icon",
115114
"--mod-button-top-to-text",
116115
"--mod-focus-indicator-gap",
117-
"--mod-line-height-100",
118-
"--mod-sans-font-family-stack",
119116
"--mod-static-black-focus-indicator-color"
120117
],
121118
"component": [

‎components/calendar/index.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,7 @@
170170

171171
.spectrum-Calendar-prevMonth,
172172
.spectrum-Calendar-nextMonth {
173-
/* @passthrough start */
174-
/* Mimic the placement and sizing of the dates in the grid below */
173+
/* @passthrough start -- mimic the placement and sizing of the dates in the grid below */
175174
--mod-actionbutton-edge-to-text: var(--spectrum-calendar-day-padding);
176175
--mod-actionbutton-min-width: var(--spectrum-calendar-day-width);
177176
--mod-actionbutton-content-color-default: var(--spectrum-calendar-button-icon-color);

‎components/closebutton/dist/metadata.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
"a.spectrum-CloseButton"
3232
],
3333
"modifiers": [
34-
"--mod-animation-duration-100",
3534
"--mod-closebutton-align-self",
3635
"--mod-closebutton-animation-duraction",
3736
"--mod-closebutton-animation-duration",
@@ -50,9 +49,7 @@
5049
"--mod-closebutton-icon-color-hover",
5150
"--mod-closebutton-margin-inline",
5251
"--mod-closebutton-margin-top",
53-
"--mod-closebutton-size",
54-
"--mod-line-height-100",
55-
"--mod-sans-font-family-stack"
52+
"--mod-closebutton-size"
5653
],
5754
"component": [
5855
"--spectrum-closebutton-animation-duration",

‎components/coachindicator/dist/metadata.json

-4
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
".spectrum-CoachIndicator-ring:first-child",
77
".spectrum-CoachIndicator-ring:nth-child(2)",
88
".spectrum-CoachIndicator-ring:nth-child(3)",
9-
".spectrum-CoachIndicator.spectrum-CoachIndicator--dark",
10-
".spectrum-CoachIndicator.spectrum-CoachIndicator--light",
119
".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet",
1210
".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack",
1311
".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite",
@@ -31,11 +29,9 @@
3129
"--mod-coach-indicator-quiet-ring-diameter",
3230
"--mod-coach-indicator-ring-block-size",
3331
"--mod-coach-indicator-ring-border-size",
34-
"--mod-coach-indicator-ring-dark-color",
3532
"--mod-coach-indicator-ring-default-color",
3633
"--mod-coach-indicator-ring-diameter",
3734
"--mod-coach-indicator-ring-inline-size",
38-
"--mod-coach-indicator-ring-light-color",
3935
"--mod-coach-indicator-top"
4036
],
4137
"component": [

‎components/coachindicator/index.css

-12
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,6 @@
3333
--spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33);
3434
}
3535

36-
/* @deprecated .spectrum-CoachIndicator--light */
37-
&.spectrum-CoachIndicator--light {
38-
/* @deprecated --mod-coach-indicator-ring-light-color, use --mod-coach-indicator-ring-default-color instead */
39-
--spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-white));
40-
}
41-
42-
/* @deprecated .spectrum-CoachIndicator--dark */
43-
&.spectrum-CoachIndicator--dark {
44-
/* @deprecated --mod-coach-indicator-ring-dark-color, use --mod-coach-indicator-ring-default-color instead */
45-
--spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-black));
46-
}
47-
4836
&.spectrum-CoachIndicator--staticWhite {
4937
--spectrum-coach-indicator-ring-default-color: var(--spectrum-white);
5038
}

‎components/coachmark/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@
2525
},
2626
"main": "dist/index.css",
2727
"peerDependencies": {
28-
"@spectrum-css/actionbutton": ">=7.0.0 <8.0.0",
28+
"@spectrum-css/actionbutton": ">=7",
2929
"@spectrum-css/actionmenu": ">=7.0.0 <8.0.0",
30-
"@spectrum-css/button": ">=14.0.0 <15.0.0",
31-
"@spectrum-css/buttongroup": ">=9.0.0 <10.0.0",
30+
"@spectrum-css/button": ">=14",
31+
"@spectrum-css/buttongroup": ">=9",
3232
"@spectrum-css/menu": ">=9.0.0 <10.0.0",
33-
"@spectrum-css/popover": ">=8.0.0 <9.0.0",
34-
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
33+
"@spectrum-css/popover": ">=8",
34+
"@spectrum-css/tokens": ">=16"
3535
},
3636
"peerDependenciesMeta": {
3737
"@spectrum-css/actionbutton": {

0 commit comments

Comments
 (0)