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

package/src/lib/components/Tabs/Tabs.jsx

@@ -18,7 +18,6 @@ export const Tabs = ({
 );
 
 Tabs.defaultProps = {
-  children: null,
   id: undefined,
 };
 
@@ -26,7 +25,7 @@ Tabs.propTypes = {
   /**
    * Nested `TabsItem` elements.
    */
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
   /**
    * ID of the root HTML element. It also serves as base for nested element:
    * * `<ID>__list`

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

@@ -81,7 +81,7 @@ appended by an ellipsis (`…`).
               label="Number of lines"
               min={1}
               max={100}
-              onChange={(e) => setLines(e.target.value)}
+              onChange={(e) => setLines(Number(e.target.value))}
               type="number"
               value={lines}
             />

package/src/lib/components/Text/Text.jsx

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { getRootClampClassName } from './_helpers/getRootClampClassName';
 import { getRootHyphensClassName } from './_helpers/getRootHyphensClassName';
 import { getRootWordWrappingClassName } from './_helpers/getRootWordWrappingClassName';
 import styles from './Text.scss';
@@ -14,19 +16,23 @@ export const Text = ({
   lines,
   wordWrapping,
 }) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
   const HtmlElement = blockLevel ? 'div' : 'span';
 
   return (
     <HtmlElement
       className={(hyphens !== 'none' || lines > 0 || wordWrapping !== 'normal')
         ? classNames(
-          (lines > 0) ? styles.rootClampLines : '',
+          getRootClampClassName(lines, styles),
           getRootHyphensClassName(hyphens, styles),
           getRootWordWrappingClassName(wordWrapping, styles),
         )
         : undefined}
       id={id}
-      style={(lines > 0) ? { '--rui-custom-lines': lines } : undefined}
+      style={(lines > 1) ? { '--rui-custom-lines': lines } : undefined}
     >
       {children}
     </HtmlElement>

package/src/lib/components/Text/Text.scss

@@ -1,10 +1,20 @@
 // 1. `word-break: break-word` is deprecated in favour of `overflow-wrap: anywhere`, but it's still
 //     required for Safari.
 //     https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere
+//
+// 2. Different approaches are used for single and multiline texts because the latter approach
+//    doesn't always work for single-line texts.
+
+.rootClampSingleLine {
+    display: block; // 2.
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 
 // stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix
-.rootClampLines {
-    display: -webkit-box;
+.rootClampMultiLine {
+    display: -webkit-box; // 2.
     -webkit-line-clamp: var(--rui-custom-lines);
     -webkit-box-orient: vertical;
     overflow: hidden;

package/src/lib/components/Text/_helpers/getRootClampClassName.js

@@ -0,0 +1,11 @@
+export const getRootClampClassName = (lines, styles) => {
+  if (lines === 1) {
+    return styles.rootClampSingleLine;
+  }
+
+  if (lines > 1) {
+    return styles.rootClampMultiLine;
+  }
+
+  return null;
+};

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

@@ -350,7 +350,7 @@ It's possible to disable the whole input.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `textarea` HTML element. This enables making the component
+passed to the `<textarea>` HTML element. This enables making the component
 interactive and helps improve its [accessibility](#forwarding-html-attributes).
 
 <Props table of={TextArea} />

package/src/lib/components/TextArea/TextArea.jsx

@@ -192,7 +192,10 @@ TextArea.propTypes = {
   /**
    * Value of the input.
    */
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
   /**
    * Design variant of the field, further customizable with CSS custom properties.
    */

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

@@ -493,7 +493,7 @@ It's possible to disable the whole input.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `input` HTML element. This enables making the component
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its [accessibility](#forwarding-html-attributes).
 
 <Props table of={TextField} />

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

@@ -0,0 +1,77 @@
+---
+name: TextLink
+menu: 'Actions'
+route: /components/text-link
+---
+
+# TextLink
+
+import {
+  Playground,
+  Props,
+} from 'docz'
+import { TextLink } from './TextLink'
+
+TextLink allows users to follow navigation.
+
+## Basic Usage
+
+To implement the TextLink component, you need to import it first:
+
+```js
+import { TextLink } from '@react-ui-org/react-ui';
+```
+
+And use it:
+
+<Playground>
+  <TextLink
+    href="/contribute/guidelines"
+    label="How can I contribute to React UI?"
+  />
+</Playground>
+
+See [API](#api) for all available options.
+
+## General Guidelines
+
+**Avoid using links for actions**, use a [Button](/components/button)
+instead. This is because users expect navigation to happen when clicking on
+something what looks like a link.
+
+## Custom Routing
+
+It's common to use custom function for routing within SPAs. Use the
+`onClick` option to provide such function.
+
+<Playground>
+  <TextLink
+    href="/contribute/guidelines"
+    label="This link is controlled by custom function"
+    onClick={(event) => {
+      event.preventDefault();
+      alert('You will be redirected.')
+      window.location = event.currentTarget.getAttribute('href');
+    }}
+  />
+</Playground>
+
+## API
+
+In addition to the options below, you can specify [React synthetic events] or
+any custom HTML attributes that do not interfere with the API, and they will be
+passed to the `<a>` HTML element. This enables making the component interactive
+and helps improve its accessibility.
+
+<Props table of={TextLink} />
+
+## Theming
+
+| Custom Property                          | Description                       |
+|------------------------------------------|-----------------------------------|
+| `--rui-TextLink__color`                  | Text color                        |
+| `--rui-TextLink__text-decoration`        | Text decoration, e.g. underline   |
+| `--rui-TextLink--hover__color`           | Text color on hover               |
+| `--rui-TextLink--hover__text-decoration` | Text decoration on hover          |
+
+[React synthetic events]: https://reactjs.org/docs/events.html

package/src/lib/components/{Link/Link.jsx → TextLink/TextLink.jsx}

@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './Link.scss';
+import styles from './TextLink.scss';
 
-export const Link = ({
-  children,
+export const TextLink = ({
   href,
   id,
+  label,
   ...restProps
 }) => (
   <a
@@ -16,20 +16,15 @@ export const Link = ({
     className={styles.root}
     id={id}
   >
-    {children}
+    {label}
   </a>
 );
 
-Link.defaultProps = {
-  children: null,
+TextLink.defaultProps = {
   id: undefined,
 };
 
-Link.propTypes = {
-  /**
-   * Content of the link.
-   */
-  children: PropTypes.node,
+TextLink.propTypes = {
   /**
    * Link's `href` attribute.
    */
@@ -38,8 +33,12 @@ Link.propTypes = {
    * ID of the root HTML element.
    */
   id: PropTypes.string,
+  /**
+   * Link label.
+   */
+  label: PropTypes.string.isRequired,
 };
 
-export const LinkWithContext = withProviderContext(Link, 'Link');
+export const LinkWithContext = withProviderContext(TextLink, 'Link');
 
 export default LinkWithContext;

package/src/lib/components/TextLink/TextLink.scss

@@ -0,0 +1,11 @@
+@use "theme";
+
+.root {
+    text-decoration: theme.$text-decoration;
+    color: theme.$color;
+
+    &:hover {
+        text-decoration: theme.$hover-text-decoration;
+        color: theme.$hover-color;
+    }
+}

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

@@ -0,0 +1,4 @@
+$color: var(--rui-TextLink__color);
+$text-decoration: var(--rui-TextLink__text-decoration);
+$hover-color: var(--rui-TextLink--hover__color);
+$hover-text-decoration: var(--rui-TextLink--hover__text-decoration);

package/src/lib/components/TextLink/index.js

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

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

@@ -181,7 +181,7 @@ Disabled state makes the input unavailable.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `input` HTML element. This enables making the component
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={Toggle} />

package/src/lib/components/Toggle/Toggle.jsx

@@ -40,6 +40,15 @@ export const Toggle = ({
       id={id && `${id}__label`}
     >
       <div className={styles.field}>
+        <div
+          className={classNames(
+            styles.label,
+            !isLabelVisible && styles.isLabelHidden,
+          )}
+          id={id && `${id}__labelText`}
+        >
+          {label}
+        </div>
         <input
           {...transferProps(restProps)}
           checked={checked}
@@ -52,15 +61,6 @@ export const Toggle = ({
           type="checkbox"
           value={value}
         />
-        <div
-          className={classNames(
-            styles.label,
-            !isLabelVisible && styles.isLabelHidden,
-          )}
-          id={id && `${id}__labelText`}
-        >
-          {label}
-        </div>
       </div>
       {helpText && (
         <div

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

@@ -17,7 +17,7 @@
 }
 
 .field {
-    @include inline-field-layout.field();
+    @include inline-field-layout.field($type: toggle);
 }
 
 .input {

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

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

@@ -2,16 +2,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 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') {
@@ -62,6 +65,7 @@ export const Toolbar = (props) => {
 
 Toolbar.defaultProps = {
   align: 'top',
+  children: null,
   dense: false,
   justify: 'start',
   nowrap: false,
@@ -73,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

@@ -22,6 +22,11 @@
     margin: theme.$gap;
 }
 
+.isItemFlexible {
+    flex: 1;
+    min-width: 0;
+}
+
 .isAlignedToTop {
     align-items: flex-start;
 }
@@ -54,14 +59,6 @@
     justify-content: space-between;
 }
 
-.isNowrap {
-    flex-wrap: nowrap;
-}
-
-.isNowrap > .item {
-    flex: 0 1 auto;
-}
-
 .isDense {
     margin: calc(-1 * #{theme.$gap-dense});
 }
@@ -74,6 +71,14 @@
     margin: 0;
 }
 
+.isNowrap {
+    flex-wrap: nowrap;
+}
+
+.isNowrap > .item:not(.isItemFlexible) {
+    flex: 0 1 auto;
+}
+
 .toolbar.isDense {
     @include spacing.bottom(layouts, $compensation: theme.$gap-dense);
 }

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

@@ -2,15 +2,18 @@ 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') {
@@ -44,6 +47,7 @@ export const ToolbarGroup = (props) => {
 
 ToolbarGroup.defaultProps = {
   align: 'top',
+  children: null,
   dense: false,
   nowrap: false,
 };
@@ -54,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/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/index.js

@@ -18,7 +18,6 @@ export {
   Grid,
   GridSpan,
 } from './components/Grid';
-export { default as Link } from './components/Link';
 export {
   List,
   ListItem,
@@ -41,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,

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

@@ -25,6 +25,9 @@
 
 @mixin list() {
     padding-left: 0;
-    margin-bottom: 0;
     list-style: none;
+
+    &:not(:last-child) {
+        margin-bottom: 0;
+    }
 }

package/src/lib/styles/tools/form-fields/_box-field-layout.scss

@@ -5,9 +5,9 @@
 // 2.  Form fields in horizontal layout also take up only as much space as they need. Labels do not
 //     wrap until label width limit is reached (50 % of available horizontal space by default).
 //
-// 3. Help texts and validation messages are aligned below input and wrapped. Their width is always
-//    limited to the width of the input field so they don't shift adjacent elements when they show
-//    up. This applies unless the field is inside FormLayout (see 10).
+// 3.  Help texts and validation messages are aligned below input and wrapped. Their width is always
+//     limited to the width of the input field so they don't shift adjacent elements when they show
+//     up. This applies unless the field is inside FormLayout (see 10).
 //
 // 4.  Define grid spacing as padding of child elements because grid areas make row and column gaps
 //     show up even when not necessary.

package/src/lib/styles/tools/form-fields/_inline-field-elements.scss

@@ -6,6 +6,8 @@
 //
 // 3. Reset extra space previously added to symmetrically pad the field in FormLayout context as
 //    there already is a sufficient row gap provided by FormLayout.
+//
+// 4. Destroy tap target when subgrid is not supported.
 
 @use "../../theme/typography";
 @use "../../theme/form-fields" as theme;
@@ -93,7 +95,16 @@
             padding-top: 0;
 
             &::before {
-                top: calc((#{typography.$line-height-base} - 1rem * #{theme.$check-tap-target-size}) / 2);
+                top: calc((1rem * #{typography.$line-height-base} - #{theme.$check-tap-target-size}) / 2);
+            }
+        }
+
+        &.isRootInFormLayout.rootLayoutHorizontal::before {
+            grid-column-start: 2;
+
+            // 4.
+            @supports not (grid-template-columns: subgrid) {
+                display: none;
             }
         }
     }