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

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

@@ -1,152 +1,152 @@
-@use 'sass:map';
-@use 'settings';
-@use 'theme';
-@use 'tools';
+@use "sass:map";
+@use "settings";
+@use "theme";
+@use "tools";
 
 .rootPriorityFilled.rootColorPrimary {
-  @include tools.button-color(filled, primary);
+    @include tools.button-color(filled, primary);
 }
 
 .rootPriorityFilled.rootColorSecondary {
-  @include tools.button-color(filled, secondary);
+    @include tools.button-color(filled, secondary);
 }
 
 .rootPriorityFilled.rootColorSuccess {
-  @include tools.button-color(filled, success);
+    @include tools.button-color(filled, success);
 }
 
 .rootPriorityFilled.rootColorWarning {
-  @include tools.button-color(filled, warning);
+    @include tools.button-color(filled, warning);
 }
 
 .rootPriorityFilled.rootColorDanger {
-  @include tools.button-color(filled, danger);
+    @include tools.button-color(filled, danger);
 }
 
 .rootPriorityFilled.rootColorHelp {
-  @include tools.button-color(filled, help);
+    @include tools.button-color(filled, help);
 }
 
 .rootPriorityFilled.rootColorInfo {
-  @include tools.button-color(filled, info);
+    @include tools.button-color(filled, info);
 }
 
 .rootPriorityFilled.rootColorNote {
-  @include tools.button-color(filled, note);
+    @include tools.button-color(filled, note);
 }
 
 .rootPriorityFilled.rootColorLight {
-  @include tools.button-color(filled, light);
+    @include tools.button-color(filled, light);
 }
 
 .rootPriorityFilled.rootColorDark {
-  @include tools.button-color(filled, dark);
+    @include tools.button-color(filled, dark);
 }
 
 .rootPriorityOutline.rootColorPrimary {
-  @include tools.button-color(outline, primary);
+    @include tools.button-color(outline, primary);
 }
 
 .rootPriorityOutline.rootColorSecondary {
-  @include tools.button-color(outline, secondary);
+    @include tools.button-color(outline, secondary);
 }
 
 .rootPriorityOutline.rootColorSuccess {
-  @include tools.button-color(outline, success);
+    @include tools.button-color(outline, success);
 }
 
 .rootPriorityOutline.rootColorWarning {
-  @include tools.button-color(outline, warning);
+    @include tools.button-color(outline, warning);
 }
 
 .rootPriorityOutline.rootColorDanger {
-  @include tools.button-color(outline, danger);
+    @include tools.button-color(outline, danger);
 }
 
 .rootPriorityOutline.rootColorHelp {
-  @include tools.button-color(outline, help);
+    @include tools.button-color(outline, help);
 }
 
 .rootPriorityOutline.rootColorInfo {
-  @include tools.button-color(outline, info);
+    @include tools.button-color(outline, info);
 }
 
 .rootPriorityOutline.rootColorNote {
-  @include tools.button-color(outline, note);
+    @include tools.button-color(outline, note);
 }
 
 .rootPriorityOutline.rootColorLight {
-  @include tools.button-color(outline, light);
+    @include tools.button-color(outline, light);
 }
 
 .rootPriorityOutline.rootColorDark {
-  @include tools.button-color(outline, dark);
+    @include tools.button-color(outline, dark);
 }
 
 .rootPriorityFlat.rootColorPrimary {
-  @include tools.button-color(flat, primary);
+    @include tools.button-color(flat, primary);
 }
 
 .rootPriorityFlat.rootColorSecondary {
-  @include tools.button-color(flat, secondary);
+    @include tools.button-color(flat, secondary);
 }
 
 .rootPriorityFlat.rootColorSuccess {
-  @include tools.button-color(flat, success);
+    @include tools.button-color(flat, success);
 }
 
 .rootPriorityFlat.rootColorWarning {
-  @include tools.button-color(flat, warning);
+    @include tools.button-color(flat, warning);
 }
 
 .rootPriorityFlat.rootColorDanger {
-  @include tools.button-color(flat, danger);
+    @include tools.button-color(flat, danger);
 }
 
 .rootPriorityFlat.rootColorHelp {
-  @include tools.button-color(flat, help);
+    @include tools.button-color(flat, help);
 }
 
 .rootPriorityFlat.rootColorInfo {
-  @include tools.button-color(flat, info);
+    @include tools.button-color(flat, info);
 }
 
 .rootPriorityFlat.rootColorNote {
-  @include tools.button-color(flat, note);
+    @include tools.button-color(flat, note);
 }
 
 .rootPriorityFlat.rootColorLight {
-  @include tools.button-color(flat, light);
+    @include tools.button-color(flat, light);
 }
 
 .rootPriorityFlat.rootColorDark {
-  @include tools.button-color(flat, dark);
+    @include tools.button-color(flat, dark);
 }
 
 .rootPriorityFilled.rootGrouped:not(:first-child)::before,
 .rootPriorityFlat.rootGrouped:not(:first-child)::before {
-  content: '';
-  position: absolute;
-  top: calc(-1 * #{theme.$border-width});
-  bottom: calc(-1 * #{theme.$border-width});
-  left: calc(-1 * #{theme.$border-width});
-  z-index: map.get(settings.$group-z-indexes, separator);
-  border-left: var(--local-separator-width) solid var(--local-separator-color);
-  transform: translateX(calc(-0.5 * var(--local-gap) - 50%));
+    content: "";
+    position: absolute;
+    top: calc(-1 * #{theme.$border-width});
+    bottom: calc(-1 * #{theme.$border-width});
+    left: calc(-1 * #{theme.$border-width});
+    z-index: map.get(settings.$group-z-indexes, separator);
+    border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
+    transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
 }
 
 .rootPriorityFilled.rootGrouped:not(:first-child) {
-  --local-gap: #{theme.$group-filled-gap};
-  --local-separator-width: #{theme.$group-filled-separator-width};
-  --local-separator-color: #{theme.$group-filled-separator-color};
+    --rui-local-gap: #{theme.$group-filled-gap};
+    --rui-local-separator-width: #{theme.$group-filled-separator-width};
+    --rui-local-separator-color: #{theme.$group-filled-separator-color};
 }
 
 .rootPriorityFlat.rootGrouped:not(:first-child) {
-  --local-gap: #{theme.$group-flat-gap};
-  --local-separator-width: #{theme.$group-flat-separator-width};
-  --local-separator-color: #{theme.$group-flat-separator-color};
+    --rui-local-gap: #{theme.$group-flat-gap};
+    --rui-local-separator-width: #{theme.$group-flat-separator-width};
+    --rui-local-separator-color: #{theme.$group-flat-separator-color};
 }
 
 .rootPriorityOutline.rootGrouped:not(:first-child) {
-  --local-gap: #{theme.$group-outline-gap};
+    --rui-local-gap: #{theme.$group-outline-gap};
 }

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

@@ -1,21 +1,21 @@
-@use '../../styles/theme/typography';
-@use '../../styles/tools/spacing';
+@use "../../styles/theme/typography";
+@use "../../styles/tools/spacing";
 
 $font-family: typography.$font-family-base;
-$line-height: typography.$line-height-base;
+$line-height: typography.$line-height-small;
 $icon-spacing: spacing.of(2);
 
 $group-z-indexes: (
-  button: auto,
-  button-hover: 1,
-  separator: 2,
-  button-overflowing-elements: 3,
+    button: auto,
+    button-hover: 1,
+    separator: 2,
+    button-overflowing-elements: 3,
 );
 
 $themeable-variants: (primary, secondary, success, warning, danger, help, info, note, light, dark);
 $themeable-states: (default, hover, active, disabled);
 $themeable-priority-properties: (
-  filled: (color, border-color, background, box-shadow),
-  outline: (color, border-color, background),
-  flat: (color, background),
+    filled: (color, border-color, background, box-shadow),
+    outline: (color, border-color, background),
+    flat: (color, background),
 );

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

@@ -23,19 +23,22 @@ $group-flat-separator-color: var(--rui-ButtonGroup--flat__separator__color);
 $group-outline-gap: var(--rui-ButtonGroup--outline__gap);
 
 $sizes: (
-  small: (
-    height: var(--rui-Button--small__height),
-    padding-x: var(--rui-Button--small__padding-x),
-    font-size: var(--rui-Button--small__font-size),
-  ),
-  medium: (
-    height: var(--rui-Button--medium__height),
-    padding-x: var(--rui-Button--medium__padding-x),
-    font-size: var(--rui-Button--medium__font-size),
-  ),
-  large: (
-    height: var(--rui-Button--large__height),
-    padding-x: var(--rui-Button--large__padding-x),
-    font-size: var(--rui-Button--large__font-size),
-  ),
+    small: (
+        height: var(--rui-Button--small__height),
+        padding-y: var(--rui-Button--small__padding-y),
+        padding-x: var(--rui-Button--small__padding-x),
+        font-size: var(--rui-Button--small__font-size),
+    ),
+    medium: (
+        height: var(--rui-Button--medium__height),
+        padding-y: var(--rui-Button--medium__padding-y),
+        padding-x: var(--rui-Button--medium__padding-x),
+        font-size: var(--rui-Button--medium__font-size),
+    ),
+    large: (
+        height: var(--rui-Button--large__height),
+        padding-y: var(--rui-Button--large__padding-y),
+        padding-x: var(--rui-Button--large__padding-x),
+        font-size: var(--rui-Button--large__font-size),
+    ),
 );

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/Button/helpers/getRootLabelVisibilityClassName.js

@@ -17,12 +17,12 @@ export default (labelVisibility, styles) => {
     return styles.withLabelVisibleXl;
   }
 
-  if (labelVisibility === 'xxl') {
-    return styles.withLabelVisibleXxl;
+  if (labelVisibility === 'x2l') {
+    return styles.withLabelVisibleX2l;
   }
 
-  if (labelVisibility === 'xxxl') {
-    return styles.withLabelVisibleXxxl;
+  if (labelVisibility === 'x3l') {
+    return styles.withLabelVisibleX3l;
   }
 
   if (labelVisibility === 'none') {

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 { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ButtonGroup.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 
@@ -8,34 +10,44 @@ export const ButtonGroup = ({
   block,
   disabled,
   children,
+  id,
   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,
+      )}
+      id={id}
+      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,
+  id: undefined,
   priority: 'filled',
   size: 'medium',
 };
@@ -46,13 +58,17 @@ 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.
    */
   disabled: PropTypes.bool,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
   /**
    * Visual priority to highlight or suppress the buttons.
    */
@@ -63,6 +79,6 @@ ButtonGroup.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
 };
 
-export const ButtonGroupWithContext = withProviderContext(ButtonGroup, 'ButtonGroup');
+export const ButtonGroupWithGlobalProps = withGlobalProps(ButtonGroup, 'ButtonGroup');
 
-export default ButtonGroupWithContext;
+export default ButtonGroupWithGlobalProps;

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

@@ -221,7 +221,7 @@ and communicating the state of individual options.
 <Playground>
   <>
     <span id="period-label">Period:</span>
-    <ButtonGroup aria-labelledby="#period-label">
+    <ButtonGroup aria-labelledby="period-label">
       <Button label="Week" aria-pressed color="dark" />
       <Button label="Month" aria-pressed={false} />
       <Button label="Year" aria-pressed={false} />