feat(component): add mobileWidth prop to Button (#435)

bigcommerce · Aug 21, 2020 · f04e120 · f04e120
1 parent 11b1dff
commit f04e120
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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'],