fix: buttons width

bigcommerce · Sep 25, 2020 · e5f5c7f · e5f5c7f
1 parent 62c33d6
commit e5f5c7f
Show file tree

Hide file tree

Showing 7 changed files with 315 additions and 99 deletions.
diff --git a/packages/big-design/src/components/InlineAlert/InlineAlert.tsx b/packages/big-design/src/components/InlineAlert/InlineAlert.tsx
@@ -8,7 +8,14 @@ import { Button } from '../Button';
 import { MessagingButton } from '../Button/private';
 import { GridItem } from '../Grid';
 
-import { StyledHeader, StyledInlineAlert, StyledLink, StyledMessageItem } from './styled';
+import {
+  StyledActionsWrapper,
+  StyledActionWrapper,
+  StyledHeader,
+  StyledInlineAlert,
+  StyledLink,
+  StyledMessageItem,
+} from './styled';
 
 export type InlineAlertProps = SharedMessagingProps & MarginProps;
 
@@ -31,13 +38,15 @@ export const InlineAlert: React.FC<InlineAlertProps> = memo(({ className, style,
   const renderedActions = useMemo(
     () =>
       props.actions && (
-        <Box marginTop="xSmall">
+        <StyledActionsWrapper marginTop="xSmall">
           {props.actions.map(({ text, ...actionProps }, index) => (
-            <Button key={index} {...actionProps}>
-              {text}
-            </Button>
+            <StyledActionWrapper key={index}>
+              <Button mobileWidth="auto" {...actionProps}>
+                {text}
+              </Button>
+            </StyledActionWrapper>
           ))}
-        </Box>
+        </StyledActionsWrapper>
       ),
     [props.actions],
   );

diff --git a/packages/big-design/src/components/InlineAlert/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/InlineAlert/__snapshots__/spec.tsx.snap
@@ -394,6 +394,46 @@ exports[`renders actions 1`] = `
 }
 
 .c8 {
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c10 {
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+}
+
+.c12 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -437,43 +477,43 @@ exports[`renders actions 1`] = `
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
-  width: 100%;
+  width: auto;
   background-color: transparent;
   border-color: transparent;
   color: #3C64F4;
 }
 
-.c8:focus {
+.c12:focus {
   outline: none;
 }
 
-.c8[disabled] {
+.c12[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c8 + .bd-button {
-  margin-top: 0.5rem;
+.c12 + .bd-button {
+  margin-left: 0.5rem;
 }
 
-.c8:active {
+.c12:active {
   background-color: #DBE3FE;
 }
 
-.c8:focus {
+.c12:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c8:hover:not(:active) {
+.c12:hover:not(:active) {
   background-color: #F0F3FF;
 }
 
-.c8[disabled] {
+.c12[disabled] {
   border-color: transparent;
   color: #D9DCE9;
 }
 
-.c10 {
+.c14 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color,border-color,box-shadow,color;
@@ -517,42 +557,42 @@ exports[`renders actions 1`] = `
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
-  width: 100%;
+  width: auto;
   background-color: #3C64F4;
   border-color: #3C64F4;
   font-weight: 600;
 }
 
-.c10:focus {
+.c14:focus {
   outline: none;
 }
 
-.c10[disabled] {
+.c14[disabled] {
   border-color: #D9DCE9;
   pointer-events: none;
 }
 
-.c10 + .bd-button {
-  margin-top: 0.5rem;
+.c14 + .bd-button {
+  margin-left: 0.5rem;
 }
 
-.c10:active {
+.c14:active {
   background-color: #0B38D9;
 }
 
-.c10:focus {
+.c14:focus {
   box-shadow: 0 0 0 0.25rem #DBE3FE;
 }
 
-.c10:hover:not(:active) {
+.c14:hover:not(:active) {
   background-color: #2852EB;
 }
 
-.c10[disabled] {
+.c14[disabled] {
   background-color: #D9DCE9;
 }
 
-.c9 {
+.c13 {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
@@ -606,28 +646,62 @@ exports[`renders actions 1`] = `
   margin-bottom: 0;
 }
 
+.c9 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-bottom: -0.5rem;
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.c11 {
+  margin-bottom: 0.5rem;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+@media (min-width:0px) {
+  .c8 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
 @media (min-width:720px) {
-  .c8 + .bd-button {
+  .c8 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+}
+
+@media (min-width:720px) {
+  .c12 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c8 {
+  .c12 {
     width: auto;
   }
 }
 
 @media (min-width:720px) {
-  .c10 + .bd-button {
+  .c14 + .bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
 @media (min-width:720px) {
-  .c10 {
+  .c14 {
     width: auto;
   }
 }
@@ -673,30 +747,38 @@ exports[`renders actions 1`] = `
        
     </div>
     <div
-      class="c7"
+      class="c7 c8 c9"
     >
-      <button
-        class="c8 bd-button"
-        role="button"
-        tabindex="0"
+      <div
+        class="c0 c10 c11"
       >
-        <span
-          class="c9"
+        <button
+          class="c12 bd-button"
+          role="button"
+          tabindex="0"
         >
-          First Action
-        </span>
-      </button>
-      <button
-        class="c10 bd-button"
-        role="button"
-        tabindex="0"
+          <span
+            class="c13"
+          >
+            First Action
+          </span>
+        </button>
+      </div>
+      <div
+        class="c0 c10 c11"
       >
-        <span
-          class="c9"
+        <button
+          class="c14 bd-button"
+          role="button"
+          tabindex="0"
         >
-          Second Action
-        </span>
-      </button>
+          <span
+            class="c13"
+          >
+            Second Action
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </div>

diff --git a/packages/big-design/src/components/InlineAlert/styled.ts b/packages/big-design/src/components/InlineAlert/styled.ts
@@ -2,6 +2,7 @@ import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import styled, { css, DefaultTheme, StyledComponent } from 'styled-components';
 
 import { getBorderStyle } from '../../utils';
+import { Flex, FlexItem } from '../Flex';
 import { Grid } from '../Grid';
 import { Link } from '../Link';
 import { StyleableH4, StyleableSmall } from '../Typography/private';
@@ -46,7 +47,23 @@ export const StyledLink = styled(Link)`
   vertical-align: middle;
 `;
 
+export const StyledActionsWrapper = styled(Flex)`
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: -${({ theme }) => theme.spacing.xSmall};
+  margin-left: -${({ theme }) => theme.spacing.xxSmall};
+  margin-right: -${({ theme }) => theme.spacing.xxSmall};
+`;
+
+export const StyledActionWrapper = styled(FlexItem)`
+  margin-bottom: ${({ theme }) => theme.spacing.xSmall};
+  margin-left: ${({ theme }) => theme.spacing.xxSmall};
+  margin-right: ${({ theme }) => theme.spacing.xxSmall};
+`;
+
 StyledInlineAlert.defaultProps = { theme: defaultTheme };
 StyledHeader.defaultProps = { theme: defaultTheme };
 StyledMessageItem.defaultProps = { theme: defaultTheme };
 StyledLink.defaultProps = { theme: defaultTheme };
+StyledActionsWrapper.defaultProps = { theme: defaultTheme };
+StyledActionWrapper.defaultProps = { theme: defaultTheme };
diff --git a/packages/big-design/src/components/Message/Message.tsx b/packages/big-design/src/components/Message/Message.tsx
@@ -8,7 +8,14 @@ import { Button } from '../Button';
 import { MessagingButton } from '../Button/private';
 import { GridItem } from '../Grid';
 
-import { StyledHeader, StyledLink, StyledMessage, StyledMessageItem } from './styled';
+import {
+  StyledActionsWrapper,
+  StyledActionWrapper,
+  StyledHeader,
+  StyledLink,
+  StyledMessage,
+  StyledMessageItem,
+} from './styled';
 
 export type MessageProps = SharedMessagingProps & MarginProps;
 
@@ -31,13 +38,15 @@ export const Message: React.FC<MessageProps> = memo(({ className, style, header,
   const renderedActions = useMemo(
     () =>
       props.actions && (
-        <Box marginTop="xSmall">
+        <StyledActionsWrapper marginTop="xSmall">
           {props.actions.map(({ text, ...actionProps }, index) => (
-            <Button key={index} {...actionProps}>
-              {text}
-            </Button>
+            <StyledActionWrapper key={index}>
+              <Button mobileWidth="auto" {...actionProps}>
+                {text}
+              </Button>
+            </StyledActionWrapper>
           ))}
-        </Box>
+        </StyledActionsWrapper>
       ),
     [props.actions],
   );