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

package/src/lib/components/Toggle/Toggle.scss

@@ -1,61 +1,61 @@
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/inline-field-elements';
-@use '../../styles/tools/form-fields/inline-field-layout';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/inline-field-elements";
+@use "../../styles/tools/form-fields/inline-field-layout";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
 
 // Foundation
 .root {
-  @include foundation.root();
-  @include inline-field-layout.root();
-  @include inline-field-elements.min-tap-target($type: toggle);
-  @include variants.visual(check);
+    @include foundation.root();
+    @include inline-field-layout.root();
+    @include inline-field-elements.min-tap-target($type: toggle);
+    @include variants.visual(check);
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .field {
-  @include inline-field-layout.field();
+    @include inline-field-layout.field($type: toggle);
 }
 
 .input {
-  @include inline-field-elements.check-input($type: toggle);
+    @include inline-field-elements.check-input($type: toggle);
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .hasRootLabelBefore {
-  @include inline-field-layout.has-label-before();
+    @include inline-field-layout.has-label-before();
 }
 
 .isRootInFormLayout {
-  @include inline-field-layout.in-form-layout();
+    @include inline-field-layout.in-form-layout();
 }

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

@@ -50,8 +50,8 @@ See [API](#api) for all available options.
 ## General Guidelines
 
 - **Toolbar is great for flexible inline layouts.** For stacking your content
-  vertically, use the [List][list] layout. For two-dimensional layouts head to
-  the [Grid][grid] layout.
+  vertically or building two-dimensional layouts head to the [Grid][grid]
+  layout.
 
 - **Wrap your items** into the ToolbarItem component. This ensures your content
   is properly spaced and aligned with other Toolbar elements. Do **not** try to
@@ -88,7 +88,7 @@ of `right`.
               <span id="alignment-label">Alignment:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="#alignment-label">
+              <ButtonGroup aria-labelledby="alignment-label">
                 <Button
                   color={alignment === 'top' ? 'dark' : 'primary'}
                   label="top"
@@ -117,7 +117,7 @@ of `right`.
               <span id="justification-label">Justification:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="#justification-label">
+              <ButtonGroup aria-labelledby="justification-label">
                 <Button
                   color={justification === 'start' ? 'dark' : 'primary'}
                   label="start"
@@ -304,6 +304,35 @@ Toolbar.
 content placed within Toolbar. The [Text][text] component is designed
 specifically for this kind of job.
 
+## Flexible Items
+
+Toolbar items can be made flexible to grow and shrink according to the available
+space. This is useful e.g. when you need to combine text with an action:
+
+<Playground>
+  <Toolbar>
+    <ToolbarItem flexible>
+      <Placeholder bordered>My Headline</Placeholder>
+    </ToolbarItem>
+    <ToolbarItem>
+      <Placeholder bordered>Action</Placeholder>
+    </ToolbarItem>
+  </Toolbar>
+</Playground>
+
+Or to build a classic media layout with image on the left and text on the right:
+
+<Playground>
+  <Toolbar>
+    <ToolbarItem>
+      <Placeholder bordered>Media object</Placeholder>
+    </ToolbarItem>
+    <ToolbarItem flexible>
+      <Placeholder bordered>Media body</Placeholder>
+    </ToolbarItem>
+  </Toolbar>
+</Playground>
+
 ## API
 
 <Props table of={Toolbar} />
@@ -330,6 +359,5 @@ A wrapper for individual toolbar items.
 [inline-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
 [block-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
 [grid]: /components/grid
-[list]: /components/list
 [spacing]: /css-helpers/spacing
 [text]: /components/text

package/src/lib/components/Toolbar/Toolbar.jsx

@@ -1,16 +1,21 @@
 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 './Toolbar.scss';
 
-export const Toolbar = (props) => {
-  const {
-    align,
-    children,
-    dense,
-    justify,
-    nowrap,
-  } = props;
+export const Toolbar = ({
+  align,
+  children,
+  dense,
+  id,
+  justify,
+  nowrap,
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   const alignClass = (value) => {
     if (value === 'top') {
@@ -46,13 +51,14 @@ export const Toolbar = (props) => {
 
   return (
     <div
-      className={[
+      className={classNames(
         styles.toolbar,
-        dense ? styles.isDense : null,
-        nowrap ? styles.isNowrap : null,
+        dense && styles.isDense,
+        nowrap && styles.isNowrap,
         alignClass(align),
         justifyClass(justify),
-      ].join(' ')}
+      )}
+      id={id}
     >
       {children}
     </div>
@@ -61,7 +67,9 @@ export const Toolbar = (props) => {
 
 Toolbar.defaultProps = {
   align: 'top',
+  children: null,
   dense: false,
+  id: undefined,
   justify: 'start',
   nowrap: false,
 };
@@ -72,13 +80,21 @@ Toolbar.propTypes = {
    */
   align: PropTypes.oneOf(['top', 'middle', 'bottom', 'baseline']),
   /**
-   * Individual ToolbarItems and ToolbarGroups.
+   * Nested elements. Supported types are:
+   * * `ToolbarItems`
+   * * `ToolbarGroups`
+   *
+   * If none are provided nothing is rendered.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * If `true`, spacing of all toolbar items in the toolbar will be reduced.
    */
   dense: PropTypes.bool,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
   /**
    * Horizontal alignment (distribution) of toolbar items and groups.
    */
@@ -89,6 +105,6 @@ Toolbar.propTypes = {
   nowrap: PropTypes.bool,
 };
 
-export const ToolbarWithContext = withProviderContext(Toolbar, 'Toolbar');
+export const ToolbarWithGlobalProps = withGlobalProps(Toolbar, 'Toolbar');
 
-export default ToolbarWithContext;
+export default ToolbarWithGlobalProps;

package/src/lib/components/Toolbar/Toolbar.scss

@@ -1,84 +1,71 @@
 // 1. Get rid of unwanted spacing of inline elements by invocation of flex layout.
 
-@use '../../styles/tools/spacing';
-@use 'theme';
+@use "../../styles/tools/spacing";
+@use "theme";
 
 .toolbar,
 .group {
-  display: flex;
-  flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
+    gap: theme.$gap;
 }
 
 .toolbar {
-  @include spacing.bottom(layouts, $compensation: theme.$gap);
-
-  margin: calc(-1 * #{theme.$gap});
+    @include spacing.bottom(layouts);
 }
 
 .item {
-  display: flex; // 1.
-  flex: none;
-  flex-direction: column; // 1.
-  margin: theme.$gap;
+    display: flex; // 1.
+    flex: none;
+    flex-direction: column; // 1.
+}
+
+.isItemFlexible {
+    flex: 1;
+    min-width: 0;
 }
 
 .isAlignedToTop {
-  align-items: flex-start;
+    align-items: flex-start;
 }
 
 .isAlignedToMiddle {
-  align-items: center;
+    align-items: center;
 }
 
 .isAlignedToBottom {
-  align-items: flex-end;
+    align-items: flex-end;
 }
 
 .isAlignedToBaseline {
-  align-items: baseline;
+    align-items: baseline;
 }
 
 .isJustifiedToStart {
-  justify-content: flex-start;
+    justify-content: flex-start;
 }
 
 .isJustifiedToCenter {
-  justify-content: center;
+    justify-content: center;
 }
 
 .isJustifiedToEnd {
-  justify-content: flex-end;
+    justify-content: flex-end;
 }
 
 .isJustifiedToSpaceBetween {
-  justify-content: space-between;
+    justify-content: space-between;
 }
 
-.isNowrap {
-  flex-wrap: nowrap;
+.isDense,
+.isDense .group {
+    gap: theme.$gap-dense;
 }
 
-.isNowrap > .item {
-  flex: 0 1 auto;
-}
-
-.isDense {
-  margin: calc(-1 * #{theme.$gap-dense});
-}
-
-.isDense .item {
-  margin: theme.$gap-dense;
-}
-
-.isDense > .isDense {
-  margin: 0;
-}
-
-.toolbar.isDense {
-  @include spacing.bottom(layouts, $compensation: theme.$gap-dense);
+.isNowrap {
+    flex-wrap: nowrap;
 }
 
-.toolbar:not(.isDense) > .isDense,
-.group:not(.isDense) > .isDense {
-  margin: theme.$gap-dense;
+.isNowrap > .item:not(.isItemFlexible) {
+    flex: 0 1 auto;
 }

package/src/lib/components/Toolbar/ToolbarGroup.jsx

@@ -1,15 +1,20 @@
 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 './Toolbar.scss';
 
-export const ToolbarGroup = (props) => {
-  const {
-    align,
-    children,
-    dense,
-    nowrap,
-  } = props;
+export const ToolbarGroup = ({
+  align,
+  children,
+  dense,
+  id,
+  nowrap,
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   const alignClass = (value) => {
     if (value === 'top') {
@@ -29,12 +34,13 @@ export const ToolbarGroup = (props) => {
 
   return (
     <div
-      className={[
+      className={classNames(
         styles.group,
-        dense ? styles.isDense : null,
-        nowrap ? styles.isNowrap : null,
+        dense && styles.isDense,
+        nowrap && styles.isNowrap,
         alignClass(align),
-      ].join(' ')}
+      )}
+      id={id}
     >
       {children}
     </div>
@@ -43,7 +49,9 @@ export const ToolbarGroup = (props) => {
 
 ToolbarGroup.defaultProps = {
   align: 'top',
+  children: null,
   dense: false,
+  id: undefined,
   nowrap: false,
 };
 
@@ -53,19 +61,23 @@ ToolbarGroup.propTypes = {
    */
   align: PropTypes.oneOf(['top', 'middle', 'bottom', 'baseline']),
   /**
-   * Grouped ToolbarItems.
+   * Grouped ToolbarItems. If none are provided nothing is rendered.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * If `true`, spacing of toolbar items in the group will be reduced.
    */
   dense: PropTypes.bool,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
   /**
    * If set, the toolbar group will not wrap.
    */
   nowrap: PropTypes.bool,
 };
 
-export const ToolbarGroupWithContext = withProviderContext(ToolbarGroup, 'ToolbarGroup');
+export const ToolbarGroupWithGlobalProps = withGlobalProps(ToolbarGroup, 'ToolbarGroup');
 
-export default ToolbarGroupWithContext;
+export default ToolbarGroupWithGlobalProps;

package/src/lib/components/Toolbar/ToolbarItem.jsx

@@ -1,27 +1,53 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { withGlobalProps } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Toolbar.scss';
 
-export const ToolbarItem = (props) => {
-  const {
-    children,
-  } = props;
+export const ToolbarItem = ({
+  children,
+  flexible,
+  id,
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   return (
-    <div className={styles.item}>
+    <div
+      className={classNames(
+        styles.item,
+        flexible && styles.isItemFlexible,
+      )}
+      id={id}
+    >
       {children}
     </div>
   );
 };
 
+ToolbarItem.defaultProps = {
+  children: null,
+  flexible: false,
+  id: undefined,
+};
+
 ToolbarItem.propTypes = {
   /**
-   * Content of the toolbar item.
+   * Content of the toolbar item. If none are provided nothing is rendered.
+   */
+  children: PropTypes.node,
+  /**
+   * Allow item to grow and shrink if needed.
+   */
+  flexible: PropTypes.bool,
+  /**
+   * ID of the root HTML element.
    */
-  children: PropTypes.node.isRequired,
+  id: PropTypes.string,
 };
 
-export const ToolbarItemWithContext = withProviderContext(ToolbarItem, 'ToolbarItem');
+export const ToolbarItemWithGlobalProps = withGlobalProps(ToolbarItem, 'ToolbarItem');
 
-export default ToolbarItemWithContext;
+export default ToolbarItemWithGlobalProps;

package/src/lib/{helpers → components/_helpers}/getRootColorClassName.js

@@ -1,4 +1,4 @@
-export default (variant, styles) => {
+export const getRootColorClassName = (variant, styles) => {
   if (variant === 'primary') {
     return styles.rootColorPrimary;
   }

package/src/lib/{helpers → components/_helpers}/getRootSizeClassName.js

@@ -1,4 +1,4 @@
-export default (size, styles) => {
+export const getRootSizeClassName = (size, styles) => {
   if (size === 'small') {
     return styles.rootSizeSmall;
   }

package/src/lib/{helpers → components/_helpers}/getRootValidationStateClassName.js

@@ -1,4 +1,4 @@
-export default (validationState, styles) => {
+export const getRootValidationStateClassName = (validationState, styles) => {
   if (validationState === 'invalid') {
     return styles.isRootStateInvalid;
   }

package/src/lib/components/_helpers/isChildrenEmpty.js

@@ -0,0 +1,3 @@
+export const isChildrenEmpty = (children) => children == null
+  || children === false
+  || (Array.isArray(children) && children.length === 0);

package/src/lib/{utils → components/_helpers}/transferProps.js

@@ -1,4 +1,4 @@
-export default ({
+export const transferProps = ({
   children,
   className,
   forwardedRef,

package/src/lib/foundation.scss

@@ -7,11 +7,11 @@
 //
 // Ground-zero styles.
 
-@use 'styles/generic/box-sizing';
-@use 'normalize.css/normalize.css';
-@use 'styles/generic/forms';
-@use 'styles/generic/reset';
-@use 'styles/generic/shared';
+@use "styles/generic/box-sizing";
+@use "normalize.css/normalize.css";
+@use "styles/generic/forms";
+@use "styles/generic/reset";
+@use "styles/generic/shared";
 
 //
 // 2. Elements
@@ -19,9 +19,9 @@
 //
 // Unclassed HTML elements (type selectors).
 
-@use 'styles/elements/code';
-@use 'styles/elements/links';
-@use 'styles/elements/lists';
-@use 'styles/elements/page';
-@use 'styles/elements/rulers';
-@use 'styles/elements/small';
+@use "styles/elements/code";
+@use "styles/elements/links";
+@use "styles/elements/lists";
+@use "styles/elements/page";
+@use "styles/elements/rulers";
+@use "styles/elements/small";

package/src/lib/helpers.scss

@@ -9,7 +9,7 @@
 // General purpose helpers for common situations. They can compose multiple CSS rules to do a bit
 // more complicated tasks.
 
-@use 'styles/helpers/animation';
+@use "styles/helpers/animation";
 
 //
 // 2. Utilities
@@ -19,4 +19,4 @@
 // thing: they set a single CSS rule and use the otherwise disallowed `!important` to enforce it.
 // Also they are often responsive (can be adjusted for individual breakpoints).
 
-@use 'styles/utilities';
+@use "styles/utilities";

package/src/lib/index.js

@@ -8,14 +8,7 @@ export {
   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/CTA';
 export { default as FileInputField } from './components/FileInputField';
 export {
   FormLayout,
@@ -25,18 +18,12 @@ export {
   Grid,
   GridSpan,
 } from './components/Grid';
-export { default as Link } from './components/Link';
-export {
-  List,
-  ListItem,
-} from './components/List';
-export {
-  Media,
-  MediaBody,
-  MediaObject,
-} from './components/Media';
 export { default as Modal } from './components/Modal';
 export { default as Paper } from './components/Paper';
+export {
+  Popover,
+  PopoverWrapper,
+} from './components/Popover';
 export { default as Radio } from './components/Radio';
 export { default as ScrollView } from './components/ScrollView';
 export { default as SelectField } from './components/SelectField';
@@ -48,6 +35,7 @@ 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 TextLink } from './components/TextLink';
 export { default as Toggle } from './components/Toggle';
 export {
   Toolbar,
@@ -57,3 +45,6 @@ export {
 
 // Provider
 export { RUIProvider } from './provider';
+
+// Utils
+export { classNames } from './utils/classNames';

package/src/lib/provider/index.js

@@ -1,2 +1,3 @@
 export { default as RUIProvider } from './RUIProvider';
-export { default as withProviderContext } from './withProviderContext';
+export { default as RUIContext } from './RUIContext';
+export { default as withGlobalProps } from './withGlobalProps';

package/src/lib/provider/withGlobalProps.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import RUIContext from './RUIContext';
+
+export default (Component, componentName) => {
+  const WithGlobalPropsComponent = (props) => (
+    <RUIContext.Consumer>
+      {({ globalProps }) => {
+        const contextGlobalProps = globalProps ? globalProps[componentName] : null;
+
+        return (
+          <Component
+            {...contextGlobalProps}
+            {...props}
+          />
+        );
+      }}
+    </RUIContext.Consumer>
+  );
+
+  return WithGlobalPropsComponent;
+};