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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.44.1",
+  "version": "0.45.0",
   "keywords": [
     "react",
     "ui",
@@ -49,9 +49,8 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@visionappscz/eslint-config-visionapps": "^1.5.0",
-    "@visionappscz/stylelint-config-visionapps": "^2.0.1",
-    "@visionappscz/stylelint-config-visionapps-order": "^2.1.0",
-    "autoprefixer": "^10.4.0",
+    "@visionappscz/stylelint-config": "^3.0.0-rc1",
+    "autoprefixer": "^10.4.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.3",
@@ -73,20 +72,18 @@
     "jest": "^27.3.1",
     "markdownlint-cli2": "~0.3.2",
     "nodemon": "^2.0.15",
-    "postcss": "^8.3.11",
+    "postcss": "^8.4.5",
     "postcss-loader": "^4.3.0",
     "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "sass": "^1.43.4",
+    "sass": "^1.47.0",
     "sass-loader": "^10.2.0",
     "sinon": "^12.0.1",
     "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-css-modules": "^2.3.0",
-    "stylelint-order": "^5.0.0",
+    "stylelint": "^14.2.0",
     "stylelint-webpack-plugin": "^3.1.0",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
@@ -108,7 +105,7 @@
     "lib:build": "concurrently \"webpack --mode development --config webpack.config.js\" \"webpack --mode production --config webpack.config.js\"",
     "lib:jest": "jest",
     "lib:test:js": "concurrently \"eslint --ext js,jsx src/lib tests/propTests\" \"npm run lib:jest\"",
-    "lib:test:css": "stylelint \"src/lib/**/*.scss\" --config stylelint.config.js",
+    "lib:test:css": "stylelint \"src/**/*.scss\" --config stylelint.config.js",
     "markdown:lint": "markdownlint-cli2 \"**/*.md?(x)\" \"#.docz\" \"#dist\" \"#node_modules\" && eslint \"**/*.md?(x)\"",
     "markdown:watch": "nodemon --watch . --ext md,mdx --exec \"npm run markdown:lint\"",
     "prepublishOnly": "npm run lib:build",

package/src/lib/components/Alert/Alert.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 './Alert.scss';
 
 export const Alert = ({
@@ -13,10 +14,10 @@ export const Alert = ({
   translations,
 }) => (
   <div
-    className={[
+    className={classNames(
       styles.root,
       getRootColorClassName(color, styles),
-    ].join(' ')}
+    )}
     id={id}
     role="alert"
   >

package/src/lib/components/Alert/Alert.scss

@@ -1,106 +1,106 @@
-@use 'sass:map';
-@use '../../styles/theme/typography';
-@use '../../styles/tools/accessibility';
-@use '../../styles/tools/reset';
-@use 'settings';
-@use 'theme';
-@use 'tools';
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "settings";
+@use "theme";
+@use "tools";
 
 .root {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  color: var(--rui-local-color);
-  border-width: theme.$border-width theme.$border-width theme.$border-width theme.$stripe-width;
-  border-style: solid;
-  border-color: var(--rui-local-foreground-color);
-  border-radius: theme.$border-radius;
-  background-color: var(--rui-local-background-color);
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    color: var(--rui-local-color);
+    border-width: theme.$border-width theme.$border-width theme.$border-width theme.$stripe-width;
+    border-style: solid;
+    border-color: var(--rui-local-foreground-color);
+    border-radius: theme.$border-radius;
+    background-color: var(--rui-local-background-color);
 }
 
 .icon,
 .message {
-  padding: theme.$padding;
+    padding: theme.$padding;
 }
 
 .close,
 .icon {
-  height: settings.$min-height;
-  color: var(--rui-local-foreground-color);
+    height: settings.$min-height;
+    color: var(--rui-local-foreground-color);
 }
 
 .icon {
-  display: flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  padding-right: 0;
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    padding-right: 0;
 }
 
 .message {
-  flex-grow: 1;
-  font-weight: theme.$font-weight;
-  font-size: settings.$font-size;
-  line-height: settings.$line-height;
+    flex-grow: 1;
+    font-weight: theme.$font-weight;
+    font-size: settings.$font-size;
+    line-height: settings.$line-height;
 }
 
 .message a,
 .message strong {
-  font-weight: theme.$emphasis-font-weight;
-  color: var(--rui-local-foreground-color);
+    font-weight: theme.$emphasis-font-weight;
+    color: var(--rui-local-foreground-color);
 }
 
 .close {
-  @include reset.button();
-  @include accessibility.min-tap-target();
+    @include reset.button();
+    @include accessibility.min-tap-target();
 
-  padding: theme.$padding;
-  font-size: map.get(typography.$size-values, 3);
-  line-height: 1;
+    padding: theme.$padding;
+    font-size: map.get(typography.$size-values, 3);
+    line-height: 1;
 }
 
 .closeSign {
-  position: relative;
-  top: -0.1em;
+    position: relative;
+    top: -0.1em;
 }
 
 .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);
 }

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

@@ -1,7 +1,7 @@
-@use 'sass:map';
-@use '../../styles/theme/typography';
-@use 'theme';
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "theme";
 
 $font-size: map.get(typography.$size-values, 0);
-$line-height: 1.5;
+$line-height: typography.$line-height-base;
 $min-height: calc(#{$font-size} * #{$line-height} + 2 * #{theme.$padding});

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

@@ -6,54 +6,54 @@ $emphasis-font-weight: var(--rui-Alert__emphasis__font-weight);
 $stripe-width: var(--rui-Alert__stripe__width);
 
 $colors: (
-  primary: (
-    color: var(--rui-Alert--primary__color),
-    foreground-color: var(--rui-Alert--primary__foreground-color),
-    background-color: var(--rui-Alert--primary__background-color),
-  ),
-  secondary: (
-    color: var(--rui-Alert--secondary__color),
-    foreground-color: var(--rui-Alert--secondary__foreground-color),
-    background-color: var(--rui-Alert--secondary__background-color),
-  ),
-  success: (
-    color: var(--rui-Alert--success__color),
-    foreground-color: var(--rui-Alert--success__foreground-color),
-    background-color: var(--rui-Alert--success__background-color),
-  ),
-  warning: (
-    color: var(--rui-Alert--warning__color),
-    foreground-color: var(--rui-Alert--warning__foreground-color),
-    background-color: var(--rui-Alert--warning__background-color),
-  ),
-  danger: (
-    color: var(--rui-Alert--danger__color),
-    foreground-color: var(--rui-Alert--danger__foreground-color),
-    background-color: var(--rui-Alert--danger__background-color),
-  ),
-  info: (
-    color: var(--rui-Alert--info__color),
-    foreground-color: var(--rui-Alert--info__foreground-color),
-    background-color: var(--rui-Alert--info__background-color),
-  ),
-  help: (
-    color: var(--rui-Alert--help__color),
-    foreground-color: var(--rui-Alert--help__foreground-color),
-    background-color: var(--rui-Alert--help__background-color),
-  ),
-  note: (
-    color: var(--rui-Alert--note__color),
-    foreground-color: var(--rui-Alert--note__foreground-color),
-    background-color: var(--rui-Alert--note__background-color),
-  ),
-  light: (
-    color: var(--rui-Alert--light__color),
-    foreground-color: var(--rui-Alert--light__foreground-color),
-    background-color: var(--rui-Alert--light__background-color),
-  ),
-  dark: (
-    color: var(--rui-Alert--dark__color),
-    foreground-color: var(--rui-Alert--dark__foreground-color),
-    background-color: var(--rui-Alert--dark__background-color),
-  ),
+    primary: (
+        color: var(--rui-Alert--primary__color),
+        foreground-color: var(--rui-Alert--primary__foreground-color),
+        background-color: var(--rui-Alert--primary__background-color),
+    ),
+    secondary: (
+        color: var(--rui-Alert--secondary__color),
+        foreground-color: var(--rui-Alert--secondary__foreground-color),
+        background-color: var(--rui-Alert--secondary__background-color),
+    ),
+    success: (
+        color: var(--rui-Alert--success__color),
+        foreground-color: var(--rui-Alert--success__foreground-color),
+        background-color: var(--rui-Alert--success__background-color),
+    ),
+    warning: (
+        color: var(--rui-Alert--warning__color),
+        foreground-color: var(--rui-Alert--warning__foreground-color),
+        background-color: var(--rui-Alert--warning__background-color),
+    ),
+    danger: (
+        color: var(--rui-Alert--danger__color),
+        foreground-color: var(--rui-Alert--danger__foreground-color),
+        background-color: var(--rui-Alert--danger__background-color),
+    ),
+    info: (
+        color: var(--rui-Alert--info__color),
+        foreground-color: var(--rui-Alert--info__foreground-color),
+        background-color: var(--rui-Alert--info__background-color),
+    ),
+    help: (
+        color: var(--rui-Alert--help__color),
+        foreground-color: var(--rui-Alert--help__foreground-color),
+        background-color: var(--rui-Alert--help__background-color),
+    ),
+    note: (
+        color: var(--rui-Alert--note__color),
+        foreground-color: var(--rui-Alert--note__foreground-color),
+        background-color: var(--rui-Alert--note__background-color),
+    ),
+    light: (
+        color: var(--rui-Alert--light__color),
+        foreground-color: var(--rui-Alert--light__foreground-color),
+        background-color: var(--rui-Alert--light__background-color),
+    ),
+    dark: (
+        color: var(--rui-Alert--dark__color),
+        foreground-color: var(--rui-Alert--dark__foreground-color),
+        background-color: var(--rui-Alert--dark__background-color),
+    ),
 );

package/src/lib/components/Alert/_tools.scss

@@ -1,10 +1,10 @@
-@use 'sass:map';
-@use 'theme';
+@use "sass:map";
+@use "theme";
 
 @mixin color($color) {
-  $color-variant-properties: map.get(theme.$colors, $color);
+    $color-variant-properties: map.get(theme.$colors, $color);
 
-  --rui-local-color: #{map.get($color-variant-properties, color)};
-  --rui-local-foreground-color: #{map.get($color-variant-properties, foreground-color)};
-  --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
+    --rui-local-color: #{map.get($color-variant-properties, color)};
+    --rui-local-foreground-color: #{map.get($color-variant-properties, foreground-color)};
+    --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
 }

package/src/lib/components/Badge/Badge.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 './Badge.scss';
 
 export const Badge = ({
@@ -11,11 +12,11 @@ export const Badge = ({
   priority,
 }) => (
   <div
-    className={[
+    className={classNames(
       styles.root,
-      priority === 'outline' ? styles.rootPriorityOutline : '',
+      priority === 'outline' && styles.rootPriorityOutline,
       getRootColorClassName(color, styles),
-    ].join(' ')}
+    )}
     id={id}
   >
     {label}

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 { 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}

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

@@ -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>