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

package/src/lib/styles/tools/_utilities.scss

@@ -1,30 +1,30 @@
 // Utility generator
 // Inspired by Bootstrap 4
 
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
 
 @mixin generate($utility, $infix) {
-  $values: map.get($utility, values);
+    $values: map.get($utility, values);
 
-  // If the values are a list or string, convert it into a map
-  @if meta.type-of($values) == 'string' or meta.type-of(list.nth($values, 1)) != 'list' {
-    $values: list.zip($values, $values);
-  }
+    // If the values are a list or string, convert it into a map
+    @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
+        $values: list.zip($values, $values);
+    }
 
-  @each $key, $value in $values {
-    $properties: map.get($utility, property);
-    $property-class: map.get($utility, class);
+    @each $key, $value in $values {
+        $properties: map.get($utility, property);
+        $property-class: map.get($utility, class);
 
-    // Don't prefix if value key is null (e.g. with shadow class)
-    $property-class-modifier: if($key, '-' + $key, '');
+        // Don't prefix if value key is null (e.g. with shadow class)
+        $property-class-modifier: if($key, "-" + $key, "");
 
-    :global(.#{$property-class + $infix + $property-class-modifier}) {
-      @each $property in $properties {
-        // stylelint-disable-next-line declaration-no-important
-        #{$property}: $value !important;
-      }
+        :global(.#{$property-class + $infix + $property-class-modifier}) {
+            @each $property in $properties {
+                // stylelint-disable-next-line declaration-no-important
+                #{$property}: $value !important;
+            }
+        }
     }
-  }
 }

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

@@ -4,121 +4,121 @@
 // 3. Let inputs properly fit various layout scenarios.
 // 4. Leave out space for SelectField caret.
 
-@use '../../settings/form-fields' as settings;
-@use '../../theme/form-fields' as theme;
-@use '../../tools/caret';
-@use '../spacing';
-@use '../transition';
+@use "../../settings/form-fields" as settings;
+@use "../../theme/form-fields" as theme;
+@use "../../tools/caret";
+@use "../spacing";
+@use "../transition";
 
 @mixin input-container() {
-  position: relative; // 1.
-  display: inline-flex;
-  min-width: 0; // 3.
-  max-width: 100%; // 3.
+    position: relative; // 1.
+    display: inline-flex;
+    min-width: 0; // 3.
+    max-width: 100%; // 3.
 }
 
 @mixin input() {
-  @include transition.add((opacity, color, border-color, background-color, box-shadow));
-
-  appearance: none;
-  width: theme.$box-input-width;
-  min-width: theme.$box-input-min-width;
-  max-width: 100%; // 3.
-  height: var(--rui-local-height);
-  padding: var(--rui-local-padding-y) var(--rui-local-padding-x);
-  font-weight: settings.$box-input-font-weight;
-  font-size: var(--rui-local-font-size);
-  line-height: settings.$box-input-line-height;
-  font-family: settings.$box-input-font-family;
-  vertical-align: middle;
-  color: var(--rui-local-color);
-  border: theme.$box-border-width solid var(--rui-local-border-color);
-  border-radius: theme.$box-border-radius;
-  background: var(--rui-local-background);
-  box-shadow: var(--rui-local-box-shadow);
-
-  &::placeholder {
-    color: theme.$box-placeholder-color;
-    opacity: 1;
-  }
+    @include transition.add((opacity, color, border-color, background-color, box-shadow));
+
+    appearance: none;
+    width: theme.$box-input-width;
+    min-width: theme.$box-input-min-width;
+    max-width: 100%; // 3.
+    height: var(--rui-local-height);
+    padding: var(--rui-local-padding-y) var(--rui-local-padding-x);
+    font-weight: settings.$box-input-font-weight;
+    font-size: var(--rui-local-font-size);
+    line-height: settings.$box-input-line-height;
+    font-family: settings.$box-input-font-family;
+    vertical-align: middle;
+    color: var(--rui-local-color);
+    border: theme.$box-border-width solid var(--rui-local-border-color);
+    border-radius: theme.$box-border-radius;
+    background: var(--rui-local-background);
+    box-shadow: var(--rui-local-box-shadow);
+
+    &::placeholder {
+        color: theme.$box-placeholder-color;
+        opacity: 1;
+    }
 }
 
 @mixin input-size() {
-  width:
-    calc(
-      1ch * var(--rui-custom-input-size)
-      + var(--rui-local-arrows-width, 0)
-      + 2 * var(--rui-local-padding-x)
-      + 2 * #{theme.$box-border-width}
-    ); // 2.
-
-  min-width: auto; // 2.
-
-  &[type="number"] {
-    --rui-local-arrows-width: #{settings.$box-field-input-number-arrows-width};
-  }
+    width:
+        calc(
+            1ch * var(--rui-custom-input-size)
+            + var(--rui-local-arrows-width, 0)
+            + 2 * var(--rui-local-padding-x)
+            + 2 * #{theme.$box-border-width}
+        ); // 2.
+
+    min-width: auto; // 2.
+
+    &[type="number"] {
+        --rui-local-arrows-width: #{settings.$box-field-input-number-arrows-width};
+    }
 }
 
 @mixin input-textarea() {
-  resize: vertical;
+    resize: vertical;
 
-  &[cols] {
-    min-width: auto;
-  }
+    &[cols] {
+        min-width: auto;
+    }
 }
 
 @mixin input-select() {
-  appearance: none;
-  padding-right: calc(#{settings.$box-field-caret-size} + #{spacing.of(2)}); // 4.
+    appearance: none;
+    padding-right: calc(#{settings.$box-field-caret-size} + #{spacing.of(2)}); // 4.
 
-  &::-ms-expand {
-    display: none;
-  }
+    &::-ms-expand {
+        display: none;
+    }
 }
 
 @mixin input-select-option() {
-  option:disabled {
-    color: theme.$box-select-option-disabled-color;
-  }
+    option:disabled {
+        color: theme.$box-select-option-disabled-color;
+    }
 }
 
 @mixin caret() {
-  @include transition.add((border-color));
-
-  position: absolute; // 1.
-  top: theme.$box-border-width;
-  right: theme.$box-border-width;
-  bottom: theme.$box-border-width;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(#{settings.$box-field-caret-size} - 2 * #{theme.$box-border-width});
-  border-top-right-radius: theme.$box-border-radius;
-  border-bottom-right-radius: theme.$box-border-radius;
-  pointer-events: none;
+    @include transition.add((border-color));
+
+    position: absolute; // 1.
+    top: theme.$box-border-width;
+    right: theme.$box-border-width;
+    bottom: theme.$box-border-width;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(#{settings.$box-field-caret-size} - 2 * #{theme.$box-border-width});
+    border-top-right-radius: theme.$box-border-radius;
+    border-bottom-right-radius: theme.$box-border-radius;
+    pointer-events: none;
 }
 
 @mixin caret-icon() {
-  @include caret.create();
+    @include caret.create();
 
-  border-color: var(--rui-local-color);
+    border-color: var(--rui-local-color);
 }
 
 @mixin bottom-line() {
-  @include transition.add((transform, opacity), 180ms);
-
-  position: absolute; // 1.
-  bottom: 0;
-  width: 100%;
-  height: settings.$box-field-bottom-line-height;
-  opacity: 0;
-  transform: scaleX(0);
-  transform-origin: center center;
-  pointer-events: none;
-
-  .input:focus ~ & {
-    background-color: var(--rui-local-border-color);
-    opacity: 1;
-    transform: scaleX(1);
-  }
+    @include transition.add((transform, opacity), 180ms);
+
+    position: absolute; // 1.
+    bottom: 0;
+    width: 100%;
+    height: settings.$box-field-bottom-line-height;
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: center center;
+    pointer-events: none;
+
+    .input:focus ~ & {
+        background-color: var(--rui-local-border-color);
+        opacity: 1;
+        transform: scaleX(1);
+    }
 }

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