From 38b040cfdef6a8be46d47386a0b8d0cefc44011c Mon Sep 17 00:00:00 2001
From: Jiri Kolarik <jiri.kolarik@wereinhq.com>
Date: Fri, 4 Feb 2022 22:27:52 +0100
Subject: [PATCH] fix(Button): Outline

---
 src/button-group/button-group.stories.tsx | 10 ++++++++++
 src/button-group/button-group.tsx         |  7 +++++--
 src/button/button.stories.tsx             |  9 +++++++++
 src/button/button.tsx                     | 12 ++++++++++--
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/button-group/button-group.stories.tsx b/src/button-group/button-group.stories.tsx
index 0736891..4c45121 100644
--- a/src/button-group/button-group.stories.tsx
+++ b/src/button-group/button-group.stories.tsx
@@ -74,3 +74,13 @@ WithLinks.args = {
     { children: "Button 3" },
   ],
 };
+
+export const DifferentScheme = Template.bind({});
+DifferentScheme.args = {
+  outline: true,
+  buttons: [
+    { children: "Button", appearance: ButtonAppearance.outline },
+    { children: "Button 2", to: "#", appearance: ButtonAppearance.outline },
+    { children: "Button 3", appearance: ButtonAppearance.primary },
+  ],
+};
diff --git a/src/button-group/button-group.tsx b/src/button-group/button-group.tsx
index c6bdc3f..aff9ec0 100644
--- a/src/button-group/button-group.tsx
+++ b/src/button-group/button-group.tsx
@@ -13,6 +13,7 @@ export default function ButtonGroup(props: {
   radius?: ButtonRadius;
   appearance?: ButtonAppearance;
   size?: SIZE[keyof SIZE];
+  outline?: boolean;
 }) {
   const [, theme] = useStyletron();
 
@@ -63,7 +64,8 @@ export default function ButtonGroup(props: {
               {...prop}
               to={prop.to}
               target={prop.target}
-              appearance={props.appearance}
+              appearance={props.appearance || prop.appearance}
+              outline={props.outline || prop.outline}
               size={props.size}
               style={{
                 ...prop.style,
@@ -77,7 +79,8 @@ export default function ButtonGroup(props: {
         return (
           <Button
             {...prop}
-            appearance={props.appearance}
+            appearance={props.appearance || prop.appearance}
+            outline={props.outline || prop.outline}
             size={props.size}
             style={{
               ...prop.style,
diff --git a/src/button/button.stories.tsx b/src/button/button.stories.tsx
index 5a4ff9d..a5236b3 100644
--- a/src/button/button.stories.tsx
+++ b/src/button/button.stories.tsx
@@ -79,3 +79,12 @@ CustomWidthStartEnhancer.args = {
   isLoading: false,
   style: { width: "250px" },
 };
+
+export const Outline = Template.bind({});
+Outline.args = {
+  children: "Button",
+  appearance: ButtonAppearance.primary,
+  outline: true,
+  disabled: false,
+  isLoading: false,
+};
diff --git a/src/button/button.tsx b/src/button/button.tsx
index 0e03106..6d73819 100644
--- a/src/button/button.tsx
+++ b/src/button/button.tsx
@@ -32,12 +32,20 @@ export type ButtonProps = PropsWithChildren<{
   overrides?: ButtonOverrides;
   startEnhancer?: ReactNode;
   endEnhancer?: ReactNode;
+  outline?: boolean;
 }>;
 
 export default function Button(props: ButtonProps) {
   const [css, theme] = useStyletron();
 
-  const { appearance, size, overrides = {}, style = {}, radius } = props;
+  const {
+    appearance,
+    size,
+    overrides = {},
+    style = {},
+    radius,
+    outline,
+  } = props;
   const kind =
     props.appearance === ButtonAppearance.outline
       ? ButtonAppearance.minimal
@@ -53,7 +61,7 @@ export default function Button(props: ButtonProps) {
               ...(props.startEnhancer || props.endEnhancer
                 ? { justifyContent: "space-between" }
                 : {}),
-              ...(appearance === ButtonAppearance.outline
+              ...(appearance === ButtonAppearance.outline || outline
                 ? border({
                     style: "solid",
                     width: "2px",