Skip to content

Commit 5d730fe

Browse files
jawinnjawinn
authored
feat(picker)!: migrate to spectrum 2 (#2697)
Migrates the Picker component to Spectrum 2, based on the updated Figma specs. - Integrate themes CSS files into index.css - Uses new S2 tokens for field width and corner rounding - Add down state with new calculated perspective - The top to alert icon in Spectrum 2 now uses the component-top-to-workflow-icon-* tokens as defined on the design. - Adds the CJK line-height token defined on the design specs. - Uses border-width-200 instead of border-width-100 * fix(picker): use correct spacing between icons and value text The spacing between alert icon and disclosure icon was incorrect because it was being overridden by a selector that shouldn't have been affecting this scenario (which was using the subsequent-sibling combinator ~). Some mods around the spacing for the three different types of icons were also not working as expected. Fixes this spacing and clarifies which spacing is which. Renames the mod that applies to the optional workflow icon to the left of the value. Simplifies quiet styles by changing custom property values instead of adding extra styles. * feat(picker): storybook - expanded and improved chromatic template Expands the Chromatic-only template in Storybook to increase coverage of different options. Organizes the stories into sections using the formatting and typography previously established with Action button. States in each section are based on the grid of options in the Desktop S2 design Figma, with some additions such as the loading state. And the Switch examples from the existing template. Removes the "Open" story which is now covered in the Chromatic template. Adds missing icon (to left of value/placeholder text) option to Storybook, along with VRT coverage. Improves display of Popover within these different contexts; fixes how it is aligned on the side label example. Changes the side label example to use flex row instead of using inline-block which could wrap as the screen shrunk. === Other Storybook fixes and additions === - Adds aria-labelledby and unique ids to make sure the label is associated with the Picker. - Includes downstate dimension capture - Popover does not show when in the loading state (per design feedback) - Makes sure HelpText appears below the Picker when using side label, by adjusting its wrapper markup. - Adds conditional controls to disabled and loading states, per the PR feedback that disabled + loading should not be a possible combo.
1 parent f2db83c commit 5d730fe

File tree

10 files changed

+1109
-799
lines changed

10 files changed

+1109
-799
lines changed

‎.changeset/hot-books-fail.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
"@spectrum-css/picker": major
3+
---
4+
5+
#### Spectrum 2 migration
6+
7+
Picker now uses Spectrum 2 tokens and specifications. A few notable changes:
8+
9+
- The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
10+
- The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
11+
- The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
12+
- The mod custom property `--mod-picker-spacing-text-to-alert-icon-inline-start` has been renamed to `--mod-picker-spacing-text-to-icon-inline-end`. This removed the fallback that was marked as deprecated in a previous version.
13+
- The mod custom property `--mod-picker-spacing-text-to-icon` has been removed. Use `--mod-picker-spacing-text-to-icon-inline-end` for the spacing between text and visual (indicator or disclosure), or `--mod-picker-spacing-starting-icon-to-text` for the space between the optional workflow icon and the text.

‎components/picker/index.css

Lines changed: 458 additions & 449 deletions
Large diffs are not rendered by default.

‎components/picker/metadata/mods.md

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,71 @@
1-
| Modifiable custom properties |
2-
| ------------------------------------------------------ |
3-
| `--mod-animation-duration-100` |
4-
| `--mod-button-animation-duration` |
5-
| `--mod-button-font-family` |
6-
| `--mod-button-line-height` |
7-
| `--mod-line-height-100` |
8-
| `--mod-picker-animation-duration` |
9-
| `--mod-picker-background-color-active` |
10-
| `--mod-picker-background-color-default` |
11-
| `--mod-picker-background-color-default-open` |
12-
| `--mod-picker-background-color-disabled` |
13-
| `--mod-picker-background-color-hover` |
14-
| `--mod-picker-background-color-hover-open` |
15-
| `--mod-picker-background-color-key-focus` |
16-
| `--mod-picker-block-size` |
17-
| `--mod-picker-border-active` |
18-
| `--mod-picker-border-color-default` |
19-
| `--mod-picker-border-color-error-active` |
20-
| `--mod-picker-border-color-error-default` |
21-
| `--mod-picker-border-color-error-default-open` |
22-
| `--mod-picker-border-color-error-hover` |
23-
| `--mod-picker-border-color-error-hover-open` |
24-
| `--mod-picker-border-color-error-key-focus` |
25-
| `--mod-picker-border-color-hover` |
26-
| `--mod-picker-border-color-hover-open` |
27-
| `--mod-picker-border-color-key-focus` |
28-
| `--mod-picker-border-default-open` |
29-
| `--mod-picker-border-radius` |
30-
| `--mod-picker-border-width` |
31-
| `--mod-picker-focus-indicator-color` |
32-
| `--mod-picker-focus-indicator-gap` |
33-
| `--mod-picker-focus-indicator-thickness` |
34-
| `--mod-picker-font-color-active` |
35-
| `--mod-picker-font-color-default` |
36-
| `--mod-picker-font-color-default-open` |
37-
| `--mod-picker-font-color-disabled` |
38-
| `--mod-picker-font-color-hover` |
39-
| `--mod-picker-font-color-hover-open` |
40-
| `--mod-picker-font-color-key-focus` |
41-
| `--mod-picker-font-size` |
42-
| `--mod-picker-font-weight` |
43-
| `--mod-picker-icon-color-active` |
44-
| `--mod-picker-icon-color-default` |
45-
| `--mod-picker-icon-color-default-open` |
46-
| `--mod-picker-icon-color-disabled` |
47-
| `--mod-picker-icon-color-error` |
48-
| `--mod-picker-icon-color-hover` |
49-
| `--mod-picker-icon-color-hover-open` |
50-
| `--mod-picker-icon-color-key-focus` |
51-
| `--mod-picker-inline-size` |
52-
| `--mod-picker-line-height` |
53-
| `--mod-picker-placeholder-font-style` |
54-
| `--mod-picker-placeholder-font-weight` |
55-
| `--mod-picker-spacing-bottom-to-text` |
56-
| `--mod-picker-spacing-edge-to-disclosure-icon` |
57-
| `--mod-picker-spacing-edge-to-disclosure-icon-quiet` |
58-
| `--mod-picker-spacing-edge-to-text` |
59-
| `--mod-picker-spacing-edge-to-text-quiet` |
60-
| `--mod-picker-spacing-icon-to-disclosure-icon` |
61-
| `--mod-picker-spacing-label-to-picker` |
62-
| `--mod-picker-spacing-label-to-picker-quiet` |
63-
| `--mod-picker-spacing-picker-to-popover` |
64-
| `--mod-picker-spacing-text-to-alert-icon-inline-start` |
65-
| `--mod-picker-spacing-text-to-icon` |
66-
| `--mod-picker-spacing-text-to-icon-inline-end` |
67-
| `--mod-picker-spacing-top-to-alert-icon` |
68-
| `--mod-picker-spacing-top-to-disclosure-icon` |
69-
| `--mod-picker-spacing-top-to-progress-circle` |
70-
| `--mod-picker-spacing-top-to-text` |
71-
| `--mod-sans-font-family-stack` |
1+
| Modifiable custom properties |
2+
| ---------------------------------------------------- |
3+
| `--mod-button-animation-duration` |
4+
| `--mod-button-font-family` |
5+
| `--mod-button-line-height` |
6+
| `--mod-picker-animation-duration` |
7+
| `--mod-picker-background-color-active` |
8+
| `--mod-picker-background-color-default` |
9+
| `--mod-picker-background-color-default-open` |
10+
| `--mod-picker-background-color-disabled` |
11+
| `--mod-picker-background-color-hover` |
12+
| `--mod-picker-background-color-hover-open` |
13+
| `--mod-picker-background-color-key-focus` |
14+
| `--mod-picker-block-size` |
15+
| `--mod-picker-border-active` |
16+
| `--mod-picker-border-color-default` |
17+
| `--mod-picker-border-color-error-active` |
18+
| `--mod-picker-border-color-error-default` |
19+
| `--mod-picker-border-color-error-default-open` |
20+
| `--mod-picker-border-color-error-hover` |
21+
| `--mod-picker-border-color-error-hover-open` |
22+
| `--mod-picker-border-color-error-key-focus` |
23+
| `--mod-picker-border-color-hover` |
24+
| `--mod-picker-border-color-hover-open` |
25+
| `--mod-picker-border-color-key-focus` |
26+
| `--mod-picker-border-default-open` |
27+
| `--mod-picker-border-radius` |
28+
| `--mod-picker-border-width` |
29+
| `--mod-picker-focus-indicator-color` |
30+
| `--mod-picker-focus-indicator-gap` |
31+
| `--mod-picker-focus-indicator-thickness` |
32+
| `--mod-picker-font-color-active` |
33+
| `--mod-picker-font-color-default` |
34+
| `--mod-picker-font-color-default-open` |
35+
| `--mod-picker-font-color-disabled` |
36+
| `--mod-picker-font-color-hover` |
37+
| `--mod-picker-font-color-hover-open` |
38+
| `--mod-picker-font-color-key-focus` |
39+
| `--mod-picker-font-size` |
40+
| `--mod-picker-font-weight` |
41+
| `--mod-picker-icon-color-active` |
42+
| `--mod-picker-icon-color-default` |
43+
| `--mod-picker-icon-color-default-open` |
44+
| `--mod-picker-icon-color-disabled` |
45+
| `--mod-picker-icon-color-error` |
46+
| `--mod-picker-icon-color-hover` |
47+
| `--mod-picker-icon-color-hover-open` |
48+
| `--mod-picker-icon-color-key-focus` |
49+
| `--mod-picker-inline-size` |
50+
| `--mod-picker-inline-size-quiet` |
51+
| `--mod-picker-line-height` |
52+
| `--mod-picker-line-height-cjk` |
53+
| `--mod-picker-min-inline-size` |
54+
| `--mod-picker-min-inline-size-quiet` |
55+
| `--mod-picker-placeholder-font-style` |
56+
| `--mod-picker-placeholder-font-weight` |
57+
| `--mod-picker-spacing-bottom-to-text` |
58+
| `--mod-picker-spacing-edge-to-disclosure-icon` |
59+
| `--mod-picker-spacing-edge-to-disclosure-icon-quiet` |
60+
| `--mod-picker-spacing-edge-to-text` |
61+
| `--mod-picker-spacing-edge-to-text-quiet` |
62+
| `--mod-picker-spacing-icon-to-disclosure-icon` |
63+
| `--mod-picker-spacing-label-to-picker` |
64+
| `--mod-picker-spacing-label-to-picker-quiet` |
65+
| `--mod-picker-spacing-picker-to-popover` |
66+
| `--mod-picker-spacing-starting-icon-to-text` |
67+
| `--mod-picker-spacing-text-to-icon-inline-end` |
68+
| `--mod-picker-spacing-top-to-alert-icon` |
69+
| `--mod-picker-spacing-top-to-disclosure-icon` |
70+
| `--mod-picker-spacing-top-to-progress-circle` |
71+
| `--mod-picker-spacing-top-to-text` |

‎components/picker/metadata/picker.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ sections:
1313
- The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
1414
- The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
1515
- The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
16+
- The mod custom property `--mod-picker-spacing-text-to-alert-icon-inline-start` has been renamed to `--mod-picker-spacing-text-to-icon-inline-end`. This removed the fallback that was marked as deprecated in a previous version.
17+
- The mod custom property `--mod-picker-spacing-text-to-icon` has been removed. Use `--mod-picker-spacing-text-to-icon-inline-end` for the spacing between text and visual (indicator or disclosure), or `--mod-picker-spacing-starting-icon-to-text` for the space between the optional workflow icon and the text.
1618
1719
### Versions prior to 8.0
1820
#### Component renamed

‎components/picker/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
}
3939
},
4040
"devDependencies": {
41-
"@spectrum-css/commons": "^10.0.0"
41+
"@spectrum-css/commons": "^9.1.4-next.1"
4242
},
4343
"keywords": [
4444
"spectrum",

0 commit comments

Comments
 (0)