feat: Add spacing to form components (#514)

carbon-design-system · Jan 19, 2018 · e22081a · e22081a
1 parent f864f49
commit e22081a
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 25 deletions.
diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss
@@ -1,17 +1,18 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
 @import '../form/form';
 @import '../../globals/scss/css--reset';
 
 @include exports('checkbox') {
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
-    margin-bottom: 1rem;
+    margin-bottom: $spacing-md;
 
     &:first-of-type {
-      margin-top: rem(6px);
+      margin-top: $spacing-xs;
     }
 
     &:last-of-type {
@@ -32,7 +33,7 @@
     align-items: center;
     cursor: pointer;
     position: relative;
-    padding-left: rem(25px);
+    padding-left: $spacing-lg;
     min-height: rem(16px);
   }
 
@@ -47,6 +48,7 @@
     background-color: $ui-01;
   }
 
+  // Checkmark
   .#{$prefix}--checkbox-label::after {
     content: '';
     width: 10px;
@@ -85,6 +87,7 @@
     @include focus-outline('blurred');
   }
 
+  // Indeterminate dash
   .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::after,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::after {
     transform: scale(1) rotate(0deg);
@@ -101,7 +104,7 @@
     display: inline-block;
     height: rem(18px);
     width: rem(18px);
-    margin-right: 0.5rem;
+    margin-right: $spacing-xs;
     background-color: $ui-01;
     border: $checkbox-border-width solid $ui-05;
     min-width: rem(18px);

diff --git a/src/components/file-uploader/_file-uploader.scss b/src/components/file-uploader/_file-uploader.scss
@@ -1,6 +1,7 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
@@ -28,14 +29,13 @@
     @include typescale('zeta');
     @include line-height('body');
     color: $text-02;
-    margin-top: 0.25rem;
-    margin-bottom: 1.25rem;
+    margin-bottom: $spacing-lg;
   }
 
   .#{$prefix}--file-container {
     display: block;
     width: 100%;
-    margin-top: rem(20px);
+    margin-top: $spacing-lg;
   }
 
   .#{$prefix}--file__selected-file {
@@ -45,8 +45,8 @@
     justify-content: space-between;
     min-height: rem(30px);
     background-color: $field-01;
-    padding: 0 1rem;
-    margin-bottom: rem(20px);
+    padding: 0 $spacing-md;
+    margin-bottom: $spacing-md;
 
     &:last-child {
       margin-bottom: 0;
@@ -59,7 +59,7 @@
     display: inline-flex;
     align-items: center;
     color: $text-01;
-    margin-right: 1rem;
+    margin-right: $spacing-md;
     height: 1.875rem;
   }
 
@@ -70,7 +70,7 @@
     .#{$prefix}--loading {
       width: 1.125rem;
       height: 1.125rem;
-      margin-right: -7px;
+      margin-right: $spacing-xs;
     }
 
     .#{$prefix}--loading__svg {

diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
@@ -1,19 +1,20 @@
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/import-once';
 
 @include exports('form') {
   .#{$prefix}--fieldset {
     @include reset;
-    margin-bottom: 2rem;
+    margin-bottom: $spacing-xl;
   }
 
   .#{$prefix}--form-item {
     @include font-family;
     flex: 1;
-    margin-right: 1rem;
-    margin-bottom: 1.5rem;
+    margin-right: $spacing-md;
+    margin-bottom: $spacing-lg;
 
     &:last-of-type {
       margin-right: 0;
@@ -28,7 +29,7 @@
     font-weight: $input-label-weight;
     display: inline-block;
     vertical-align: baseline;
-    margin-bottom: rem(10px);
+    margin-bottom: $spacing-xs;
   }
 
   .#{$prefix}--label .#{$prefix}--tooltip__trigger {
@@ -52,7 +53,7 @@
   .#{$prefix}--form-requirement {
     @include reset;
     @include typescale('omega');
-    margin: 0.75rem 0 0;
+    margin: $spacing-sm 0 0;
     max-height: 0;
     overflow: hidden;
     font-weight: 600;

diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
@@ -1,6 +1,7 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
 @import '../../globals/scss/css--reset';
@@ -19,8 +20,8 @@
     display: inline-flex;
     width: 100%;
     min-width: 9.375rem;
-    padding-left: 1rem;
-    padding-right: 2rem;
+    padding-left: $spacing-md;
+    padding-right: $spacing-xl;
     font-weight: 300;
     height: rem(40px);
     color: $text-01;

diff --git a/src/components/radio-button/_radio-button.scss b/src/components/radio-button/_radio-button.scss
@@ -5,6 +5,7 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
 @import '../form/form';
@@ -14,7 +15,7 @@
   .#{$prefix}--radio-button-group {
     display: flex;
     align-items: center;
-    margin-top: rem(6px);
+    margin-top: $spacing-xs;
   }
 
   .#{$prefix}--radio-button {
@@ -27,7 +28,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    margin-right: 1rem;
+    margin-right: $spacing-md;
   }
 
   .#{$prefix}--radio-button__appearance {
@@ -38,7 +39,7 @@
     flex-shrink: 0;
     height: rem(18px);
     width: rem(18px);
-    margin-right: rem(10px);
+    margin-right: $spacing-xs;
   }
 
   .#{$prefix}--radio-button:checked + .#{$prefix}--radio-button__label .#{$prefix}--radio-button__appearance {

diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss
@@ -7,6 +7,7 @@
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/import-once';
 @import '../form/form';
 
@@ -23,7 +24,7 @@
     appearance: none;
     display: block;
     width: 100%;
-    padding: 0.75rem 2.75rem 0.75rem 1rem;
+    padding: $spacing-sm $spacing-2xl $spacing-sm $spacing-md;
     color: $text-01;
     background-color: $field-01;
     border: $input-border;
@@ -79,7 +80,7 @@
 
   .#{$prefix}--label {
     white-space: nowrap;
-    margin: 0 0.5rem 0 0;
+    margin: 0 $spacing-xs 0 0;
     font-weight: 400;
   }
 

diff --git a/src/components/text-area/_text-area.scss b/src/components/text-area/_text-area.scss
@@ -5,6 +5,7 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/import-once';
@@ -17,7 +18,7 @@
     @include typescale('zeta');
     width: 100%;
     min-width: 10rem;
-    padding: 1rem;
+    padding: $spacing-md;
     color: $text-01;
     background-color: $field-01;
     border: $input-border;

diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
@@ -7,6 +7,7 @@
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/import-once';
 @import '../form/form';
 
@@ -19,7 +20,7 @@
     width: 100%;
     height: rem(40px);
     min-width: 10rem;
-    padding: 0 1rem;
+    padding: 0 $spacing-md;
     color: $text-01;
     background-color: $field-01;
     border: $input-border;