@react-ui-org/react-ui 0.54.0 → 0.55.1

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.54.0",
+  "version": "0.55.1",
   "keywords": [
     "react",
     "ui",
@@ -42,6 +42,7 @@
     "lint": "npm run eslint && npm run markdownlint && npm run stylelint",
     "markdownlint": "markdownlint-cli2 \"CONTRIBUTING.md\" \"README.md\" \"RELEASING.md\" \"src/**/*.md\"",
     "postbuild": "npm run copy",
+    "postinstall": "cp -n .env.dist .env || true",
     "precopy": "rm -rf dist && mkdir dist",
     "prepublishOnly": "npm run build",
     "start": "webpack --watch --mode=development",
@@ -75,7 +76,7 @@
     "babel-jest": "^29.6.4",
     "babel-loader": "^9.1.3",
     "core-js": "^3.32.1",
-    "css-loader": "^6.8.1",
+    "css-loader": "^6.10.0",
     "eslint": "^8.48.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.28.1",

package/src/components/Alert/Alert.jsx

@@ -7,7 +7,7 @@ import {
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
-import styles from './Alert.scss';
+import styles from './Alert.module.scss';
 
 export const Alert = ({
   children,

package/src/components/Alert/Alert.module.scss

@@ -0,0 +1,100 @@
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "settings";
+@use "theme";
+@use "tools";
+
+@layer components.alert {
+    .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);
+    }
+
+    .icon,
+    .message {
+        padding: theme.$padding;
+    }
+
+    .close,
+    .icon {
+        height: settings.$min-height;
+        color: var(--rui-local-foreground-color);
+    }
+
+    .icon {
+        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;
+    }
+
+    .message a,
+    .message strong {
+        font-weight: theme.$emphasis-font-weight;
+        color: var(--rui-local-foreground-color);
+    }
+
+    .close {
+        @include reset.button();
+        @include accessibility.min-tap-target();
+
+        padding: theme.$padding;
+        font-size: map.get(typography.$font-size-values, 4);
+        line-height: 1;
+    }
+
+    .closeSign {
+        position: relative;
+        top: -0.1em;
+    }
+
+    .isRootColorSuccess {
+        @include tools.color(success);
+    }
+
+    .isRootColorWarning {
+        @include tools.color(warning);
+    }
+
+    .isRootColorDanger {
+        @include tools.color(danger);
+    }
+
+    .isRootColorHelp {
+        @include tools.color(help);
+    }
+
+    .isRootColorInfo {
+        @include tools.color(info);
+    }
+
+    .isRootColorNote {
+        @include tools.color(note);
+    }
+
+    .isRootColorLight {
+        @include tools.color(light);
+    }
+
+    .isRootColorDark {
+        @include tools.color(dark);
+    }
+}

package/src/components/Alert/README.md

@@ -171,13 +171,15 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -211,5 +213,5 @@ Where:
 - `<PROPERTY>` is one of `color` (color of text), `foreground-color` (color of
   border, icon, links, and emphasis), or `background-color`.
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Badge/Badge.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
-import styles from './Badge.scss';
+import styles from './Badge.module.scss';
 
 export const Badge = ({
   color,

package/src/components/Badge/Badge.module.scss

@@ -0,0 +1,109 @@
+@use "sass:map";
+@use "sass:math";
+@use "../../styles/theme/borders";
+@use "../../styles/theme/typography";
+
+$_badge-size: 1.25rem;
+
+@layer components.badge {
+    .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.$font-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%)});
+    }
+
+    .isRootColorSuccess {
+        --rui-local-color: var(--rui-color-feedback-on-success);
+        --rui-local-background-color: var(--rui-color-feedback-success);
+    }
+
+    .isRootColorWarning {
+        --rui-local-color: var(--rui-color-feedback-on-warning);
+        --rui-local-background-color: var(--rui-color-feedback-warning);
+    }
+
+    .isRootColorDanger {
+        --rui-local-color: var(--rui-color-feedback-on-danger);
+        --rui-local-background-color: var(--rui-color-feedback-danger);
+    }
+
+    .isRootColorHelp {
+        --rui-local-color: var(--rui-color-feedback-on-help);
+        --rui-local-background-color: var(--rui-color-feedback-help);
+    }
+
+    .isRootColorInfo {
+        --rui-local-color: var(--rui-color-feedback-on-info);
+        --rui-local-background-color: var(--rui-color-feedback-info);
+    }
+
+    .isRootColorNote {
+        --rui-local-color: var(--rui-color-feedback-on-note);
+        --rui-local-background-color: var(--rui-color-feedback-note);
+    }
+
+    .isRootColorLight {
+        --rui-local-color: var(--rui-color-neutral-on-light);
+        --rui-local-background-color: var(--rui-color-neutral-light);
+        --rui-local-box-shadow: none;
+    }
+
+    .isRootColorDark {
+        --rui-local-color: var(--rui-color-neutral-on-dark);
+        --rui-local-background-color: var(--rui-color-neutral-dark);
+        --rui-local-box-shadow: none;
+    }
+
+    .isRootPriorityOutline {
+        --rui-local-background-color: transparent;
+        --rui-local-box-shadow: none;
+
+        padding-top: 0.1875rem;
+        padding-bottom: 0.1875rem;
+        border: borders.$width solid currentcolor;
+    }
+
+    .isRootPriorityOutline.isRootColorSuccess {
+        --rui-local-color: var(--rui-color-feedback-success);
+    }
+
+    .isRootPriorityOutline.isRootColorWarning {
+        --rui-local-color: var(--rui-color-feedback-warning);
+    }
+
+    .isRootPriorityOutline.isRootColorDanger {
+        --rui-local-color: var(--rui-color-feedback-danger);
+    }
+
+    .isRootPriorityOutline.isRootColorHelp {
+        --rui-local-color: var(--rui-color-feedback-help);
+    }
+
+    .isRootPriorityOutline.isRootColorInfo {
+        --rui-local-color: var(--rui-color-feedback-info);
+    }
+
+    .isRootPriorityOutline.isRootColorNote {
+        --rui-local-color: var(--rui-color-feedback-note);
+    }
+
+    .isRootPriorityOutline.isRootColorLight {
+        --rui-local-color: var(--rui-color-neutral-light);
+    }
+
+    .isRootPriorityOutline.isRootColorDark {
+        --rui-local-color: var(--rui-color-neutral-dark);
+    }
+}

package/src/components/Badge/README.md

@@ -87,17 +87,19 @@ Medium-emphasis priority to provide additional context in an unobtrusive way.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
 <docoff-react-props src="/components/Badge/Badge.jsx" />
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Button/Button.jsx

@@ -10,7 +10,7 @@ import { ButtonGroupContext } from '../ButtonGroup';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
-import styles from './Button.scss';
+import styles from './Button.module.scss';
 
 export const Button = React.forwardRef((props, ref) => {
   const {

package/src/components/Button/README.md

@@ -388,13 +388,15 @@ animation is made.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the native HTML
-`<button>`. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<button>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[button] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<button>` HTML element attributes][button-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -575,6 +577,6 @@ feedback state.
 | `--rui-Button--feedback__opacity` | Opacity of buttons in feedback state                 |
 | `--rui-Button--feedback__cursor`  | Cursor to show on hovering buttons in feedback state |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[button]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
+[button-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/components/Button/_base.scss

@@ -7,151 +7,153 @@
 @use "theme";
 @use "tools";
 
-.root {
-    @include tools.button();
-}
+@layer components.button {
+    .root {
+        @include tools.button();
+    }
 
-.label {
-    display: block;
-}
+    .label {
+        display: block;
+    }
 
-.beforeLabel,
-.afterLabel,
-.startCorner,
-.endCorner,
-.feedbackIcon {
-    display: flex;
-    align-items: baseline;
-    justify-content: center;
-}
+    .beforeLabel,
+    .afterLabel,
+    .startCorner,
+    .endCorner,
+    .feedbackIcon {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+    }
 
-.startCorner,
-.endCorner {
-    position: absolute;
-    top: -0.35rem;
-    z-index: 2;
-}
+    .startCorner,
+    .endCorner {
+        position: absolute;
+        top: -0.35rem;
+        z-index: 2;
+    }
 
-.startCorner {
-    left: 0;
-    margin-left: -0.35rem;
-}
+    .startCorner {
+        left: 0;
+        margin-left: -0.35rem;
+    }
 
-.endCorner {
-    right: 0;
-    margin-right: -0.35rem;
-}
+    .endCorner {
+        right: 0;
+        margin-right: -0.35rem;
+    }
 
-.feedbackIcon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    align-items: center;
-}
+    .feedbackIcon {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        align-items: center;
+    }
 
-.isRootSizeSmall {
-    @include tools.button-size(small);
-}
+    .isRootSizeSmall {
+        @include tools.button-size(small);
+    }
 
-.isRootSizeMedium {
-    @include tools.button-size(medium);
-}
+    .isRootSizeMedium {
+        @include tools.button-size(medium);
+    }
 
-.isRootSizeLarge {
-    @include tools.button-size(large);
-}
+    .isRootSizeLarge {
+        @include tools.button-size(large);
+    }
 
-.isRootBlock {
-    width: 100%;
-}
+    .isRootBlock {
+        width: 100%;
+    }
 
-.hasRootFeedback:disabled {
-    opacity: theme.$feedback-opacity;
-    cursor: theme.$feedback-cursor;
-}
+    .hasRootFeedback:disabled {
+        opacity: theme.$feedback-opacity;
+        cursor: theme.$feedback-cursor;
+    }
 
-.hasRootFeedback .label,
-.hasRootFeedback .beforeLabel,
-.hasRootFeedback .afterLabel {
-    color: transparent;
-}
+    .hasRootFeedback .label,
+    .hasRootFeedback .beforeLabel,
+    .hasRootFeedback .afterLabel {
+        color: transparent;
+    }
 
-.isRootInButtonGroup,
-.isRootInInputGroup {
-    z-index: map.get(settings.$group-z-indexes, button);
+    .isRootInButtonGroup,
+    .isRootInInputGroup {
+        z-index: map.get(settings.$group-z-indexes, button);
 
-    &:not(:first-child) {
-        border-start-start-radius: var(--rui-local-inner-border-radius);
-        border-end-start-radius: var(--rui-local-inner-border-radius);
-    }
+        &:not(:first-child) {
+            border-start-start-radius: var(--rui-local-inner-border-radius);
+            border-end-start-radius: var(--rui-local-inner-border-radius);
+        }
 
-    &:not(:last-child) {
-        border-start-end-radius: var(--rui-local-inner-border-radius);
-        border-end-end-radius: var(--rui-local-inner-border-radius);
+        &:not(:last-child) {
+            border-start-end-radius: var(--rui-local-inner-border-radius);
+            border-end-end-radius: var(--rui-local-inner-border-radius);
+        }
     }
-}
 
-.isRootInButtonGroup:not(:first-child) {
-    margin-inline-start: var(--rui-local-gap); // 1.
-}
+    .isRootInButtonGroup:not(:first-child) {
+        margin-inline-start: var(--rui-local-gap); // 1.
+    }
 
-.isRootInButtonGroup:focus,
-.isRootInButtonGroup:not(:disabled):hover {
-    z-index: map.get(settings.$group-z-indexes, button-hover);
-}
+    .isRootInButtonGroup:focus,
+    .isRootInButtonGroup:not(:disabled):hover {
+        z-index: map.get(settings.$group-z-indexes, button-hover);
+    }
 
-.isRootInButtonGroup .startCorner,
-.isRootInInputGroup .startCorner,
-.isRootInButtonGroup .endCorner,
-.isRootInInputGroup .endCorner {
-    z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
-}
+    .isRootInButtonGroup .startCorner,
+    .isRootInInputGroup .startCorner,
+    .isRootInButtonGroup .endCorner,
+    .isRootInInputGroup .endCorner {
+        z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
+    }
 
-.hasLabelHidden,
-.hasLabelVisibleSm,
-.hasLabelVisibleMd,
-.hasLabelVisibleLg,
-.hasLabelVisibleXl,
-.hasLabelVisibleX2l,
-.hasLabelVisibleX3l {
-    @include tools.hide-label();
-}
+    .hasLabelHidden,
+    .hasLabelVisibleSm,
+    .hasLabelVisibleMd,
+    .hasLabelVisibleLg,
+    .hasLabelVisibleXl,
+    .hasLabelVisibleX2l,
+    .hasLabelVisibleX3l {
+        @include tools.hide-label();
+    }
 
-.hasLabelVisibleSm {
-    @include breakpoint.up(sm) {
-        @include tools.show-label();
+    .hasLabelVisibleSm {
+        @include breakpoint.up(sm) {
+            @include tools.show-label();
+        }
     }
-}
 
-.hasLabelVisibleMd {
-    @include breakpoint.up(md) {
-        @include tools.show-label();
+    .hasLabelVisibleMd {
+        @include breakpoint.up(md) {
+            @include tools.show-label();
+        }
     }
-}
 
-.hasLabelVisibleLg {
-    @include breakpoint.up(lg) {
-        @include tools.show-label();
+    .hasLabelVisibleLg {
+        @include breakpoint.up(lg) {
+            @include tools.show-label();
+        }
     }
-}
 
-.hasLabelVisibleXl {
-    @include breakpoint.up(xl) {
-        @include tools.show-label();
+    .hasLabelVisibleXl {
+        @include breakpoint.up(xl) {
+            @include tools.show-label();
+        }
     }
-}
 
-.hasLabelVisibleX2l {
-    @include breakpoint.up(x2l) {
-        @include tools.show-label();
+    .hasLabelVisibleX2l {
+        @include breakpoint.up(x2l) {
+            @include tools.show-label();
+        }
     }
-}
 
-.hasLabelVisibleX3l {
-    @include breakpoint.up(x3l) {
-        @include tools.show-label();
+    .hasLabelVisibleX3l {
+        @include breakpoint.up(x3l) {
+            @include tools.show-label();
+        }
     }
 }