@react-ui-org/react-ui 0.44.0 → 0.46.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,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ButtonGroup.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 
@@ -11,30 +13,37 @@ export const ButtonGroup = ({
   priority,
   size,
   ...restProps
-}) => (
-  <div
-    className={[
-      styles.root,
-      block ? styles.isRootBlock : '',
-    ].join(' ')}
-    role="group"
-    {...restProps}
-  >
-    <ButtonGroupContext.Provider
-      value={{
-        block,
-        disabled,
-        priority,
-        size,
-      }}
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(
+        styles.root,
+        block && styles.isRootBlock,
+      )}
+      role="group"
+      {...restProps}
     >
-      {children}
-    </ButtonGroupContext.Provider>
-  </div>
-);
+      <ButtonGroupContext.Provider
+        value={{
+          block,
+          disabled,
+          priority,
+          size,
+        }}
+      >
+        {children}
+      </ButtonGroupContext.Provider>
+    </div>
+  );
+};
 
 ButtonGroup.defaultProps = {
   block: false,
+  children: null,
   disabled: false,
   priority: 'filled',
   size: 'medium',
@@ -46,9 +55,9 @@ ButtonGroup.propTypes = {
    */
   block: PropTypes.bool,
   /**
-   * Buttons to be grouped.
+   * Buttons to be grouped. If none are provided nothing is rendered.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * If `true`, all buttons inside the group will be disabled.
    */

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

@@ -44,11 +44,11 @@ See [API](#api) for all available options.
 - Use **short labels or icons** so the buttons can fit small screens.
 
 - For toggling between on/off states, use rather the
-  [Toggle](/components/ui/toggle) component.
+  [Toggle](/components/toggle) component.
 
 - For switching between options in a form that needs to be submitted, use rather
-  the [SelectField](/components/ui/select-field) or
-  [Radio](/components/ui/radio) components.
+  the [SelectField](/components/select-field) or
+  [Radio](/components/radio) components.
 
 - Be careful with using `startCorner` and `endCorner` options for grouped
   buttons. Overflowing elements may cause undesired interaction problems.
@@ -65,7 +65,7 @@ different types or sizes.
 ## Priorities
 
 There are three **visual priorities** of buttons which exactly copy the
-priorities of the [Button](/components/ui/button) component:
+priorities of the [Button](/components/button) component:
 
 1. filled
 2. outline

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/CardBody.jsx

@@ -3,17 +3,11 @@ import React from 'react';
 import { withProviderContext } from '../../provider';
 import styles from './Card.scss';
 
-export const CardBody = (props) => {
-  const {
-    children,
-  } = props;
-
-  return (
-    <div className={styles.body}>
-      {children}
-    </div>
-  );
-};
+export const CardBody = ({ children }) => (
+  <div className={styles.body}>
+    {children}
+  </div>
+);
 
 CardBody.propTypes = {
   /**

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

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Card.scss';
 
-export const CardFooter = (props) => {
-  const {
-    children,
-  } = props;
+export const CardFooter = ({ children }) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   return (
     <div className={styles.footer}>
@@ -15,11 +16,15 @@ export const CardFooter = (props) => {
   );
 };
 
+CardFooter.defaultProps = {
+  children: null,
+};
+
 CardFooter.propTypes = {
   /**
    * Card actions, usually buttons.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 export const CardFooterWithContext = withProviderContext(CardFooter, 'CardFooter');

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

@@ -53,7 +53,7 @@ See [API](#api) for all available options.
   grid. It will help you keep the UI clean and easy to scan.
 
 - **Card, or Paper?** Card is a versatile surface for displaying content.
-  However, there is also the [Paper](/components/ui/paper) component. While Card
+  However, there is also the [Paper](/components/paper) component. While Card
   is designed for displaying items (and also supports more visual options),
   Paper is usually used to hold larger content areas like lists, grids, or
   forms.
@@ -119,7 +119,7 @@ card should be also smaller to keep the card contained and easy to scan.
 
 ## Scrollable Card
 
-Combine Card with [ScrollView](/components/ui/scroll-view) to enable scrolling
+Combine Card with [ScrollView](/components/scroll-view) to enable scrolling
 for card content.
 
 <Playground>