Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

feat(picker): migrate to spectrum 2 #2697

Open
wants to merge 17 commits into
base: spectrum-two
Choose a base branch
from

Commits on May 15, 2024

  1. feat(picker): spectrum 2 migration

    - 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
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    35cf31b View commit details
    Browse the repository at this point in the history
  2. 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.
    
    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.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    b137924 View commit details
    Browse the repository at this point in the history
  3. fix(picker): use correct colors on hover of disabled state

    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.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    2618a97 View commit details
    Browse the repository at this point in the history
  4. feat(picker): add down state

    Add new down state using "calculated perspective" method, and existing
    custom properties that define the width and height.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    26ac516 View commit details
    Browse the repository at this point in the history
  5. chore(picker): clear up linter warnings

    Clear up linter warnings. Removes an unused custom property.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    5ea4408 View commit details
    Browse the repository at this point in the history
  6. build(picker): use beta version of commons dependency

    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.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    bd88882 View commit details
    Browse the repository at this point in the history
  7. Configuration menu
    Copy the full SHA
    ff65d2b View commit details
    Browse the repository at this point in the history
  8. fix(picker): high contrast loading hover and disabled down state

    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.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    c508ed1 View commit details
    Browse the repository at this point in the history
  9. 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.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    21c5d9b View commit details
    Browse the repository at this point in the history
  10. docs(picker): include text overflow and quiet sizing in vrts

    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.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    609b0da View commit details
    Browse the repository at this point in the history
  11. feat(picker): add support for cjk line-height

    Adds the CJK line-height token defined on the design specs.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    6907bb8 View commit details
    Browse the repository at this point in the history
  12. Configuration menu
    Copy the full SHA
    952fcf2 View commit details
    Browse the repository at this point in the history
  13. feat(picker): top to alert icon token change

    The top to alert icon in Spectrum 2 now uses the
    component-top-to-workflow-icon-* tokens as defined on the design.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    5a2c61a View commit details
    Browse the repository at this point in the history
  14. Configuration menu
    Copy the full SHA
    11e98db View commit details
    Browse the repository at this point in the history
  15. docs(picker): adjust helptext wrapper and add conditional controls

    Adjusts Picker Storybook markup for the example of using HelpText
    alongside the Picker.
    - Makes sure HelpText appears below the Picker when using side label
    - HelpText now gets set to the same t-shirt size as the Picker
    
    Adds conditional controls to disabled and loading states, per the
    PR feedback that disabled + loading should not be possible as a
    combination.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    e5e7450 View commit details
    Browse the repository at this point in the history
  16. feat(picker): include downstate dimension capture

    Include downstate dimension capture in Storybook.
    
    Removes fallback experiment from downstate tokens in the CSS, as they do
    not work when the inline-size or block-size token or mod gets set to
    auto or 100%.
    jawinn committed May 15, 2024
    Configuration menu
    Copy the full SHA
    27e5907 View commit details
    Browse the repository at this point in the history

Commits on May 28, 2024

  1. docs(picker): popover should not show when open

    Per design feedback, the popover should not be showing when the picker
    is in the loading state. This updates the Storybook template.
    jawinn committed May 28, 2024
    Configuration menu
    Copy the full SHA
    1b9a3ff View commit details
    Browse the repository at this point in the history