Refactor form field sizes to use custom properties (#101)

react-ui-org · Jun 17, 2020 · 2a3453d · 2a3453d
1 parent 3e57613
commit 2a3453d
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 24 deletions.
diff --git a/src/lib/styles/settings/_forms-theme.scss b/src/lib/styles/settings/_forms-theme.scss
@@ -66,17 +66,20 @@ $form-field-states: (
 $form-field-sizes: (
   small: (
     height: var(--rui-form-field-small-height),
-    padding: var(--rui-form-field-small-padding),
+    padding-vertical: var(--rui-form-field-small-padding-vertical),
+    padding-horizontal: var(--rui-form-field-small-padding-horizontal),
     font-size: var(--rui-form-field-small-font-size),
   ),
   medium: (
     height: var(--rui-form-field-medium-height),
-    padding: var(--rui-form-field-medium-padding),
+    padding-vertical: var(--rui-form-field-medium-padding-vertical),
+    padding-horizontal: var(--rui-form-field-medium-padding-horizontal),
     font-size: var(--rui-form-field-medium-font-size),
   ),
   large: (
     height: var(--rui-form-field-large-height),
-    padding: var(--rui-form-field-large-padding),
+    padding-vertical: var(--rui-form-field-large-padding-vertical),
+    padding-horizontal: var(--rui-form-field-large-padding-horizontal),
     font-size: var(--rui-form-field-large-font-size),
   ),
 );

diff --git a/src/lib/styles/settings/_forms.scss b/src/lib/styles/settings/_forms.scss
@@ -4,7 +4,6 @@
 @import 'offsets';
 @import 'typography';
 
-$form-field-label-line-height: 1.5rem;
 $form-field-font-family: $typography-font-family-base;
 $form-field-font-weight: map-get($typography-font-weight-values, regular);
 $form-field-line-height: 1.5rem; // 1.

diff --git a/src/lib/styles/tools/forms/_foundation.scss b/src/lib/styles/tools/forms/_foundation.scss
@@ -2,9 +2,11 @@
 // 2. Override hover style of disabled input.
 // 3. Always prefer the `size` attribute when defined.
 // 4. Let inputs properly fit various layout scenarios.
+// 5. Leave out space for Select Field caret.
 
 @import '../../settings/forms';
 @import '../../settings/forms-theme';
+@import '../../tools/offset';
 @import '../transitions';
 @import 'states';
 
@@ -32,7 +34,10 @@
   width: $form-field-input-width;
   min-width: $form-field-input-min-width;
   max-width: 100%; // 4.
+  height: var(--rui-local-height);
+  padding: var(--rui-local-padding-vertical) var(--rui-local-padding-horizontal);
   font-weight: $form-field-font-weight;
+  font-size: var(--rui-local-font-size);
   line-height: $form-field-line-height;
   font-family: $form-field-font-family;
   vertical-align: middle;
@@ -76,7 +81,7 @@
 }
 
 @mixin form-field-input-select() {
-  padding-right: calc(#{$form-field-caret-size} - 2 * #{$form-field-border-width} + #{map-get($offset-values, 2)});
+  padding-right: calc(#{$form-field-caret-size} + #{offset(2)}); // 5.
   appearance: none;
 
   &::-ms-expand {

diff --git a/src/lib/styles/tools/forms/_sizes.scss b/src/lib/styles/tools/forms/_sizes.scss
@@ -1,9 +1,4 @@
-// 1. Unfortunately, `align-items: baseline` does not work with empty inputs in Safari,
-//    so we must emulate this behavior and align label text with input text manually.
-
-@import '../../settings/forms';
 @import '../../settings/forms-theme';
-@import '../breakpoints';
 
 @mixin form-field-size($size, $is-multiline: false) {
   $size-properties: map-get($form-field-sizes, $size);
@@ -15,18 +10,11 @@
     }
 
     @else {
-      height: map-get($size-properties, height);
+      --rui-local-height: #{map-get($size-properties, height)};
     }
 
-    padding: map-get($size-properties, padding);
-    font-size: map-get($size-properties, font-size);
-  }
-
-  &.rootLayoutHorizontal {
-    @include breakpoint-up($form-field-horizontal-breakpoint) {
-      .label {
-        margin-top: ($form-field-line-height - $form-field-label-line-height) / 2; // 1.
-      }
-    }
+    --rui-local-padding-vertical: #{map-get($size-properties, padding-vertical)};
+    --rui-local-padding-horizontal: #{map-get($size-properties, padding-horizontal)};
+    --rui-local-font-size: #{map-get($size-properties, font-size)};
   }
 }
diff --git a/src/lib/theme.scss b/src/lib/theme.scss
@@ -517,17 +517,20 @@
 
   // Form fields: sizes: small
   --rui-form-field-small-height: 1.75rem;
-  --rui-form-field-small-padding: 0 var(--rui-offset-2);
+  --rui-form-field-small-padding-vertical: 0;
+  --rui-form-field-small-padding-horizontal: var(--rui-offset-2);
   --rui-form-field-small-font-size: var(--rui-typography-size-small);
 
   // Form fields: sizes: medium
   --rui-form-field-medium-height: 2.25rem;
-  --rui-form-field-medium-padding: 0.25rem var(--rui-offset-3);
+  --rui-form-field-medium-padding-vertical: 0.25rem;
+  --rui-form-field-medium-padding-horizontal: var(--rui-offset-3);
   --rui-form-field-medium-font-size: var(--rui-typography-size-0);
 
   // Form fields: sizes: large
   --rui-form-field-large-height: 2.75rem;
-  --rui-form-field-large-padding: 0.5rem var(--rui-offset-4);
+  --rui-form-field-large-padding-vertical: 0.5rem;
+  --rui-form-field-large-padding-horizontal: var(--rui-offset-4);
   --rui-form-field-large-font-size: var(--rui-typography-size-1);
 
   //