feat(input): Add a Flex.modules CSS file to share flexbox styles amon…

…g components
telus · Sep 11, 2017 · 1a15b60 · 1a15b60
1 parent b7e9c40
commit 1a15b60
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 15 deletions.
diff --git a/src/components/Flexbox.modules.scss b/src/components/Flexbox.modules.scss
@@ -0,0 +1,9 @@
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/src/components/Input/Input.modules.scss b/src/components/Input/Input.modules.scss
@@ -8,8 +8,7 @@
 .inputWrapper {
   composes: thin rounded from '../Borders.modules.scss';
 
-  display: flex;
-  flex-direction: row;
+  composes: row from '../Flexbox.modules.scss';
   align-items: center;
 }
 

diff --git a/src/components/Input/WithSpacing/WithSpacing.modules.scss b/src/components/Input/WithSpacing/WithSpacing.modules.scss
@@ -1,12 +1,7 @@
 @import '../../../scss/settings/spacing';
 
-.flexColumn {
-  display: flex;
-  flex-direction: column;
-}
-
 .evenMarginBottom-1 {
-  composes: flexColumn;
+  composes: column from '../../Flexbox.modules.scss';
 
   > * {
     margin-bottom: $spacing-x-tight;

diff --git a/src/components/Notification/Notification.jsx b/src/components/Notification/Notification.jsx
@@ -8,6 +8,7 @@ import Icon from '../../old-components/Icon/Icon'
 import ColoredTextProvider from '../Typography/ColoredTextProvider/ColoredTextProvider'
 import Paragraph from '../Typography/Paragraph/Paragraph'
 
+import flexboxStyles from '../Flexbox.modules.scss'
 import styles from './Notification.modules.scss'
 
 const { Container, Row, Column } = Grid
@@ -52,7 +53,7 @@ const Notification = ({ variant, children, ...rest }) => (
     <Container limitWidth>
       <Row>
         <Column xs={12}>
-          <div className={styles.flexRow}>
+          <div className={flexboxStyles.row}>
             {isImportant(variant) ? renderIcon(iconByVariant[variant]) : undefined}
 
             {renderContent(variant, children)}

diff --git a/src/components/Notification/Notification.modules.scss b/src/components/Notification/Notification.modules.scss
@@ -29,11 +29,6 @@
   background-color: $color-lavender-blush;
 }
 
-.flexRow {
-  display: flex;
-  flex-direction: row;
-}
-
 .icon {
   margin-right: $spacing-base;
   line-height: 1;

diff --git a/src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap b/src/components/Notification/__tests__/__snapshots__/Notification.spec.jsx.snap
@@ -12,7 +12,7 @@ exports[`<Notification /> renders 1`] = `
         xs={12}
       >
         <div
-          className="flexRow"
+          className="row"
         >
           <Paragraph
             align="left"