feat(pickerbutton): migrate to s2 #4114

rise-erpelding · 2025-08-06T17:49:29Z

Description

Here, picker button follows in the Spectrum 2 footsteps of its sibling, infield button. This component uses the same design spec as infield button and in some cases may be able to be used interchangeably with it. A further discussion about whether deprecation is a good idea is warranted, but for now, picker button is updated for use in Spectrum 2, and therefore its updated features include:

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.
There are no spec'd focus styles in S2, therefore these styles have been removed.
Updated S2 down state
The label variant of picker button has been removed. See the next item for more details. (Reviewer: I kept this variant removal separate in case we want to revert, I'm down to keep the variant if there's a reason for us to do so but thought it was better to err on the side of removal for now.)
Removal of .spectrum-PickerButton--uiicononly, .spectrum-PickerButton--icononly, and .spectrum-PickerButton--textuiicon classes:
- The picker button featuring a UI icon is the default variant, so no additional .spectrum-PickerButton--uiicononly class needs to be applied.
- 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. (Reviewer: The main difference is that it removes the padding to better accommodate the workflow icon's size, which differs from the UI icon's size. Please leave feedback on this if that doesn't feel right to you.)
- 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.
Color and spacing updates to match S2 spec
Added forced-colors/WHCM support
The .is-open state hasn't been touched here and can continue to be used as before. (Reviewer: Infield button doesn't have this, I have no issue taking this out or leaving it/documenting further if that's something we think we should do)

Picker button also has some updates to its template, storybook, and tests, to include:

Addition of active and hovered tests and controls, removal of key focus
Showing custom icon size in tests
Showing workflow icons as well as ui icons with their default sizes in tests
Updates in the controls so that you can select a specific UI or Workflow icon depending on the icon set you've chosen
The CustomIcon story uses a new template (the same one that displays the t-shirt sizes in tests) so that we can remove some of the additional typography markup within the story, since it seems like we're moving away from that and it adds some bloat to the code snippets.

There's also some additional work that happened with other components throughout the course of migrating the picker button:

There is no invalid state for infield button, so all lingering instances of isInvalid were removed from the infield button template.
In combing through the CSS for infield button, there were also a few small updates made there, which will result in a patch bump for infield button:
- We're no longer setting a border on infield button at all (not even in WHCM), so all mods related to border that were remaining in infield button were removed. The transition was set for border-color, since this would not have any effect, this has been changed to background-color instead.
- Infield button also does not have a key focus state in S2, so any key-focus related mods were removed as well.
- In applying WHCM styles for picker button, I found a flashing issue when switching between the default and hover states which is typically resolved with forced-color-adjust: none, since the WHCM styles were copied from infield button, infield button had the same bug, so forced-color-adjust: none was applied there too.
Because datepicker uses the the picker button with a custom-sized workflow icon, I've made the update to the icon used there to show that we can use the picker button to match the design spec.

CSS-771

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Pulling down the branch locally or checking out the deploy preview, confirm the following:

Picker button matches the infield button design spec
A custom icon can be used, and can be customized
Storybook controls work as expected
Documentation and tests provide adequate coverage and are up to date
Changes to infield button are reasonable, including removals of custom properties, adjustment of transition, and use of forced-color-adjust: none in WHCM
Updates to datepicker template work
Included changesets provide all necessary changelog information for both infield button and picker button

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2025-08-06T17:49:33Z

🦋 Changeset detected

Latest commit: 13238b6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@spectrum-css/pickerbutton	Major
@spectrum-css/infieldbutton	Patch
@spectrum-css/bundle	Patch
@spectrum-css/preview	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-08-06T17:59:08Z

File metrics

Summary

Total size: 1.43 MB^*
✅ No change in file sizes

Package	Size	Minified	Gzipped
infieldbutton	9.95 KB	9.48 KB	1.59 KB
pickerbutton	8.23 KB	7.82 KB	1.47 KB

File change details

infieldbutton

Filename	Head	Minified	Gzipped	Compared to base
index.css	9.95 KB	9.48 KB	1.59 KB	🟢 ⬇ 0.46 KB
metadata.json	5.05 KB	-	-	🟢 ⬇ 0.37 KB

pickerbutton

Filename	Head	Minified	Gzipped	Compared to base
index.css	8.23 KB	7.82 KB	1.47 KB	🟢 ⬇ 4.02 KB
metadata.json	4.20 KB	-	-	🟢 ⬇ 1.83 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-08-06T17:59:59Z

📚 Branch preview

PR #4114 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4114/index.html.

rise-erpelding · 2025-08-07T00:43:34Z

components/pickerbutton/stories/pickerbutton.stories.js

+ * These examples use custom icons. The icon on the left is a custom UI icon, and the icon on the right is a custom workflow icon. The size of the icon can also be modified by using the `--mod-icon-size` custom property. Here, `--mod-icon-size` is set to `14px`.
+ *
+ * By default, the picker button supports a UI icon. If using a workflow icon, please apply the `.spectrum-PickerButton--workflowicon` class to the picker button to best support the use of a workflow icon.
 */
 export const CustomIcon = PickerIconOptions.bind({});
 CustomIcon.args = {
 	uiIconName: "ArrowDown100",
 	workflowIconName: "Calendar",
+	customStyles: {
+		"--mod-icon-size": "14px",
+	}


So the best thing I could come up with to make sure that the icon size would be modifiable for both ui icons and workflow icons was to just use --mod-icon-size.

We don't do any setting of the icon size in CSS, the template handles it. (There aren't ui icon size tokens, because UI icon size is controlled by the size number appended to the icon name, our icon template is set up so that you can pass a t-shirt size to a UI icon and it ensures that the proper size number is picked.)

aramos-adobe

Migration looks and feels good! I also like the removal of some unused args and styles in the infield button template.

marissahuysentruyt

I think this is looking good! Before I approve, I just wanted to gauge your thoughts on the UI icon comment, limiting users options to mismatch the icon size with the button size.

Nice work!

marissahuysentruyt · 2025-08-11T14:02:09Z

components/pickerbutton/stories/pickerbutton.stories.js

 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { PickerGroup } from "./pickerbutton.test.js";
-import { CustomIconTemplate, Template } from "./template.js";
+import { PickerIconOptions, Template } from "./template.js";

 /**
 * The picker button component is used as a dropdown trigger within other components such as [combobox](?path=/docs/components-combobox--docs).


Because we've already moved combobox off of picker button, should we update this description?

I'm kind of thinking it's ok to stay, because our combobox might not be using it, but SWC's is, so it's appropriate to say that it can be the dropdown trigger used within combobox, even if it isn't with ours.

Not to mention the collection of picker button passthroughs I just found in combobox that probably need removing. 🙃

oh oh oh. yeah ok, I agree then about not increasing the scope of the PR. It's starting to feel like that popover migration that could've touched like 7 other components.

marissahuysentruyt · 2025-08-11T14:04:01Z

.changeset/few-candles-sniff.md

+- `"--mod-picker-button-background-color-key-focus"`
+- `"--mod-picker-button-background-color-key-focus-quiet"`


Super nit pick, so not blocking or anything, but we don't really need both backticks and quotes here.

marissahuysentruyt · 2025-08-11T14:05:43Z

.changeset/green-falcons-rush.md

+---
+
+Remove unused key-focus and border mods. Also updates transition to use `background-color` instead of `border-color`.
+


Is it helpful to mention that mods were removed? is that a breaking change though? If it is, would this be a "major" bump instead of a patch?

They were all unused, so technically they would have stopped working with the last major bump, even though they were still declared in the file. To me that's why it feels less relevant to name them, but I'm open to other arguments.

But I'm wondering if I need to be a little clearer that this isn't where key-focus and border have been removed, because upon first glance that does make it sound like a major change. I'll add something to the changeset here.

marissahuysentruyt · 2025-08-11T15:19:33Z

components/pickerbutton/stories/pickerbutton.stories.js

@@ -25,69 +25,58 @@ export default {
 			options: ["ui", "workflow"],
 			control: "inline-radio",
 		},
-		iconName: {
+		uiIconName: {


I'm curious if picker button should also follow infield button's UI options. There's only 4 ui icons (of varying sizes) available, which prevents users from accidentally mismatching the button size from the UI icon size. Maybe that's not a worry if we add documentation that clearly correlates the picker button t-shirt size to an icon's size (I think clear button has a size table like that)

(this is an XL picker button with an Add75 icon, where Add75 should only be in the S picker button)

Oooh, I will add a table, I like that idea. Do you think that's sufficient? You'd still be able to set any size UI icon in Storybook but hopefully more documentation would discourage such uses in the wild.

marissahuysentruyt · 2025-08-11T15:43:39Z

components/pickerbutton/index.css

+	.spectrum-PickerButton--workflowicon & {
+		/* don't use padding tokens, rely on flexbox to center icons */


I'm not sure if this is the PR for this or not, but looking ahead to the date picker, there is specific 3px padding in the date picker infield button with a workflow icon. Just wanted to call that out...I don't really know what or if there's a solution. Maybe we need a mod, and we fallback to 0? There's a flex-shrink: 0- maybe that's got something to do with it? 🤷‍♀️

Actually, I think I only see this issue when I specifically change to workflow icons in the storybook controls. When I use the controls, it just really makes the icon FILL that button space. Maybe it's a storybook issue. When looking at the date picker in this branch, it looks totally fine. 😅

Do you mean that in date picker, it more or less looks as spec’d, but in the picker button storybook, the icon’s taking up too much space?

If so, this is because the size is being deliberately adjusted to fit the spec in date picker, because the spec'd icon size is 14px by 14px, which looks maybe a little tiny to me, but feels proportionally correct to the size of the infield button (which I think is 20px for the fill size?).

But the default workflow icon size is 20px for medium, which is why it fills it up in the picker button storybook. Since we don't really have guidance that says that workflow icons should always be 14px within infield button and we don't really know what they might be for other sizes (date picker only comes in M, I believe), it felt more natural to just let the workflow icon be its size by default in picker button, then adjust it to match the spec if it's used somewhere like it is in date picker.

But I'd agree that it looks bad. And the best way to control the size is with --mod-icon-size, so not even a picker button pass through. Definitely open to other ideas on displaying this or controlling icon size.

Yes- that was exactly what I was getting at. Sorry I was being confusing.

I still don't really have much of an answer but...I'm fine with leaving it as is.

marissahuysentruyt · 2025-08-11T16:14:37Z

components/pickerbutton/index.css

+	.spectrum-PickerButton {
+		--highcontrast-picker-button-background-color: ButtonText;
+		--highcontrast-picker-button-icon-color: ButtonFace;
+		forced-color-adjust: none; /* keeps button from flashing when hovered */


Not this again! I think you were the one who figured out this fix, and it's saved us in several components now! 🥳

- separate ui and workflow icon args in order to allow storybook controls for each - remove the old custom icon story - still TODO: fighting with the mod icon size

- use --mod-icon-size for both ui and workflow icons instead - remove padding calculation for workflow icons; if a workflow icon is used, there is no padding but flexbox will center the icon instead - add some custom styles for picker button in datepicker template... do we like the way that works? - use custom sized icons in the custom icon story, to show they work for workflow and ui icons - update the metadata

- Remove quotes from update mods list in changeset - Update infield button changeset to clarify that no styles were harmed here :) - Update docs page to include a mention of date picker and a table for guidance on which size UI icon to use.

marissahuysentruyt

This looks good to me! It'll be nice to really comb through the components like this one when SWC's migrations start really hitting their strides!

rise-erpelding added S2 Spectrum 2 wip This is a work in progress, don't judge. labels Aug 6, 2025

rise-erpelding force-pushed the rise-erpelding/picker-button-s2 branch 2 times, most recently from f707f74 to e4ec7ab Compare August 6, 2025 18:19

rise-erpelding commented Aug 7, 2025

View reviewed changes

rise-erpelding force-pushed the rise-erpelding/picker-button-s2 branch 2 times, most recently from c9df23c to fafc538 Compare August 7, 2025 00:54

rise-erpelding added run_vrt For use on PRs looking to kick off VRT ready-for-review and removed wip This is a work in progress, don't judge. labels Aug 7, 2025

rise-erpelding marked this pull request as ready for review August 7, 2025 01:18

rise-erpelding added the size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. label Aug 7, 2025

rise-erpelding self-assigned this Aug 7, 2025

aramos-adobe approved these changes Aug 8, 2025

View reviewed changes

marissahuysentruyt reviewed Aug 11, 2025

View reviewed changes

rise-erpelding added 12 commits August 11, 2025 12:38

docs(infieldbutton): remove unused invalid state from template

6433d6f

fix(infieldbutton): remove unused keyfocus and border mods

34fe8b0

feat(pickerbutton): add hover/active states to tests and controls

12cf7d8

docs(pickerbutton): update params

04e71ab

refactor(pickerbutton): pull out rounded and position variants

04a16b4

docs(pickerbutton): remove focus state from template

8642064

feat(pickerbutton): migrate CSS to S2

a9dc9be

feat(pickerbutton): remove label variant

d48a7af

feat(pickerbutton): support custom sized workflow icons

f3a1f1d

docs(pickerbutton): docs updates

ac55669

- separate ui and workflow icon args in order to allow storybook controls for each - remove the old custom icon story - still TODO: fighting with the mod icon size

chore(pickerbutton): changeset

ce13a91

rise-erpelding added 2 commits August 11, 2025 12:38

feat(pickerbutton,infieldbutton): WHCM support

2a6acc8

docs(pickerbutton): a few PR updates

13238b6

- Remove quotes from update mods list in changeset - Update infield button changeset to clarify that no styles were harmed here :) - Update docs page to include a mention of date picker and a table for guidance on which size UI icon to use.

rise-erpelding force-pushed the rise-erpelding/picker-button-s2 branch from e3d4d98 to 13238b6 Compare August 11, 2025 18:56

rise-erpelding requested a review from marissahuysentruyt August 11, 2025 18:57

marissahuysentruyt approved these changes Aug 11, 2025

View reviewed changes

rise-erpelding merged commit 7061eee into spectrum-two Aug 11, 2025
15 checks passed

rise-erpelding deleted the rise-erpelding/picker-button-s2 branch August 11, 2025 19:20

github-actions bot mentioned this pull request Aug 11, 2025

chore: release (next) #4127

Open

		- `"--mod-picker-button-background-color-key-focus"`
		- `"--mod-picker-button-background-color-key-focus-quiet"`

		---

		Remove unused key-focus and border mods. Also updates transition to use `background-color` instead of `border-color`.

		.spectrum-PickerButton--workflowicon & {
		/* don't use padding tokens, rely on flexbox to center icons */

feat(pickerbutton): migrate to s2 #4114

feat(pickerbutton): migrate to s2 #4114

Uh oh!

Conversation

rise-erpelding commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

changeset-bot bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

infieldbutton

pickerbutton

Uh oh!

github-actions bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch preview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aramos-adobe left a comment

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rise-erpelding commented Aug 6, 2025 •

edited

Loading

changeset-bot bot commented Aug 6, 2025 •

edited

Loading

github-actions bot commented Aug 6, 2025 •

edited

Loading

github-actions bot commented Aug 6, 2025 •

edited

Loading

rise-erpelding Aug 11, 2025 •

edited

Loading

rise-erpelding Aug 11, 2025 •

edited

Loading