Skip to content

Commit dcae9ef

Browse files
castastrophecastastrophe
committed
feat: remove modifiers from the API (#4255)
1 parent 20807a5 commit dcae9ef

File tree

5 files changed

+48
-129
lines changed

5 files changed

+48
-129
lines changed

‎.changeset/weak-colts-divide.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2+
"@spectrum-css/alertdialog": major
23
"@spectrum-css/asset": major
3-
"@spectrum-css/assetcard": major
4+
"@spectrum-css/well": major
45
---
56

67
This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling.

‎components/alertdialog/dist/metadata.json‎

Lines changed: 7 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,73 +3,28 @@
33
"selectors": [
44
".spectrum-AlertDialog",
55
".spectrum-AlertDialog .spectrum-Icon",
6-
".spectrum-AlertDialog--error",
7-
".spectrum-AlertDialog--warning",
86
".spectrum-AlertDialog-buttongroup",
97
".spectrum-AlertDialog-content",
108
".spectrum-AlertDialog-grid",
119
".spectrum-AlertDialog-header",
12-
".spectrum-AlertDialog-heading"
13-
],
14-
"modifiers": [
15-
"--mod-alert-dialog-background-color",
16-
"--mod-alert-dialog-body-color",
17-
"--mod-alert-dialog-body-font-family",
18-
"--mod-alert-dialog-body-font-style",
19-
"--mod-alert-dialog-body-font-weight",
20-
"--mod-alert-dialog-body-line-height",
21-
"--mod-alert-dialog-corner-radius",
22-
"--mod-alert-dialog-description-content-size",
23-
"--mod-alert-dialog-description-to-button-group",
24-
"--mod-alert-dialog-edge-to-content",
25-
"--mod-alert-dialog-error-icon-color",
26-
"--mod-alert-dialog-heading-size",
27-
"--mod-alert-dialog-icon-size",
28-
"--mod-alert-dialog-max-width",
29-
"--mod-alert-dialog-min-width",
30-
"--mod-alert-dialog-minimum-title-to-icon",
31-
"--mod-alert-dialog-title-color",
32-
"--mod-alert-dialog-title-font-family",
33-
"--mod-alert-dialog-title-font-style",
34-
"--mod-alert-dialog-title-font-weight",
35-
"--mod-alert-dialog-title-line-height",
36-
"--mod-alert-dialog-title-to-description",
37-
"--mod-alert-dialog-warning-icon-color"
10+
".spectrum-AlertDialog-heading",
11+
".spectrum-AlertDialog:where(.spectrum-AlertDialog--error) .spectrum-AlertDialog-icon",
12+
".spectrum-AlertDialog:where(.spectrum-AlertDialog--warning) .spectrum-AlertDialog-icon"
3813
],
14+
"modifiers": [],
3915
"component": [
40-
"--spectrum-alert-dialog-background-color",
41-
"--spectrum-alert-dialog-body-color",
42-
"--spectrum-alert-dialog-body-font-family",
43-
"--spectrum-alert-dialog-body-font-style",
44-
"--spectrum-alert-dialog-body-font-weight",
45-
"--spectrum-alert-dialog-body-line-height",
46-
"--spectrum-alert-dialog-corner-radius",
47-
"--spectrum-alert-dialog-description-content-size",
4816
"--spectrum-alert-dialog-description-font-size",
49-
"--spectrum-alert-dialog-description-to-button-group",
5017
"--spectrum-alert-dialog-edge-to-content",
51-
"--spectrum-alert-dialog-error-icon-color",
52-
"--spectrum-alert-dialog-heading-size",
53-
"--spectrum-alert-dialog-icon-size",
54-
"--spectrum-alert-dialog-max-width",
5518
"--spectrum-alert-dialog-maximum-width",
56-
"--spectrum-alert-dialog-min-width",
57-
"--spectrum-alert-dialog-minimum-title-to-icon",
5819
"--spectrum-alert-dialog-minimum-width",
59-
"--spectrum-alert-dialog-title-color",
60-
"--spectrum-alert-dialog-title-font-family",
61-
"--spectrum-alert-dialog-title-font-size",
62-
"--spectrum-alert-dialog-title-font-style",
63-
"--spectrum-alert-dialog-title-font-weight",
64-
"--spectrum-alert-dialog-title-line-height",
65-
"--spectrum-alert-dialog-title-to-description",
66-
"--spectrum-alert-dialog-warning-icon-color"
20+
"--spectrum-alert-dialog-title-font-size"
6721
],
6822
"global": [
6923
"--spectrum-background-layer-2-color",
7024
"--spectrum-body-color",
7125
"--spectrum-body-sans-serif-font-style",
7226
"--spectrum-body-sans-serif-font-weight",
27+
"--spectrum-border-width-100",
7328
"--spectrum-corner-radius-extra-large-default",
7429
"--spectrum-heading-color",
7530
"--spectrum-heading-line-height",
@@ -84,6 +39,6 @@
8439
"--spectrum-spacing-500",
8540
"--spectrum-workflow-icon-size-100"
8641
],
87-
"passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"],
42+
"passthroughs": [],
8843
"high-contrast": []
8944
}

‎components/alertdialog/index.css‎

Lines changed: 32 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -11,68 +11,34 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
.spectrum-AlertDialog {
15-
--spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width);
16-
--spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width);
17-
--spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100);
18-
--spectrum-alert-dialog-corner-radius: var(--spectrum-corner-radius-extra-large-default);
19-
20-
/* color */
21-
--spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color);
22-
--spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);
23-
--spectrum-alert-dialog-background-color: var(--spectrum-background-layer-2-color);
24-
25-
/* typography */
26-
--spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack);
27-
--spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
28-
--spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style);
29-
--spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height);
30-
--spectrum-alert-dialog-title-color: var(--spectrum-heading-color);
31-
--spectrum-alert-dialog-heading-size: var(--spectrum-alert-dialog-title-font-size);
32-
--spectrum-alert-dialog-description-content-size: var(--spectrum-alert-dialog-description-font-size);
33-
34-
--spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack);
35-
--spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight);
36-
--spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style);
37-
--spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-200);
38-
--spectrum-alert-dialog-body-color: var(--spectrum-body-color);
39-
40-
/* spacing */
41-
--spectrum-alert-dialog-title-to-description: var(--spectrum-spacing-300);
42-
--spectrum-alert-dialog-minimum-title-to-icon: var(--spectrum-spacing-100);
43-
--spectrum-alert-dialog-description-to-button-group: var(--spectrum-spacing-500);
44-
45-
/* @passthrough -- mods for nested component */
46-
--mod-buttongroup-justify-content: flex-end;
47-
}
48-
4914
.spectrum-AlertDialog {
5015
display: flex;
5116
box-sizing: border-box;
5217
inline-size: fit-content;
53-
min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width));
54-
max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width));
18+
min-inline-size: var(--spectrum-alert-dialog-minimum-width);
19+
max-inline-size: var(--spectrum-alert-dialog-maximum-width);
5520
max-block-size: inherit;
56-
background-color: var(--mod-alert-dialog-background-color, var(--spectrum-alert-dialog-background-color));
21+
background-color: var(--spectrum-background-layer-2-color);
5722
outline: none;
58-
padding: var(--mod-alert-dialog-edge-to-content, var(--spectrum-alert-dialog-edge-to-content));
59-
border-radius: var(--mod-alert-dialog-corner-radius, var(--spectrum-alert-dialog-corner-radius));
23+
padding: var(--spectrum-alert-dialog-edge-to-content);
24+
25+
/* Adding a transparent border here allows the forced colors mode to default appropriately */
26+
border: var(--spectrum-border-width-100) solid transparent;
27+
border-radius: var(--spectrum-corner-radius-extra-large-default);
6028

6129
.spectrum-Icon {
62-
inline-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size));
63-
block-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size));
30+
inline-size: var(--spectrum-workflow-icon-size-100);
31+
block-size: var(--spectrum-workflow-icon-size-100);
6432
flex-shrink: 0;
6533
}
66-
}
6734

68-
.spectrum-AlertDialog--warning {
69-
/* @passthrough */
70-
--mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color));
71-
}
35+
&:where(.spectrum-AlertDialog--warning) .spectrum-AlertDialog-icon {
36+
color: var(--spectrum-notice-visual-color);
37+
}
7238

73-
.spectrum-AlertDialog--error {
74-
/* @passthrough */
75-
--mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color));
39+
&:where(.spectrum-AlertDialog--error) .spectrum-AlertDialog-icon {
40+
color: var(--spectrum-negative-visual-color);
41+
}
7642
}
7743

7844
.spectrum-AlertDialog-grid {
@@ -82,42 +48,36 @@
8248

8349
.spectrum-AlertDialog-header {
8450
display: flex;
85-
gap: var(--mod-alert-dialog-minimum-title-to-icon, var(--spectrum-alert-dialog-minimum-title-to-icon));
51+
gap: var(--spectrum-spacing-100);
8652
align-items: center;
87-
margin-block-end: var(--mod-alert-dialog-title-to-description, var(--spectrum-alert-dialog-title-to-description));
53+
margin-block-end: var(--spectrum-spacing-300);
8854
}
8955

9056
.spectrum-AlertDialog-heading {
91-
font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family));
92-
font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight));
93-
font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style));
94-
font-size: var(--mod-alert-dialog-heading-size, var(--spectrum-alert-dialog-heading-size));
95-
line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height));
96-
color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color));
57+
font-family: var(--spectrum-sans-font-family-stack);
58+
font-weight: var(--spectrum-heading-sans-serif-font-weight);
59+
font-style: var(--spectrum-heading-sans-serif-font-style);
60+
font-size: var(--spectrum-alert-dialog-title-font-size);
61+
line-height: var(--spectrum-heading-line-height);
62+
color: var(--spectrum-heading-color);
9763
margin: 0;
9864
}
9965

10066
.spectrum-AlertDialog-content {
101-
font-family: var(--mod-alert-dialog-body-font-family, var(--spectrum-alert-dialog-body-font-family));
102-
font-weight: var(--mod-alert-dialog-body-font-weight, var(--spectrum-alert-dialog-body-font-weight));
103-
font-style: var(--mod-alert-dialog-body-font-style, var(--spectrum-alert-dialog-body-font-style));
104-
font-size: var(--mod-alert-dialog-description-content-size, var(--spectrum-alert-dialog-description-content-size));
105-
line-height: var(--mod-alert-dialog-body-line-height, var(--spectrum-alert-dialog-body-line-height));
106-
color: var(--mod-alert-dialog-body-color, var(--spectrum-alert-dialog-body-color));
67+
font-family: var(--spectrum-sans-font-family-stack);
68+
font-weight: var(--spectrum-body-sans-serif-font-weight);
69+
font-style: var(--spectrum-body-sans-serif-font-style);
70+
font-size: var(--spectrum-alert-dialog-description-font-size);
71+
line-height: var(--spectrum-line-height-200);
72+
color: var(--spectrum-body-color);
10773
margin: 0;
108-
margin-block-end: var(--mod-alert-dialog-description-to-button-group, var(--spectrum-alert-dialog-description-to-button-group));
74+
margin-block-end: var(--spectrum-spacing-500);
10975

11076
overflow-y: auto;
11177
-webkit-overflow-scrolling: touch;
11278
}
11379

11480
.spectrum-AlertDialog-buttongroup {
11581
display: flex;
116-
justify-content: end;
117-
}
118-
119-
@media (forced-colors: active) {
120-
.spectrum-AlertDialog {
121-
border: solid;
122-
}
82+
justify-content: flex-end;
12383
}

‎components/alertdialog/stories/alertdialog.stories.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ Error.args = {
142142
isOpen: true,
143143
variant: "error",
144144
heading: "Unable to share",
145-
icon: "Alert",
145+
icon: "AlertTriangle",
146146
content: "An error occurred while sharing your project. Please verify the email address and try again.",
147147
};
148148
Error.parameters = {

‎components/alertdialog/stories/template.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,12 @@ export const Dialog = ({
102102
<h1 class="${rootClass}-heading" id="dialog_label">${heading}</h1>
103103
</div>
104104
<section class="${rootClass}-content">${content}</section>
105-
<section class="${rootClass}-buttongroup">
106-
${ButtonGroup({ items: buttonMap[variant], vertical: hasVerticalButtons }, context)}
107-
</section>
105+
<div class="${rootClass}-buttongroup">
106+
${ButtonGroup({
107+
items: buttonMap[variant],
108+
vertical: hasVerticalButtons,
109+
}, context)}
110+
</div>
108111
</div>
109112
</div>
110113
`;

0 commit comments

Comments
 (0)