Revert bordered button, pill change (#3971)

jpmorganchase · Aug 9, 2024 · 52c8064 · 52c8064
1 parent 30c4216
commit 52c8064
Show file tree

Hide file tree

Showing 24 changed files with 159 additions and 887 deletions.
diff --git a/.changeset/button-changes.md b/.changeset/button-changes.md
diff --git a/.changeset/silent-beds-promise.md b/.changeset/silent-beds-promise.md
diff --git a/.changeset/sour-turtles-itch.md b/.changeset/sour-turtles-itch.md
diff --git a/packages/core/src/button/Button.css b/packages/core/src/button/Button.css
@@ -1,3 +1,51 @@
+/* Styles applied to the root element if variant="cta" */
+.saltButton-cta {
+  --button-background: var(--salt-actionable-cta-background);
+  --button-background-active: var(--salt-actionable-cta-background-active);
+  --button-background-disabled: var(--salt-actionable-cta-background-disabled);
+  --button-background-hover: var(--salt-actionable-cta-background-hover);
+  --button-text-color: var(--salt-actionable-cta-foreground);
+  --button-text-color-active: var(--salt-actionable-cta-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);
+  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);
+  --button-borderColor: var(--salt-actionable-cta-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-cta-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-cta-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-cta-borderColor-disabled);
+}
+
+/* Styles applied to the root element if variant="primary" (or no variant specified) */
+.saltButton-primary {
+  --button-background: var(--salt-actionable-primary-background);
+  --button-background-active: var(--salt-actionable-primary-background-active);
+  --button-background-disabled: var(--salt-actionable-primary-background-disabled);
+  --button-background-hover: var(--salt-actionable-primary-background-hover);
+  --button-text-color: var(--salt-actionable-primary-foreground);
+  --button-text-color-active: var(--salt-actionable-primary-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);
+  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);
+  --button-borderColor: var(--salt-actionable-primary-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-primary-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-primary-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-primary-borderColor-disabled);
+}
+
+/* Styles applied to the root element if variant="secondary" */
+.saltButton-secondary {
+  --button-background: var(--salt-actionable-secondary-background);
+  --button-background-active: var(--salt-actionable-secondary-background-active);
+  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);
+  --button-background-hover: var(--salt-actionable-secondary-background-hover);
+  --button-text-color: var(--salt-actionable-secondary-foreground);
+  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);
+  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);
+  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);
+  --button-borderColor: var(--salt-actionable-secondary-borderColor);
+  --button-borderColor-hover: var(--salt-actionable-secondary-borderColor-hover);
+  --button-borderColor-active: var(--salt-actionable-secondary-borderColor-active);
+  --button-borderColor-disabled: var(--salt-actionable-secondary-borderColor-disabled);
+}
+
 .saltButton {
   align-items: var(--saltButton-alignItems, center);
   appearance: none;
@@ -84,93 +132,3 @@
   cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));
   border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));
 }
-
-.saltButton-accent.saltButton-solid {
-  --button-text-color: var(--salt-actionable-accent-bold-foreground);
-  --button-text-color-hover: var(--salt-actionable-accent-bold-foreground-hover);
-  --button-text-color-active: var(--salt-actionable-accent-bold-foreground-active);
-  --button-text-color-disabled: var(--salt-actionable-accent-bold-foreground-disabled);
-  --button-background: var(--salt-actionable-accent-bold-background);
-  --button-background-active: var(--salt-actionable-accent-bold-background-active);
-  --button-background-disabled: var(--salt-actionable-accent-bold-background-disabled);
-  --button-background-hover: var(--salt-actionable-accent-bold-background-hover);
-  --button-borderColor: var(--salt-actionable-accent-bold-borderColor);
-  --button-borderColor-hover: var(--salt-actionable-accent-bold-borderColor-hover);
-  --button-borderColor-active: var(--salt-actionable-accent-bold-borderColor-active);
-  --button-borderColor-disabled: var(--salt-actionable-accent-bold-borderColor-disabled);
-}
-
-.saltButton-accent.saltButton-outline {
-  --button-text-color: var(--salt-actionable-accent-foreground);
-  --button-text-color-hover: var(--salt-actionable-accent-foreground-hover);
-  --button-text-color-active: var(--salt-actionable-accent-foreground-active);
-  --button-text-color-disabled: var(--salt-actionable-accent-foreground-disabled);
-  --button-background: var(--salt-actionable-accent-background);
-  --button-background-hover: var(--salt-actionable-accent-background-hover);
-  --button-background-active: var(--salt-actionable-accent-background-active);
-  --button-background-disabled: var(--salt-actionable-accent-background-disabled);
-  --button-borderColor: var(--salt-actionable-accent-borderColor);
-  --button-borderColor-hover: var(--salt-actionable-accent-borderColor-hover);
-  --button-borderColor-active: var(--salt-actionable-accent-borderColor-active);
-  --button-borderColor-disabled: var(--salt-actionable-accent-borderColor-disabled);
-}
-
-.saltButton-accent.saltButton-transparent {
-  --button-text-color: var(--salt-actionable-accent-subtle-foreground);
-  --button-text-color-hover: var(--salt-actionable-accent-subtle-foreground-hover);
-  --button-text-color-active: var(--salt-actionable-accent-subtle-foreground-active);
-  --button-text-color-disabled: var(--salt-actionable-accent-subtle-foreground-disabled);
-  --button-background: var(--salt-actionable-accent-subtle-background);
-  --button-background-hover: var(--salt-actionable-accent-subtle-background-hover);
-  --button-background-active: var(--salt-actionable-accent-subtle-background-active);
-  --button-background-disabled: var(--salt-actionable-accent-subtle-background-disabled);
-  --button-borderColor: var(--salt-actionable-accent-subtle-borderColor);
-  --button-borderColor-hover: var(--salt-actionable-accent-subtle-borderColor-hover);
-  --button-borderColor-active: var(--salt-actionable-accent-subtle-borderColor-active);
-  --button-borderColor-disabled: var(--salt-actionable-accent-subtle-borderColor-disabled);
-}
-
-.saltButton-neutral.saltButton-solid {
-  --button-text-color: var(--salt-actionable-bold-foreground);
-  --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);
-  --button-text-color-active: var(--salt-actionable-bold-foreground-active);
-  --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);
-  --button-background: var(--salt-actionable-bold-background);
-  --button-background-hover: var(--salt-actionable-bold-background-hover);
-  --button-background-active: var(--salt-actionable-bold-background-active);
-  --button-background-disabled: var(--salt-actionable-bold-background-disabled);
-  --button-borderColor: var(--salt-actionable-bold-borderColor);
-  --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);
-  --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);
-  --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);
-}
-
-.saltButton-neutral.saltButton-outline {
-  --button-text-color: var(--salt-actionable-foreground);
-  --button-text-color-hover: var(--salt-actionable-foreground-hover);
-  --button-text-color-active: var(--salt-actionable-foreground-active);
-  --button-text-color-disabled: var(--salt-actionable-foreground-disabled);
-  --button-background: var(--salt-actionable-background);
-  --button-background-hover: var(--salt-actionable-background-hover);
-  --button-background-active: var(--salt-actionable-background-active);
-  --button-background-disabled: var(--salt-actionable-background-disabled);
-  --button-borderColor: var(--salt-actionable-borderColor);
-  --button-borderColor-hover: var(--salt-actionable-borderColor-hover);
-  --button-borderColor-active: var(--salt-actionable-borderColor-active);
-  --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);
-}
-
-.saltButton-neutral.saltButton-transparent {
-  --button-text-color: var(--salt-actionable-subtle-foreground);
-  --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);
-  --button-text-color-active: var(--salt-actionable-subtle-foreground-active);
-  --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);
-  --button-background: var(--salt-actionable-subtle-background);
-  --button-background-hover: var(--salt-actionable-subtle-background-hover);
-  --button-background-active: var(--salt-actionable-subtle-background-active);
-  --button-background-disabled: var(--salt-actionable-subtle-background-disabled);
-  --button-borderColor: var(--salt-actionable-subtle-borderColor);
-  --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
-  --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
-  --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);
-}
diff --git a/packages/core/src/button/Button.tsx b/packages/core/src/button/Button.tsx
@@ -14,11 +14,7 @@ import { useButton } from "./useButton";
 const withBaseName = makePrefixer("saltButton");
 
 export const ButtonVariantValues = ["primary", "secondary", "cta"] as const;
-export const AppearanceValues = ["solid", "outline", "transparent"] as const;
-export const ButtonColorValues = ["accent", "neutral"] as const;
 export type ButtonVariant = (typeof ButtonVariantValues)[number];
-export type Appearance = (typeof AppearanceValues)[number];
-export type ButtonColor = (typeof ButtonColorValues)[number];
 
 export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
   /**
@@ -32,28 +28,8 @@ export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
   /**
    * The variant to use. Options are 'primary', 'secondary' and 'cta'.
    * 'primary' is the default value.
-   * @deprecated Use `appearance` and `color` instead.
    */
   variant?: ButtonVariant;
-  /**
-   * The type of the button. Options are 'solid', 'outline', and 'transparent'.
-   */
-  appearance?: Appearance;
-  /**
-   * The color of the button. Options are 'accent' and 'neutral'.
-   */
-  color?: ButtonColor;
-}
-
-function variantToAppearanceAndColor(variant: ButtonVariant) {
-  switch (variant) {
-    case "primary":
-      return { appearance: "solid", color: "neutral" };
-    case "secondary":
-      return { appearance: "transparent", color: "neutral" };
-    case "cta":
-      return { appearance: "solid", color: "accent" };
-  }
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -67,8 +43,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onKeyDown,
       onBlur,
       onClick,
-      appearance: appearanceProp,
-      color: colorProp,
       type = "button",
       variant = "primary",
       ...restProps
@@ -91,10 +65,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       window: targetWindow,
     });
 
-    const mapped = variantToAppearanceAndColor(variant);
-    const appearance = appearanceProp ?? mapped.appearance;
-    const color = colorProp ?? mapped.color;
-
     // we do not want to spread tab index in this case because the button element
     // does not require tabindex="0" attribute
     const { tabIndex, ...restButtonProps } = buttonProps;
@@ -107,8 +77,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           {
             [withBaseName("disabled")]: disabled,
             [withBaseName("active")]: active,
-            [withBaseName(appearance)]: appearance,
-            [withBaseName(color)]: color,
           },
           className,
         )}

diff --git a/packages/core/src/file-drop-zone/FileDropZoneTrigger.tsx b/packages/core/src/file-drop-zone/FileDropZoneTrigger.tsx
@@ -1,15 +1,16 @@
 import {
   type ChangeEvent,
   type FocusEvent,
+  type HTMLAttributes,
   type SyntheticEvent,
   forwardRef,
   useRef,
 } from "react";
-import { Button, type ButtonProps } from "../button";
+import { Button } from "../button";
 import { useForkRef } from "../utils";
 
 export interface FileDropZoneTriggerProps
-  extends Omit<ButtonProps, "onChange"> {
+  extends Omit<HTMLAttributes<HTMLButtonElement>, "onChange"> {
   /**
    * `accept` attribute for HTML <input>.
    *

diff --git a/packages/core/src/pill-input/PillInput.css b/packages/core/src/pill-input/PillInput.css
@@ -283,12 +283,20 @@
 }
 
 .saltPillInput .saltPill:focus-visible {
-  background: var(--salt-content-foreground-highlight);
-  color: var(--salt-content-primary-foreground);
-  border-color: transparent;
+  background: var(--salt-selectable-background-hover);
   outline: none;
 }
 
+.saltPillInput .saltPill:hover {
+  background: var(--salt-selectable-background-hover);
+}
+
+.saltPillInput .saltPill:active {
+  background: var(--salt-actionable-primary-background-active);
+  --saltPill-color: var(--salt-actionable-primary-foreground-active);
+  --saltIcon-color: var(--salt-actionable-primary-foreground-active);
+}
+
 div[role="listitem"] {
   display: inline;
 }