@react-ui-org/react-ui 0.44.0 → 0.46.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/Media/MediaBody.jsx

@@ -1,19 +1,30 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Media.scss';
 
-export const MediaBody = ({ children }) => (
-  <div className={styles.body}>
-    {children}
-  </div>
-);
+export const MediaBody = ({ children }) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.body}>
+      {children}
+    </div>
+  );
+};
+
+MediaBody.defaultProps = {
+  children: null,
+};
 
 MediaBody.propTypes = {
   /**
-   * Content of the media layout.
+   * Content of the media layout. If none are provided nothing is rendered.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 export const MediaBodyWithContext = withProviderContext(MediaBody, 'MediaBody');

package/src/lib/components/Media/MediaObject.jsx

@@ -1,19 +1,30 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Media.scss';
 
-export const MediaObject = ({ children }) => (
-  <div className={styles.object}>
-    {children}
-  </div>
-);
+export const MediaObject = ({ children }) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.object}>
+      {children}
+    </div>
+  );
+};
+
+MediaObject.defaultProps = {
+  children: null,
+};
 
 MediaObject.propTypes = {
   /**
-   * Accompanying media object for the Media layout, eg. an image.
+   * Accompanying media object for the Media layout, eg. an image. If none are provided nothing is rendered.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 export const MediaObjectWithContext = withProviderContext(MediaObject, 'MediaObject');

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();
           }}
@@ -234,6 +235,7 @@ export class Modal extends React.Component {
 Modal.defaultProps = {
   actions: [],
   autoFocus: true,
+  children: null,
   id: undefined,
   onClose: null,
   portalId: null,
@@ -265,7 +267,7 @@ Modal.propTypes = {
   /**
    * Content of the modal.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * ID of the root HTML element. It also serves as a base for nested elements:
    * * `<ID>__content`

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/README.mdx

@@ -155,7 +155,7 @@ On top of that, the modal is able to adjust to the width of its content.
 
 👉 Please note the auto width may not function correctly in combination with
 other auto layout mechanisms, e.g. the auto-width
-[FormLayout](/components/layout/form-layout#label-width). It's just too much
+[FormLayout](/components/form-layout#label-width). It's just too much
 magic that doesn't work together yet 🎩.
 
 <Playground>
@@ -248,7 +248,7 @@ When modals become too long for the user's viewport or device, they scroll
 independent of the page itself.
 
 The inner implementation of body scrolling uses a partially
-[customizable](#api) instance of the [ScrollView](/components/ui/scroll-view)
+[customizable](#api) instance of the [ScrollView](/components/scroll-view)
 component.
 
 <Playground>

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}
@@ -22,7 +23,6 @@ export const Paper = ({
 );
 
 Paper.defaultProps = {
-  children: null,
   id: undefined,
   muted: false,
   raised: false,
@@ -32,7 +32,7 @@ Paper.propTypes = {
   /**
    * Content to be placed onto Paper.
    */
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
   /**
    * ID of the root HTML element.
    */

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/Paper/README.mdx

@@ -39,7 +39,7 @@ See [API](#api) for all available options.
   the default appearance to make it stand out on white background.
 
 - **Paper, or Card?** Paper is a basic surface to put content on. However,
-  there is also the [Card](/components/ui/card) component. While Paper is
+  there is also the [Card](/components/card) component. While Paper is
   usually used to hold larger content areas like lists, grids, or forms, Card is
   designed for displaying items. Card also supports more visual options.
 

package/src/lib/components/Radio/README.mdx

@@ -56,13 +56,13 @@ See [API](#api) for all available options.
 ## General Guidelines
 
 - Use Radio for **just a few options**. For larger sets of many options (say 4
-  and more) consider using the [SelectField](/components/ui/select-field)
+  and more) consider using the [SelectField](/components/select-field)
   component. This will help keep your UI clean and uncluttered and prevent your
   users from being overwhelmed by too many options.
 
 - **Don't use for boolean** (true/false) selection or to toggle things on and
-  off. [CheckboxField](/components/ui/checkbox-field) and
-  [Toggle](/components/ui/toggle) are more suitable for such cases.
+  off. [CheckboxField](/components/checkbox-field) and
+  [Toggle](/components/toggle) are more suitable for such cases.
 
 - Use **short and descriptive labels**, ideally nouns rather than seemingly
   polite phrases like _Please select your favourite fruit_. Short labels will
@@ -287,7 +287,7 @@ It's possible to disable just some options or the whole set.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `input` HTML element. This enables making the component
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={Radio} />

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}