@react-ui-org/react-ui 0.44.0 → 0.46.0

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;
+            }
+        }
     }
-  }
 }

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

@@ -8,66 +8,107 @@
 // 3. Make fields just as wide as necessary. Fields should be interactive only where their visible
 //    content is.
 
-@use '../../settings/forms';
-@use '../../settings/form-fields' as settings;
-@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 root() {
-  display: inline-flex; // 1.
-  flex-wrap: wrap;
-  align-items: baseline;
-  width: min-content;
-  min-width: 0; // 1.
-  max-width: 100%; // 1.
-
-  .helpText,
-  .validationText {
-    padding-top: settings.$vertical-inner-gap;
-  }
+    display: inline-flex; // 1.
+    flex-wrap: wrap;
+    align-items: baseline;
+    width: min-content;
+    min-width: 0; // 1.
+    max-width: 100%; // 1.
+
+    .helpText,
+    .validationText {
+        padding-top: settings.$vertical-inner-gap;
+    }
 }
 
-@mixin field() {
-  display: flex; // 1.
-  align-items: flex-start;
-  min-width: 0; // 1.
+@mixin field($type) {
+    display: flex; // 1.
+    align-items: flex-start;
+    min-width: 0; // 1.
+
+    @if $type == "radio" {
+        flex-direction: row;
+    } @else {
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+    }
 
-  .input {
-    flex: none;
-  }
+    .input {
+        flex: none;
+    }
 
-  .label,
-  .optionLabel {
-    width: max-content; // 1.
-    margin-left: settings.$inline-field-inner-gap;
-  }
+    .label,
+    .optionLabel {
+        width: max-content; // 1.
+        margin-left: settings.$inline-field-inner-gap;
+    }
 }
 
 @mixin has-label-before() {
-  .field {
-    flex-direction: row-reverse;
-  }
-
-  .label,
-  .optionLabel {
-    margin-right: settings.$inline-field-inner-gap;
-    margin-left: 0;
-  }
+    .field {
+        flex-direction: row;
+    }
+
+    .label,
+    .optionLabel {
+        margin-right: settings.$inline-field-inner-gap;
+        margin-left: 0;
+    }
 }
 
 @mixin in-form-layout() {
-  display: inline-grid; // 2.
-  justify-self: start; // 3.
-  width: auto; // 2., 3.
+    display: inline-grid; // 2.
+    justify-self: start; // 3.
+    width: auto; // 2., 3.
 
-  @include breakpoint.up(forms.$horizontal-breakpoint) {
-    &.rootLayoutHorizontal {
-      grid-column-start: 2;
-    }
+    @include breakpoint.up(forms.$horizontal-breakpoint) {
+        &.rootLayoutHorizontal {
+            grid: inherit;
+            grid-template-columns: subgrid;
+            grid-column: span 2;
+
+            @supports not (grid-template-columns: subgrid) {
+                display: contents;
+            }
+        }
+
+        &.rootLayoutHorizontal .field {
+            display: contents;
+        }
+
+        &.rootLayoutHorizontal .label {
+            grid-column-start: 1;
+            width: auto;
+            padding-right: settings.$horizontal-inner-gap;
+            margin-left: 0;
+            text-align: theme.$horizontal-label-text-align;
+        }
+
+        &.rootLayoutHorizontal .input,
+        &.rootLayoutHorizontal .helpText,
+        &.rootLayoutHorizontal .validationText {
+            grid-column-start: 2;
+        }
+
+        &.rootLayoutHorizontal .helpText,
+        &.rootLayoutHorizontal .validationText {
+            width: auto;
+            max-width: 100%;
+
+            @supports not (grid-template-columns: subgrid) {
+                margin-top: calc(-1 * var(--rui-FormLayout__row-gap));
+            }
+        }
 
-    &.rootLayoutHorizontal .label,
-    &.rootLayoutHorizontal .optionLabel {
-      width: auto; // 1.
+        &.rootLayoutHorizontal.hasRootLabelBefore .label {
+            margin-right: 0;
+        }
     }
-  }
 }

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

@@ -8,142 +8,140 @@
 //
 // 3. `.input:focus` is added just in case `:focus-within` doesn't work.
 
-@use 'sass:list';
-@use 'sass:map';
-@use '../../settings/form-fields' as settings;
-@use '../../theme/form-fields' as theme;
+@use "sass:list";
+@use "sass:map";
+@use "../../settings/form-fields" as settings;
+@use "../../theme/form-fields" as theme;
 
 @mixin _disabled-state() {
-  opacity: theme.$disabled-opacity;
-  cursor: theme.$disabled-cursor;
+    opacity: theme.$disabled-opacity;
+    cursor: theme.$disabled-cursor;
 }
 
 // 1.
 @mixin _generate-custom-properties($type, $variant, $state) {
-  @if (not list.index(map.keys(map.get(settings.$themeable-variant-states, $type)), $variant)) {
-    @error "Invalid variant specified! #{$variant} doesn't exist. "
-      + "Choose one of #{map.keys(map.get(settings.$themeable-variant-states, $type))}.";
-  }
-
-  @if (not list.index(map.keys(settings.$themeable-state-properties), $state)) {
-    @error "Invalid state specified! #{$state} doesn't exist. "
-      + "Choose one of #{map.keys(settings.$themeable-state-properties)}.";
-  }
-
-  $properties: map.get(settings.$themeable-state-properties, $state);
-  $infix: $type;
-  $fallback-state: 'default';
-
-  @if ($type == 'validation') {
-    $infix: $variant;
-  }
-
-  @if ($type != 'validation' and $variant != 'default') {
-    $infix: #{$type}--#{$variant};
-  }
-
-  @if ($state == 'checked-disabled') {
-    $fallback-state: 'checked';
-  }
-
-  @if ($state == 'default') {
-    @each $property in $properties {
-      --rui-local-#{$property}: var(--rui-FormField--#{$infix}--#{$state}__#{$property});
-    }
-  }
-
-  // 2.
-  @else {
-    @each $property in $properties {
-      --rui-local-#{$property}:
-        var(
-          --rui-FormField--#{$infix}--#{$state}__#{$property},
-          var(--rui-FormField--#{$infix}--#{$fallback-state}__#{$property})
-        );
-    }
-  }
-}
+    @if not list.index(map.keys(map.get(settings.$themeable-variant-states, $type)), $variant) {
+        @error "Invalid variant specified! #{$variant} doesn't exist. "
+            + "Choose one of #{map.keys(map.get(settings.$themeable-variant-states, $type))}.";
+    }
 
-@mixin _get-theme($type, $variant) {
-  @if (not list.index(map.keys(settings.$themeable-variant-states), $type)) {
-    @error "Invalid type specified! #{$type} doesn't exist. "
-      + "Choose one of #{map.keys(settings.$themeable-variant-states)}.";
-  }
+    @if not list.index(map.keys(settings.$themeable-state-properties), $state) {
+        @error "Invalid state specified! #{$state} doesn't exist. "
+            + "Choose one of #{map.keys(settings.$themeable-state-properties)}.";
+    }
 
-  $themeable-states: map.get(map.get(settings.$themeable-variant-states, $type), $variant);
+    $properties: map.get(settings.$themeable-state-properties, $state);
+    $infix: $type;
+    $fallback-state: "default";
 
-  @if (list.index($themeable-states, 'hover')) {
-    @include _generate-custom-properties($type, $variant, 'default');
+    @if $type == "validation" {
+        $infix: $variant;
+    }
 
-    &:hover {
-      @include _generate-custom-properties($type, $variant, 'hover');
+    @if $type != "validation" and $variant != "default" {
+        $infix: #{$type}--#{$variant};
     }
-  }
 
-  @else {
-    &,
-    &:hover {
-      @include _generate-custom-properties($type, $variant, 'default');
+    @if $state == "checked-disabled" {
+        $fallback-state: "checked";
     }
-  }
 
-  @if (list.index($themeable-states, 'focus')) {
-    // 3.
-    &:focus-within,
-    &:focus-within:hover,
-    .input:focus {
-      @include _generate-custom-properties($type, $variant, 'focus');
+    @if $state == "default" {
+        @each $property in $properties {
+            --rui-local-#{$property}: var(--rui-FormField--#{$infix}--#{$state}__#{$property});
+        }
     }
-  }
 
-  @if (list.index($themeable-states, 'checked')) {
-    .input:checked {
-      @include _generate-custom-properties($type, $variant, 'checked');
+    // 2.
+    @else {
+        @each $property in $properties {
+            --rui-local-#{$property}:
+                var(
+                    --rui-FormField--#{$infix}--#{$state}__#{$property},
+                    var(--rui-FormField--#{$infix}--#{$fallback-state}__#{$property})
+                );
+        }
     }
-  }
+}
 
-  @if (list.index($themeable-states, 'disabled')) {
-    &.isRootDisabled {
-      @include _generate-custom-properties($type, $variant, 'disabled');
+@mixin _get-theme($type, $variant) {
+    @if not list.index(map.keys(settings.$themeable-variant-states), $type) {
+        @error "Invalid type specified! #{$type} doesn't exist. "
+            + "Choose one of #{map.keys(settings.$themeable-variant-states)}.";
     }
-  }
 
-  @if (list.index($themeable-states, 'checked-disabled')) {
-    .input:checked:disabled {
-      @include _generate-custom-properties($type, $variant, 'checked-disabled');
+    $themeable-states: map.get(map.get(settings.$themeable-variant-states, $type), $variant);
+
+    @if list.index($themeable-states, "hover") {
+        @include _generate-custom-properties($type, $variant, "default");
+
+        &:hover {
+            @include _generate-custom-properties($type, $variant, "hover");
+        }
+    } @else {
+        &,
+        &:hover {
+            @include _generate-custom-properties($type, $variant, "default");
+        }
     }
-  }
-}
 
-@mixin visual($type, $variant: 'default', $has-caret: false) {
-  @include _get-theme($type, $variant);
+    @if list.index($themeable-states, "focus") {
+        // 3.
+        &:focus-within,
+        &:focus-within:hover,
+        .input:focus {
+            @include _generate-custom-properties($type, $variant, "focus");
+        }
+    }
 
-  .input:disabled {
-    @include _disabled-state();
-  }
+    @if list.index($themeable-states, "checked") {
+        .input:checked {
+            @include _generate-custom-properties($type, $variant, "checked");
+        }
+    }
 
-  @if ($type == 'box' and $variant == 'filled') {
-    .input {
-      border-top-color: transparent;
-      border-right-color: transparent;
-      border-left-color: transparent;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+    @if list.index($themeable-states, "disabled") {
+        &.isRootDisabled {
+            @include _generate-custom-properties($type, $variant, "disabled");
+        }
     }
-  }
 
-  @if ($type == 'box' and $variant == 'outline' and $has-caret) {
-    .caret {
-      border-left: theme.$box-border-width theme.$box-select-caret-border-style var(--rui-local-border-color);
-      background: theme.$box-select-caret-background;
+    @if list.index($themeable-states, "checked-disabled") {
+        .input:checked:disabled {
+            @include _generate-custom-properties($type, $variant, "checked-disabled");
+        }
     }
+}
+
+@mixin visual($type, $variant: "default", $has-caret: false) {
+    @include _get-theme($type, $variant);
+
+    .input:disabled {
+        @include _disabled-state();
+    }
+
+    @if $type == "box" and $variant == "filled" {
+        .input {
+            border-top-color: transparent;
+            border-right-color: transparent;
+            border-left-color: transparent;
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    @if $type == "box" and $variant == "outline" and $has-caret {
+        .caret {
+            border-left: theme.$box-border-width theme.$box-select-caret-border-style var(--rui-local-border-color);
+            background: theme.$box-select-caret-background;
+        }
 
-    &.isRootDisabled .caret {
-      @include _disabled-state();
+        &.isRootDisabled .caret {
+            @include _disabled-state();
+        }
     }
-  }
 }
 
 @mixin validation($variant) {
-  @include _get-theme(validation, $variant);
+    @include _get-theme(validation, $variant);
 }