-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Button)!: introduce v2.0 component (#1889)
- completely rebuild component to match updated design and API - add new tests and snapshots - preserve v1 for now, for comparisons and avoiding snapshot churn - fix v2 type issues - add v2 stories for disabled
- Loading branch information
1 parent
d5782cd
commit a6b446f
Showing
3 changed files
with
632 additions
and
0 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,306 @@ | ||
| @import '../../design-tokens/mixins.css'; | ||
|
|
||
| /*------------------------------------*\ | ||
| # BUTTON | ||
| \*------------------------------------*/ | ||
|
|
||
| .button { | ||
| position: relative; | ||
| border-radius: var(--eds-border-radius-full); | ||
| border: var(--eds-border-width-sm) solid; | ||
| overflow: hidden; | ||
| display: flex; | ||
| } | ||
|
|
||
| .button__text { | ||
| display: flex; | ||
| gap: 0.25rem; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
||
| width: 100%; | ||
| } | ||
|
|
||
| .button__text.button--is-loading { | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| .button__loader { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
|
|
||
| width: 100%; | ||
| height: 100%; | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| /** | ||
| * Sizes and Widths | ||
| */ | ||
| .button--lg { | ||
| padding: 0.5rem 1.25rem; | ||
| font: var(--eds-theme-typography-button-lg); | ||
|
|
||
| min-width: 4.5rem; | ||
| max-width: 20rem; | ||
| max-height: 2.5rem; | ||
| } | ||
|
|
||
| .button--md { | ||
| padding: 0.25rem 1rem; | ||
| font: var(--eds-theme-typography-button-md); | ||
|
|
||
| min-width: 3.75rem; | ||
| max-width: 16rem; | ||
| max-height: 2rem; | ||
| } | ||
|
|
||
| .button--sm { | ||
| padding: 0.25rem 1.33333333rem; | ||
| /* TODO: need eds-theme-typography-button-sm => preset-009 */ | ||
| font: var(--eds-typography-preset-009); | ||
|
|
||
| min-width: 3rem; | ||
| max-width: 12rem; | ||
| max-height: 1.5rem; | ||
| } | ||
|
|
||
| .button--full-width { | ||
| width: 100%; | ||
| } | ||
|
|
||
| /** | ||
| * Anatomy and iconLayout (w/ size) | ||
| */ | ||
| .button--layout-icon-only { | ||
| min-width: unset; | ||
| } | ||
|
|
||
| .button--lg.button--layout-left { | ||
| padding-left: 1rem; | ||
| } | ||
|
|
||
| .button--lg.button--layout-right { | ||
| padding-right: 1rem; | ||
| } | ||
|
|
||
| .button--lg.button--layout-icon-only { | ||
| padding: 0.5rem; | ||
| } | ||
|
|
||
| .button--md.button--layout-icon-only { | ||
| padding: 0.5rem | ||
| } | ||
|
|
||
| .button--sm.button--layout-icon-only { | ||
| padding: 0.25rem; | ||
| } | ||
|
|
||
| .button:focus-visible { | ||
| outline: none; | ||
| box-shadow: 0 0 0 0.125rem var(--eds-theme-color-background-utility-base-1), 0 0 0 0.25rem var(--eds-theme-color-border-utility-focus); | ||
| } | ||
|
|
||
| /* stylelint-disable-next-line eds/no-tier-1-color-variable */ | ||
| .button.button--variant-inverse:focus-visible { | ||
| outline: none; | ||
| box-shadow: 0 0 0 0.125rem var(--eds-color-black), 0 0 0 0.25rem var(--eds-theme-color-background-utility-base-1); | ||
| } | ||
|
|
||
| /** | ||
| * Rank & Emphasis | ||
| */ | ||
| .button--primary.button--variant-default { | ||
| color: var(--eds-theme-color-text-utility-inverse); | ||
| background-color: var(--eds-theme-color-background-utility-interactive-high-emphasis); | ||
| border-color: var(--eds-theme-color-background-utility-interactive-high-emphasis); | ||
| } | ||
|
|
||
| .button--secondary.button--variant-default { | ||
| color: var(--eds-theme-color-background-utility-interactive-high-emphasis); | ||
| border-color: currentColor; | ||
| background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis); | ||
| } | ||
|
|
||
| .button--tertiary.button--variant-default { | ||
| color: var(--eds-theme-color-background-utility-interactive-high-emphasis); | ||
| border-color: var(--eds-theme-color-background-utility-interactive-no-emphasis); | ||
| background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis); | ||
| } | ||
|
|
||
| .button--tertiary.button--context-standalone { | ||
| color: var(--eds-theme-color-text-utility-interactive-secondary); | ||
| } | ||
|
|
||
| /** | ||
| * Button status variants | ||
| */ | ||
| .button--primary.button--variant-critical { | ||
| color: var(--eds-theme-color-text-utility-inverse); | ||
| border-color: var(--eds-theme-color-background-utility-critical-high-emphasis); | ||
| background-color: var(--eds-theme-color-background-utility-critical-high-emphasis); | ||
| } | ||
|
|
||
| .button--secondary.button--variant-critical { | ||
| color: var(--eds-theme-color-background-utility-critical-high-emphasis); | ||
| border-color: currentColor; | ||
| background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis); | ||
| } | ||
|
|
||
| .button--tertiary.button--variant-critical { | ||
| color: var(--eds-theme-color-background-utility-critical-high-emphasis); | ||
| border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis); | ||
| } | ||
|
|
||
| /** | ||
| * Inverse | ||
| */ | ||
|
|
||
| .button--primary.button--variant-inverse { | ||
| color: var(--eds-theme-color-text-utility-neutral-primary); | ||
| border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis); | ||
| background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis); | ||
| } | ||
|
|
||
| .button--secondary.button--variant-inverse { | ||
| color: var(--eds-theme-color-text-utility-inverse); | ||
| border-color: currentColor; | ||
| background-color: var(--eds-theme-color-background-utility-interactive-high-emphasis); | ||
| } | ||
|
|
||
| .button--tertiary.button--variant-inverse { | ||
| color: var(--eds-theme-color-text-utility-inverse); | ||
| border-color: var(--eds-theme-color-background-utility-interactive-high-emphasis); | ||
| background-color: var(--eds-theme-color-background-utility-interactive-high-emphasis); | ||
| } | ||
|
|
||
| /** | ||
| * Disabled | ||
| */ | ||
|
|
||
| .button--variant-default.button--disabled, | ||
| .button--variant-critical.button--disabled { | ||
| color: var(--eds-theme-color-text-utility-disabled-primary); | ||
| border-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis); | ||
| background-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis); | ||
|
|
||
| pointer-events: none; | ||
| } | ||
|
|
||
| .button--variant-inverse.button--disabled { | ||
| color: var(--eds-theme-color-text-utility-inverse-disabled); | ||
| border-color: var(--eds-theme-color-background-utility-inverse-disabled); | ||
| background-color: var(--eds-theme-color-background-utility-inverse-disabled); | ||
|
|
||
| pointer-events: none; | ||
| } | ||
|
|
||
| /** | ||
| * States | ||
| */ | ||
|
|
||
| /* Hover */ | ||
| .button--variant-default:hover { | ||
| background-color: var(--eds-theme-color-border-utility-interactive-hover); | ||
| border-color: var(--eds-theme-color-border-utility-interactive-hover); | ||
| } | ||
|
|
||
| .button--secondary.button--variant-default:hover, | ||
| .button--tertiary.button--variant-default:hover { | ||
| color: var(--eds-theme-color-text-utility-interactive-primary-hover); | ||
|
|
||
| background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover); | ||
| border-color: var(--eds-theme-color-border-utility-interactive-hover); | ||
| } | ||
|
|
||
| .button--tertiary.button--variant-default:hover { | ||
| border-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover); | ||
| } | ||
|
|
||
| .button--variant-critical:hover { | ||
| background-color: var(--eds-theme-color-background-utility-critical-high-emphasis-hover); | ||
| border-color: var(--eds-theme-color-background-utility-critical-high-emphasis-hover); | ||
| } | ||
|
|
||
| .button--secondary.button--variant-critical:hover, | ||
| .button--tertiary.button--variant-critical:hover { | ||
| color: var(--eds-theme-color-text-utility-critical-hover); | ||
|
|
||
| background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-hover); | ||
| border-color: var(--eds-theme-color-border-utility-critical-hover); | ||
| } | ||
|
|
||
| .button--tertiary.button--variant-critical:hover { | ||
| border-color: var(--eds-theme-color-background-utility-critical-no-emphasis-hover); | ||
| } | ||
|
|
||
| .button--primary.button--variant-inverse:hover { | ||
| background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis-hover) | ||
| } | ||
|
|
||
| .button--secondary.button--variant-inverse:hover, | ||
| .button--tertiary.button--variant-inverse:hover { | ||
| background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-hover); | ||
| } | ||
|
|
||
| .button--tertiary.button--variant-inverse:hover { | ||
| /* TODO-AH: b/c of opacity, the background and borders stack, causing a faint border */ | ||
| border-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-hover); | ||
| } | ||
|
|
||
| .button--tertiary.button--context-standalone:hover { | ||
| color: var(--eds-theme-color-text-utility-interactive-secondary-hover); | ||
|
|
||
| } | ||
|
|
||
| /* Active */ | ||
| .button--variant-default:active { | ||
| background-color: var(--eds-theme-color-border-utility-interactive-active); | ||
| border-color: var(--eds-theme-color-border-utility-interactive-active); | ||
| } | ||
|
|
||
| .button--secondary.button--variant-default:active, | ||
| .button--tertiary.button--variant-default:active { | ||
| color: var(--eds-theme-color-text-utility-neutral-primary-active); | ||
|
|
||
| background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active); | ||
| border-color: var(--eds-theme-color-border-utility-interactive-active); | ||
| } | ||
|
|
||
| .button--tertiary.button--variant-default:active { | ||
| border-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active); | ||
| } | ||
|
|
||
| .button--variant-critical:active { | ||
| background-color: var(--eds-theme-color-background-utility-critical-high-emphasis-active); | ||
| border-color: var(--eds-theme-color-background-utility-critical-high-emphasis-active); | ||
| } | ||
|
|
||
| .button--secondary.button--variant-critical:active, | ||
| .button--tertiary.button--variant-critical:active { | ||
| color: var(--eds-theme-color-text-utility-critical-active); | ||
|
|
||
| background-color: var(--eds-theme-color-background-utility-critical-no-emphasis-active); | ||
| border-color: var(--eds-theme-color-border-utility-critical-active); | ||
| } | ||
|
|
||
| .button--tertiary.button--variant-critical:active { | ||
| border-color: var(--eds-theme-color-background-utility-critical-no-emphasis-active); | ||
| } | ||
|
|
||
| .button--primary.button--variant-inverse:active { | ||
| background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis-active); | ||
| } | ||
|
|
||
| .button--secondary.button--variant-inverse:active, | ||
| .button--tertiary.button--variant-inverse:active { | ||
| background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-active); | ||
| } | ||
|
|
||
| .button--tertiary.button--context-standalone:active { | ||
| color: var(--eds-theme-color-text-utility-interactive-secondary-active); | ||
| } |
Oops, something went wrong.