@react-ui-org/react-ui 0.44.1 → 0.47.0

package/src/lib/styles/tools/form-fields/_box-field-layout.scss

@@ -5,9 +5,9 @@
 // 2.  Form fields in horizontal layout also take up only as much space as they need. Labels do not
 //     wrap until label width limit is reached (50 % of available horizontal space by default).
 //
-// 3. Help texts and validation messages are aligned below input and wrapped. Their width is always
-//    limited to the width of the input field so they don't shift adjacent elements when they show
-//    up. This applies unless the field is inside FormLayout (see 10).
+// 3.  Help texts and validation messages are aligned below input and wrapped. Their width is always
+//     limited to the width of the input field so they don't shift adjacent elements when they show
+//     up. This applies unless the field is inside FormLayout (see 10).
 //
 // 4.  Define grid spacing as padding of child elements because grid areas make row and column gaps
 //     show up even when not necessary.
@@ -52,178 +52,178 @@
 // 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;
-@use '../../theme/form-fields' as theme;
-@use '../../theme/typography';
-@use '../breakpoint';
+@use "../../settings/forms";
+@use "../../settings/form-fields" as settings;
+@use "../../theme/form-fields" as theme;
+@use "../../theme/typography";
+@use "../breakpoint";
 
 @mixin vertical($has-list: false) {
-  @if ($has-list) {
-    --rui-local-vertical-gap: #{settings.$vertical-inner-gap-large};
-  }
-
-  display: inline-flex; // 1.
-  flex-direction: column;
-  min-width: 0; // 1.
-  max-width: 100%; // 1.
-
-  .label {
-    padding-bottom: var(--rui-local-vertical-gap, #{settings.$vertical-inner-gap});
-  }
-
-  .helpText,
-  .validationText {
-    padding-top: var(--rui-local-vertical-gap, #{settings.$vertical-inner-gap});
-  }
-
-  .field {
-    width: min-content; // 3.
-    max-width: 100%; // 3.
-  }
-}
-
-@mixin horizontal($has-min-tap-target: false) {
-  @include breakpoint.up(forms.$horizontal-breakpoint) {
-    display: inline-grid; // 2.
-    grid-template-columns: theme.$horizontal-label-width min-content; // 2.
-    grid-template-areas: 'label field';
-    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
-          );
-        padding-bottom:
-          calc(
-            (#{theme.$check-tap-target-size} - 1rem * #{typography.$line-height-base})
-            / 2
-          );
-      }
-
-      // 10., 13.
-      @else {
-        padding-top: #{theme.$horizontal-label-padding-y};
-        padding-bottom: #{theme.$horizontal-label-padding-y};
-      }
-
-      padding-right: settings.$horizontal-inner-gap; // 4.
-      text-align: theme.$horizontal-label-text-align;
-    }
-
-    .field {
-      grid-area: field;
-      align-self: theme.$horizontal-field-vertical-alignment; // 13.
-      justify-self: start; // 7.
+    @if $has-list {
+        --rui-local-vertical-gap: #{settings.$vertical-inner-gap-large};
     }
-  }
-}
 
-@mixin horizontal-with-small-input() {
-  @include breakpoint.up(forms.$horizontal-breakpoint) {
-    grid-template-columns: min-content min-content; // 5.
-    grid-template-areas:
-      'label field'
-      'helptext helptext'
-      'validationtext validationtext'; // 5.
+    display: inline-flex; // 1.
+    flex-direction: column;
+    min-width: 0; // 1.
+    max-width: 100%; // 1.
 
     .label {
-      white-space: nowrap; // 5.
+        padding-bottom: var(--rui-local-vertical-gap, #{settings.$vertical-inner-gap});
     }
 
-    .field {
-      display: contents; // 5.
+    .helpText,
+    .validationText {
+        padding-top: var(--rui-local-vertical-gap, #{settings.$vertical-inner-gap});
     }
 
-    .inputContainer {
-      grid-area: field; // 5.
+    .field {
+        width: min-content; // 3.
+        max-width: 100%; // 3.
     }
+}
 
-    .helpText {
-      grid-area: helptext; // 5.
+@mixin horizontal($has-min-tap-target: false) {
+    @include breakpoint.up(forms.$horizontal-breakpoint) {
+        display: inline-grid; // 2.
+        grid-template-columns: theme.$horizontal-label-width min-content; // 2.
+        grid-template-areas: "label field";
+        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
+                    );
+                padding-bottom:
+                    calc(
+                        (#{theme.$check-tap-target-size} - 1rem * #{typography.$line-height-base})
+                        / 2
+                    );
+            }
+
+            // 10., 13.
+            @else {
+                padding-top: #{theme.$horizontal-label-padding-y};
+                padding-bottom: #{theme.$horizontal-label-padding-y};
+            }
+
+            padding-right: settings.$horizontal-inner-gap; // 4.
+            text-align: theme.$horizontal-label-text-align;
+        }
+
+        .field {
+            grid-area: field;
+            align-self: theme.$horizontal-field-vertical-alignment; // 13.
+            justify-self: start; // 7.
+        }
     }
+}
 
-    .validationText {
-      grid-area: validationtext; // 5.
+@mixin horizontal-with-small-input() {
+    @include breakpoint.up(forms.$horizontal-breakpoint) {
+        grid-template-columns: min-content min-content; // 5.
+        grid-template-areas:
+            "label field"
+            "helptext helptext"
+            "validationtext validationtext"; // 5.
+
+        .label {
+            white-space: nowrap; // 5.
+        }
+
+        .field {
+            display: contents; // 5.
+        }
+
+        .inputContainer {
+            grid-area: field; // 5.
+        }
+
+        .helpText {
+            grid-area: helptext; // 5.
+        }
+
+        .validationText {
+            grid-area: validationtext; // 5.
+        }
     }
-  }
 }
 
 @mixin full-width() {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  .field,
-  .inputContainer,
-  .input {
+    display: flex;
+    flex-direction: column;
     width: 100%;
-  }
 
-  @include breakpoint.up(forms.$horizontal-breakpoint) {
-    &.rootLayoutHorizontal {
-      display: grid;
-      grid-template-columns: theme.$horizontal-full-width-label-width 1fr; // 6.
+    .field,
+    .inputContainer,
+    .input {
+        width: 100%;
     }
 
-    &.rootLayoutHorizontal .field {
-      justify-self: stretch; // 7.
+    @include breakpoint.up(forms.$horizontal-breakpoint) {
+        &.rootLayoutHorizontal {
+            display: grid;
+            grid-template-columns: theme.$horizontal-full-width-label-width 1fr; // 6.
+        }
+
+        &.rootLayoutHorizontal .field {
+            justify-self: stretch; // 7.
+        }
     }
-  }
 }
 
 @mixin in-form-layout() {
-  justify-self: start; // 12.
-
-  .field {
-    width: auto; // 9.
-  }
-
-  @include breakpoint.up(forms.$horizontal-breakpoint) {
-    .optionLabel {
-      width: auto; // 11.
-    }
-
-    &.rootLayoutHorizontal,
-    &.rootLayoutHorizontal.hasRootSmallInput {
-      grid: inherit; // 8.
-      grid-template-columns: subgrid; // 8.
-      grid-column: span 2; // 8.
+    justify-self: start; // 12.
 
-      @supports not (grid-template-columns: subgrid) {
-        display: contents; // 8.
-      }
-    }
-
-    &.rootLayoutHorizontal.isRootFullWidth {
-      grid-template-columns: subgrid; // 8.
-    }
-
-    &.rootLayoutHorizontal .label,
-    &.rootLayoutHorizontal .field,
-    &.rootLayoutHorizontal .inputContainer,
-    &.rootLayoutHorizontal .helpText,
-    &.rootLayoutHorizontal .validationText {
-      grid-area: unset; // 8.
-    }
-
-    &.rootLayoutHorizontal .field,
-    &.rootLayoutHorizontal .inputContainer,
-    &.rootLayoutHorizontal .helpText,
-    &.rootLayoutHorizontal .validationText {
-      grid-column-start: 2; // 8.
+    .field {
+        width: auto; // 9.
     }
 
-    &.rootLayoutHorizontal.hasRootSmallInput .field {
-      display: block; // 5.
+    @include breakpoint.up(forms.$horizontal-breakpoint) {
+        .optionLabel {
+            width: auto; // 11.
+        }
+
+        &.rootLayoutHorizontal,
+        &.rootLayoutHorizontal.hasRootSmallInput {
+            grid: inherit; // 8.
+            grid-template-columns: subgrid; // 8.
+            grid-column: span 2; // 8.
+
+            @supports not (grid-template-columns: subgrid) {
+                display: contents; // 8.
+            }
+        }
+
+        &.rootLayoutHorizontal.isRootFullWidth {
+            grid-template-columns: subgrid; // 8.
+        }
+
+        &.rootLayoutHorizontal .label,
+        &.rootLayoutHorizontal .field,
+        &.rootLayoutHorizontal .inputContainer,
+        &.rootLayoutHorizontal .helpText,
+        &.rootLayoutHorizontal .validationText {
+            grid-area: unset; // 8.
+        }
+
+        &.rootLayoutHorizontal .field,
+        &.rootLayoutHorizontal .inputContainer,
+        &.rootLayoutHorizontal .helpText,
+        &.rootLayoutHorizontal .validationText {
+            grid-column-start: 2; // 8.
+        }
+
+        &.rootLayoutHorizontal.hasRootSmallInput .field {
+            display: block; // 5.
+        }
     }
-  }
 }

package/src/lib/styles/tools/form-fields/_box-field-sizes.scss

@@ -1,21 +1,19 @@
-@use 'sass:map';
-@use '../../theme/form-fields' as theme;
+@use "sass:map";
+@use "../../theme/form-fields" as theme;
 
 @mixin size($size, $is-multiline: false) {
-  $size-properties: map.get(theme.$box-sizes, $size);
+    $size-properties: map.get(theme.$box-sizes, $size);
 
-  --rui-local-padding-y: #{map.get($size-properties, padding-y)};
-  --rui-local-padding-x: #{map.get($size-properties, padding-x)};
-  --rui-local-font-size: #{map.get($size-properties, font-size)};
+    --rui-local-padding-y: #{map.get($size-properties, padding-y)};
+    --rui-local-padding-x: #{map.get($size-properties, padding-x)};
+    --rui-local-font-size: #{map.get($size-properties, font-size)};
 
-  .input {
-    @if $is-multiline {
-      height: auto;
-      min-height: map.get($size-properties, height);
+    .input {
+        @if $is-multiline {
+            height: auto;
+            min-height: map.get($size-properties, height);
+        } @else {
+            --rui-local-height: #{map.get($size-properties, height)};
+        }
     }
-
-    @else {
-      --rui-local-height: #{map.get($size-properties, height)};
-    }
-  }
 }

package/src/lib/styles/tools/form-fields/_foundation.scss

@@ -1,26 +1,26 @@
 // 1. Don't let text alignment be affected by a parent.
 
-@use '../../settings/form-fields' as settings;
-@use '../../theme/form-fields' as theme;
+@use "../../settings/form-fields" as settings;
+@use "../../theme/form-fields" as theme;
 
 @mixin root() {
-  text-align: left; // 1.
+    text-align: left; // 1.
 }
 
 @mixin label() {
-  color: var(--rui-local-surrounding-text-color, #{theme.$label-color});
+    color: var(--rui-local-surrounding-text-color, #{theme.$label-color});
 }
 
 @mixin label-required() {
-  &::after {
-    content: theme.$required-sign;
-    color: theme.$required-sign-color;
-  }
+    &::after {
+        content: theme.$required-sign;
+        color: theme.$required-sign-color;
+    }
 }
 
 @mixin help-text() {
-  font-style: theme.$help-text-font-style;
-  font-size: theme.$help-text-font-size;
-  line-height: settings.$help-text-line-height;
-  color: var(--rui-local-surrounding-text-color, #{theme.$help-text-color});
+    font-style: theme.$help-text-font-style;
+    font-size: theme.$help-text-font-size;
+    line-height: settings.$help-text-line-height;
+    color: var(--rui-local-surrounding-text-color, #{theme.$help-text-color});
 }

package/src/lib/styles/tools/form-fields/_inline-field-elements.scss

@@ -6,95 +6,106 @@
 //
 // 3. Reset extra space previously added to symmetrically pad the field in FormLayout context as
 //    there already is a sufficient row gap provided by FormLayout.
+//
+// 4. Destroy tap target when subgrid is not supported.
 
-@use '../../theme/typography';
-@use '../../theme/form-fields' as theme;
-@use '../../tools/accessibility';
-@use '../transition';
+@use "../../theme/typography";
+@use "../../theme/form-fields" as theme;
+@use "../../tools/accessibility";
+@use "../transition";
 
 @mixin check-input($type) {
-  @include transition.add((background-color, background-position, box-shadow));
-
-  appearance: none;
-  width: theme.$check-input-size;
-  height: theme.$check-input-size;
-  margin-top: calc((1rem * #{typography.$line-height-base} - #{theme.$check-input-size}) / 2);
-  border: theme.$check-input-border-width solid var(--rui-local-border-color);
-  background-position: center;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-color: var(--rui-local-check-background-color);
-  color-adjust: exact; // 1.
-
-  &:focus,
-  &:checked:focus {
-    box-shadow: theme.$check-input-focus-box-shadow;
-  }
-
-  @if ($type == 'checkbox') {
-    border-radius: theme.$check-input-checkbox-border-radius;
-
-    &:checked {
-      background-image: theme.$check-input-checkbox-checked-background-image;
+    @include transition.add((background-color, background-position, box-shadow));
+
+    appearance: none;
+    width: theme.$check-input-size;
+    height: theme.$check-input-size;
+    margin-top: calc((1rem * #{typography.$line-height-base} - #{theme.$check-input-size}) / 2);
+    border: theme.$check-input-border-width solid var(--rui-local-border-color);
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-color: var(--rui-local-check-background-color);
+    color-adjust: exact; // 1.
+
+    &:focus,
+    &:checked:focus {
+        box-shadow: theme.$check-input-focus-box-shadow;
+    }
+
+    @if $type == "checkbox" {
+        border-radius: theme.$check-input-checkbox-border-radius;
+
+        &:checked {
+            background-image: theme.$check-input-checkbox-checked-background-image;
+        }
     }
-  }
 
-  @if ($type == 'radio') {
-    border-radius: theme.$check-input-radio-border-radius;
+    @if $type == "radio" {
+        border-radius: theme.$check-input-radio-border-radius;
 
-    &:checked {
-      background-image: theme.$check-input-radio-checked-background-image;
+        &:checked {
+            background-image: theme.$check-input-radio-checked-background-image;
+        }
     }
-  }
-
-  @if ($type == 'toggle') {
-    width: theme.$check-input-toggle-width;
-    border-radius: theme.$check-input-toggle-border-radius;
-    background-image: theme.$check-input-toggle-default-background-image;
-    background-position: theme.$check-input-toggle-default-background-position;
-    background-size: theme.$check-input-toggle-background-size;
-
-    &:checked {
-      background-image: theme.$check-input-toggle-checked-background-image;
-      background-position: theme.$check-input-toggle-checked-background-position;
+
+    @if $type == "toggle" {
+        width: theme.$check-input-toggle-width;
+        border-radius: theme.$check-input-toggle-border-radius;
+        background-image: theme.$check-input-toggle-default-background-image;
+        background-position: theme.$check-input-toggle-default-background-position;
+        background-size: theme.$check-input-toggle-background-size;
+
+        &:checked {
+            background-image: theme.$check-input-toggle-checked-background-image;
+            background-position: theme.$check-input-toggle-checked-background-position;
+        }
     }
-  }
 }
 
 // 2.
 @mixin min-tap-target($type) {
-  $input-width: theme.$check-input-size;
-
-  @if ($type == 'toggle') {
-    $input-width: theme.$check-input-toggle-width;
-  }
+    $input-width: theme.$check-input-size;
 
-  $tap-target-offset: calc((#{$input-width} - #{theme.$check-tap-target-size}) / 2);
+    @if $type == "toggle" {
+        $input-width: theme.$check-input-toggle-width;
+    }
 
-  @include accessibility.min-tap-target($size: theme.$check-tap-target-size, $center: false);
+    $tap-target-offset: calc((#{$input-width} - #{theme.$check-tap-target-size}) / 2);
 
-  min-height: theme.$check-tap-target-size;
-  padding-top: calc((#{theme.$check-tap-target-size} - 1rem * #{typography.$line-height-base}) / 2);
+    @include accessibility.min-tap-target($size: theme.$check-tap-target-size, $center: false);
 
-  &::before {
-    top: 0;
-    left: $tap-target-offset;
-  }
+    min-height: theme.$check-tap-target-size;
+    padding-top: calc((#{theme.$check-tap-target-size} - 1rem * #{typography.$line-height-base}) / 2);
 
-  @if ($type == 'checkbox' or $type == 'toggle') {
-    &.hasRootLabelBefore::before {
-      right: $tap-target-offset;
-      left: auto;
+    &::before {
+        top: 0;
+        left: $tap-target-offset;
     }
 
-    // 3.
-    &.isRootInFormLayout {
-      min-height: 0;
-      padding-top: 0;
-
-      &::before {
-        top: calc((#{typography.$line-height-base} - 1rem * #{theme.$check-tap-target-size}) / 2);
-      }
+    @if $type == "checkbox" or $type == "toggle" {
+        &.hasRootLabelBefore::before {
+            right: $tap-target-offset;
+            left: auto;
+        }
+
+        // 3.
+        &.isRootInFormLayout {
+            min-height: 0;
+            padding-top: 0;
+
+            &::before {
+                top: calc((1rem * #{typography.$line-height-base} - #{theme.$check-tap-target-size}) / 2);
+            }
+        }
+
+        &.isRootInFormLayout.rootLayoutHorizontal::before {
+            grid-column-start: 2;
+
+            // 4.
+            @supports not (grid-template-columns: subgrid) {
+                display: none;
+            }
+        }
     }
-  }
 }