From 294b4c4bb93359805423c520384a93c3707008a9 Mon Sep 17 00:00:00 2001
From: Ou/Olly Kunanan Tassuwan <kunanan.t@pomelofashion.com>
Date: Wed, 12 Oct 2022 04:16:08 +0700
Subject: [PATCH] fix(button): Typo outline button variant (#2393)

* fix: typo outline button hover style

* chore: update storybook of Button to support outline variant

* chore: add changeset

* test(button): update test snapshot

* chore(button): consistent storybook name

Co-authored-by: Josh Black <joshblack@github.com>
---
 .changeset/orange-pumas-develop.md               | 5 +++++
 src/Button/Button.stories.tsx                    | 8 ++++++++
 src/Button/styles.ts                             | 2 +-
 src/__tests__/__snapshots__/Button.test.tsx.snap | 2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/orange-pumas-develop.md

diff --git a/.changeset/orange-pumas-develop.md b/.changeset/orange-pumas-develop.md
new file mode 100644
index 00000000000..c199573854a
--- /dev/null
+++ 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
index a9ba2b3d64a..965058f8895 100644
--- 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
index c586faa0d58..2068f2a44bd 100644
--- 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
index 058707059d0..eb53d92bdc5 100644
--- 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;
 }