Skip to content

Commit de5e49c

Browse files
author
Melissa Thompson
committed
feat(actionbutton): s2 migration
1 parent b3b3aa5 commit de5e49c

File tree

8 files changed

+276
-383
lines changed

8 files changed

+276
-383
lines changed

‎components/actionbutton/index.css

+170-77
Large diffs are not rendered by default.

‎components/actionbutton/metadata/actionbutton.yml

+20-3
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,26 @@ sections:
1515
### Version 6.0.0
1616
#### Spectrum 2 release
1717
Action button now uses Spectrum 2 tokens and specifications. A few notable changes:
18-
- The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
19-
- The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
20-
- The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
18+
- Medium is now the default size and `.spectrum-Switch--sizeM` has been removed.
19+
- Includes the Spectrum 2 down state transform.
20+
- The component border was not removed to continue support for Windows High Contrast Mode (WHCM), but the color was adjusted to `transparent` and the mod custom properties were removed so as not to interfere with WHCM accessibility.
21+
- Background and content colors were updated.
22+
- Mod custom properties have been adjusted:
23+
- Renamed:
24+
- `--mod-line-height-100` renamed to `--mod-button-line-height`.
25+
- `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`.
26+
- `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`.
27+
- Removed:
28+
- `--mod-actionbutton-border-color-default`
29+
- `--mod-actionbutton-border-color-disabled`
30+
- `--mod-actionbutton-border-color-down`
31+
- `--mod-actionbutton-border-color-focus`
32+
- `--mod-actionbutton-border-color-hover`
33+
- `--mod-actionbutton-border-width`
34+
- `--mod-actionbutton-static-content-color`
35+
- New:
36+
- `--mod-actionbutton-font-weight`
37+
2138
2239
### Versions prior to 6.0.0
2340
#### Action Button now requires a class on its icon

‎components/actionbutton/metadata/mods.md

+1-7
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,7 @@
1414
| `--mod-actionbutton-background-color-hover` |
1515
| `--mod-actionbutton-background-color-hover-selected` |
1616
| `--mod-actionbutton-background-color-hover-selected-emphasized` |
17-
| `--mod-actionbutton-border-color-default` |
18-
| `--mod-actionbutton-border-color-disabled` |
19-
| `--mod-actionbutton-border-color-down` |
20-
| `--mod-actionbutton-border-color-focus` |
21-
| `--mod-actionbutton-border-color-hover` |
2217
| `--mod-actionbutton-border-radius` |
23-
| `--mod-actionbutton-border-width` |
2418
| `--mod-actionbutton-content-color-default` |
2519
| `--mod-actionbutton-content-color-default-selected` |
2620
| `--mod-actionbutton-content-color-default-selected-emphasized` |
@@ -43,11 +37,11 @@
4337
| `--mod-actionbutton-focus-indicator-gap` |
4438
| `--mod-actionbutton-focus-indicator-thickness` |
4539
| `--mod-actionbutton-font-size` |
40+
| `--mod-actionbutton-font-weight` |
4641
| `--mod-actionbutton-height` |
4742
| `--mod-actionbutton-icon-size` |
4843
| `--mod-actionbutton-label-color` |
4944
| `--mod-actionbutton-min-width` |
50-
| `--mod-actionbutton-static-content-color` |
5145
| `--mod-actionbutton-text-to-visual` |
5246
| `--mod-button-animation-duration` |
5347
| `--mod-button-font-family` |

‎components/actionbutton/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"main": "dist/index.css",
1717
"peerDependencies": {
1818
"@spectrum-css/icon": ">=4",
19-
"@spectrum-css/tokens": "^14.0.0-next.3"
19+
"@spectrum-css/tokens": "^14.0.0-next.6"
2020
},
2121
"peerDependenciesMeta": {
2222
"@spectrum-css/icon": {

‎components/actionbutton/stories/actionbutton.stories.js

+33-31
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { html } from "lit";
22
import { styleMap } from "lit/directives/style-map.js";
33
import { when } from "lit/directives/when.js";
4+
import { withDownStateDimensionCapture } from "../../../.storybook/decorators";
45

56
import { Template } from "./template";
67

@@ -137,6 +138,8 @@ export default {
137138
isQuiet: false,
138139
isEmphasized: false,
139140
hasPopup: false,
141+
hideLabel: false,
142+
label: "",
140143
isActive: false,
141144
isFocused: false,
142145
isHovered: false,
@@ -178,6 +181,7 @@ export default {
178181
${Story(context)}
179182
</div>
180183
`,
184+
withDownStateDimensionCapture(".spectrum-ActionButton:not(:disabled)")
181185
],
182186
};
183187

@@ -229,17 +233,6 @@ const States = (args) =>
229233
})}
230234
${ActionButtons(args)}
231235
</div>
232-
<div>
233-
${Typography({
234-
semantics: "detail",
235-
size: "s",
236-
content: ["Selected"],
237-
})}
238-
${ActionButtons({
239-
...args,
240-
isSelected: true,
241-
})}
242-
</div>
243236
<div>
244237
${Typography({
245238
semantics: "detail",
@@ -283,35 +276,21 @@ const States = (args) =>
283276
...args,
284277
isDisabled: true,
285278
})}
286-
</div>
287-
<div>
288-
${Typography({
289-
semantics: "detail",
290-
size: "s",
291-
content: ["Disabled + selected"],
292-
})}
293-
${ActionButtons({
294-
...args,
295-
isSelected: true,
296-
isDisabled: true,
297-
})}
298279
</div>`;
299280

300281
const Sizes = (args) =>
301-
html` ${["s", "m", "l", "xl"].map((size) => {
282+
html` ${["xs", "s", "m", "l", "xl"].map((size) => {
302283
return html` <div>
303284
${Typography({
304285
semantics: "detail",
305286
size: "s",
306287
content: [
307288
{
308-
xxs: "Extra-extra-small",
309289
xs: "Extra-small",
310290
s: "Small",
311291
m: "Medium",
312292
l: "Large",
313293
xl: "Extra-large",
314-
xxl: "Extra-extra-large",
315294
}[size],
316295
],
317296
})}
@@ -328,7 +307,7 @@ const Variants = (args) =>
328307
${Typography({
329308
semantics: "detail",
330309
size: "l",
331-
content: ["Standard"],
310+
content: ["Standard - not selected"],
332311
})}
333312
<div
334313
style=${styleMap({
@@ -344,7 +323,7 @@ const Variants = (args) =>
344323
${Typography({
345324
semantics: "detail",
346325
size: "l",
347-
content: ["Emphasized"],
326+
content: ["Quiet - not selected"],
348327
})}
349328
<div
350329
style=${styleMap({
@@ -355,15 +334,15 @@ const Variants = (args) =>
355334
>
356335
${States({
357336
...args,
358-
isEmphasized: true,
337+
isQuiet: true,
359338
})}
360339
</div>
361340
</div>
362341
<div class="spectrum-Typography">
363342
${Typography({
364343
semantics: "detail",
365344
size: "l",
366-
content: ["Quiet"],
345+
content: ["Standard and Quiet - Selected"],
367346
})}
368347
<div
369348
style=${styleMap({
@@ -374,10 +353,33 @@ const Variants = (args) =>
374353
>
375354
${States({
376355
...args,
377-
isQuiet: true,
356+
isSelected: true
378357
})}
379358
</div>
380359
</div>
360+
<!-- Static color variants don't have emphasized option -->
361+
${when(!args.staticColor, () => html`
362+
<div class="spectrum-Typography">
363+
${Typography({
364+
semantics: "detail",
365+
size: "l",
366+
content: ["Standard and Quiet - Emphasized Selected"],
367+
})}
368+
<div
369+
style=${styleMap({
370+
display: "flex",
371+
flexDirection: "column",
372+
gap: ".3rem",
373+
})}
374+
>
375+
${States({
376+
...args,
377+
isSelected: true,
378+
isEmphasized: true,
379+
})}
380+
</div>
381+
</div>
382+
`)}
381383
<div class="spectrum-Typography">
382384
${Typography({
383385
semantics: "detail",

‎components/actionbutton/stories/template.js

+51-63
Original file line numberDiff line numberDiff line change
@@ -37,66 +37,54 @@ export const Template = ({
3737
testId,
3838
role,
3939
...globals
40-
}) => {
41-
const { express } = globals;
42-
43-
try {
44-
if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
45-
else import(/* webpackPrefetch: true */ "../themes/express.css");
46-
}
47-
catch (e) {
48-
console.warn(e);
49-
}
50-
51-
return html`
52-
<button
53-
aria-label=${ifDefined(label)}
54-
aria-haspopup=${hasPopup ? "true" : "false"}
55-
aria-pressed=${isSelected ? "true" : "false"}
56-
class=${classMap({
57-
[rootClass]: true,
58-
[`${rootClass}--size${size?.toUpperCase()}`]:
59-
typeof size !== "undefined",
60-
[`${rootClass}--quiet`]: isQuiet,
61-
[`${rootClass}--emphasized`]: isEmphasized,
62-
[`${rootClass}--static${capitalize(lowerCase(staticColor))}`]:
63-
typeof staticColor !== "undefined",
64-
["is-disabled"]: isDisabled,
65-
["is-selected"]: isSelected,
66-
["is-hover"]: isHovered,
67-
["is-focus-visible"]: isFocused,
68-
["is-active"]: isActive,
69-
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
70-
})}
71-
id=${ifDefined(id)}
72-
data-testid=${ifDefined(testId)}
73-
role=${ifDefined(role)}
74-
style=${ifDefined(styleMap(customStyles))}
75-
?disabled=${isDisabled}
76-
@click=${onclick}
77-
>
78-
${when(hasPopup, () =>
79-
Icon({
80-
...globals,
81-
size,
82-
iconName: "CornerTriangle",
83-
setName: "ui",
84-
customClasses: [`${rootClass}-hold`],
85-
})
86-
)}
87-
${when(iconName, () =>
88-
Icon({
89-
...globals,
90-
size,
91-
iconName,
92-
setName: iconSet,
93-
customClasses: [`${rootClass}-icon`, ...customIconClasses],
94-
})
95-
)}
96-
${when(
97-
label && !hideLabel,
98-
() => html`<span class="${rootClass}-label">${label}</span>`
99-
)}
100-
</button>
101-
`;
102-
};
40+
}) => html`
41+
<button
42+
aria-label=${ifDefined(label)}
43+
aria-haspopup=${hasPopup ? "true" : "false"}
44+
aria-pressed=${isSelected ? "true" : "false"}
45+
class=${classMap({
46+
[rootClass]: true,
47+
[`${rootClass}--size${size?.toUpperCase()}`]:
48+
typeof size !== "undefined",
49+
[`${rootClass}--quiet`]: isQuiet,
50+
[`${rootClass}--emphasized`]: isEmphasized,
51+
[`${rootClass}--static${capitalize(lowerCase(staticColor))}`]:
52+
typeof staticColor !== "undefined",
53+
["is-disabled"]: isDisabled,
54+
["is-selected"]: isSelected,
55+
["is-hover"]: isHovered,
56+
["is-focus-visible"]: isFocused,
57+
["is-active"]: isActive,
58+
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
59+
})}
60+
id=${ifDefined(id)}
61+
data-testid=${ifDefined(testId)}
62+
role=${ifDefined(role)}
63+
style=${ifDefined(styleMap(customStyles))}
64+
?disabled=${isDisabled}
65+
@click=${onclick}
66+
>
67+
${when(hasPopup, () =>
68+
Icon({
69+
...globals,
70+
size,
71+
iconName: "CornerTriangle",
72+
setName: "ui",
73+
customClasses: [`${rootClass}-hold`],
74+
})
75+
)}
76+
${when(iconName, () =>
77+
Icon({
78+
...globals,
79+
size,
80+
iconName,
81+
setName: iconSet,
82+
customClasses: [`${rootClass}-icon`, ...customIconClasses],
83+
})
84+
)}
85+
${when(
86+
label && !hideLabel,
87+
() => html`<span class="${rootClass}-label">${label}</span>`
88+
)}
89+
</button>
90+
`;

‎components/actionbutton/themes/express.css

-59
This file was deleted.

0 commit comments

Comments
 (0)