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

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fix invalid hover outline variant of the Button component

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}>

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',

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;
 }