feat(Button): update interactive styles for tertiary buttons (#1970)

- updates and clarifications to documentation
chanzuckerberg · May 31, 2024 · 288da8c · 288da8c
1 parent 9dea463
commit 288da8c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 22 deletions.
diff --git a/src/components/Button/Button-v2.module.css b/src/components/Button/Button-v2.module.css
@@ -200,6 +200,7 @@
   }
 }
 
+/* TODO-AH: EDS-1344 confirm color: var(--eds-theme-color-text-utility-interactive-secondary-hover) and -active */
 .button--secondary.button--variant-neutral {
   color: var(--eds-theme-color-text-utility-default-secondary);
   border-color: currentColor;
@@ -216,18 +217,19 @@
   }
 }
 
+/* TODO-AH: EDS-1344 confirm color: var(--eds-theme-color-text-utility-interactive-secondary-hover) and -active */
 .button--tertiary.button--variant-neutral {
   color: var(--eds-theme-color-text-utility-default-secondary);
   border-color: transparent;
   background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
 
   &:hover {
-    border-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover);
     background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
   }
 
   &:active {
-    border-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
+    border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active);
     background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
   }
 }
@@ -314,7 +316,7 @@
 }
 
 .button--tertiary.button--variant-default:hover {
-  border-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
+  border-color: var(--eds-theme-color-border-utility-interactive-hover);
 }
 
 .button--variant-critical:hover {
@@ -331,7 +333,7 @@
 }
 
 .button--tertiary.button--variant-critical:hover {
-  border-color: var(--eds-theme-color-background-utility-critical-no-emphasis-hover);
+  border-color: var(--eds-theme-color-border-utility-critical-hover);
 }
 
 .button--primary.button--variant-inverse:hover {
@@ -344,7 +346,7 @@
 }
 
 .button--tertiary.button--variant-inverse:hover {
-  border-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-hover);
+  border-color: var(--eds-theme-color-border-utility-inverse);
 }
 
 .button--tertiary.button--context-standalone:hover {
@@ -366,7 +368,7 @@
 }
 
 .button--tertiary.button--variant-default:active {
-  border-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
+  border-color: var(--eds-theme-color-border-utility-interactive-active);
 }
 
 .button--variant-critical:active {
@@ -382,14 +384,6 @@
   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);

diff --git a/src/components/Button/Button-v2.stories.tsx b/src/components/Button/Button-v2.stories.tsx
@@ -215,13 +215,13 @@ function ExtendedButton(args: ExtendArgs) {
  * Steps to use:
  *
  * * import `ButtonProps`
- * * use the type param. to augment the types for `Button` with the libraries type, e.g., `type ExtendedProps = ButtonProps<typeof CustomButton>;`
+ * * use the type param. to augment the types for `Button` with the libraries type, e.g., `type ExtendedProps = ButtonProps<CustomButtonProps>;`
  * * Now export a new function component that uses the new prop type and returns a composed function
  *
  * When using this pattern, you likely want to also specify the library's Button component using `as`
  *
  * ```tsx
- * type ExtendedProps = ButtonProps<typeof CustomButton>;
+ * type ExtendedProps = ButtonProps<CustomButtonType>;
  *
  * export default function Button({children, ...other}: ExtendedProps) {
  *   return (
@@ -235,12 +235,12 @@ function ExtendedButton(args: ExtendArgs) {
 export const UsingExtendedLink: StoryObj<ExtendArgs> = {
   render: (args) => (
     <div>
-      Lorem ipsum dolor sit amet,{' '}
+      Lorem ipsum dolor sit amet, . Morbi porta at ante quis molestie. Nam
+      scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id
+      tellus ante.{' '}
       <ExtendedButton {...args} to="test">
         consectetur adipiscing elit
       </ExtendedButton>
-      . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis.
-      Nullam sit amet iaculis erat. Nulla id tellus ante.{' '}
     </div>
   ),
 };
diff --git a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap
@@ -554,7 +554,7 @@ exports[`<Button /> (v2) TertiaryStandalone story renders snapshot 1`] = `
 
 exports[`<Button /> (v2) UsingExtendedLink story renders snapshot 1`] = `
 <div>
-  Lorem ipsum dolor sit amet,
+  Lorem ipsum dolor sit amet, . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
    
   <button
     class="button button--layout-none button--primary button--lg button--variant-default"
@@ -567,8 +567,6 @@ exports[`<Button /> (v2) UsingExtendedLink story renders snapshot 1`] = `
       consectetur adipiscing elit
     </span>
   </button>
-  . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante.
-   
 </div>
 `;