feat(input): Add a Borders.modules CSS file to share border styling a…

…mong components
telus · Sep 11, 2017 · c1f5c0c · c1f5c0c
1 parent d9d3458
commit c1f5c0c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/src/components/Borders.modules.scss b/src/components/Borders.modules.scss
@@ -0,0 +1,11 @@
+.thin {
+  border: 1px solid;
+}
+
+.none {
+  border-width: 0;
+}
+
+.rounded {
+  border-radius: 4px;
+}
diff --git a/src/components/Button/Button.modules.scss b/src/components/Button/Button.modules.scss
@@ -16,20 +16,17 @@ $button-text-color: $color-white;
 }
 
 .button {
+  composes: none rounded from "../Borders.modules.scss";
 
   display: block;
   width: 100%;
 
   padding: $spacing-base $spacing-wide;
 
-  border: 0;
-  border-radius: 4px;
-
   transition: background .2s;
 
   font-family: $font-telus;
-  composes: medium from '../Typography/Text/Text.modules.scss';
-  composes: boldFont from '../Typography/Text/Text.modules.scss';
+  composes: medium boldFont from '../Typography/Text/Text.modules.scss';
   text-align: center;
 
   cursor: pointer;

diff --git a/src/components/Input/Helper/Helper.modules.scss b/src/components/Input/Helper/Helper.modules.scss
@@ -1,12 +1,10 @@
 @import '../../../scss/settings/colours';
 @import '../../../scss/settings/spacing';
 
-$border-radius: 4px;
-
 .base {
-  padding: $spacing-base;
+  composes: rounded from '../../Borders.modules.scss';
 
-  border-radius: $border-radius;
+  padding: $spacing-base;
 
   // transition: background-color .1s linear; TODO: Why?
 }

diff --git a/src/components/Input/Input.modules.scss b/src/components/Input/Input.modules.scss
@@ -2,18 +2,15 @@
 @import '../../scss/settings/typography';
 @import '../../scss/settings/spacing';
 
-$border-radius: 4px;
-
 // TODO: Bring over the responsive styles
 // TODO: Bring over/globalize the browser specific styles for the pseudo elements/placeholders
 
 .inputWrapper {
+  composes: thin rounded from '../Borders.modules.scss';
+
   display: flex;
   flex-direction: row;
   align-items: center;
-
-  border: 1px solid;
-  border-radius: $border-radius;
 }
 
 .defaultBoxShadow {
@@ -32,7 +29,7 @@ $border-radius: 4px;
 .disabled {
   composes: inputWrapper defaultBoxShadow;
 
-  background-color: $color-athens-grey; //TODO: override
+  background-color: $color-athens-grey;
   border-color: $color-shuttle-grey;
 }
 
@@ -62,8 +59,11 @@ input.input {
   padding: 11px; // TODO: rems?
 
   outline: 0;
+
+  // FIXME: Will be able to use composes when removing the targeting of the <input> element above
+  // composes: none rounded from '../Borders.modules.scss';
   border: 0;
-  border-radius: $border-radius;
+  border-radius: 4px;
 
   font-family: $font-telus;