feat(picker): migrate to spectrum 2 #2697
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 31d6a43 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
jawinn
force-pushed
the
jawinn/css-617-s2-picker
branch
from
6ace85b to
221a5e6
Compare
|
🚀 Deployed on https://pr-2697--spectrum-css.netlify.app |
File metricsSummaryTotal size: 4.23 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
Detailspicker
* Results are not gzipped or minified. * An ASCII character in UTF-8 is 8 bits or 1 byte. |
jawinn
force-pushed
the
jawinn/css-617-s2-picker
branch
from
221a5e6 to
a9e5768
Compare
castastrophe
force-pushed
the
spectrum-two
branch
5 times, most recently
from
6dbc850 to
ae7aedd
Compare
jawinn
force-pushed
the
jawinn/css-617-s2-picker
branch
from
dc56977 to
20866aa
Compare
jawinn
commented
Apr 29, 2024
|
Looking at this in forced-colors, I see that the chevron is the disabled color when the loader is present. That is intentional? On hover it changes color, which I'm guessing should not be the case. |
Yep, my understanding based on chatting with Lynn is that when progress circle is enabled, the component becomes disabled. May be worth checking if that's the case for this component as well since that convo was in the context of the Button component. |
|
Quick note the we've previously had some issues with Chromatic cutting off screenshots. We should definitely run the VRTs on this to make sure it's able to see everything. |
mdt2
reviewed
Apr 29, 2024
There was a problem hiding this comment.
This is looking good, Josh! Pretty big effort. A couple comments for you.
One other thing is that the spacing around the disclosure icon might need some work. For example, on a medium picker that's invalid, the spec says the alert icon to disclosure icon spacing should be picker-visual-to-disclosure-icon-medium, but I see it still set to --spectrum-picker-spacing-text-to-icon which is assigned to --spectrum-text-to-visual-100).
There was a problem hiding this comment.
This looks really good! The Storybook testing preview for this is much improved! 🎉
I only noted a few very small things in the comments in addition to the things that Melissa noted (I like the idea of looking into a specific downstate size mod to deal with those custom properties there).
pfulton
force-pushed
the
spectrum-two
branch
2 times, most recently
from
e0e0fd2 to
698e904
Compare
jawinn
force-pushed
the
jawinn/css-617-s2-picker
branch
from
ded1555 to
448761c
Compare
|
Thanks for looking this over. I've made some updates to address the comments and suggestions so far:
I've also made sure that text truncation of the placeholder text is now captured in the Chromatic template, along with Sizing + Quiet. |
jawinn
force-pushed
the
jawinn/css-617-s2-picker
branch
from
a755dfd to
27e5907
Compare
jawinn
force-pushed
the
jawinn/css-617-s2-picker
branch
from
1b9a3ff to
36fd306
Compare
|
This is ready for a re-review. I've curated and squashed these commits down to 5 from about 17. There are some followup (can be post-merge) items that I've created in CSS-777. It also will be necessary to change a couple CSS selectors based on what ends up being decided in the bug fix to main #2737 (ideally before merge). |
There was a problem hiding this comment.
Hey! This looks really good and my only callouts now are pretty small:
I'm seeing spacing-200/12px for "Spacing (minimum, field label to field)" for what looks like the spacing between the side label and picker, but I only see 8px of spacing, should there be more?
Should there be Help Text anywhere in the Storybook for Picker or has that been intentionally left out here? (Is it tested in a different component, maybe?)
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 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.
jawinn
force-pushed
the
jawinn/css-617-s2-picker
branch
from
975d542 to
31d6a43
Compare
This was when "open" gets toggled first before switching to the chromatic view. To avoid this I've updated those Chromatic templates to specify
I've put in a fix for this by adding
I've noticed some weirdness with the loading of the progress circle as well in other parts of Storybook; a hard refresh usually fixes it (such as on the S2 Docs page for Button->Pending state). The progress circle will be replaced with the in-field progress circle when that is created for S2, which is part of the followup Jira item CSS-777. We'll want to review some of the high contrast styles for both progress circle components when they're worked on (Button had specific high contrast styles worked on with those double borders you see in SWC, but I don't think those carried over to Progress circle itself. And we'll want to make sure they're the same on In-field progress circle). |
rise-erpelding
approved these changes
Jun 18, 2024
Merged
castastrophe
pushed a commit
that referenced
this pull request
Dec 27, 2024
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.
castastrophe
pushed a commit
that referenced
this pull request
Dec 29, 2024
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.
castastrophe
pushed a commit
that referenced
this pull request
Dec 29, 2024
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.
aramos-adobe
pushed a commit
that referenced
this pull request
Jan 9, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Jan 17, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Jan 17, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Jan 21, 2025
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.
7 tasks
aramos-adobe
pushed a commit
that referenced
this pull request
Jan 22, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Jan 22, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 5, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 7, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 7, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 7, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 11, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 24, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 24, 2025
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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 25, 2025
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.
12 tasks
This was referenced May 16, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Migrates the Picker component to use Spectrum 2 specifications.
Includes a total overhaul of the Chromatic-only Storybook template in order to increase coverage for this component's many options. This format was based off of the stories for Action button and the grid of Picker options in the S2 / Desktop Figma. See the "Show testing preview" within Storybook. A control for the optional workflow icon that appears to the left of the text within the Picker was added; this was previously on the YML docs but missing from Storybook.
This also fixes:
Mod custom property changes
--mod-picker-spacing-text-to-alert-icon-inline-startthat was previously marked for deprecation has been removed. This is replaced by--mod-picker-spacing-text-to-icon-inline-end.--mod-picker-spacing-starting-icon-to-textadded. This affects the optional starting workflow icon.--mod-picker-spacing-text-to-icon-inline-endThis affects text spacing to visual (indicator or disclosure).--mod-picker-spacing-text-to-iconremoved. This had been applied to different things and was affecting the inline end icon.CSS-617
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
Regression testing
Validate:
Screenshots
To-do list