Skip to content

Commit 7061eee

Browse files
rise-erpeldingrise-erpelding
authored
feat(pickerbutton): migrate to s2 (#4114)
1 parent d349713 commit 7061eee

File tree

11 files changed

+305
-386
lines changed

11 files changed

+305
-386
lines changed

‎.changeset/few-candles-sniff.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
"@spectrum-css/pickerbutton": major
3+
---
4+
5+
The picker button component has been migrated to Spectrum 2. The picker button uses the same design spec as infield button and in some cases may be able to be used interchangeably with it. Its updated features include:
6+
7+
- Corner rounding updates - corner rounding differs by the component's t-shirt size, but otherwise is a standard size. This means that the rounded variant of picker button with increased corner rounding and the position variants of picker button that helped the picker button fit snugly within either side of an input have been removed.
8+
- Color and spacing updates to match S2 spec
9+
- Added WHCM support
10+
- Updated S2 down state
11+
- Removed focus styles: there are no spec'd focus styles in S2, therefore these styles have been removed.
12+
- The label variant of picker button has been removed.
13+
- Removal of `.spectrum-PickerButton--uiicononly`, `.spectrum-PickerButton--icononly`, and `.spectrum-PickerButton--textuiicon` classes:
14+
- The picker button featuring a UI icon is the default variant, so no additional `.spectrum-PickerButton--uiicononly` class needs to be applied.
15+
- The `.spectrum-PickerButton--icononly` class has been renamed to `.spectrum-PickerButton--workflowicon` to clarify when it should be used. Applying `.spectrum-PickerButton--workflowicon` when using a workflow icon instead is recommended, but probably not required.
16+
- Because the picker button no longer supports a label, there is no need for a `--textuiicon` variant which is why that class has been removed.
17+
- The `.is-open` state can continue to be used as before.
18+
19+
Added mod custom properties:
20+
21+
- `--mod-picker-button-background-color-quiet-disabled`
22+
23+
Removed mod custom properties:
24+
25+
- `--mod-picker-button-background-color-key-focus`
26+
- `--mod-picker-button-background-color-key-focus-quiet`
27+
- `--mod-picker-button-border-color`
28+
- `--mod-picker-button-border-color-disabled`
29+
- `--mod-picker-button-border-color-quiet`
30+
- `--mod-picker-button-border-radius-rounded`
31+
- `--mod-picker-button-border-radius-rounded-sided`
32+
- `--mod-picker-button-border-radius-sided`
33+
- `--mod-picker-button-border-width`
34+
- `--mod-picker-button-font-color`
35+
- `--mod-picker-button-font-color-disabled`
36+
- `--mod-picker-button-font-color-down`
37+
- `--mod-picker-button-font-color-down-disabled`
38+
- `--mod-picker-button-font-color-hover`
39+
- `--mod-picker-button-font-color-hover-disabled`
40+
- `--mod-picker-button-font-color-key-focus`
41+
- `--mod-picker-button-font-family`
42+
- `--mod-picker-button-font-size`
43+
- `--mod-picker-button-font-style`
44+
- `--mod-picker-button-font-weight`
45+
- `--mod-picker-button-gap`
46+
- `--mod-picker-button-icon-color-key-focus`
47+
- `--mod-picker-button-label-padding`

‎.changeset/green-falcons-rush.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@spectrum-css/infieldbutton": patch
3+
---
4+
5+
Remove unused key-focus and border mods. Note that border and key focus styles were previously removed in the migration to Spectrum 2, and the mod removals here do not have any visual impact to the infield button.
6+
7+
Also updates transition to use `background-color` instead of `border-color`.
8+
9+
Also fixes a flash bug in WHCM: when hovered, the infield button was flashing/blinking before changing to the appropriate hover color.

‎components/datepicker/stories/template.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,12 @@ export const DatePicker = ({
8585
},
8686
}, context))}
8787
${PickerButton({
88-
customClasses: [`${rootClass}-button`],
88+
customClasses: [`${rootClass}-button`, "spectrum-PickerButton--workflowicon"],
8989
size: "m",
9090
iconName: "Calendar",
9191
iconSet: "workflow",
9292
isQuiet,
93-
customStyles: isReadOnly ? { "display": "none" } : undefined,
93+
customStyles: isReadOnly ? { "display": "none" } : { "--mod-icon-size": "var(--spectrum-workflow-icon-size-50)" },
9494
// @todo this is not added to the button on the website; need to make sure it's not a bug
9595
// isOpen,
9696
isInvalid,

‎components/infieldbutton/dist/metadata.json

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,8 @@
3434
"--mod-infield-button-background-color-hover",
3535
"--mod-infield-button-background-color-hover-disabled",
3636
"--mod-infield-button-background-color-hover-quiet",
37-
"--mod-infield-button-background-color-key-focus",
38-
"--mod-infield-button-background-color-key-focus-quiet",
3937
"--mod-infield-button-background-color-quiet",
4038
"--mod-infield-button-background-color-quiet-disabled",
41-
"--mod-infield-button-border-color",
42-
"--mod-infield-button-border-color-disabled",
43-
"--mod-infield-button-border-color-quiet-disabled",
4439
"--mod-infield-button-border-radius",
4540
"--mod-infield-button-edge-to-fill",
4641
"--mod-infield-button-field-edge-to-icon",
@@ -53,8 +48,6 @@
5348
"--mod-infield-button-icon-color-down-disabled",
5449
"--mod-infield-button-icon-color-hover",
5550
"--mod-infield-button-icon-color-hover-disabled",
56-
"--mod-infield-button-icon-color-key-focus",
57-
"--mod-infield-button-icon-color-key-focus-disabled",
5851
"--mod-infield-button-side-edge-to-fill",
5952
"--mod-infield-button-width"
6053
],

‎components/infieldbutton/index.css

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,9 @@
4444
--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
4545
--mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
4646

47-
--mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color));
48-
4947
--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
5048
--mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
5149
--mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
52-
--mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color));
5350
}
5451

5552
&.spectrum-InfieldButton--sizeS {
@@ -87,11 +84,9 @@
8784
--mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent);
8885
--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent);
8986
--mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent);
90-
--mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent);
9187

9288
&:disabled {
9389
--mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent);
94-
--mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent);
9590
}
9691
}
9792

@@ -161,7 +156,7 @@
161156
align-items: center;
162157
justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content));
163158

164-
transition: border-color var(--spectrum-animation-duration-100) ease-in-out;
159+
transition: background-color var(--spectrum-animation-duration-100) ease-in-out;
165160
}
166161

167162
.spectrum-InfieldButton-icon {
@@ -181,6 +176,7 @@
181176
.spectrum-InfieldButton {
182177
--highcontrast-infield-button-background-color: ButtonText;
183178
--highcontrast-infield-button-icon-color: ButtonFace;
179+
forced-color-adjust: none; /* keeps button from flashing when hovered */
184180

185181
&:disabled {
186182
--highcontrast-infield-button-background-color: GrayText;

‎components/infieldbutton/stories/template.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export const Template = (
1515
iconName = "ChevronDown",
1616
iconSet = "ui",
1717
isDisabled,
18-
isInvalid,
1918
isHovered,
2019
isActive,
2120
isInline,
@@ -38,7 +37,6 @@ export const Template = (
3837
[`${rootClass}--size${size?.toUpperCase()}`]:
3938
typeof size !== "undefined",
4039
[`${rootClass}--quiet`]: isQuiet,
41-
"is-invalid": isInvalid,
4240
"is-hover": isHovered,
4341
"is-active": isActive,
4442
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -68,7 +66,6 @@ export const Template = (
6866
[`${rootClass}--size${size?.toUpperCase()}`]:
6967
typeof size !== "undefined",
7068
[`${rootClass}--quiet`]: isQuiet,
71-
"is-invalid": isInvalid,
7269
"is-hover": isHovered,
7370
"is-active": isActive,
7471
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -101,7 +98,6 @@ export const Template = (
10198
[`${rootClass}--size${size?.toUpperCase()}`]:
10299
typeof size !== "undefined",
103100
[`${rootClass}--quiet`]: isQuiet,
104-
"is-invalid": isInvalid,
105101
"is-hover": isHovered,
106102
"is-active": isActive,
107103
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),

‎components/pickerbutton/dist/metadata.json

Lines changed: 30 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,27 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-PickerButton",
5-
".spectrum-PickerButton--left .spectrum-PickerButton-fill",
6-
".spectrum-PickerButton--left.spectrum-PickerButton--rounded .spectrum-PickerButton-fill",
7-
".spectrum-PickerButton--right .spectrum-PickerButton-fill",
8-
".spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill",
9-
".spectrum-PickerButton--rounded .spectrum-PickerButton-fill",
10-
".spectrum-PickerButton--textuiicon .spectrum-PickerButton-fill",
11-
".spectrum-PickerButton--uiicononly .spectrum-PickerButton-fill",
12-
".spectrum-PickerButton--uiicononly .spectrum-PickerButton-label",
5+
".spectrum-PickerButton--quiet",
6+
".spectrum-PickerButton--quiet:disabled",
7+
".spectrum-PickerButton--quiet:not(:disabled):active",
8+
".spectrum-PickerButton--quiet:not(:disabled):focus-visible",
9+
".spectrum-PickerButton--quiet:not(:disabled):hover",
10+
".spectrum-PickerButton--workflowicon .spectrum-PickerButton-fill",
1311
".spectrum-PickerButton-fill",
1412
".spectrum-PickerButton-icon",
15-
".spectrum-PickerButton-label",
16-
".spectrum-PickerButton.is-focused",
17-
".spectrum-PickerButton.is-keyboardFocused",
1813
".spectrum-PickerButton.is-open",
1914
".spectrum-PickerButton.spectrum-PickerButton--quiet",
15+
".spectrum-PickerButton.spectrum-PickerButton--quiet:disabled",
2016
".spectrum-PickerButton.spectrum-PickerButton--sizeL",
2117
".spectrum-PickerButton.spectrum-PickerButton--sizeS",
2218
".spectrum-PickerButton.spectrum-PickerButton--sizeXL",
23-
".spectrum-PickerButton.spectrum-PickerButton--uiicononly",
2419
".spectrum-PickerButton:active",
2520
".spectrum-PickerButton:disabled",
26-
".spectrum-PickerButton:focus",
2721
".spectrum-PickerButton:focus-visible",
28-
".spectrum-PickerButton:hover"
22+
".spectrum-PickerButton:hover",
23+
".spectrum-PickerButton:not(:disabled):active",
24+
".spectrum-PickerButton:not(:disabled):focus-visible",
25+
".spectrum-PickerButton:not(:disabled):hover"
2926
],
3027
"modifiers": [
3128
"--mod-picker-button-background-animation-duration",
@@ -37,39 +34,17 @@
3734
"--mod-picker-button-background-color-hover",
3835
"--mod-picker-button-background-color-hover-disabled",
3936
"--mod-picker-button-background-color-hover-quiet",
40-
"--mod-picker-button-background-color-key-focus",
41-
"--mod-picker-button-background-color-key-focus-quiet",
4237
"--mod-picker-button-background-color-quiet",
43-
"--mod-picker-button-border-color",
44-
"--mod-picker-button-border-color-disabled",
45-
"--mod-picker-button-border-color-quiet",
38+
"--mod-picker-button-background-color-quiet-disabled",
4639
"--mod-picker-button-border-radius",
47-
"--mod-picker-button-border-radius-rounded",
48-
"--mod-picker-button-border-radius-rounded-sided",
49-
"--mod-picker-button-border-radius-sided",
50-
"--mod-picker-button-border-width",
5140
"--mod-picker-button-fill-padding",
52-
"--mod-picker-button-font-color",
53-
"--mod-picker-button-font-color-disabled",
54-
"--mod-picker-button-font-color-down",
55-
"--mod-picker-button-font-color-down-disabled",
56-
"--mod-picker-button-font-color-hover",
57-
"--mod-picker-button-font-color-hover-disabled",
58-
"--mod-picker-button-font-color-key-focus",
59-
"--mod-picker-button-font-family",
60-
"--mod-picker-button-font-size",
61-
"--mod-picker-button-font-style",
62-
"--mod-picker-button-font-weight",
63-
"--mod-picker-button-gap",
6441
"--mod-picker-button-height",
6542
"--mod-picker-button-icon-color",
6643
"--mod-picker-button-icon-color-disabled",
6744
"--mod-picker-button-icon-color-down",
6845
"--mod-picker-button-icon-color-down-disabled",
6946
"--mod-picker-button-icon-color-hover",
7047
"--mod-picker-button-icon-color-hover-disabled",
71-
"--mod-picker-button-icon-color-key-focus",
72-
"--mod-picker-button-label-padding",
7348
"--mod-picker-button-padding",
7449
"--mod-picker-button-width"
7550
],
@@ -78,66 +53,49 @@
7853
"--spectrum-picker-button-background-color",
7954
"--spectrum-picker-button-background-color-down",
8055
"--spectrum-picker-button-background-color-hover",
81-
"--spectrum-picker-button-background-color-key-focus",
82-
"--spectrum-picker-button-border-color",
8356
"--spectrum-picker-button-border-radius",
84-
"--spectrum-picker-button-border-radius-rounded",
85-
"--spectrum-picker-button-border-radius-rounded-sided",
86-
"--spectrum-picker-button-border-radius-sided",
87-
"--spectrum-picker-button-border-width",
57+
"--spectrum-picker-button-downstate-perspective",
8858
"--spectrum-picker-button-fill-padding",
89-
"--spectrum-picker-button-font-color",
90-
"--spectrum-picker-button-font-color-down",
91-
"--spectrum-picker-button-font-color-hover",
92-
"--spectrum-picker-button-font-color-key-focus",
93-
"--spectrum-picker-button-font-family",
94-
"--spectrum-picker-button-font-size",
95-
"--spectrum-picker-button-font-style",
96-
"--spectrum-picker-button-font-weight",
97-
"--spectrum-picker-button-gap",
9859
"--spectrum-picker-button-height",
9960
"--spectrum-picker-button-icon-color",
10061
"--spectrum-picker-button-icon-color-down",
10162
"--spectrum-picker-button-icon-color-hover",
102-
"--spectrum-picker-button-icon-color-key-focus",
103-
"--spectrum-picker-button-label-padding",
10463
"--spectrum-picker-button-padding",
10564
"--spectrum-picker-button-width"
10665
],
10766
"global": [
10867
"--spectrum-animation-duration-100",
109-
"--spectrum-body-sans-serif-font-weight",
110-
"--spectrum-border-width-100",
11168
"--spectrum-component-height-100",
11269
"--spectrum-component-height-200",
11370
"--spectrum-component-height-300",
11471
"--spectrum-component-height-75",
115-
"--spectrum-corner-radius-100",
116-
"--spectrum-corner-radius-200",
117-
"--spectrum-default-font-style",
72+
"--spectrum-component-size-difference-down",
73+
"--spectrum-component-size-width-ratio-down",
74+
"--spectrum-corner-radius-small-size-extra-large",
75+
"--spectrum-corner-radius-small-size-large",
76+
"--spectrum-corner-radius-small-size-medium",
77+
"--spectrum-corner-radius-small-size-small",
11878
"--spectrum-disabled-background-color",
11979
"--spectrum-disabled-content-color",
80+
"--spectrum-downstate-height",
81+
"--spectrum-downstate-width",
12082
"--spectrum-field-edge-to-disclosure-icon-100",
12183
"--spectrum-field-edge-to-disclosure-icon-200",
12284
"--spectrum-field-edge-to-disclosure-icon-300",
12385
"--spectrum-field-edge-to-disclosure-icon-75",
124-
"--spectrum-font-size-100",
125-
"--spectrum-font-size-200",
126-
"--spectrum-font-size-300",
127-
"--spectrum-font-size-75",
12886
"--spectrum-gray-100",
12987
"--spectrum-gray-200",
130-
"--spectrum-gray-50",
88+
"--spectrum-in-field-button-edge-to-fill-extra-large",
89+
"--spectrum-in-field-button-edge-to-fill-large",
90+
"--spectrum-in-field-button-edge-to-fill-medium",
91+
"--spectrum-in-field-button-edge-to-fill-small",
13192
"--spectrum-neutral-content-color-default",
13293
"--spectrum-neutral-content-color-down",
133-
"--spectrum-neutral-content-color-hover",
134-
"--spectrum-neutral-content-color-key-focus",
135-
"--spectrum-sans-font-family-stack",
136-
"--spectrum-spacing-75",
137-
"--spectrum-text-to-visual-200",
138-
"--spectrum-text-to-visual-300",
139-
"--spectrum-text-to-visual-50"
94+
"--spectrum-neutral-content-color-hover"
14095
],
14196
"passthroughs": [],
142-
"high-contrast": []
97+
"high-contrast": [
98+
"--highcontrast-picker-button-background-color",
99+
"--highcontrast-picker-button-icon-color"
100+
]
143101
}

0 commit comments

Comments
 (0)