Add vertical alignment options for horizontal form fields (#173)

⚠️ Renamed custom properties: - `--rui-form-field-horizontal-label-alignment` → `--rui-form-field-horizontal-label-text-align` New custom properties: - `--rui-form-field-horizontal-label-vertical-alignment` - `--rui-form-field-horizontal-field-vertical-alignment` - `--rui-form-field-horizontal-label-padding-top` (optional)
react-ui-org · Apr 20, 2021 · 1bac30a · 1bac30a
1 parent 07bdc23
commit 1bac30a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 15 deletions.
diff --git a/src/docs/customize/theming/forms.mdx b/src/docs/customize/theming/forms.mdx
@@ -46,9 +46,12 @@ Options for fields that support horizontal layout.
 
 | Custom Property                                      | Description                                                  |
 |------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-form-field-horizontal-label-alignment`        | Text alignment of labels in horizontal layout                |
+| `--rui-form-field-horizontal-label-text-align`       | Text alignment of labels in horizontal layout                |
 | `--rui-form-field-horizontal-label-min-width`        | Minimum width of labels in horizontal layout                 |
 | `--rui-form-field-horizontal-label-width`            | Default width of labels in horizontal layout                 |
+| `--rui-form-field-horizontal-label-padding-y`        | Top and bottom padding to tweak vertical alignment of labels |
+| `--rui-form-field-horizontal-label-vertical-alignment` | Vertical box alignment of labels in horizontal layout      |
+| `--rui-form-field-horizontal-field-vertical-alignment` | Vertical box alignment of fields in horizontal layout      |
 | `--rui-form-field-horizontal-full-width-label-width` | Default width of labels in full-width horizontal layout      |
 
 ## Box Fields

diff --git a/src/lib/styles/theme/_form-fields.scss b/src/lib/styles/theme/_form-fields.scss
@@ -1,6 +1,11 @@
 // Variant specific theme options are obtained dynamically because there is way too many of them to
 // maintain manually. See `settings/_form-fields.scss` and `tools/form-fields/_variants.scss` for
 // details.
+//
+// 1. Defaults to zero when neither `--rui-form-field-horizontal-label-padding-y` (optional) nor
+//    `--rui-local-padding-y` (handled by the `size()` mixin in case of box form fields, see
+//    `_box-field-sizes.scss`) is defined. This is useful because FormLayoutCustomField may have no
+//    size specified therefore its label should have no padding at the top.
 
 // Forms fields: common properties
 $label-color: var(--rui-form-field-label-color);
@@ -12,9 +17,16 @@ $required-sign: var(--rui-form-field-required-sign);
 $required-sign-color: var(--rui-form-field-required-sign-color);
 
 // Form fields: horizontal layout
-$horizontal-label-alignment: var(--rui-form-field-horizontal-label-alignment);
+$horizontal-label-text-align: var(--rui-form-field-horizontal-label-text-align);
 $horizontal-label-min-width: var(--rui-form-field-horizontal-label-min-width);
 $horizontal-label-width: var(--rui-form-field-horizontal-label-width);
+$horizontal-label-padding-y:
+  var(
+    --rui-form-field-horizontal-label-padding-y,
+    calc(var(--rui-form-field-box-border-width) + var(--rui-local-padding-y))
+  ); // 1.
+$horizontal-label-vertical-alignment: var(--rui-form-field-horizontal-label-vertical-alignment);
+$horizontal-field-vertical-alignment: var(--rui-form-field-horizontal-field-vertical-alignment);
 $horizontal-full-width-label-width: var(--rui-form-field-horizontal-full-width-label-width);
 
 // Form fields: disabled state

diff --git a/src/lib/styles/tools/form-fields/_box-field-layout.scss b/src/lib/styles/tools/form-fields/_box-field-layout.scss
@@ -33,14 +33,24 @@
 // 9.  Help texts and validation messages can take up full width of FormLayout. There is no reason
 //     to make them wrap as they cannot break layout of FormLayout.
 //
-// 10. Align label to input baseline. Achieved with `padding-top` since `align-items: baseline`
-//     unfortunately doesn't work for blank text inputs in Safari. Default to zero when
-//     `--rui-local-padding-y` is not defined.
+// 10. Visually align label to input baseline. Achieved with `padding-top` and `padding-bottom` due
+//     to two reasons:
+//
+//     * `align-items: baseline` doesn't work for blank text inputs in Safari. See
+//        https://bugs.webkit.org/show_bug.cgi?id=142968 and
+//        https://github.com/react-ui-org/react-ui/issues/265.
+//
+//     * `align-items: baseline` doesn't allow subsequent vertical centering of tall inputs and/or
+//        multiline labels (see `theme.$horizontal-label-vertical-alignment` and
+//        `theme.$horizontal-field-vertical-alignment`).
 //
 // 11. Reset `width` previously set by inline field layout (see `_inline-field-layout.scss`).
 //
 // 12. Make fields just as wide as necessary. Fields should be interactive only where their visible
 //     content is.
+//
+// 13. Label and field are vertically aligned to top (start) by default (see 10.). Vertical
+//     alignment of each block can be changed by theme configuration.
 
 @use '../../settings/forms';
 @use '../../settings/form-fields' as settings;
@@ -78,35 +88,40 @@
     display: inline-grid; // 2.
     grid-template-columns: theme.$horizontal-label-width min-content; // 2.
     grid-template-areas: 'label field';
-    align-items: start;
+    align-items: start; // 10., 13.
 
     .label {
       grid-area: label;
+      align-self: theme.$horizontal-label-vertical-alignment; // 13.
       min-width: theme.$horizontal-label-min-width;
 
+      // 10.
       @if ($has-min-tap-target) {
         padding-top:
           calc(
             (#{theme.$check-tap-target-size} - 1rem * #{typography.$line-height-base})
             / 2
-          ); // 10.
+          );
+        padding-bottom:
+          calc(
+            (#{theme.$check-tap-target-size} - 1rem * #{typography.$line-height-base})
+            / 2
+          );
       }
 
+      // 10., 13.
       @else {
-        padding-top:
-          calc(
-            #{theme.$box-border-width}
-            + var(--rui-local-padding-y, -1 * #{theme.$box-border-width})
-          ); // 10.
+        padding-top: #{theme.$horizontal-label-padding-y};
+        padding-bottom: #{theme.$horizontal-label-padding-y};
       }
 
       padding-right: settings.$horizontal-inner-gap; // 4.
-      padding-bottom: 0; // 4.
-      text-align: theme.$horizontal-label-alignment;
+      text-align: theme.$horizontal-label-text-align;
     }
 
     .field {
       grid-area: field;
+      align-self: theme.$horizontal-field-vertical-alignment; // 13.
       justify-self: start; // 7.
     }
   }

diff --git a/src/lib/theme.scss b/src/lib/theme.scss
@@ -508,9 +508,11 @@
   --rui-form-field-required-sign-color: var(--rui-color-gray-500);
 
   // Form fields: horizontal layout
-  --rui-form-field-horizontal-label-alignment: left;
+  --rui-form-field-horizontal-label-text-align: left;
   --rui-form-field-horizontal-label-min-width: 0;
   --rui-form-field-horizontal-label-width: minmax(auto, 50%); // 3.
+  --rui-form-field-horizontal-label-vertical-alignment: initial;
+  --rui-form-field-horizontal-field-vertical-alignment: initial;
   --rui-form-field-horizontal-full-width-label-width: fit-content(50%);
 
   // Forms fields: disabled state