Merge branch 'main' into markdown-suggestions-fixes

primer · Oct 12, 2022 · d832344 · d832344
2 parents 42b583d + 294b4c4
commit d832344
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/orange-pumas-develop.md b/.changeset/orange-pumas-develop.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fix invalid hover outline variant of the Button component
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
@@ -50,6 +50,14 @@ export const invisibleButton = (args: ButtonProps) => {
   )
 }
 
+export const outlineButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="outline">
+      Outline
+    </Button>
+  )
+}
+
 export const iconBeforeButton = (args: ButtonProps) => {
   return (
     <Button leadingIcon={SearchIcon} {...args}>

diff --git a/src/Button/styles.ts b/src/Button/styles.ts
@@ -132,7 +132,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&:hover:not([disabled])': {
         color: 'btn.outline.hoverText',
         backgroundColor: 'btn.outline.hoverBg',
-        borderColor: 'outline.hoverBorder',
+        borderColor: 'btn.outline.hoverBorder',
         boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
         '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.outline.hoverCounterBg',

diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -550,7 +550,7 @@ exports[`Button styles outline button appropriately 1`] = `
 .c0:hover:not([disabled]) {
   color: btn.outline.hoverText;
   background-color: btn.outline.hoverBg;
-  border-color: outline.hoverBorder;
+  border-color: btn.outline.hoverBorder;
   box-shadow: undefined;
 }