chore: replace flex props

bigcommerce · Sep 30, 2020 · 59da87e · 59da87e
1 parent 905f500
commit 59da87e
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 56 deletions.
diff --git a/packages/big-design/src/components/InlineAlert/InlineAlert.tsx b/packages/big-design/src/components/InlineAlert/InlineAlert.tsx
@@ -31,7 +31,7 @@ export const InlineAlert: React.FC<InlineAlertProps> = memo(({ className, style,
   const renderedActions = useMemo(
     () =>
       props.actions && (
-        <StyledActionsWrapper marginTop="xSmall">
+        <StyledActionsWrapper flexDirection="row" flexWrap="wrap" marginTop="xSmall">
           {props.actions.map(({ text, variant = 'secondary', ...actionProps }, index) => (
             <Button
               key={index}

diff --git a/packages/big-design/src/components/InlineAlert/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/InlineAlert/__snapshots__/spec.tsx.snap
@@ -426,9 +426,12 @@ exports[`renders actions 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -579,33 +582,11 @@ exports[`renders actions 1`] = `
 }
 
 .c10 {
-  -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;
 }
 
-@media (min-width:0px) {
-  .c9 {
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-  }
-}
-
-@media (min-width:720px) {
-  .c9 {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-}
-
 @media (min-width:720px) {
   .c11 + .bd-button {
     margin-top: 0;

diff --git a/packages/big-design/src/components/InlineAlert/styled.ts b/packages/big-design/src/components/InlineAlert/styled.ts
@@ -48,8 +48,6 @@ export const StyledLink = styled(Link)`
 `;
 
 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};

diff --git a/packages/big-design/src/components/Message/Message.tsx b/packages/big-design/src/components/Message/Message.tsx
@@ -31,7 +31,7 @@ export const Message: React.FC<MessageProps> = memo(({ className, style, header,
   const renderedActions = useMemo(
     () =>
       props.actions && (
-        <StyledActionsWrapper marginTop="xSmall">
+        <StyledActionsWrapper flexDirection="row" flexWrap="wrap" marginTop="xSmall">
           {props.actions.map(({ text, variant = 'secondary', ...actionProps }, index) => (
             <Button
               key={index}

diff --git a/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap
@@ -422,9 +422,12 @@ exports[`renders actions 1`] = `
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
@@ -574,33 +577,11 @@ exports[`renders actions 1`] = `
 }
 
 .c10 {
-  -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;
 }
 
-@media (min-width:0px) {
-  .c9 {
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-  }
-}
-
-@media (min-width:720px) {
-  .c9 {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-  }
-}
-
 @media (min-width:720px) {
   .c11 + .bd-button {
     margin-top: 0;

diff --git a/packages/big-design/src/components/Message/styled.ts b/packages/big-design/src/components/Message/styled.ts
@@ -46,8 +46,6 @@ export const StyledLink = styled(Link)`
 `;
 
 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};