Skip to content

Commit

Permalink
feat(button): migrate to Spectrum 2 (#2600)
Browse files Browse the repository at this point in the history
* 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).
  • Loading branch information
jawinn authored and rise-erpelding committed May 7, 2024
1 parent 72c7d83 commit cf39673
Show file tree
Hide file tree
Showing 19 changed files with 1,146 additions and 1,127 deletions.
15 changes: 15 additions & 0 deletions .changeset/nine-kings-repair.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
"@spectrum-css/button": major
---

#### Spectrum 2 migration
Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes:
- Outline buttons are no longer available in accent and negative options — use the filled variant instead.
- Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed.
- The `.spectrum-Button--fill` class is no longer needed and has been removed.

The following `--mod` custom properties have been renamed:
- `--mod-line-height-100` has been renamed to `--mod-button-line-height`
- `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`
- `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`
- `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`
8 changes: 8 additions & 0 deletions .storybook/assets/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ body {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
}

.spectrum .spectrum-examples-static-black {
background: var(--spectrum-examples-gradient-static-black);
}

.spectrum .spectrum-examples-static-white {
background: var(--spectrum-examples-gradient-static-white)
}

/* Hide the SVG elements that only include references */
svg:has(symbol):not(:has(use)) {
display: none;
Expand Down
1 change: 1 addition & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const componentPkgs = readdirSync(componentsPath, {

module.exports = {
stories: [
"../components/*/stories/*.mdx",
"../components/*/stories/*.stories.js",
"./guides/*.mdx",
"./foundations/*/*.mdx",
Expand Down
2 changes: 1 addition & 1 deletion .storybook/manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ addons.setConfig({
sidebar: {
showRoots: false,
filters: {
patterns: (item) => !(item.id.includes('forced-colors') || item.tags.includes('foundation')),
patterns: (item) => !item.id.includes('forced-colors') && ['foundation','is-hidden-story'].every((tag) => !item.tags.includes(tag)),
}
},
});
495 changes: 355 additions & 140 deletions components/button/index.css

Large diffs are not rendered by default.

87 changes: 48 additions & 39 deletions components/button/metadata/button-accent.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,29 @@ sections:
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
- name: Migration Guide
description: |
### x/x/2024 - Version 13.0.0
### Version 13.0.0
#### Spectrum 2 release
Button now uses Spectrum 2 tokens and specifications. A few notable changes:
- The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
- The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
- The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
### Versions prior to 13.0.0
#### Fill or Outline class required
All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
#### CTA replaced by Accent with Fill
Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`.
Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes:
- Outline buttons are no longer available in accent and negative options — use the filled variant instead.
- Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed.
- The `.spectrum-Button--fill` class is no longer needed and has been removed.
The following `--mod` custom properties have been renamed:
- `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
- `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
- `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
- `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`.
### Version 11.0.0
#### Remove focus-ring class
We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
### Version 10.0.0
#### Icon Only
Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
Provide an `aria-label` on the button itself when using this variant for accessibility.
#### T-shirt sizing
Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
#### Change workflow icon size
Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
| Button classname | Workflow icon classname |
Expand All @@ -40,8 +40,17 @@ sections:
| `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` |
| `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` |
#### Remove focus-ring class
We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
### Version 6.0.0
#### Fill or Outline class required
All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
#### CTA replaced by Accent with Fill
Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`.
### Version 3.0.0
#### T-shirt sizing
Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
examples:
- id: button-accent
name: Sizing
Expand All @@ -50,18 +59,18 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS">
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeS">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS">
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeS">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit">
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit">
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
Expand All @@ -70,18 +79,18 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
<button class="spectrum-Button spectrum-Button--accent">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
<button class="spectrum-Button spectrum-Button--accent">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit">
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
Expand All @@ -91,18 +100,18 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL">
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeL">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL">
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeL">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit">
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit">
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
Expand All @@ -112,18 +121,18 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL">
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeXL">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL">
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeXL">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit">
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit">
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
Expand All @@ -136,18 +145,18 @@ examples:
markup: |
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent" disabled>
<button class="spectrum-Button spectrum-Button--accent" disabled>
<span class="spectrum-Button-label">Button</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent" disabled>
<button class="spectrum-Button spectrum-Button--accent" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
<button class="spectrum-Button spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
Expand Down Expand Up @@ -182,18 +191,18 @@ examples:
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM">
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent">
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM">
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit">
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
Expand Down Expand Up @@ -248,18 +257,18 @@ examples:
markup: |
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled>
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent" disabled>
<span class="spectrum-Button-label">Button</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled>
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
<span class="spectrum-Button-label">Edit</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
Expand Down
Loading

0 comments on commit cf39673

Please sign in to comment.