Skip to content

Commit 54f276f

Browse files
Melissa Thompsoncastastrophe
Melissa Thompson
authored and
castastrophe
committed
feat(actiongroup)!: migrate to S2 (#2453)
BREAKING CHANGE: migrates `Action Group` to Spectrum 2, Removes some mod properties
1 parent 72dd36b commit 54f276f

File tree

8 files changed

+33
-130
lines changed

8 files changed

+33
-130
lines changed

‎components/actiongroup/index.css

+22-47
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,10 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
@import "./themes/spectrum-two.css";
15-
1614
.spectrum-ActionGroup {
17-
--spectrum-actiongroup-button-spacing-reset: 0;
18-
--spectrum-actiongroup-border-radius-reset: 0;
19-
--spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100);
15+
--spectrum-actiongroup-border-radius-reset: 0;
16+
--spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100);
17+
--spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50);
2018
}
2119

2220
.spectrum-ActionGroup--sizeXS,
@@ -75,28 +73,17 @@
7573
/* @passthrough -- Action button styling */
7674
--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));
7775

78-
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
79-
border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
80-
margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
81-
}
82-
83-
& + .spectrum-ActionGroup-item {
84-
/* @passthrough -- Action button styling */
85-
--mod-actionbutton-focus-indicator-border-radius: 0px;
76+
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
77+
border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
78+
}
8679

87-
margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
88-
margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
89-
}
90-
91-
&:last-child {
92-
/* @passthrough -- Action button styling */
93-
--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;
80+
&:last-child {
81+
/* Action button passthrough styling */
82+
--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;
9483

95-
border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
96-
border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
97-
margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
98-
margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
99-
}
84+
border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
85+
border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
86+
}
10087

10188
&.is-selected {
10289
z-index: 1;
@@ -127,30 +114,18 @@
127114
/* @passthrough -- Action button styling */
128115
--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;
129116

130-
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
131-
border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
132-
margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
133-
margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
134-
margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
135-
}
117+
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
118+
border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
119+
}
136120

137-
& + .spectrum-ActionGroup-item {
138-
margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
139-
margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
140-
margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
141-
margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
142-
}
121+
&:last-child {
122+
/* Action button passthrough styling */
123+
--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));
143124

144-
&:last-child {
145-
/* @passthrough -- Action button styling */
146-
--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));
147-
148-
border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
149-
border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
150-
margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
151-
margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
152-
}
153-
}
125+
border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
126+
border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
127+
}
128+
}
154129
}
155130

156131
.spectrum-ActionGroup--justified .spectrum-ActionGroup-item {

‎components/actiongroup/metadata/metadata.json

+2-13
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,10 @@
77
".spectrum-ActionGroup--compact",
88
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)",
99
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
10-
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
1110
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
1211
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
1312
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)",
1413
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
15-
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
1614
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label",
1715
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected",
1816
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
@@ -31,33 +29,24 @@
3129
"modifiers": [
3230
"--mod-actiongroup-border-radius",
3331
"--mod-actiongroup-border-radius-reset",
34-
"--mod-actiongroup-button-spacing-reset",
3532
"--mod-actiongroup-gap-size-compact",
36-
"--mod-actiongroup-horizontal-spacing-compact",
3733
"--mod-actiongroup-horizontal-spacing-regular",
38-
"--mod-actiongroup-vertical-spacing-compact",
3934
"--mod-actiongroup-vertical-spacing-regular"
4035
],
4136
"component": [
4237
"--spectrum-actiongroup-border-radius",
4338
"--spectrum-actiongroup-border-radius-reset",
44-
"--spectrum-actiongroup-button-spacing-reset",
4539
"--spectrum-actiongroup-gap-size-compact",
46-
"--spectrum-actiongroup-horizontal-spacing-compact",
4740
"--spectrum-actiongroup-horizontal-spacing-regular",
48-
"--spectrum-actiongroup-vertical-spacing-compact",
4941
"--spectrum-actiongroup-vertical-spacing-regular"
5042
],
5143
"global": [
5244
"--spectrum-corner-radius-100",
5345
"--spectrum-spacing-100",
46+
"--spectrum-spacing-50",
5447
"--spectrum-spacing-75"
5548
],
56-
"system-theme": [
57-
"--system-action-group-gap-size-compact",
58-
"--system-action-group-horizontal-spacing-compact",
59-
"--system-action-group-vertical-spacing-compact"
60-
],
49+
"system-theme": [],
6150
"passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"],
6251
"high-contrast": []
6352
}

‎components/actiongroup/metadata/mods.md

-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
| ---------------------------------------------- |
33
| `--mod-actiongroup-border-radius` |
44
| `--mod-actiongroup-border-radius-reset` |
5-
| `--mod-actiongroup-button-spacing-reset` |
65
| `--mod-actiongroup-gap-size-compact` |
7-
| `--mod-actiongroup-horizontal-spacing-compact` |
86
| `--mod-actiongroup-horizontal-spacing-regular` |
9-
| `--mod-actiongroup-vertical-spacing-compact` |
107
| `--mod-actiongroup-vertical-spacing-regular` |

‎components/actiongroup/stories/actiongroup.stories.js

+9
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,15 @@ JustifiedIconOnlyCompact.parameters = {
279279
chromatic: { disableSnapshot: true },
280280
};
281281

282+
export const Quiet = Template.bind({});
283+
Quiet.tags = ["!dev"];
284+
Quiet.args = {
285+
areQuiet: true,
286+
};
287+
Quiet.parameters = {
288+
chromatic: { disableSnapshot: true },
289+
};
290+
282291
/**
283292
* When space is limited in an action group, there are 2 options for the group's overflow behavior: wrap or collapse. By default, an action group is set to wrap, meaning that the action buttons inside the group wrap to form another line. Alternatively, an action group can be set to collapse inside a **More (...)** action button.
284293
*/

‎components/actiongroup/stories/template.js

-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ import { styleMap } from "lit/directives/style-map.js";
66
import { capitalize } from "lodash-es";
77

88
import "../index.css";
9-
import "../themes/spectrum.css";
10-
/* Must be imported last */
11-
import "../themes/express.css";
129

1310
export const Template = ({
1411
rootClass = "spectrum-ActionGroup",

‎components/actiongroup/themes/express.css

-26
This file was deleted.

‎components/actiongroup/themes/spectrum-two.css

-22
This file was deleted.

‎components/actiongroup/themes/spectrum.css

-16
This file was deleted.

0 commit comments

Comments
 (0)