From 054c9fbd972b2bad9fa944c9ae1c1273817dab3f Mon Sep 17 00:00:00 2001
From: Daniel Almaguer <daniel.almaguer@bigcommerce.com>
Date: Thu, 20 Aug 2020 10:51:42 -0500
Subject: [PATCH] feat(component): add mobileWidth prop to Button

---
 packages/big-design/src/components/Button/Button.tsx | 6 ++++--
 packages/big-design/src/components/Button/styled.tsx | 5 +++--
 packages/docs/PropTables/ButtonPropTable.tsx         | 6 ++++++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/big-design/src/components/Button/Button.tsx b/packages/big-design/src/components/Button/Button.tsx
index 38afa481e..8f3d4d4e3 100644
--- a/packages/big-design/src/components/Button/Button.tsx
+++ b/packages/big-design/src/components/Button/Button.tsx
@@ -15,6 +15,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Ma
   iconOnly?: React.ReactNode;
   iconRight?: React.ReactNode;
   isLoading?: boolean;
+  mobileWidth?: 'auto' | '100%';
   variant?: 'primary' | 'secondary' | 'subtle';
 }
 
@@ -57,9 +58,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ className, s
 ));
 
 const defaultProps = {
-  actionType: 'normal' as 'normal',
+  actionType: 'normal' as const,
   isLoading: false,
-  variant: 'primary' as 'primary',
+  mobileWidth: '100%' as const,
+  variant: 'primary' as const,
 };
 
 Button.displayName = 'Button';
diff --git a/packages/big-design/src/components/Button/styled.tsx b/packages/big-design/src/components/Button/styled.tsx
index 38d7f7340..b3c02a575 100644
--- a/packages/big-design/src/components/Button/styled.tsx
+++ b/packages/big-design/src/components/Button/styled.tsx
@@ -36,7 +36,7 @@ export const StyledButton = styled.button<ButtonProps & MarginProps>`
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
-  width: 100%;
+  width: ${({ mobileWidth }) => (mobileWidth === 'auto' ? 'auto' : '100%')};
 
   &:focus {
     outline: none;
@@ -48,7 +48,8 @@ export const StyledButton = styled.button<ButtonProps & MarginProps>`
   }
 
   & + .bd-button {
-    margin-top: ${({ theme }) => theme.spacing.xSmall};
+    margin-top: ${({ mobileWidth, theme }) => mobileWidth === '100%' && theme.spacing.xSmall};
+    margin-left: ${({ mobileWidth, theme }) => mobileWidth === 'auto' && theme.spacing.xSmall};
 
     ${({ theme }) => theme.breakpoints.tablet} {
       margin-top: ${({ theme }) => theme.spacing.none};
diff --git a/packages/docs/PropTables/ButtonPropTable.tsx b/packages/docs/PropTables/ButtonPropTable.tsx
index 503b27f7e..b326ea0d3 100644
--- a/packages/docs/PropTables/ButtonPropTable.tsx
+++ b/packages/docs/PropTables/ButtonPropTable.tsx
@@ -66,6 +66,12 @@ const buttonProps: Prop[] = [
     defaultValue: 'false',
     description: 'Used to determine if component is in a loading state.',
   },
+  {
+    name: 'mobileWidth',
+    types: ['auto', '100%'],
+    defaultValue: '100%',
+    description: 'Determines the width in mobile viewport.',
+  },
   {
     name: 'variant',
     types: ['primary', 'secondary', 'subtle'],