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

package/src/lib/components/Link/Link.scss

@@ -1,11 +1,11 @@
-@use 'theme';
+@use "theme";
 
 .root {
-  text-decoration: theme.$link-text-decoration;
-  color: theme.$link-color;
+    text-decoration: theme.$link-text-decoration;
+    color: theme.$link-color;
 
-  &:hover {
-    text-decoration: theme.$link-hover-text-decoration;
-    color: theme.$link-hover-color;
-  }
+    &:hover {
+        text-decoration: theme.$link-hover-text-decoration;
+        color: theme.$link-hover-color;
+    }
 }

package/src/lib/components/List/List.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 './List.scss';
 
 export const List = ({
@@ -12,7 +13,7 @@ export const List = ({
     return null;
   }
 
-  let alignClass = '';
+  let alignClass;
 
   if (align === 'start') {
     alignClass = styles.alignStart;
@@ -20,7 +21,7 @@ export const List = ({
     alignClass = styles.alignEnd;
   }
 
-  let autoWidthClass = '';
+  let autoWidthClass;
 
   if (autoWidth) {
     autoWidthClass = styles.isAutoWidth;
@@ -28,16 +29,16 @@ export const List = ({
 
   return (
     <div
-      className={`
-        ${styles.root}
-        ${autoWidthClass}
-      `.trim()}
+      className={classNames(
+        styles.root,
+        autoWidthClass,
+      )}
     >
       <ul
-        className={`
-          ${styles.list}
-          ${alignClass}
-        `.trim()}
+        className={classNames(
+          styles.list,
+          alignClass,
+        )}
       >
         {children}
       </ul>

package/src/lib/components/List/List.scss

@@ -1,53 +1,53 @@
-@use '../../styles/tools/reset';
-@use '../../styles/tools/spacing';
-@use 'theme';
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
+@use "theme";
 
 .root {
-  @include spacing.bottom(layouts);
+    @include spacing.bottom(layouts);
 }
 
 .list {
-  @include reset.list();
+    @include reset.list();
 
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .item {
-  width: 100%;
-  margin-bottom: theme.$row-gap;
+    width: 100%;
+    margin-bottom: theme.$row-gap;
 
-  &:last-child {
-    margin-bottom: 0;
-  }
+    &:last-child {
+        margin-bottom: 0;
+    }
 }
 
 .alignStart {
-  align-items: flex-start;
-  text-align: left;
+    align-items: flex-start;
+    text-align: left;
 }
 
 .alignEnd {
-  align-items: flex-end;
-  text-align: right;
+    align-items: flex-end;
+    text-align: right;
 }
 
 [dir="rtl"] .alignStart {
-  text-align: right;
+    text-align: right;
 }
 
 [dir="rtl"] .alignEnd {
-  text-align: left;
+    text-align: left;
 }
 
 .isAutoWidth .list {
-  display: inline-flex;
+    display: inline-flex;
 }
 
 .isAutoWidth .item {
-  width: auto;
+    width: auto;
 }
 
 .item .root {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }

package/src/lib/components/Media/Media.scss

@@ -1,16 +1,16 @@
-@use '../../styles/tools/spacing';
+@use "../../styles/tools/spacing";
 
 .media {
-  @include spacing.bottom(layouts);
+    @include spacing.bottom(layouts);
 
-  display: flex;
-  align-items: flex-start;
+    display: flex;
+    align-items: flex-start;
 }
 
 .object {
-  margin-right: spacing.of(3);
+    margin-right: spacing.of(3);
 }
 
 .body {
-  flex: 1;
+    flex: 1;
 }

package/src/lib/components/Modal/Modal.jsx

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createPortal } from 'react-dom';
-import transferProps from '../../utils/transferProps';
 import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { transferProps } from '../_helpers/transferProps';
 import {
   Toolbar,
   ToolbarItem,
@@ -125,10 +126,10 @@ export class Modal extends React.Component {
       if (scrollView) {
         return (
           <div
-            className={[
+            className={classNames(
               styles.body,
               styles.isBodyScrollable,
-            ].join(' ')}
+            )}
           >
             {React.cloneElement(scrollView, scrollView.props, content)}
           </div>
@@ -154,11 +155,11 @@ export class Modal extends React.Component {
         role="presentation"
       >
         <div
-          className={[
+          className={classNames(
             styles.root,
             sizeClass(size),
             positionClass(position),
-          ].join(' ')}
+          )}
           onClick={(e) => {
             e.stopPropagation();
           }}

package/src/lib/components/Modal/Modal.scss

@@ -1,126 +1,126 @@
-@use 'sass:map';
-@use '../../styles/theme/typography';
-@use '../../styles/tools/accessibility';
-@use '../../styles/tools/breakpoint';
-@use '../../styles/tools/reset';
-@use '../../styles/tools/spacing';
-@use 'settings';
-@use 'theme';
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/breakpoint";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
+@use "settings";
+@use "theme";
 
 .root {
-  --local-outer-spacing: #{theme.$outer-spacing-xs};
-
-  position: fixed;
-  left: 50%;
-  z-index: settings.$z-index;
-  display: flex;
-  flex-direction: column;
-  max-width: calc(100% - (2 * var(--local-outer-spacing)));
-  max-height: calc(100% - (2 * var(--local-outer-spacing)));
-  overflow-y: auto;
-  border-radius: settings.$border-radius;
-  background: theme.$background;
-  box-shadow: theme.$box-shadow;
-  transform: translateX(-50%);
-
-  @include breakpoint.up(sm) {
-    --local-outer-spacing: #{theme.$outer-spacing-sm};
-  }
+    --rui-local-outer-spacing: #{theme.$outer-spacing-xs};
+
+    position: fixed;
+    left: 50%;
+    z-index: settings.$z-index;
+    display: flex;
+    flex-direction: column;
+    max-width: calc(100% - (2 * var(--rui-local-outer-spacing)));
+    max-height: calc(100% - (2 * var(--rui-local-outer-spacing)));
+    overflow-y: auto;
+    border-radius: settings.$border-radius;
+    background: theme.$background;
+    box-shadow: theme.$box-shadow;
+    transform: translateX(-50%);
+
+    @include breakpoint.up(sm) {
+        --rui-local-outer-spacing: #{theme.$outer-spacing-sm};
+    }
 }
 
 .head {
-  display: flex;
-  flex: none;
-  align-items: baseline;
-  justify-content: space-between;
-  padding: settings.$padding-y spacing.of(4) settings.$padding-y settings.$padding-x;
+    display: flex;
+    flex: none;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: settings.$padding-y spacing.of(4) settings.$padding-y settings.$padding-x;
 }
 
 .headTitle {
-  font-size: settings.$head-title-font-size;
+    font-size: settings.$head-title-font-size;
 
-  &:not(:last-child) {
-    margin-bottom: 0;
-  }
+    &:not(:last-child) {
+        margin-bottom: 0;
+    }
 }
 
 .close {
-  @include reset.button();
-  @include accessibility.min-tap-target();
+    @include reset.button();
+    @include accessibility.min-tap-target();
 
-  font-size: map.get(typography.$size-values, 3);
-  line-height: 1;
-  color: inherit;
+    font-size: map.get(typography.$size-values, 3);
+    line-height: 1;
+    color: inherit;
 }
 
 .body {
-  flex: 1 1 auto;
+    flex: 1 1 auto;
 }
 
 .isBodyScrollable {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 }
 
 .content {
-  padding: settings.$padding-y settings.$padding-x settings.$content-padding-bottom;
+    padding: settings.$padding-y settings.$padding-x settings.$content-padding-bottom;
 }
 
 .footer {
-  display: flex;
-  flex: none;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  padding: settings.$padding-y settings.$padding-x;
-  border-bottom-right-radius: settings.$border-radius;
-  border-bottom-left-radius: settings.$border-radius;
-  background: theme.$footer-background;
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    padding: settings.$padding-y settings.$padding-x;
+    border-bottom-right-radius: settings.$border-radius;
+    border-bottom-left-radius: settings.$border-radius;
+    background: theme.$footer-background;
 }
 
 .backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: settings.$backdrop-z-index;
-  width: 100vw;
-  height: 100vh;
-  background: theme.$backdrop-background;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: settings.$backdrop-z-index;
+    width: 100vw;
+    height: 100vh;
+    background: theme.$backdrop-background;
 }
 
 .isRootSizeSmall {
-  width: map.get(theme.$sizes, small, width);
+    width: map.get(theme.$sizes, small, width);
 }
 
 .isRootSizeMedium {
-  width: map.get(theme.$sizes, medium, width);
+    width: map.get(theme.$sizes, medium, width);
 }
 
 .isRootSizeLarge {
-  width: map.get(theme.$sizes, large, width);
+    width: map.get(theme.$sizes, large, width);
 }
 
 .isRootSizeFullscreen {
-  width: map.get(theme.$sizes, fullscreen, width);
-  height: map.get(theme.$sizes, fullscreen, height);
+    width: map.get(theme.$sizes, fullscreen, width);
+    height: map.get(theme.$sizes, fullscreen, height);
 }
 
 .isRootSizeFullscreen .content {
-  height: 100%;
+    height: 100%;
 }
 
 .isRootSizeAuto {
-  width: auto;
-  min-width: map.get(theme.$sizes, auto, min-width);
-  max-width: map.get(theme.$sizes, auto, max-width);
+    width: auto;
+    min-width: map.get(theme.$sizes, auto, min-width);
+    max-width: map.get(theme.$sizes, auto, max-width);
 }
 
 .isRootPositionCenter {
-  top: 50%;
-  transform: translate(-50%, -50%);
+    top: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .isRootPositionTop {
-  top: var(--local-outer-spacing);
+    top: var(--rui-local-outer-spacing);
 }

package/src/lib/components/Modal/_settings.scss

@@ -1,8 +1,8 @@
-@use 'sass:map';
-@use '../../styles/settings/z-indexes';
-@use '../../styles/theme/borders';
-@use '../../styles/theme/typography';
-@use '../../styles/tools/spacing';
+@use "sass:map";
+@use "../../styles/settings/z-indexes";
+@use "../../styles/theme/borders";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/spacing";
 
 $padding-x: spacing.of(5);
 $padding-y: spacing.of(3);

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

@@ -6,21 +6,21 @@ $outer-spacing-xs: var(--rui-Modal__outer-spacing--xs);
 $outer-spacing-sm: var(--rui-Modal__outer-spacing--sm);
 
 $sizes: (
-  auto: (
-    min-width: var(--rui-Modal--auto__min-width),
-    max-width: var(--rui-Modal--auto__max-width),
-  ),
-  small: (
-    width: var(--rui-Modal--small__width),
-  ),
-  medium: (
-    width: var(--rui-Modal--medium__width),
-  ),
-  large: (
-    width: var(--rui-Modal--large__width),
-  ),
-  fullscreen: (
-    width: var(--rui-Modal--fullscreen__width),
-    height: var(--rui-Modal--fullscreen__height),
-  ),
+    auto: (
+        min-width: var(--rui-Modal--auto__min-width),
+        max-width: var(--rui-Modal--auto__max-width),
+    ),
+    small: (
+        width: var(--rui-Modal--small__width),
+    ),
+    medium: (
+        width: var(--rui-Modal--medium__width),
+    ),
+    large: (
+        width: var(--rui-Modal--large__width),
+    ),
+    fullscreen: (
+        width: var(--rui-Modal--fullscreen__width),
+        height: var(--rui-Modal--fullscreen__height),
+    ),
 );

package/src/lib/components/Paper/Paper.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 './Paper.scss';
 
 export const Paper = ({
@@ -10,11 +11,11 @@ export const Paper = ({
   raised,
 }) => (
   <div
-    className={[
+    className={classNames(
       styles.root,
-      muted ? styles.rootMuted : '',
-      raised ? styles.rootRaised : '',
-    ].join(' ')}
+      muted && styles.rootMuted,
+      raised && styles.rootRaised,
+    )}
     id={id}
   >
     {children}

package/src/lib/components/Paper/Paper.scss

@@ -1,17 +1,17 @@
-@use 'theme';
+@use "theme";
 
 .root {
-  padding: theme.$padding;
-  border: theme.$border-width solid theme.$border-color;
-  border-radius: theme.$border-radius;
-  background-color: theme.$background-color;
+    padding: theme.$padding;
+    border: theme.$border-width solid theme.$border-color;
+    border-radius: theme.$border-radius;
+    background-color: theme.$background-color;
 }
 
 .rootMuted {
-  background-color: theme.$muted-background-color;
-  opacity: theme.$muted-opacity;
+    background-color: theme.$muted-background-color;
+    opacity: theme.$muted-opacity;
 }
 
 .rootRaised {
-  box-shadow: theme.$raised-box-shadow;
+    box-shadow: theme.$raised-box-shadow;
 }

package/src/lib/components/Radio/Radio.jsx

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

package/src/lib/components/Radio/Radio.scss

@@ -1,78 +1,78 @@
-@use '../../styles/tools/form-fields/box-field-elements';
-@use '../../styles/tools/form-fields/box-field-layout';
-@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/reset';
-@use '../../styles/tools/spacing';
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@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/reset";
+@use "../../styles/tools/spacing";
 
 // Foundation
 .root {
-  @include foundation.root();
-  @include variants.visual(check);
+    @include foundation.root();
+    @include variants.visual(check);
 }
 
 .label,
 .optionLabel {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .list {
-  @include reset.list();
+    @include reset.list();
 }
 
 .option {
-  @include inline-field-layout.field();
-  @include inline-field-elements.min-tap-target($type: radio);
+    @include inline-field-layout.field();
+    @include inline-field-elements.min-tap-target($type: radio);
 }
 
 .input {
-  @include inline-field-elements.check-input($type: radio);
+    @include inline-field-elements.check-input($type: radio);
 }
 
 .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
 .rootLayoutVertical,
 .rootLayoutHorizontal {
-  @include box-field-layout.vertical($has-list: true);
+    @include box-field-layout.vertical($has-list: true);
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal($has-min-tap-target: true);
+    @include box-field-layout.horizontal($has-min-tap-target: true);
 }
 
 .isRootFullWidth {
-  @include box-field-layout.full-width();
+    @include box-field-layout.full-width();
 }
 
 .isRootInFormLayout {
-  @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout();
 }