fix(Button): Outline

werein · Feb 4, 2022 · 38b040c · 38b040c
1 parent 9c0f910
commit 38b040c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",