feat(Button)!: introduce button v2.0

- completely rebuild component to match updated design and API - add new tests and snapshots - preserve v1 for now, for comparisons and avoiding snapshot churn
chanzuckerberg · Mar 12, 2024 · 55ee58d · 55ee58d
1 parent d5782cd
commit 55ee58d
Show file tree

Hide file tree

Showing 3 changed files with 618 additions and 0 deletions.
diff --git a/src/components/Button/Button-v2.module.css b/src/components/Button/Button-v2.module.css
@@ -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);
+}