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

package/src/lib/index.js

@@ -1,60 +1,59 @@
-// Layout components
-export { default as Center } from './components/layout/Center';
+// Components
+export { default as Alert } from './components/Alert';
+export { default as Badge } from './components/Badge';
+export { default as Button } from './components/Button';
+export { ButtonGroup } from './components/ButtonGroup';
+export {
+  Card,
+  CardBody,
+  CardFooter,
+} from './components/Card';
+export { default as Center } from './components/Center';
+export { default as CheckboxField } from './components/CheckboxField';
 export {
   CTA,
   CTACenter,
   CTAEnd,
   CTAStart,
-} from './components/layout/CTA';
+} from './components/CTA';
+export { default as FileInputField } from './components/FileInputField';
 export {
   FormLayout,
   FormLayoutCustomField,
-} from './components/layout/FormLayout';
+} from './components/FormLayout';
 export {
   Grid,
   GridSpan,
-} from './components/layout/Grid';
+} from './components/Grid';
+export { default as Link } from './components/Link';
 export {
   List,
   ListItem,
-} from './components/layout/List';
+} from './components/List';
 export {
   Media,
   MediaBody,
   MediaObject,
-} from './components/layout/Media';
+} from './components/Media';
+export { default as Modal } from './components/Modal';
+export { default as Paper } from './components/Paper';
+export { default as Radio } from './components/Radio';
+export { default as ScrollView } from './components/ScrollView';
+export { default as SelectField } from './components/SelectField';
+export {
+  Tabs,
+  TabsItem,
+} from './components/Tabs';
+export { default as Table } from './components/Table';
+export { default as Text } from './components/Text';
+export { default as TextArea } from './components/TextArea';
+export { default as TextField } from './components/TextField';
+export { default as Toggle } from './components/Toggle';
 export {
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
-} from './components/layout/Toolbar';
-
-// UI components
-export { default as Alert } from './components/ui/Alert';
-export { default as Badge } from './components/ui/Badge';
-export { default as Button } from './components/ui/Button';
-export { default as ButtonGroup } from './components/ui/ButtonGroup';
-export {
-  Card,
-  CardBody,
-  CardFooter,
-} from './components/ui/Card';
-export { default as CheckboxField } from './components/ui/CheckboxField';
-export { default as FileInputField } from './components/ui/FileInputField';
-export { default as Modal } from './components/ui/Modal';
-export { default as Paper } from './components/ui/Paper';
-export { default as Radio } from './components/ui/Radio';
-export { default as ScrollView } from './components/ui/ScrollView';
-export { default as SelectField } from './components/ui/SelectField';
-export {
-  Tabs,
-  TabsItem,
-} from './components/ui/Tabs';
-export { default as Table } from './components/ui/Table';
-export { default as Text } from './components/ui/Text';
-export { default as TextArea } from './components/ui/TextArea';
-export { default as TextField } from './components/ui/TextField';
-export { default as Toggle } from './components/ui/Toggle';
+} from './components/Toolbar';
 
 // Provider
 export { RUIProvider } from './provider';

package/src/lib/styles/tools/_accessibility.scss

@@ -17,6 +17,15 @@
   border: 0;
 }
 
+@mixin unhide-text() {
+  position: unset;
+  width: unset;
+  height: unset;
+  overflow: unset;
+  clip: unset;
+  white-space: unset;
+}
+
 // 2.
 @mixin min-tap-target($size: theme.$tap-target-size, $center: true) {
   position: relative;

package/src/lib/theme.scss

@@ -155,6 +155,11 @@
   --rui-spacing-bottom-headings: var(--rui-spacing-5);
   --rui-spacing-bottom-layouts: var(--rui-spacing-5);
 
+  // Disabled state
+  --rui-disabled-background-color: var(--rui-color-gray-50);
+  --rui-disabled-opacity: 0.5;
+  --rui-disabled-cursor: not-allowed;
+
   //
   // Elements
   // ========
@@ -193,11 +198,11 @@
   // Grid
   // ====
 
-  --rui-Grid__auto-flow: initial;
   --rui-Grid__columns: 1fr;
   --rui-Grid__column-gap: var(--rui-spacing-4);
   --rui-Grid__rows: auto;
   --rui-Grid__row-gap: var(--rui-spacing-4);
+  --rui-Grid__auto-flow: initial;
   --rui-Grid__align-content: initial;
   --rui-Grid__align-items: initial;
   --rui-Grid__justify-content: initial;
@@ -292,8 +297,10 @@
   --rui-Button__text-transform: none;
   --rui-Button__border-width: var(--rui-border-width);
   --rui-Button__border-radius: var(--rui-border-radius);
-  --rui-Button--disabled__opacity: 0.5;
-  --rui-Button--disabled__cursor: not-allowed;
+  --rui-Button--disabled__opacity: var(--rui-disabled-opacity);
+  --rui-Button--disabled__cursor: var(--rui-disabled-cursor);
+  --rui-Button--feedback__opacity: 1;
+  --rui-Button--feedback__cursor: var(--rui-disabled-cursor);
 
   // Buttons: filled priority
 
@@ -674,8 +681,8 @@
   --rui-Card__border-radius: var(--rui-border-radius);
   --rui-Card--dense__padding: var(--rui-spacing-2);
   --rui-Card--raised__box-shadow: var(--rui-elevation-1);
-  --rui-Card--disabled__background-color: var(--rui-color-gray-50);
-  --rui-Card--disabled__opacity: 0.6;
+  --rui-Card--disabled__background-color: var(--rui-disabled-background-color);
+  --rui-Card--disabled__opacity: var(--rui-disabled-opacity);
 
   // Card: variant: primary
   --rui-Card--primary__color: var(--rui-page-color);
@@ -758,8 +765,8 @@
   --rui-FormField--horizontal--full-width__label__width: fit-content(50%);
 
   // Forms fields: disabled state
-  --rui-FormField--disabled__cursor: not-allowed;
-  --rui-FormField--disabled__opacity: 0.5;
+  --rui-FormField--disabled__cursor: var(--rui-disabled-cursor);
+  --rui-FormField--disabled__opacity: var(--rui-disabled-opacity);
 
   // Form fields: validation states: invalid
   --rui-FormField--invalid--default__border-color: var(--rui-color-danger);
@@ -851,6 +858,15 @@
   --rui-FormField--check--checked__border-color: var(--rui-color-active);
   --rui-FormField--check--checked__check-background-color: var(--rui-color-active);
 
+  //
+  // Link
+  // ====
+
+  --rui-Link__color: var(--rui-link-color);
+  --rui-Link__text-decoration: var(--rui-link-decoration);
+  --rui-Link--hover__color: var(--rui-link-hover-color);
+  --rui-Link--hover__text-decoration: var(--rui-link-hover-decoration);
+
   //
   // Modal
   // =====
@@ -878,6 +894,8 @@
   --rui-Paper__border-color: transparent;
   --rui-Paper__border-radius: var(--rui-border-radius);
   --rui-Paper__background-color: var(--rui-color-white);
+  --rui-Paper--muted__background-color: var(--rui-disabled-background-color);
+  --rui-Paper--muted__opacity: var(--rui-disabled-opacity);
   --rui-Paper--raised__box-shadow: var(--rui-elevation-1);
 
   //

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

@@ -1,191 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import getRootSizeClassName from '../../../helpers/getRootSizeClassName';
-import getRootColorClassName from '../../../helpers/getRootColorClassName';
-import { withProviderContext } from '../../../provider';
-import transferProps from '../../../utils/transferProps';
-import withForwardedRef from '../withForwardedRef';
-import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
-import getRootPriorityClassName from './helpers/getRootPriorityClassName';
-import styles from './Button.scss';
-
-export const Button = ({
-  afterLabel,
-  beforeLabel,
-  block,
-  clickHandler,
-  disabled,
-  endCorner,
-  forwardedRef,
-  grouped,
-  id,
-  label,
-  labelVisibility,
-  loadingIcon,
-  priority,
-  size,
-  startCorner,
-  type,
-  color,
-  ...restProps
-}) => (
-  /* No worries, `type` is always assigned correctly through props. */
-  /* eslint-disable react/button-has-type */
-  <button
-    {...transferProps(restProps)}
-    className={
-      priority === 'link'
-        ? [
-          styles.root,
-          getRootPriorityClassName(priority, styles),
-        ].join(' ')
-        : [
-          styles.root,
-          getRootPriorityClassName(priority, styles),
-          getRootColorClassName(color, styles),
-          getRootSizeClassName(size, styles),
-          getRootLabelVisibilityClassName(labelVisibility, styles),
-          block ? styles.rootBlock : '',
-          grouped ? styles.rootGrouped : '',
-          loadingIcon ? styles.isRootLoading : '',
-        ].join(' ')
-    }
-    disabled={disabled || !!loadingIcon}
-    id={id}
-    onClick={clickHandler}
-    ref={forwardedRef}
-    type={type}
-  >
-    {priority !== 'link' && startCorner && (
-      <span className={styles.startCorner}>
-        {startCorner}
-      </span>
-    )}
-    {beforeLabel && (
-      <span className={styles.beforeLabel}>
-        {beforeLabel}
-      </span>
-    )}
-    <span
-      className={styles.label}
-      {...(id && { id: `${id}__labelText` })}
-    >
-      {label}
-    </span>
-    {afterLabel && (
-      <span className={styles.afterLabel}>
-        {afterLabel}
-      </span>
-    )}
-    {priority !== 'link' && endCorner && (
-      <span className={styles.endCorner}>
-        {endCorner}
-      </span>
-    )}
-    {priority !== 'link' && loadingIcon && (
-      <span className={styles.loadingIcon}>
-        {loadingIcon}
-      </span>
-    )}
-  </button>
-  /* eslint-enable react/button-has-type */
-);
-
-Button.defaultProps = {
-  afterLabel: null,
-  beforeLabel: null,
-  block: false,
-  clickHandler: null,
-  color: 'primary',
-  disabled: false,
-  endCorner: null,
-  forwardedRef: undefined,
-  grouped: false,
-  id: undefined,
-  labelVisibility: 'all',
-  loadingIcon: null,
-  priority: 'filled',
-  size: 'medium',
-  startCorner: null,
-  type: 'button',
-};
-
-Button.propTypes = {
-  /**
-   * Element to be displayed after label, eg. an icon.
-   */
-  afterLabel: PropTypes.node,
-  /**
-   * Element to be displayed before label, eg. an icon.
-   */
-  beforeLabel: PropTypes.node,
-  /**
-   * If `true`, the button will span the full width of its parent.
-   */
-  block: PropTypes.bool,
-  /**
-   * Function to call when the button is clicked.
-   */
-  clickHandler: PropTypes.func,
-  /**
-   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the button.
-   */
-  color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
-  /**
-   * If `true`, the button will be disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Element to be displayed in the top right corner.
-   */
-  endCorner: PropTypes.node,
-  /**
-   * Reference forwarded to the `button` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
-  /**
-   * Treat button differently when it's inside `ButtonGroup`. Do not set manually!
-   */
-  grouped: PropTypes.bool,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
-  /**
-   * Button label.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Defines when the button label should be visible.
-   */
-  labelVisibility: PropTypes.oneOf(['all', 'desktop', 'none']),
-  /**
-   * Element to be displayed as a loading icon. When defined, it implies the button is in the
-   * loading state.
-   */
-  loadingIcon: PropTypes.node,
-  /**
-   * Visual priority to highlight or suppress the button.
-   */
-  priority: PropTypes.oneOf(['filled', 'outline', 'flat', 'link']),
-  /**
-   * Size of the button.
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Element to be displayed in the top left corner.
-   */
-  startCorner: PropTypes.node,
-  /**
-   * Set the HTML `type` attribute of the `button` element.
-   */
-  type: PropTypes.oneOf(['button', 'submit']),
-};
-
-export const ButtonWithContext = withForwardedRef(withProviderContext(Button, 'Button'));
-
-export default ButtonWithContext;

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

@@ -1,154 +0,0 @@
-@use 'sass:map';
-@use '../../../styles/tools/accessibility';
-@use '../../../styles/tools/breakpoint';
-@use 'settings';
-@use 'theme';
-@use 'tools';
-
-.root {
-  @include tools.button();
-}
-
-.label {
-  display: block;
-}
-
-.beforeLabel,
-.afterLabel,
-.startCorner,
-.endCorner,
-.loadingIcon {
-  display: flex;
-  align-items: baseline;
-  justify-content: center;
-}
-
-.beforeLabel {
-  margin-right: settings.$icon-spacing;
-}
-
-.afterLabel,
-.loadingIcon {
-  margin-left: settings.$icon-spacing;
-}
-
-.startCorner,
-.endCorner {
-  position: absolute;
-  top: -0.35rem;
-}
-
-.startCorner {
-  left: 0;
-  margin-left: -0.35rem;
-}
-
-.endCorner {
-  right: 0;
-  margin-right: -0.35rem;
-}
-
-.rootSizeSmall {
-  @include tools.button-size(small);
-}
-
-.rootSizeMedium {
-  @include tools.button-size(medium);
-}
-
-.rootSizeLarge {
-  @include tools.button-size(large);
-}
-
-.rootBlock {
-  width: 100%;
-}
-
-.rootBlock.withLabelHiddenMobile {
-  @include breakpoint.up(settings.$breakpoint) {
-    width: 100%;
-  }
-}
-
-.rootGrouped {
-  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(: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);
-  }
-}
-
-.rootGrouped .startCorner,
-.rootGrouped .endCorner {
-  z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
-}
-
-.withLabelHidden .label,
-.withLabelHiddenMobile .label {
-  @include accessibility.hide-text();
-}
-
-.withLabelHiddenMobile .label {
-  @include breakpoint.up(settings.$breakpoint) {
-    position: relative;
-    width: auto;
-    height: auto;
-  }
-}
-
-.withLabelHidden .beforeLabel,
-.withLabelHidden .afterLabel,
-.withLabelHiddenMobile .beforeLabel,
-.withLabelHiddenMobile .afterLabel {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.withLabelHiddenMobile .beforeLabel {
-  @include breakpoint.up(settings.$breakpoint) {
-    margin-right: settings.$icon-spacing;
-  }
-}
-
-.withLabelHiddenMobile .afterLabel {
-  @include breakpoint.up(settings.$breakpoint) {
-    margin-left: settings.$icon-spacing;
-  }
-}
-
-.withLabelHidden.isRootLoading .loadingIcon,
-.withLabelHiddenMobile.isRootLoading .loadingIcon {
-  margin-left: 0;
-}
-
-.withLabelHidden.isRootLoading .beforeLabel,
-.withLabelHidden.isRootLoading .afterLabel,
-.withLabelHiddenMobile.isRootLoading .beforeLabel,
-.withLabelHiddenMobile.isRootLoading .afterLabel {
-  display: none;
-}
-
-.withLabelHiddenMobile.isRootLoading .beforeLabel,
-.withLabelHiddenMobile.isRootLoading .afterLabel {
-  @include breakpoint.up(settings.$breakpoint) {
-    display: flex;
-  }
-}
-
-.withLabelHiddenMobile.isRootLoading .loadingIcon {
-  @include breakpoint.up(settings.$breakpoint) {
-    margin-left: settings.$icon-spacing;
-  }
-}

package/src/lib/components/ui/Button/helpers/getRootLabelVisibilityClassName.js

@@ -1,11 +0,0 @@
-export default (labelVisibility, styles) => {
-  if (labelVisibility === 'desktop') {
-    return styles.withLabelHiddenMobile;
-  }
-
-  if (labelVisibility === 'none') {
-    return styles.withLabelHidden;
-  }
-
-  return null;
-};

package/src/lib/components/ui/ButtonGroup/index.js

@@ -1 +0,0 @@
-export { default } from './ButtonGroup';