Skip to content

Commit 6203506

Browse files
castastrophecastastrophe
authored
feat(actiongroup): remove modifiers (#4253)
1 parent bd5b937 commit 6203506

File tree

2 files changed

+72
-113
lines changed

2 files changed

+72
-113
lines changed

‎components/actiongroup/dist/metadata.json‎

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,10 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-ActionGroup",
5-
".spectrum-ActionGroup .spectrum-ActionGroup-item",
6-
".spectrum-ActionGroup .spectrum-ActionGroup-item:focus-visible",
7-
".spectrum-ActionGroup--compact",
8-
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)",
95
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
106
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
117
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
128
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
13-
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)",
149
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
1510
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
1611
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label",
@@ -20,39 +15,23 @@
2015
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover",
2116
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
2217
".spectrum-ActionGroup--justified .spectrum-ActionGroup-item",
23-
".spectrum-ActionGroup--sizeL",
24-
".spectrum-ActionGroup--sizeM",
25-
".spectrum-ActionGroup--sizeS",
26-
".spectrum-ActionGroup--sizeXL",
27-
".spectrum-ActionGroup--sizeXS",
28-
".spectrum-ActionGroup--vertical",
18+
".spectrum-ActionGroup-item",
19+
".spectrum-ActionGroup-item:focus-visible",
20+
".spectrum-ActionGroup.spectrum-ActionGroup--compact",
21+
".spectrum-ActionGroup.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)",
22+
".spectrum-ActionGroup.spectrum-ActionGroup--sizeS",
23+
".spectrum-ActionGroup.spectrum-ActionGroup--sizeXS",
24+
".spectrum-ActionGroup.spectrum-ActionGroup--vertical",
2925
".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item"
3026
],
31-
"modifiers": [
32-
"--mod-actiongroup-border-radius",
33-
"--mod-actiongroup-border-radius-reset",
34-
"--mod-actiongroup-button-spacing-reset",
35-
"--mod-actiongroup-gap-size-compact",
36-
"--mod-actiongroup-horizontal-spacing-compact",
37-
"--mod-actiongroup-horizontal-spacing-regular",
38-
"--mod-actiongroup-vertical-spacing-compact",
39-
"--mod-actiongroup-vertical-spacing-regular"
40-
],
41-
"component": [
42-
"--spectrum-actiongroup-border-radius",
43-
"--spectrum-actiongroup-border-radius-reset",
44-
"--spectrum-actiongroup-button-spacing-reset",
45-
"--spectrum-actiongroup-gap-size-compact",
46-
"--spectrum-actiongroup-horizontal-spacing-compact",
47-
"--spectrum-actiongroup-horizontal-spacing-regular",
48-
"--spectrum-actiongroup-vertical-spacing-compact",
49-
"--spectrum-actiongroup-vertical-spacing-regular"
50-
],
27+
"modifiers": [],
28+
"component": ["--spectrum-actiongroup-spacing"],
5129
"global": [
30+
"--spectrum-actionbutton-focus-indicator-border-radius",
5231
"--spectrum-corner-radius-100",
5332
"--spectrum-spacing-100",
5433
"--spectrum-spacing-75"
5534
],
56-
"passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"],
35+
"passthroughs": [],
5736
"high-contrast": []
5837
}

‎components/actiongroup/index.css‎

Lines changed: 61 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -12,94 +12,78 @@
1212
*/
1313

1414
.spectrum-ActionGroup {
15-
--spectrum-actiongroup-gap-size-compact: 0;
15+
--spectrum-actiongroup-spacing: var(--spectrum-spacing-100);
1616

17-
/* account for button border */
18-
--spectrum-actiongroup-horizontal-spacing-compact: -1px;
19-
--spectrum-actiongroup-vertical-spacing-compact: -1px;
20-
21-
--spectrum-actiongroup-button-spacing-reset: 0;
22-
--spectrum-actiongroup-border-radius-reset: 0;
23-
--spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100);
24-
}
25-
26-
.spectrum-ActionGroup--sizeXS,
27-
.spectrum-ActionGroup--sizeS {
28-
--spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75);
29-
--spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75);
30-
}
17+
&.spectrum-ActionGroup--sizeXS,
18+
&.spectrum-ActionGroup--sizeS {
19+
--spectrum-actiongroup-spacing: var(--spectrum-spacing-75);
20+
}
3121

32-
.spectrum-ActionGroup--sizeM,
33-
.spectrum-ActionGroup--sizeL,
34-
.spectrum-ActionGroup--sizeXL {
35-
--spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100);
36-
--spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100);
37-
}
22+
&.spectrum-ActionGroup--compact {
23+
/* account for button border */
24+
--spectrum-actiongroup-spacing: -1px;
25+
}
3826

39-
.spectrum-ActionGroup {
4027
display: flex;
4128
flex-wrap: wrap;
42-
gap: var(--mod-actiongroup-horizontal-spacing-regular, var(--spectrum-actiongroup-horizontal-spacing-regular));
43-
44-
.spectrum-ActionGroup-item {
45-
flex-shrink: 0;
29+
gap: var(--spectrum-actiongroup-spacing);
4630

47-
/* Focus indicator should appear above hovered and selected borders */
48-
&:focus-visible {
49-
z-index: 3;
50-
}
31+
&.spectrum-ActionGroup--vertical {
32+
display: inline-flex;
33+
flex-direction: column;
5134
}
5235

53-
&:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) {
54-
.spectrum-ActionGroup-item {
55-
flex-shrink: 0;
36+
&.spectrum-ActionGroup--compact {
37+
gap: 0;
38+
39+
&:not(.spectrum-ActionGroup--quiet) {
40+
flex-wrap: nowrap;
5641
}
5742
}
5843
}
5944

60-
.spectrum-ActionGroup--vertical {
61-
gap: var(--mod-actiongroup-vertical-spacing-regular, var(--spectrum-actiongroup-vertical-spacing-regular));
62-
display: inline-flex;
63-
flex-direction: column;
64-
}
45+
.spectrum-ActionGroup-item {
46+
flex-shrink: 0;
6547

66-
.spectrum-ActionGroup--compact {
67-
gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact));
68-
}
48+
/* Focus indicator should appear above hovered and selected borders */
49+
&:focus-visible {
50+
z-index: 3;
51+
}
6952

70-
.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) {
71-
flex-wrap: nowrap;
53+
.spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) & {
54+
flex-shrink: 0;
55+
}
7256

73-
.spectrum-ActionGroup-item {
57+
.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) & {
7458
position: relative;
75-
border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
59+
border-radius: 0;
7660
z-index: 0;
7761

7862
&:first-child {
7963
/* @passthrough -- Action button styling */
80-
--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
64+
--spectrum-actionbutton-focus-indicator-border-radius: var(--spectrum-corner-radius-100) 0px 0px var(--spectrum-corner-radius-100);
8165

82-
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
83-
border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
84-
margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
66+
border-start-start-radius: var(--spectrum-corner-radius-100);
67+
border-end-start-radius: var(--spectrum-corner-radius-100);
68+
margin-inline-start: 0;
8569
}
8670

8771
& + .spectrum-ActionGroup-item {
8872
/* @passthrough -- Action button styling */
89-
--mod-actionbutton-focus-indicator-border-radius: 0px;
73+
--spectrum-actionbutton-focus-indicator-border-radius: 0px;
9074

91-
margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
92-
margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
75+
margin-inline-start: var(--spectrum-actiongroup-spacing);
76+
margin-inline-end: var(--spectrum-actiongroup-spacing);
9377
}
9478

9579
&:last-child {
9680
/* @passthrough -- Action button styling */
97-
--mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px;
81+
--spectrum-actionbutton-focus-indicator-border-radius: 0px var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100) 0px;
9882

99-
border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
100-
border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
101-
margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
102-
margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
83+
border-start-end-radius: var(--spectrum-corner-radius-100);
84+
border-end-end-radius: var(--spectrum-corner-radius-100);
85+
margin-inline-start: var(--spectrum-actiongroup-spacing);
86+
margin-inline-end: 0;
10387
}
10488

10589
&.is-selected {
@@ -119,44 +103,40 @@
119103
inline-size: auto;
120104
}
121105
}
122-
}
123106

124-
.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) {
125-
gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact));
126-
127-
.spectrum-ActionGroup-item {
128-
border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
107+
.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) & {
108+
border-radius: 0;
129109

130110
&:first-child {
131111
/* @passthrough -- Action button styling */
132-
--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px;
112+
--spectrum-actionbutton-focus-indicator-border-radius: var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100) 0px 0px;
133113

134-
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
135-
border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
136-
margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
137-
margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
138-
margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
114+
border-start-start-radius: var(--spectrum-corner-radius-100);
115+
border-start-end-radius: var(--spectrum-corner-radius-100);
116+
margin-inline-end: 0;
117+
margin-block-start: var(--spectrum-actiongroup-spacing);
118+
margin-block-end: var(--spectrum-actiongroup-spacing);
139119
}
140120

141121
& + .spectrum-ActionGroup-item {
142-
margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
143-
margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
144-
margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
145-
margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
122+
margin-inline-start: 0;
123+
margin-inline-end: 0;
124+
margin-block-start: 0;
125+
margin-block-end: var(--spectrum-actiongroup-spacing);
146126
}
147127

148128
&:last-child {
149129
/* @passthrough -- Action button styling */
150-
--mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
130+
--spectrum-actionbutton-focus-indicator-border-radius: 0px 0px var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100);
151131

152-
border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
153-
border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
154-
margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
155-
margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
132+
border-end-start-radius: var(--spectrum-corner-radius-100);
133+
border-end-end-radius: var(--spectrum-corner-radius-100);
134+
margin-block-start: var(--spectrum-actiongroup-spacing);
135+
margin-block-end: 0;
156136
}
157137
}
158-
}
159138

160-
.spectrum-ActionGroup--justified .spectrum-ActionGroup-item {
161-
flex-grow: 1;
139+
.spectrum-ActionGroup--justified & {
140+
flex-grow: 1;
141+
}
162142
}

0 commit comments

Comments
 (0)