Skip to content

feat(picker): refactoring template markup, testing token passthroughs #3792

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
e519171
feat(picker-markup): add shirt size within template
aramos-adobe May 19, 2025
e5eaac5
feat(picker-markup): adjusting picker markup to higher level of template
aramos-adobe May 20, 2025
e98b3f6
chore(picker-markup): restore dropzone css file
aramos-adobe May 20, 2025
868bd35
chore(picker-markup): adding lint line
aramos-adobe May 20, 2025
4bd5de3
feat(picker-markup): remove duplicate icon template
aramos-adobe May 22, 2025
f9af168
Merge branch 'spectrum-two' into aramos-adobe/css1065-picker-markup-f…
aramos-adobe May 22, 2025
da7dad2
Merge branch 'spectrum-two' into aramos-adobe/css1065-picker-markup-f…
aramos-adobe May 23, 2025
74f6939
feat(picker-markup): fixing is quiet layout bugs
aramos-adobe May 27, 2025
0cd0d2d
Merge branch 'spectrum-two' into aramos-adobe/css1065-picker-markup-f…
aramos-adobe May 29, 2025
3ef143d
fix(picker-markup): remove duplicate border on WHCM
aramos-adobe May 29, 2025
fe9373b
feat(picker-markup): readjusting picker popover mod passthroughs
aramos-adobe May 29, 2025
7c3e98c
Merge branch 'spectrum-two' into aramos-adobe/css1065-picker-markup-f…
aramos-adobe May 30, 2025
1065015
feat(picker): updating changeset, story, css
aramos-adobe May 30, 2025
e89ea7e
Merge branch 'spectrum-two' into aramos-adobe/css1065-picker-markup-f…
aramos-adobe Jun 2, 2025
b2e0a3f
Merge branch 'spectrum-two' into aramos-adobe/css1065-picker-markup-f…
aramos-adobe Jun 2, 2025
d6b8ee4
feat(picker): update template and changeset
aramos-adobe Jun 2, 2025
1290085
Merge branch 'spectrum-two' into aramos-adobe/css1065-picker-markup-f…
aramos-adobe Jun 2, 2025
34697f8
Merge branch 'spectrum-two' into aramos-adobe/css1065-picker-markup-f…
aramos-adobe Jun 3, 2025
6f2e972
Merge branch 'spectrum-two' into aramos-adobe/css1065-picker-markup-f…
aramos-adobe Jun 5, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .changeset/open-squids-refuse.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
"@spectrum-css/picker": major
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is on the spectrum-two branch. I'm not certain how we're handling the changesets, so this is just a question for and about the future. When we do finally merge spectrum-two into main, do you know yet how we're going to handle this "major" change, AND the S2 picker migration "major" change? Are they going to get lumped together, and picker will get bumped only 1 version number, or are they going to be separated so that picker actually gets 2 version bumps?

This isn't really a question related to your work, I agree that these are breaking changes. 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marissahuysentruyt Can this be a patch? I'm not sure how it works but hopefully that doesn't bump the version number

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's small enough to be a patch, personally. Maybe Cassondra or Patrick have a preference? I mean....it's a breaking/major change from the last iteration of the picker. That picker however, isn't available to consumers though.

The changesets stuff trips me up a bunch. If it makes you feel better, when we broke the dialog migration up, I added 2 changesets both marked major. I had the same question then!! 😆

Copy link
Collaborator

@castastrophe castastrophe Jun 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can (and probably will) fuss with the changelog manually for this kind of release when the time comes, so I'm not worried about semver, per say. At this point, I am thinking about what impact changes might have on the SWC project. Would they require significant refactoring to support these changes? Then yeah, it probably is a major from that perspective.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Such a great clarification and I so appreciate y'all asking it! Can we surface this in the team chat as well to make sure we're all in agreement?)

---

### S2 Picker component refactor

- Refactors Picker component to use proper custom property naming conventions
- Adds size-specific animation distances for Popover component
- Improves component structure with proper class by renaming `spectrum-Picker` to `spectrum-Picker-button`
- `spectrum-Picker` now encapsulates help text, label, and popover components
- Adds `flex-shrink` to progress circle for better layout control when truncation and loading is visible
- Updates Popover animation distance to use `spectrum-Picker` custom properties

#### New token

`--spectrum-picker-popover-animation-distance`

#### Renamed tokens

`spectrum-picker-spacing-picker-to-popover` --> `--spectrum-picker-popover-animation-distance`
95 changes: 48 additions & 47 deletions components/picker/dist/metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,71 +2,72 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Picker",
".spectrum-Picker + .spectrum-Popover--bottom-start.is-open",
".spectrum-Picker .spectrum-Picker-icon",
".spectrum-Picker .spectrum-Picker-label",
".spectrum-Picker .spectrum-ProgressCircle",
".spectrum-Picker--quiet",
".spectrum-Picker--quiet.is-keyboardFocused:after",
".spectrum-Picker--quiet .spectrum-Picker-button",
".spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after",
".spectrum-Picker--quiet .spectrum-Picker-button:after",
".spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after",
".spectrum-Picker--quiet.spectrum-Picker--sideLabel",
".spectrum-Picker--quiet:after",
".spectrum-Picker--quiet:focus-visible:after",
".spectrum-Picker--quiet.spectrum-Picker--sideLabel .spectrum-Picker-button",
".spectrum-Picker--sideLabel",
".spectrum-Picker--sizeL",
".spectrum-Picker--sizeL + .spectrum-Popover--bottom-start.is-open",
".spectrum-Picker--sizeS",
".spectrum-Picker--sizeS + .spectrum-Popover--bottom-start.is-open",
".spectrum-Picker--sizeXL",
".spectrum-Picker--sizeXL + .spectrum-Popover--bottom-start.is-open",
".spectrum-Picker-button",
".spectrum-Picker-button.is-disabled",
".spectrum-Picker-button.is-disabled .spectrum-Picker-icon",
".spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder",
".spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon",
".spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon",
".spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet)",
".spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)",
".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover",
".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)",
".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon",
".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active",
".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible",
".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover",
".spectrum-Picker-button.is-keyboardFocused",
".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon",
".spectrum-Picker-button.is-keyboardFocused:after",
".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)",
".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon",
".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover",
".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon",
".spectrum-Picker-button::-moz-focus-inner",
".spectrum-Picker-button:active",
".spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder",
".spectrum-Picker-button:active:after",
".spectrum-Picker-button:disabled",
".spectrum-Picker-button:disabled .spectrum-Picker-icon",
".spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder",
".spectrum-Picker-button:disabled .spectrum-Picker-menuIcon",
".spectrum-Picker-button:disabled .spectrum-Picker-validationIcon",
".spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)",
".spectrum-Picker-button:focus",
".spectrum-Picker-button:focus-visible",
".spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder",
".spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon",
".spectrum-Picker-button:focus-visible:after",
".spectrum-Picker-button:hover",
".spectrum-Picker-button:hover .spectrum-Picker-menuIcon",
".spectrum-Picker-label",
".spectrum-Picker-label.is-placeholder",
".spectrum-Picker-label.is-placeholder:active",
".spectrum-Picker-label.is-placeholder:hover",
".spectrum-Picker-menuIcon",
".spectrum-Picker-menuIcon:active",
".spectrum-Picker-validationIcon",
".spectrum-Picker.is-disabled",
".spectrum-Picker.is-disabled .spectrum-Picker-icon",
".spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder",
".spectrum-Picker.is-disabled .spectrum-Picker-menuIcon",
".spectrum-Picker.is-disabled .spectrum-Picker-validationIcon",
".spectrum-Picker.is-disabled:not(.spectrum-Picker--quiet)",
".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)",
".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover",
".spectrum-Picker.is-invalid:not(:disabled, .is-disabled)",
".spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon",
".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active",
".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible",
".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover",
".spectrum-Picker.is-keyboardFocused",
".spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
".spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon",
".spectrum-Picker.is-keyboardFocused:after",
".spectrum-Picker.is-loading",
".spectrum-Picker.is-loading .spectrum-Picker-menuIcon",
".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)",
".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon",
".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover",
".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon",
".spectrum-Picker::-moz-focus-inner",
".spectrum-Picker:active",
".spectrum-Picker:active .spectrum-Picker-label.is-placeholder",
".spectrum-Picker:active:after",
".spectrum-Picker:after",
".spectrum-Picker:disabled",
".spectrum-Picker:disabled .spectrum-Picker-icon",
".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder",
".spectrum-Picker:disabled .spectrum-Picker-menuIcon",
".spectrum-Picker:disabled .spectrum-Picker-validationIcon",
".spectrum-Picker:disabled:not(.spectrum-Picker--quiet)",
".spectrum-Picker:focus",
".spectrum-Picker:focus-visible",
".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder",
".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon",
".spectrum-Picker:focus-visible:after",
".spectrum-Picker:hover",
".spectrum-Picker:hover .spectrum-Picker-menuIcon",
".spectrum-Picker:lang(ja) .spectrum-Picker-label",
".spectrum-Picker:lang(ko) .spectrum-Picker-label",
".spectrum-Picker:lang(zh) .spectrum-Picker-label"
Expand Down Expand Up @@ -131,7 +132,6 @@
"--mod-picker-spacing-icon-to-disclosure-icon",
"--mod-picker-spacing-label-to-picker",
"--mod-picker-spacing-label-to-picker-quiet",
"--mod-picker-spacing-picker-to-popover",
"--mod-picker-spacing-starting-icon-to-text",
"--mod-picker-spacing-text-to-icon-inline-end",
"--mod-picker-spacing-top-to-alert-icon",
Expand Down Expand Up @@ -190,13 +190,13 @@
"--spectrum-picker-min-inline-size",
"--spectrum-picker-minimum-width-multiplier",
"--spectrum-picker-placeholder-font-style",
"--spectrum-picker-popover-animation-distance",
"--spectrum-picker-spacing-bottom-to-text",
"--spectrum-picker-spacing-edge-to-disclosure-icon",
"--spectrum-picker-spacing-edge-to-text",
"--spectrum-picker-spacing-icon-to-disclosure-icon",
"--spectrum-picker-spacing-label-to-picker",
"--spectrum-picker-spacing-label-to-picker-quiet",
"--spectrum-picker-spacing-picker-to-popover",
"--spectrum-picker-spacing-starting-icon-to-text",
"--spectrum-picker-spacing-text-to-icon-inline-end",
"--spectrum-picker-spacing-top-to-alert-icon",
Expand Down Expand Up @@ -302,7 +302,8 @@
"passthroughs": [
"--mod-button-animation-duration",
"--mod-button-font-family",
"--mod-button-line-height"
"--mod-button-line-height",
"--mod-popover-animation-distance"
],
"high-contrast": [
"--highcontrast-picker-background-color",
Expand Down
Loading
Loading