@react-ui-org/react-ui 0.44.0 → 0.46.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

@@ -304,6 +304,22 @@ 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>
+
 ## API
 
 <Props table of={Toolbar} />
@@ -329,7 +345,7 @@ 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/layout/grid
-[list]: /components/layout/list
+[grid]: /components/grid
+[list]: /components/list
 [spacing]: /css-helpers/spacing
-[text]: /components/ui/text
+[text]: /components/text

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

@@ -1,16 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } 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,
+  justify,
+  nowrap,
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   const alignClass = (value) => {
     if (value === 'top') {
@@ -46,13 +50,13 @@ 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(' ')}
+      )}
     >
       {children}
     </div>
@@ -61,6 +65,7 @@ export const Toolbar = (props) => {
 
 Toolbar.defaultProps = {
   align: 'top',
+  children: null,
   dense: false,
   justify: 'start',
   nowrap: false,
@@ -72,9 +77,13 @@ 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.
    */

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

@@ -1,84 +1,89 @@
 // 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;
 }
 
 .toolbar {
-  @include spacing.bottom(layouts, $compensation: theme.$gap);
+    @include spacing.bottom(layouts, $compensation: theme.$gap);
 
-  margin: calc(-1 * #{theme.$gap});
+    margin: calc(-1 * #{theme.$gap});
 }
 
 .item {
-  display: flex; // 1.
-  flex: none;
-  flex-direction: column; // 1.
-  margin: theme.$gap;
+    display: flex; // 1.
+    flex: none;
+    flex-direction: column; // 1.
+    margin: theme.$gap;
+}
+
+.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 {
+    margin: calc(-1 * #{theme.$gap-dense});
 }
 
-.isNowrap > .item {
-  flex: 0 1 auto;
+.isDense .item {
+    margin: theme.$gap-dense;
 }
 
-.isDense {
-  margin: calc(-1 * #{theme.$gap-dense});
+.isDense > .isDense {
+    margin: 0;
 }
 
-.isDense .item {
-  margin: theme.$gap-dense;
+.isNowrap {
+    flex-wrap: nowrap;
 }
 
-.isDense > .isDense {
-  margin: 0;
+.isNowrap > .item:not(.isItemFlexible) {
+    flex: 0 1 auto;
 }
 
 .toolbar.isDense {
-  @include spacing.bottom(layouts, $compensation: theme.$gap-dense);
+    @include spacing.bottom(layouts, $compensation: theme.$gap-dense);
 }
 
 .toolbar:not(.isDense) > .isDense,
 .group:not(.isDense) > .isDense {
-  margin: theme.$gap-dense;
+    margin: theme.$gap-dense;
 }

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

@@ -1,15 +1,19 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } 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,
+  nowrap,
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   const alignClass = (value) => {
     if (value === 'top') {
@@ -29,12 +33,12 @@ 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(' ')}
+      )}
     >
       {children}
     </div>
@@ -43,6 +47,7 @@ export const ToolbarGroup = (props) => {
 
 ToolbarGroup.defaultProps = {
   align: 'top',
+  children: null,
   dense: false,
   nowrap: false,
 };
@@ -53,9 +58,9 @@ 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.
    */

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

@@ -1,25 +1,44 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { classNames } from '../../utils/classNames';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Toolbar.scss';
 
-export const ToolbarItem = (props) => {
-  const {
-    children,
-  } = props;
+export const ToolbarItem = ({
+  children,
+  flexible,
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   return (
-    <div className={styles.item}>
+    <div
+      className={classNames(
+        styles.item,
+        flexible && styles.isItemFlexible,
+      )}
+    >
       {children}
     </div>
   );
 };
 
+ToolbarItem.defaultProps = {
+  children: null,
+  flexible: false,
+};
+
 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.
    */
-  children: PropTypes.node.isRequired,
+  flexible: PropTypes.bool,
 };
 
 export const ToolbarItemWithContext = withProviderContext(ToolbarItem, 'ToolbarItem');

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,7 +18,6 @@ export {
   Grid,
   GridSpan,
 } from './components/Grid';
-export { default as Link } from './components/Link';
 export {
   List,
   ListItem,
@@ -48,6 +40,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 +50,6 @@ export {
 
 // Provider
 export { RUIProvider } from './provider';
+
+// Utils
+export { classNames } from './utils/classNames';

package/src/lib/styles/_utilities.scss

@@ -1,18 +1,18 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'settings/breakpoints' as breakpoint-settings;
-@use 'settings/utilities' as utility-settings;
-@use 'tools/breakpoint';
-@use 'tools/utilities';
+@use "sass:map";
+@use "sass:meta";
+@use "settings/breakpoints" as breakpoint-settings;
+@use "settings/utilities" as utility-settings;
+@use "tools/breakpoint";
+@use "tools/utilities";
 
 @each $breakpoint in map.keys(breakpoint-settings.$values) {
-  @include breakpoint.up($breakpoint) {
-    $infix: if(map.get(breakpoint-settings.$values, $breakpoint) == 0, '', '-#{$breakpoint}');
+    @include breakpoint.up($breakpoint) {
+        $infix: if(map.get(breakpoint-settings.$values, $breakpoint) == 0, "", "-#{$breakpoint}");
 
-    @each $key, $utility in utility-settings.$map {
-      @if meta.type-of($utility) == 'map' and (map.get($utility, responsive) == true or $infix == '') {
-        @include utilities.generate($utility, $infix);
-      }
+        @each $key, $utility in utility-settings.$map {
+            @if meta.type-of($utility) == "map" and (map.get($utility, responsive) == true or $infix == "") {
+                @include utilities.generate($utility, $infix);
+            }
+        }
     }
-  }
 }

package/src/lib/styles/elements/_code.scss

@@ -1,14 +1,14 @@
-@use 'sass:map';
-@use '../theme/code';
-@use '../theme/colors';
+@use "sass:map";
+@use "../theme/code";
+@use "../theme/colors";
 
 code,
 pre {
-  font-size: code.$font-size;
-  font-family: code.$font-family;
+    font-size: code.$font-size;
+    font-family: code.$font-family;
 }
 
 code {
-  padding: 0.15em 0.5em;
-  background-color: map.get(colors.$grays, gray-100);
+    padding: 0.15em 0.5em;
+    background-color: map.get(colors.$grays, gray-100);
 }

package/src/lib/styles/elements/_links.scss

@@ -1,12 +1,12 @@
-@use '../theme/links';
+@use "../theme/links";
 
 a {
-  text-decoration: links.$decoration;
-  color: links.$color;
+    text-decoration: links.$decoration;
+    color: links.$color;
 
-  &:hover,
-  &:focus {
-    text-decoration: links.$hover-decoration;
-    color: links.$hover-color;
-  }
+    &:hover,
+    &:focus {
+        text-decoration: links.$hover-decoration;
+        color: links.$hover-color;
+    }
 }

package/src/lib/styles/elements/_lists.scss

@@ -1,10 +1,10 @@
-@use '../theme/lists';
+@use "../theme/lists";
 
 ol,
 ul {
-  padding-left: 1.25em;
+    padding-left: 1.25em;
 }
 
 ul {
-  list-style-type: lists.$unordered-style;
+    list-style-type: lists.$unordered-style;
 }