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

package/src/lib/components/Button/_tools.scss

@@ -15,142 +15,140 @@
 //
 // 5. Use original padding to restore square buttons back to their size.
 
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:math';
-@use '../../styles/tools/accessibility';
-@use '../../styles/tools/breakpoint';
-@use '../../styles/tools/transition';
-@use 'settings';
-@use 'theme';
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/breakpoint";
+@use "../../styles/tools/transition";
+@use "settings";
+@use "theme";
 
 // 1.
 @mixin _get-themeable-properties($priority, $color, $state) {
-  @if (not list.index(map.keys(settings.$themeable-priority-properties), $priority)) {
-    @error "Invalid priority specified! #{$priority} doesn't exist. "
-      + "Choose one of #{settings.$themeable-priority-properties}.";
-  }
-
-  @if (not list.index(settings.$themeable-variants, $color)) {
-    @error "Invalid variant specified! #{$color} doesn't exist. "
-      + "Choose one of #{settings.$themeable-variants}.";
-  }
-
-  @if (not list.index(settings.$themeable-states, $state)) {
-    @error "Invalid state specified! #{$state} doesn't exist. "
-      + "Choose one of #{settings.$themeable-states}.";
-  }
-
-  $properties: map.get(settings.$themeable-priority-properties, $priority);
-
-  // 2.
-  @if ($state == 'disabled') {
-    @each $property in $properties {
-      --rui-local-#{$property}:
-        var(
-          --rui-Button--#{$priority}--#{$color}--#{$state}__#{$property},
-          var(--rui-Button--#{$priority}--#{$color}--default__#{$property})
-        );
+    @if not list.index(map.keys(settings.$themeable-priority-properties), $priority) {
+        @error "Invalid priority specified! #{$priority} doesn't exist. "
+            + "Choose one of #{settings.$themeable-priority-properties}.";
     }
-  }
 
-  @else {
-    @each $property in $properties {
-      --rui-local-#{$property}: var(--rui-Button--#{$priority}--#{$color}--#{$state}__#{$property});
+    @if not list.index(settings.$themeable-variants, $color) {
+        @error "Invalid variant specified! #{$color} doesn't exist. "
+            + "Choose one of #{settings.$themeable-variants}.";
+    }
+
+    @if not list.index(settings.$themeable-states, $state) {
+        @error "Invalid state specified! #{$state} doesn't exist. "
+            + "Choose one of #{settings.$themeable-states}.";
+    }
+
+    $properties: map.get(settings.$themeable-priority-properties, $priority);
+
+    // 2.
+    @if $state == "disabled" {
+        @each $property in $properties {
+            --rui-local-#{$property}:
+                var(
+                    --rui-Button--#{$priority}--#{$color}--#{$state}__#{$property},
+                    var(--rui-Button--#{$priority}--#{$color}--default__#{$property})
+                );
+        }
+    } @else {
+        @each $property in $properties {
+            --rui-local-#{$property}: var(--rui-Button--#{$priority}--#{$color}--#{$state}__#{$property});
+        }
     }
-  }
 }
 
 // 4.
 @mixin _button-square() {
-  --rui-local-padding: 0;
-  --rui-local-width: var(--rui-local-height);
+    --rui-local-padding: 0;
+    --rui-local-width: var(--rui-local-height);
 }
 
 // 5.
 @mixin _button-size-restore() {
-  --rui-local-padding: var(--rui-local-padding-original);
-  --rui-local-width: unset;
+    --rui-local-padding: var(--rui-local-padding-original);
+    --rui-local-width: unset;
 }
 
 @mixin button() {
-  @include transition.add((opacity, color, border-color, background-color, box-shadow));
-
-  position: relative; // 3.
-  display: inline-flex;
-  column-gap: settings.$icon-spacing;
-  align-items: center;
-  justify-content: center;
-  width: var(--rui-local-width, auto);
-  height: var(--rui-local-height, auto);
-  padding: var(--rui-local-padding);
-  font: theme.$font-weight list.slash(var(--rui-local-font-size), settings.$line-height) settings.$font-family;
-  letter-spacing: theme.$letter-spacing;
-  text-align: center;
-  text-decoration: none;
-  text-transform: theme.$text-transform;
-  vertical-align: middle;
-  color: var(--rui-local-color);
-  border: theme.$border-width solid var(--rui-local-border-color, transparent);
-  border-radius: theme.$border-radius;
-  background: var(--rui-local-background, transparent);
-  box-shadow: var(--rui-local-box-shadow, none);
-  user-select: none;
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
+    @include transition.add((opacity, color, border-color, background-color, box-shadow));
+
+    position: relative; // 3.
+    display: inline-flex;
+    column-gap: settings.$icon-spacing;
+    align-items: center;
+    justify-content: center;
+    width: var(--rui-local-width, auto);
+    min-height: var(--rui-local-height, auto);
+    padding: var(--rui-local-padding);
+    font: theme.$font-weight list.slash(var(--rui-local-font-size), settings.$line-height) settings.$font-family;
+    letter-spacing: theme.$letter-spacing;
+    text-align: center;
     text-decoration: none;
-  }
+    text-transform: theme.$text-transform;
+    vertical-align: middle;
+    color: var(--rui-local-color);
+    border: theme.$border-width solid var(--rui-local-border-color, transparent);
+    border-radius: theme.$border-radius;
+    background: var(--rui-local-background, transparent);
+    box-shadow: var(--rui-local-box-shadow, none);
+    user-select: none;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+        text-decoration: none;
+    }
 
-  &:disabled {
-    opacity: theme.$disabled-opacity;
-    cursor: theme.$disabled-cursor;
-  }
+    &:disabled {
+        opacity: theme.$disabled-opacity;
+        cursor: theme.$disabled-cursor;
+    }
 
-  &:-moz-focusring {
-    outline: 0;
-  }
+    &:-moz-focusring {
+        outline: 0;
+    }
 }
 
 @mixin button-size($size) {
-  $properties: map.get(theme.$sizes, $size);
+    $properties: map.get(theme.$sizes, $size);
 
-  --rui-local-height: #{map.get($properties, height)};
-  --rui-local-padding: 0 #{map.get($properties, padding-x)};
-  --rui-local-padding-original: 0 #{map.get($properties, padding-x)}; // 5.
-  --rui-local-font-size: #{map.get($properties, font-size)};
+    --rui-local-height: #{map.get($properties, height)};
+    --rui-local-padding: #{map.get($properties, padding-y)} #{map.get($properties, padding-x)};
+    --rui-local-padding-original: #{map.get($properties, padding-y)} #{map.get($properties, padding-x)}; // 5.
+    --rui-local-font-size: #{map.get($properties, font-size)};
 }
 
 @mixin button-color($priority, $color) {
-  @include _get-themeable-properties($priority, $color, default);
+    @include _get-themeable-properties($priority, $color, default);
 
-  &:disabled {
-    @include _get-themeable-properties($priority, $color, disabled);
-  }
+    &:disabled {
+        @include _get-themeable-properties($priority, $color, disabled);
+    }
 
-  &:not(:disabled):hover,
-  &:not(:disabled):focus {
-    @include _get-themeable-properties($priority, $color, hover);
-  }
+    &:not(:disabled):hover,
+    &:not(:disabled):focus {
+        @include _get-themeable-properties($priority, $color, hover);
+    }
 
-  &:not(:disabled):active {
-    @include _get-themeable-properties($priority, $color, active);
-  }
+    &:not(:disabled):active {
+        @include _get-themeable-properties($priority, $color, active);
+    }
 }
 
 @mixin hide-label() {
-  @include _button-square();
+    @include _button-square();
 
-  .label {
-    @include accessibility.hide-text();
-  }
+    .label {
+        @include accessibility.hide-text();
+    }
 }
 
 @mixin show-label() {
-  @include _button-size-restore();
+    @include _button-size-restore();
 
-  .label {
-    @include accessibility.unhide-text();
-  }
+    .label {
+        @include accessibility.unhide-text();
+    }
 }

package/src/lib/components/ButtonGroup/ButtonGroup.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
 import styles from './ButtonGroup.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 
@@ -13,10 +14,10 @@ export const ButtonGroup = ({
   ...restProps
 }) => (
   <div
-    className={[
+    className={classNames(
       styles.root,
-      block ? styles.isRootBlock : '',
-    ].join(' ')}
+      block && styles.isRootBlock,
+    )}
     role="group"
     {...restProps}
   >

package/src/lib/components/ButtonGroup/ButtonGroup.scss

@@ -1,8 +1,8 @@
 .root {
-  display: inline-flex;
+    display: inline-flex;
 }
 
 .isRootBlock {
-  display: flex;
-  width: 100%;
+    display: flex;
+    width: 100%;
 }

package/src/lib/components/Card/Card.jsx

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import getRootColorClassName from '../../helpers/getRootColorClassName';
 import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Card.scss';
 
 export const Card = ({
@@ -13,13 +14,13 @@ export const Card = ({
   color,
 }) => (
   <div
-    className={[
+    className={classNames(
       styles.root,
       getRootColorClassName(color, styles),
-      dense ? styles.rootDense : '',
-      raised ? styles.rootRaised : '',
-      disabled ? styles.isDisabled : '',
-    ].join(' ')}
+      dense && styles.rootDense,
+      raised && styles.rootRaised,
+      disabled && styles.isDisabled,
+    )}
     id={id}
   >
     {children}

package/src/lib/components/Card/Card.scss

@@ -1,79 +1,79 @@
 // 1. Retain equal card widths in flex and grid layouts independently on their content.
 
-@use '../../styles/theme/colors';
-@use 'theme';
-@use 'tools';
+@use "../../styles/theme/colors";
+@use "theme";
+@use "tools";
 
 .root {
-  --rui-local-padding: #{theme.$padding};
+    --rui-local-padding: #{theme.$padding};
 
-  display: flex;
-  flex-direction: column;
-  min-width: 0; // 1.
-  color: var(--rui-local-color);
-  border: theme.$border-width solid var(--rui-local-border-color);
-  border-radius: theme.$border-radius;
-  background-color: var(--rui-local-background-color);
+    display: flex;
+    flex-direction: column;
+    min-width: 0; // 1.
+    color: var(--rui-local-color);
+    border: theme.$border-width solid var(--rui-local-border-color);
+    border-radius: theme.$border-radius;
+    background-color: var(--rui-local-background-color);
 }
 
 .body {
-  flex: 1 0 auto;
-  padding: var(--rui-local-padding);
+    flex: 1 0 auto;
+    padding: var(--rui-local-padding);
 }
 
 .footer {
-  padding: var(--rui-local-padding);
+    padding: var(--rui-local-padding);
 }
 
 .rootDense {
-  --rui-local-padding: #{theme.$dense-padding};
+    --rui-local-padding: #{theme.$dense-padding};
 }
 
 .rootRaised {
-  box-shadow: theme.$raised-box-shadow;
+    box-shadow: theme.$raised-box-shadow;
 }
 
 .rootColorPrimary {
-  @include tools.color(primary);
+    @include tools.color(primary);
 }
 
 .rootColorSecondary {
-  @include tools.color(secondary);
+    @include tools.color(secondary);
 }
 
 .rootColorSuccess {
-  @include tools.color(success);
+    @include tools.color(success);
 }
 
 .rootColorWarning {
-  @include tools.color(warning);
+    @include tools.color(warning);
 }
 
 .rootColorDanger {
-  @include tools.color(danger);
+    @include tools.color(danger);
 }
 
 .rootColorHelp {
-  @include tools.color(help);
+    @include tools.color(help);
 }
 
 .rootColorInfo {
-  @include tools.color(info);
+    @include tools.color(info);
 }
 
 .rootColorNote {
-  @include tools.color(note);
+    @include tools.color(note);
 }
 
 .rootColorLight {
-  @include tools.color(light);
+    @include tools.color(light);
 }
 
 .rootColorDark {
-  @include tools.color(dark);
+    @include tools.color(dark);
 }
 
 .isDisabled {
-  background-color: theme.$disabled-background-color;
-  opacity: theme.$disabled-opacity;
+    background-color: theme.$disabled-background-color;
+    opacity: theme.$disabled-opacity;
 }

package/src/lib/components/Card/_theme.scss

@@ -9,54 +9,54 @@ $disabled-background-color: var(--rui-Card--disabled__background-color);
 $disabled-opacity: var(--rui-Card--disabled__opacity);
 
 $colors: (
-  primary: (
-    color: var(--rui-Card--primary__color),
-    border-color: var(--rui-Card--primary__border-color),
-    background-color: var(--rui-Card--primary__background-color),
-  ),
-  secondary: (
-    color: var(--rui-Card--secondary__color),
-    border-color: var(--rui-Card--secondary__border-color),
-    background-color: var(--rui-Card--secondary__background-color),
-  ),
-  success: (
-    color: var(--rui-Card--success__color),
-    border-color: var(--rui-Card--success__border-color),
-    background-color: var(--rui-Card--success__background-color),
-  ),
-  warning: (
-    color: var(--rui-Card--warning__color),
-    border-color: var(--rui-Card--warning__border-color),
-    background-color: var(--rui-Card--warning__background-color),
-  ),
-  danger: (
-    color: var(--rui-Card--danger__color),
-    border-color: var(--rui-Card--danger__border-color),
-    background-color: var(--rui-Card--danger__background-color),
-  ),
-  info: (
-    color: var(--rui-Card--info__color),
-    border-color: var(--rui-Card--info__border-color),
-    background-color: var(--rui-Card--info__background-color),
-  ),
-  help: (
-    color: var(--rui-Card--help__color),
-    border-color: var(--rui-Card--help__border-color),
-    background-color: var(--rui-Card--help__background-color),
-  ),
-  note: (
-    color: var(--rui-Card--note__color),
-    border-color: var(--rui-Card--note__border-color),
-    background-color: var(--rui-Card--note__background-color),
-  ),
-  light: (
-    color: var(--rui-Card--light__color),
-    border-color: var(--rui-Card--light__border-color),
-    background-color: var(--rui-Card--light__background-color),
-  ),
-  dark: (
-    color: var(--rui-Card--dark__color),
-    border-color: var(--rui-Card--dark__border-color),
-    background-color: var(--rui-Card--dark__background-color),
-  ),
+    primary: (
+        color: var(--rui-Card--primary__color),
+        border-color: var(--rui-Card--primary__border-color),
+        background-color: var(--rui-Card--primary__background-color),
+    ),
+    secondary: (
+        color: var(--rui-Card--secondary__color),
+        border-color: var(--rui-Card--secondary__border-color),
+        background-color: var(--rui-Card--secondary__background-color),
+    ),
+    success: (
+        color: var(--rui-Card--success__color),
+        border-color: var(--rui-Card--success__border-color),
+        background-color: var(--rui-Card--success__background-color),
+    ),
+    warning: (
+        color: var(--rui-Card--warning__color),
+        border-color: var(--rui-Card--warning__border-color),
+        background-color: var(--rui-Card--warning__background-color),
+    ),
+    danger: (
+        color: var(--rui-Card--danger__color),
+        border-color: var(--rui-Card--danger__border-color),
+        background-color: var(--rui-Card--danger__background-color),
+    ),
+    info: (
+        color: var(--rui-Card--info__color),
+        border-color: var(--rui-Card--info__border-color),
+        background-color: var(--rui-Card--info__background-color),
+    ),
+    help: (
+        color: var(--rui-Card--help__color),
+        border-color: var(--rui-Card--help__border-color),
+        background-color: var(--rui-Card--help__background-color),
+    ),
+    note: (
+        color: var(--rui-Card--note__color),
+        border-color: var(--rui-Card--note__border-color),
+        background-color: var(--rui-Card--note__background-color),
+    ),
+    light: (
+        color: var(--rui-Card--light__color),
+        border-color: var(--rui-Card--light__border-color),
+        background-color: var(--rui-Card--light__background-color),
+    ),
+    dark: (
+        color: var(--rui-Card--dark__color),
+        border-color: var(--rui-Card--dark__border-color),
+        background-color: var(--rui-Card--dark__background-color),
+    ),
 );

package/src/lib/components/Card/_tools.scss

@@ -1,10 +1,10 @@
-@use 'sass:map';
-@use 'theme';
+@use "sass:map";
+@use "theme";
 
 @mixin color($color) {
-  $color-variant-properties: map.get(theme.$colors, $color);
+    $color-variant-properties: map.get(theme.$colors, $color);
 
-  --rui-local-color: #{map.get($color-variant-properties, color)};
-  --rui-local-border-color: #{map.get($color-variant-properties, border-color)};
-  --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
+    --rui-local-color: #{map.get($color-variant-properties, color)};
+    --rui-local-border-color: #{map.get($color-variant-properties, border-color)};
+    --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
 }

package/src/lib/components/CheckboxField/CheckboxField.jsx

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
 import { withProviderContext } from '../../provider';
-import transferProps from '../../utils/transferProps';
+import { classNames } from '../../utils/classNames';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import withForwardedRef from '../withForwardedRef';
 import styles from './CheckboxField.scss';
@@ -26,15 +27,15 @@ export const CheckboxField = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        context ? styles.isRootInFormLayout : '',
+        context && styles.isRootInFormLayout,
         context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
-        labelPosition === 'before' ? styles.hasRootLabelBefore : '',
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        labelPosition === 'before' && styles.hasRootLabelBefore,
+        disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
-      ].join(' ')}
+      )}
       htmlFor={id}
       id={id && `${id}__label`}
     >
@@ -51,10 +52,10 @@ export const CheckboxField = ({
           value={value}
         />
         <div
-          className={[
+          className={classNames(
             styles.label,
-            isLabelVisible ? '' : styles.isLabelHidden,
-          ].join(' ')}
+            !isLabelVisible && styles.isLabelHidden,
+          )}
           id={id && `${id}__labelText`}
         >
           {label}

package/src/lib/components/CheckboxField/CheckboxField.scss

@@ -1,61 +1,61 @@
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/inline-field-elements';
-@use '../../styles/tools/form-fields/inline-field-layout';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/inline-field-elements";
+@use "../../styles/tools/form-fields/inline-field-layout";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
 
 // Foundation
 .root {
-  @include foundation.root();
-  @include inline-field-layout.root();
-  @include inline-field-elements.min-tap-target($type: checkbox);
-  @include variants.visual(check);
+    @include foundation.root();
+    @include inline-field-layout.root();
+    @include inline-field-elements.min-tap-target($type: checkbox);
+    @include variants.visual(check);
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .field {
-  @include inline-field-layout.field();
+    @include inline-field-layout.field();
 }
 
 .input {
-  @include inline-field-elements.check-input($type: checkbox);
+    @include inline-field-elements.check-input($type: checkbox);
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .hasRootLabelBefore {
-  @include inline-field-layout.has-label-before();
+    @include inline-field-layout.has-label-before();
 }
 
 .isRootInFormLayout {
-  @include inline-field-layout.in-form-layout();
+    @include inline-field-layout.in-form-layout();
 }