feat(picker): migrate to spectrum 2 #2697
Open
+10,162
−8,876
Conversation
This file contains 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: a755dfd 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.31 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
Comment on lines
+254
to
+262
| transform: perspective(max( | ||
| var(--spectrum-downstate-height, var(--mod-picker-block-size, var(--spectrum-picker-block-size))), | ||
| var(--spectrum-downstate-width, var(--mod-picker-inline-size, var(--spectrum-picker-inline-size))) * var(--spectrum-component-size-width-ratio-down) | ||
| )) |
There was a problem hiding this comment.
I'm not sure about this use of custom properties for the width and height. If a user sets the --mod-picker-inline-size to 100%, that'll mess up the math there and won't show a down state. Should I just leave out the --mod custom properties from the fallback chain? Or not have a default at all? Or something else?
There was a problem hiding this comment.
Hmm yeah this is tricky. Maybe an additional mod specific to downstate size at the front of the chain?
|
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).
Includes new color values for Spectrum 2
BREAKING CHANGE: migrates `Action Group` to Spectrum 2, Removes some mod properties
BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes
BREAKING CHANGE: uses Spectrum 2 tokens
- @spectrum-css/preview@7.4.2-next.0 - @spectrum-css/actiongroup@5.0.0-next.0 - @spectrum-css/buttongroup@7.0.0-next.0 - @spectrum-css/tokens@14.0.0-next.0 - @spectrum-css/bundle-builder@6.3.1-next.0 - @spectrum-css/component-builder-simple@5.0.1-next.0 - @spectrum-css/component-builder@6.0.1-next.0
BREAKING CHANGE: migrates Close Button to Spectrum 2 Additionally: * test: increase chromatic coverage * fix(closebutton): pass staticColor as arg for SB display * chore(closebutton): remove themes dir * docs(closebutton): adds s2 migration notes * chore(closebutton): specify s2 tokens release for dependency --------- Co-authored-by: Patrick Fulton <pfulton@adobe.com>
* chore: migrate gray-50 to gray-25 Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide * chore: migrate gray-75 to gray-50 Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide. * chore: migrate gray-100 to gray-75 Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide * chore: migrate gray-200 to gray-100 Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide * chore: migrate gray-300 to gray-200 Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide * chore(infieldbutton): gray-300 to gray-200
- @spectrum-css/preview@8.1.0-next.1 - @spectrum-css/accordion@4.2.7-next.2 - @spectrum-css/actionbar@7.2.5-next.2 - @spectrum-css/actionbutton@5.2.7-next.2 - @spectrum-css/actiongroup@5.0.0-next.3 - @spectrum-css/actionmenu@5.1.4-next.2 - @spectrum-css/alertbanner@1.1.42-next.2 - @spectrum-css/alertdialog@1.2.5-next.2 - @spectrum-css/asset@4.0.1-next.2 - @spectrum-css/assetcard@3.1.5-next.2 - @spectrum-css/assetlist@5.2.5-next.2 - @spectrum-css/avatar@6.1.6-next.2 - @spectrum-css/badge@3.2.6-next.2 - @spectrum-css/breadcrumb@8.2.6-next.2 - @spectrum-css/button@14.0.0-next.4 - @spectrum-css/buttongroup@7.0.0-next.3 - @spectrum-css/calendar@4.2.6-next.2 - @spectrum-css/card@7.0.3-next.2 - @spectrum-css/checkbox@14.0.0-next.4 - @spectrum-css/clearbutton@5.1.5-next.2 - @spectrum-css/closebutton@5.0.0-next.2 - @spectrum-css/coachindicator@1.1.6-next.2 - @spectrum-css/coachmark@6.1.6-next.2 - @spectrum-css/colorarea@4.1.6-next.2 - @spectrum-css/colorhandle@7.1.5-next.2 - @spectrum-css/colorloupe@4.2.5-next.2 - @spectrum-css/colorslider@5.1.6-next.2 - @spectrum-css/colorwheel@3.1.6-next.2 - @spectrum-css/combobox@2.1.7-next.2 - @spectrum-css/commons@9.1.4-next.1 - @spectrum-css/contextualhelp@2.1.6-next.2 - @spectrum-css/datepicker@2.1.5-next.2 - @spectrum-css/dial@2.2.5-next.2 - @spectrum-css/dialog@9.2.5-next.2 - @spectrum-css/divider@2.2.6-next.2 - @spectrum-css/dropindicator@4.1.5-next.2 - @spectrum-css/dropzone@5.2.6-next.2 - @spectrum-css/fieldgroup@4.2.5-next.2 - @spectrum-css/fieldlabel@8.0.0-next.2 - @spectrum-css/floatingactionbutton@1.2.6-next.2 - @spectrum-css/helptext@4.1.6-next.2 - @spectrum-css/icon@6.0.6-next.2 - @spectrum-css/illustratedmessage@6.1.6-next.2 - @spectrum-css/infieldbutton@4.2.5-next.2 - @spectrum-css/inlinealert@7.1.7-next.2 - @spectrum-css/link@4.2.6-next.2 - @spectrum-css/logicbutton@3.3.5-next.2 - @spectrum-css/menu@6.1.6-next.2 - @spectrum-css/miller@5.1.5-next.2 - @spectrum-css/modal@4.2.7-next.2 - @spectrum-css/opacitycheckerboard@1.1.6-next.2 - @spectrum-css/page@7.1.5-next.2 - @spectrum-css/pagination@7.1.7-next.2 - @spectrum-css/picker@7.2.8-next.2 - @spectrum-css/pickerbutton@4.1.6-next.2 - @spectrum-css/popover@6.2.6-next.2 - @spectrum-css/progressbar@3.1.6-next.2 - @spectrum-css/progresscircle@2.2.4-next.2 - @spectrum-css/radio@8.1.6-next.2 - @spectrum-css/rating@4.2.5-next.2 - @spectrum-css/search@6.2.5-next.2 - @spectrum-css/sidenav@4.2.5-next.2 - @spectrum-css/site@4.2.5-next.2 - @spectrum-css/slider@4.3.6-next.2 - @spectrum-css/splitview@4.2.5-next.2 - @spectrum-css/statuslight@6.1.7-next.2 - @spectrum-css/steplist@4.1.5-next.2 - @spectrum-css/stepper@5.1.6-next.2 - @spectrum-css/swatch@5.1.6-next.2 - @spectrum-css/swatchgroup@2.1.6-next.2 - @spectrum-css/switch@4.2.6-next.2 - @spectrum-css/table@5.2.6-next.2 - @spectrum-css/tabs@4.1.5-next.2 - @spectrum-css/tag@8.1.6-next.2 - @spectrum-css/taggroup@4.1.6-next.2 - @spectrum-css/textfield@6.1.7-next.2 - @spectrum-css/thumbnail@5.2.5-next.2 - @spectrum-css/toast@9.1.26-next.2 - @spectrum-css/tooltip@5.3.6-next.2 - @spectrum-css/tray@2.2.8-next.2 - @spectrum-css/treeview@9.2.7-next.2 - @spectrum-css/typography@5.1.6-next.2 - @spectrum-css/underlay@3.2.5-next.2 - @spectrum-css/well@4.1.5-next.2 - @spectrum-css/generator@2.1.1-next.0 - @spectrum-css/tokens@14.0.0-next.6
* feat(switch): s2 migration * chore: remove themes * fix: animation * fix: whcm light mode unchecked handle shows * docs(storybook): align chromatic setup with new standard * fix: checked corners for non-retina display * fix: whcm handle selected color * fix: namespace mods, use semantic tokens instead of global * fix: handle state colors
* chore(tokens): use spectrum-tokens@13.0.0-beta.30 * chore: add changeset
* chore: release (next) * docs: reset changes to changelog --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Patrick Fulton <pfulton@adobe.com>
* feat(fieldlabel)!: s2 migration (#2569) BREAKING CHANGE: uses Spectrum 2 tokens Also: * feat(fieldlabel): medium as default and 100 sizing tokens - Use the correct "100" sized tokens for medium. - Make medium styles the default, to conform with existing pattern. .spectrum-FieldLabel--sizeM class removed as it is no longer necessary. * feat(fieldlabel): use correct font size tokens The font-size tokens used for large and extra large needed to be shifted up to match the s2 spec. * refactor(fieldlabel): remove deprecated mods Remove renamed mods marked as deprecated for S2 release. * docs(fieldlabel): spectrum 2 noted in migration notes Updates some docs and adds migration notes. Clarifies some docs around "left" and "right", and fixes duplicate ID warnings from examples code. * docs(fieldlabel): form - docs update and regenerate mods Add migration guide section to "Form", that currently lives within the Field label component. Regenerates mods to include the removal of deprecated renamed mods. * fix(fieldlabel): rename mod property referencing global token A mod custom property was referencing a global token instead of the component itself. Renames this and adds a note to the migration guide. * feat(fieldlabel): use correct sizing tokens Use correct tokens for some large and extra large custom properties, to matching with design. * style(fieldlabel): applying linter formatting adjustments Run linter fix on the fieldlabel component, which rearranges a few declarations. * docs(fieldlabel): document asterisk icon size Add documentation about asterisk UI icon sizes specified on the design. These sizes are already handled in the Storybook template, but were not really explained to the user. * feat(fieldlabel): black and white static color variants Add classes for static colors, as defined on the designs. And adds examples of these variants to the documentation. * build(fieldlabel): specify s2 tokens release for dependency Use Spectrum 2 version of tokens package in dependencies list. * chore: rebase against main and update components to use prerelease tokens * chore: run branch through format; update pathing and fix errors * chore: add changeset for css update --------- Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Patrick Fulton <pfulton@adobe.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
* refactor(button): spectrum 2 styles and cleanup Spectrum 2 changes to CSS: - integrate themes css into main css - use s2 corner rounding - use s2 colors Cleanup items of note: - make medium size the default - consolidate and organize focus indicator styles. Some declarations were repeated. - Rename mod for font weight that was referencing a global token instead of a component specific name. - simplify repetitive disabled custom properties - removed some unused css; static variant declarations at the end of the file were being overridden by more specific styles - remove unused is-selected, emphasized, and quiet classes that are not used on this component - remove the spectrum-Button--fill class. it was already the default. * fix(button): high contrast - ensure matching color pairs for accent Ensures that a matching background and foreground color pair is used for the high contrast colors, for Accent hover, down, and focus. Changes the content color to HighlightText to ensure contrast when these have a background set to Highlight. * docs(button): update documentation and storybook for s2 - Some improvements and additions to the spectrum 2 release notes. - Updates migration guide notes to include version and dates for the previous notes. - Removes spectrum-Button--sizeM class from examples. Excludes the spectrum-Button--sizeM class in the storybook template. - Removes medium size class from storybook - Fixes default flex alignment stretching buttons vertically in Storybook to the tallest button. * fix(button): calculate corner rounding to support wrapping design Calculate corner rounding based on the component height, so that the rounding looks correct when there is wrapping text. Otherwise, when the button wraps, it has too much rounding as compared to the design when using the corner-radius-full token. * feat(button): outline option removals and use accent as the default Removes the outline option for the accent and negative variants, and makes sure that the accent variant is the default. == outline option removal == Per design feedback and updated design spec changelog, the outline treatment (style) is no longer supported for the Accent and Negative color variants: "Outline buttons are no longer available in accent and negative options — use the filled variant instead" This removes their CSS, lists the change in the migration notes, and disables the treatment control for the Accent and Negative stories. It also removes the outline example in the template for those two stories. == use accent as the default == Use accent styles for the default button when there is no variant class applied, to match the default defined on the guidelines. * fix(button): additional s2 style adjustments and organization - make usage of edge to visual values consistent - use full corner rounding on icon-only variant, which does not need to account for wrapping text - correct static white secondary outline background color, per PR review - chore: apply linter formatting * docs(button): custom mdx docs page Create an MDX "Docs" page that works as a replacement for the YML docs pages, and covers the important Button options from there and the guidelines. Adds the tag "is-hidden-story" for excluding Storybook sidebar items. * chore(button): add changeset * build(button): use beta version of commons dependency Since the commons version on main was updated to 10.0, the Button started building with the wrong version of commons when importing basebutton.css and listing mods that have been removed in the version of commons in the spectrum-two branch. * chore(button): clear up linter warnings Fixes warnings and errors from stylelint and eslint. * fix(button): correct focus indicator rounding and basebutton mod The focus indicator rounding needed an additional calc in order to have the correct rounding. While testing --mod-button-focus-ring-gap and some other mods, it was also noticed that a declaration being imported from basebutton was causing some of the mod names to be different and the mod to not work correctly (basebutton is generating a selector for the margin of .spectrum-Button:focus-visible::after).
* chore: release s2 button (next) --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Patrick Fulton <360251+pfulton@users.noreply.github.com>
- Integrate themes CSS files into index.css - Corrects the chevron icon size being shown for each size in storybook - Uses new S2 tokens for field width and corner rounding
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. 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. Adds aria-labelledby and unique ids to make sure the label is associated with the Picker. Adds missing icon (to left of value/placeholder text) option to Storybook, along with VRT coverage.
Fixes several problems with colors not matching the spec, caused by a few specificity issues. Some disabled states were showing changing colors on hover. Resolved with some added specificity to a disabled selector and excluding disabled from the is-open styles.
Add new down state using "calculated perspective" method, and existing custom properties that define the width and height.
Clear up linter warnings. Removes an unused custom property.
Since the commons version on main was updated to 10.0, the Picker started building with the wrong version of commons when importing basebutton.css and listing mods that have been removed in the version of commons in the spectrum-two branch.
Fixes the loading state in high contrast not showing the disabled chevron color on hover, and disables the down state on disabled and loading. Some added specificity was necessary.
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.
Adds example with overflow behavior in Chromatic only template, so this is captured in VRTs. Also adds Sizing + quiet section, and passes through isDisabled to the Help text.
Adds the CJK line-height token defined on the design specs.
jawinn
force-pushed
the
jawinn/css-617-s2-picker
branch
from
ded1555
to
448761c
Compare
The top to alert icon in Spectrum 2 now uses the component-top-to-workflow-icon-* tokens as defined on the design.
|
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. |
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