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

package/src/lib/components/Badge/Badge.scss

@@ -1,126 +1,126 @@
-@use 'sass:map';
-@use 'sass:math';
-@use '../../styles/theme/borders';
-@use '../../styles/theme/colors';
-@use '../../styles/theme/typography';
+@use "sass:map";
+@use "sass:math";
+@use "../../styles/theme/borders";
+@use "../../styles/theme/colors";
+@use "../../styles/theme/typography";
 
 $_badge-size: 1.25rem;
 
 .root {
-  display: inline-block;
-  min-width: $_badge-size;
-  height: $_badge-size;
-  padding: 0.25rem 0.35rem;
-  overflow: hidden;
-  font-weight: map.get(typography.$font-weight-values, bold);
-  font-size: typography.$size-smaller;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  color: var(--rui-local-color);
-  border-radius: math.div($_badge-size, 2);
-  background-color: var(--rui-local-background-color);
-  box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgba(255, 255, 255, 0.8)});
+    display: inline-block;
+    min-width: $_badge-size;
+    height: $_badge-size;
+    padding: 0.25rem 0.35rem;
+    overflow: hidden;
+    font-weight: map.get(typography.$font-weight-values, bold);
+    font-size: typography.$size-smaller;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    color: var(--rui-local-color);
+    border-radius: math.div($_badge-size, 2);
+    background-color: var(--rui-local-background-color);
+    box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)});
 }
 
 .rootColorPrimary {
-  --rui-local-color: #{map.get(colors.$brand, on-primary)};
-  --rui-local-background-color: #{map.get(colors.$brand, primary)};
+    --rui-local-color: #{map.get(colors.$brand, on-primary)};
+    --rui-local-background-color: #{map.get(colors.$brand, primary)};
 }
 
 .rootColorSecondary {
-  --rui-local-color: #{map.get(colors.$brand, on-secondary)};
-  --rui-local-background-color: #{map.get(colors.$brand, secondary)};
+    --rui-local-color: #{map.get(colors.$brand, on-secondary)};
+    --rui-local-background-color: #{map.get(colors.$brand, secondary)};
 }
 
 .rootColorSuccess {
-  --rui-local-color: #{map.get(colors.$ui, on-success)};
-  --rui-local-background-color: #{map.get(colors.$ui, success)};
+    --rui-local-color: #{map.get(colors.$ui, on-success)};
+    --rui-local-background-color: #{map.get(colors.$ui, success)};
 }
 
 .rootColorWarning {
-  --rui-local-color: #{map.get(colors.$ui, on-warning)};
-  --rui-local-background-color: #{map.get(colors.$ui, warning)};
+    --rui-local-color: #{map.get(colors.$ui, on-warning)};
+    --rui-local-background-color: #{map.get(colors.$ui, warning)};
 }
 
 .rootColorDanger {
-  --rui-local-color: #{map.get(colors.$ui, on-danger)};
-  --rui-local-background-color: #{map.get(colors.$ui, danger)};
+    --rui-local-color: #{map.get(colors.$ui, on-danger)};
+    --rui-local-background-color: #{map.get(colors.$ui, danger)};
 }
 
 .rootColorHelp {
-  --rui-local-color: #{map.get(colors.$ui, on-help)};
-  --rui-local-background-color: #{map.get(colors.$ui, help)};
+    --rui-local-color: #{map.get(colors.$ui, on-help)};
+    --rui-local-background-color: #{map.get(colors.$ui, help)};
 }
 
 .rootColorInfo {
-  --rui-local-color: #{map.get(colors.$ui, on-info)};
-  --rui-local-background-color: #{map.get(colors.$ui, info)};
+    --rui-local-color: #{map.get(colors.$ui, on-info)};
+    --rui-local-background-color: #{map.get(colors.$ui, info)};
 }
 
 .rootColorNote {
-  --rui-local-color: #{map.get(colors.$ui, on-note)};
-  --rui-local-background-color: #{map.get(colors.$ui, note)};
+    --rui-local-color: #{map.get(colors.$ui, on-note)};
+    --rui-local-background-color: #{map.get(colors.$ui, note)};
 }
 
 .rootColorLight {
-  --rui-local-color: #{colors.$dark};
-  --rui-local-background-color: #{colors.$light};
-  --rui-local-box-shadow: none;
+    --rui-local-color: #{colors.$dark};
+    --rui-local-background-color: #{colors.$light};
+    --rui-local-box-shadow: none;
 }
 
 .rootColorDark {
-  --rui-local-color: #{colors.$light};
-  --rui-local-background-color: #{colors.$dark};
-  --rui-local-box-shadow: none;
+    --rui-local-color: #{colors.$light};
+    --rui-local-background-color: #{colors.$dark};
+    --rui-local-box-shadow: none;
 }
 
 .rootPriorityOutline {
-  --rui-local-background-color: transparent;
-  --rui-local-box-shadow: none;
+    --rui-local-background-color: transparent;
+    --rui-local-box-shadow: none;
 
-  padding-top: 0.1875rem;
-  padding-bottom: 0.1875rem;
-  border: borders.$width solid currentColor;
+    padding-top: 0.1875rem;
+    padding-bottom: 0.1875rem;
+    border: borders.$width solid currentColor;
 }
 
 .rootPriorityOutline.rootColorPrimary {
-  --rui-local-color: #{map.get(colors.$brand, primary)};
+    --rui-local-color: #{map.get(colors.$brand, primary)};
 }
 
 .rootPriorityOutline.rootColorSecondary {
-  --rui-local-color: #{map.get(colors.$brand, secondary)};
+    --rui-local-color: #{map.get(colors.$brand, secondary)};
 }
 
 .rootPriorityOutline.rootColorSuccess {
-  --rui-local-color: #{map.get(colors.$ui, success)};
+    --rui-local-color: #{map.get(colors.$ui, success)};
 }
 
 .rootPriorityOutline.rootColorWarning {
-  --rui-local-color: #{map.get(colors.$ui, warning)};
+    --rui-local-color: #{map.get(colors.$ui, warning)};
 }
 
 .rootPriorityOutline.rootColorDanger {
-  --rui-local-color: #{map.get(colors.$ui, danger)};
+    --rui-local-color: #{map.get(colors.$ui, danger)};
 }
 
 .rootPriorityOutline.rootColorHelp {
-  --rui-local-color: #{map.get(colors.$ui, help)};
+    --rui-local-color: #{map.get(colors.$ui, help)};
 }
 
 .rootPriorityOutline.rootColorInfo {
-  --rui-local-color: #{map.get(colors.$ui, info)};
+    --rui-local-color: #{map.get(colors.$ui, info)};
 }
 
 .rootPriorityOutline.rootColorNote {
-  --rui-local-color: #{map.get(colors.$ui, note)};
+    --rui-local-color: #{map.get(colors.$ui, note)};
 }
 
 .rootPriorityOutline.rootColorLight {
-  --rui-local-color: #{colors.$light};
+    --rui-local-color: #{colors.$light};
 }
 
 .rootPriorityOutline.rootColorDark {
-  --rui-local-color: #{colors.$dark};
+    --rui-local-color: #{colors.$dark};
 }

package/src/lib/components/Button/Button.jsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootSizeClassName from '../../helpers/getRootSizeClassName';
-import getRootColorClassName from '../../helpers/getRootColorClassName';
-import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
-import { withProviderContext } from '../../provider';
-import transferProps from '../../utils/transferProps';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootColorClassName } from '../_helpers/getRootColorClassName';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
+import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
+import { transferProps } from '../_helpers/transferProps';
 import withForwardedRef from '../withForwardedRef';
 import { ButtonGroupContext } from '../ButtonGroup';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
@@ -36,7 +37,7 @@ export const Button = ({
     /* eslint-disable react/button-has-type */
     <button
       {...transferProps(restProps)}
-      className={[
+      className={classNames(
         styles.root,
         getRootPriorityClassName(
           resolveContextOrProp(context && context.priority, priority),
@@ -48,10 +49,10 @@ export const Button = ({
           styles,
         ),
         getRootLabelVisibilityClassName(labelVisibility, styles),
-        resolveContextOrProp(context && context.block, block) ? styles.rootBlock : '',
-        context ? styles.rootGrouped : '',
-        feedbackIcon ? styles.hasRootFeedback : '',
-      ].join(' ')}
+        resolveContextOrProp(context && context.block, block) && styles.rootBlock,
+        context && styles.rootGrouped,
+        feedbackIcon && styles.hasRootFeedback,
+      )}
       disabled={resolveContextOrProp(context && context.disabled, disabled) || !!feedbackIcon}
       id={id}
       ref={forwardedRef}
@@ -168,7 +169,7 @@ Button.propTypes = {
   /**
    * Defines minimum breakpoint from which the button label will be visible.
    */
-  labelVisibility: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl', 'none']),
+  labelVisibility: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'x2l', 'x3l', 'none']),
   /**
    * Visual priority to highlight or suppress the button.
    *
@@ -193,6 +194,6 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit']),
 };
 
-export const ButtonWithContext = withForwardedRef(withProviderContext(Button, 'Button'));
+export const ButtonWithGlobalProps = withForwardedRef(withGlobalProps(Button, 'Button'));
 
-export default ButtonWithContext;
+export default ButtonWithGlobalProps;

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

@@ -1,2 +1,2 @@
-@use 'base';
-@use 'priorities';
+@use "base";
+@use "priorities";

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

@@ -194,13 +194,13 @@ of your choice and display label once you know there is enough room for it.
     beforeLabel={<Icon icon="pencil" />}
   />
   <Button
-    label="Label visible from xxl up"
-    labelVisibility="xxl"
+    label="Label visible from x2l up"
+    labelVisibility="x2l"
     beforeLabel={<Icon icon="pencil" />}
   />
   <Button
-    label="Label visible from xxxl up"
-    labelVisibility="xxxl"
+    label="Label visible from x3l up"
+    labelVisibility="x3l"
     beforeLabel={<Icon icon="pencil" />}
   />
 </Playground>
@@ -399,7 +399,7 @@ animation is made.
 
 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 `button` HTML element. This enables making the component
+passed to the `<button>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={Button} />
@@ -448,7 +448,11 @@ Where:
 
 - `<SIZE>` is one of `small`, `medium`, or `large` (see [Sizes](#sizes) and
   [API](#api))
-- `<PROPERTY>` is one of `height`, `padding-x`, or `font-size`
+- `<PROPERTY>` is one of `height`, `padding-x`, `padding-y`, or `font-size`
+
+👉 Button sizes are linked to
+[box field sizes](/customize/theming/forms#box-field-sizes) sizes so they align
+nicely when placed in row.
 
 ### Example Theme
 
@@ -464,6 +468,7 @@ Where:
           0.1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
         --rui-Button--medium__height: 3rem;
         --rui-Button--medium__padding-x: 1.25rem;
+        --rui-Button--medium__padding-y: 0.25rem;
       }
     `}
   </style>

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

@@ -1,15 +1,15 @@
-@use 'sass:map';
-@use '../../styles/tools/breakpoint';
-@use 'settings';
-@use 'theme';
-@use 'tools';
+@use "sass:map";
+@use "../../styles/tools/breakpoint";
+@use "settings";
+@use "theme";
+@use "tools";
 
 .root {
-  @include tools.button();
+    @include tools.button();
 }
 
 .label {
-  display: block;
+    display: block;
 }
 
 .beforeLabel,
@@ -17,88 +17,88 @@
 .startCorner,
 .endCorner,
 .feedbackIcon {
-  display: flex;
-  align-items: baseline;
-  justify-content: center;
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
 }
 
 .startCorner,
 .endCorner {
-  position: absolute;
-  top: -0.35rem;
-  z-index: 2;
+    position: absolute;
+    top: -0.35rem;
+    z-index: 2;
 }
 
 .startCorner {
-  left: 0;
-  margin-left: -0.35rem;
+    left: 0;
+    margin-left: -0.35rem;
 }
 
 .endCorner {
-  right: 0;
-  margin-right: -0.35rem;
+    right: 0;
+    margin-right: -0.35rem;
 }
 
 .feedbackIcon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  align-items: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    align-items: center;
 }
 
 .rootSizeSmall {
-  @include tools.button-size(small);
+    @include tools.button-size(small);
 }
 
 .rootSizeMedium {
-  @include tools.button-size(medium);
+    @include tools.button-size(medium);
 }
 
 .rootSizeLarge {
-  @include tools.button-size(large);
+    @include tools.button-size(large);
 }
 
 .rootBlock {
-  width: 100%;
+    width: 100%;
 }
 
 .hasRootFeedback:disabled {
-  opacity: theme.$feedback-opacity;
-  cursor: theme.$feedback-cursor;
+    opacity: theme.$feedback-opacity;
+    cursor: theme.$feedback-cursor;
 }
 
 .hasRootFeedback .label,
 .hasRootFeedback .beforeLabel,
 .hasRootFeedback .afterLabel {
-  color: transparent;
+    color: transparent;
 }
 
 .rootGrouped {
-  z-index: map.get(settings.$group-z-indexes, button);
+    z-index: map.get(settings.$group-z-indexes, button);
 
-  &:not(:first-child) {
-    margin-left: var(--local-gap);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+    &:not(:first-child) {
+        margin-left: var(--rui-local-gap);
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
 
-  &:not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+    &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 
-  &:focus,
-  &:not(:disabled):hover {
-    z-index: map.get(settings.$group-z-indexes, button-hover);
-  }
+    &:focus,
+    &:not(:disabled):hover {
+        z-index: map.get(settings.$group-z-indexes, button-hover);
+    }
 }
 
 .rootGrouped .startCorner,
 .rootGrouped .endCorner {
-  z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
+    z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
 }
 
 .withLabelHidden,
@@ -106,43 +106,43 @@
 .withLabelVisibleMd,
 .withLabelVisibleLg,
 .withLabelVisibleXl,
-.withLabelVisibleXxl,
-.withLabelVisibleXxxl {
-  @include tools.hide-label();
+.withLabelVisibleX2l,
+.withLabelVisibleX3l {
+    @include tools.hide-label();
 }
 
 .withLabelVisibleSm {
-  @include breakpoint.up(sm) {
-    @include tools.show-label();
-  }
+    @include breakpoint.up(sm) {
+        @include tools.show-label();
+    }
 }
 
 .withLabelVisibleMd {
-  @include breakpoint.up(md) {
-    @include tools.show-label();
-  }
+    @include breakpoint.up(md) {
+        @include tools.show-label();
+    }
 }
 
 .withLabelVisibleLg {
-  @include breakpoint.up(lg) {
-    @include tools.show-label();
-  }
+    @include breakpoint.up(lg) {
+        @include tools.show-label();
+    }
 }
 
 .withLabelVisibleXl {
-  @include breakpoint.up(xl) {
-    @include tools.show-label();
-  }
+    @include breakpoint.up(xl) {
+        @include tools.show-label();
+    }
 }
 
-.withLabelVisibleXxl {
-  @include breakpoint.up(xxl) {
-    @include tools.show-label();
-  }
+.withLabelVisibleX2l {
+    @include breakpoint.up(x2l) {
+        @include tools.show-label();
+    }
 }
 
-.withLabelVisibleXxxl {
-  @include breakpoint.up(xxxl) {
-    @include tools.show-label();
-  }
+.withLabelVisibleX3l {
+    @include breakpoint.up(x3l) {
+        @include tools.show-label();
+    }
 }