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.

Sign up for GitHub

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

Jump to bottom

feat(button): migrate to Spectrum 2 #2600

Merged
merged 11 commits into from
May 1, 2024
Merged

feat(button): migrate to Spectrum 2 #2600

merged 11 commits into from
May 1, 2024

Commits on Apr 30, 2024

  1. 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.
    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    21fafef View commit details
    Browse the repository at this point in the history

  2. 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.
    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    597d33f View commit details
    Browse the repository at this point in the history

  3. 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.
    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    a54d232 View commit details
    Browse the repository at this point in the history

  4. 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.
    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    101e3a6 View commit details
    Browse the repository at this point in the history

  5. 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.
    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    c0bcdc4 View commit details
    Browse the repository at this point in the history

  6. 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
    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    70ba1d2 View commit details
    Browse the repository at this point in the history

  7. 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.
    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    0e1d611 View commit details
    Browse the repository at this point in the history

  8. chore(button): add changeset

    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    fd2ac1d View commit details
    Browse the repository at this point in the history

  9. 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.
    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    c830cc9 View commit details
    Browse the repository at this point in the history

  10. chore(button): clear up linter warnings 

    Fixes warnings and errors from stylelint and eslint.
    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    b81a129 View commit details
    Browse the repository at this point in the history

  11. 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).
    @jawinn
    jawinn committed Apr 30, 2024
    Configuration menu
    Copy the full SHA
    bcb00e0 View commit details
    Browse the repository at this point in the history