From bad7f4106f19f004ad9e42b871ec2fb2b401efa9 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Mon, 7 Sep 2020 05:50:12 +0800
Subject: [PATCH] Set sizing of button

Use 100% for `<button>` element because it is auto-size by default.
---
 lib/components/Button/Button.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/lib/components/Button/Button.tsx b/lib/components/Button/Button.tsx
index d545b89..64d6255 100644
--- a/lib/components/Button/Button.tsx
+++ b/lib/components/Button/Button.tsx
@@ -55,7 +55,10 @@ const disabledLinkButtonStyles: CSSObject = {
   ...disabledButtonStyles,
 }
 
-const Base = styled('button')(buttonStyles)
+const Base = styled('button')({
+  ...buttonStyles,
+  width: '100%',
+})
 
 Base.displayName = 'button'
 
@@ -170,6 +173,7 @@ const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpan
       rel,
       type = 'button',
       border = false,
+      ...etcProps
     },
     ref,
   ) => {
@@ -193,20 +197,21 @@ const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpan
     switch (element) {
       case 'button':
         return (
-          <Base type={type!} ref={ref as React.Ref<HTMLButtonElement>} disabled={disabled!} style={commonButtonStyles}>
+          <Base {...etcProps} type={type!} ref={ref as React.Ref<HTMLButtonElement>} disabled={disabled!} style={commonButtonStyles}>
             {buttonContent}
           </Base>
         )
       case 'a':
         if (disabled) {
           return (
-            <DisabledLinkBase ref={ref as React.Ref<HTMLSpanElement>} style={commonButtonStyles}>
+            <DisabledLinkBase {...etcProps} ref={ref as React.Ref<HTMLSpanElement>} style={commonButtonStyles}>
               {buttonContent}
             </DisabledLinkBase>
           )
         }
         return (
           <LinkBase
+            {...etcProps}
             href={href!}
             target={target!}
             rel={rel!}