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

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

@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { TextField } from './TextField'
+import { TextField } from '../..'
 
 ## Basic Usage
 
@@ -189,8 +189,8 @@ attribute to achieve that effect (doesn't work for `number` input type though).
 by `inputSize` API option) is
 [not available for `number` input type][input-number-size]. TextField supports
 `inputSize` option for all types of inputs, so you can use it whenever you find
-it suitable. Just keep in mind the `size` attribute will not be present for
-numeric inputs.
+it suitable. Just keep in mind the `size` attribute will not be present in the
+DOM for numeric inputs.
 
 <Playground>
   <TextField
@@ -215,47 +215,6 @@ numeric inputs.
   />
 </Playground>
 
-## Forwarding HTML Attributes
-
-When you want to improve the accessibility of your text fields even further, you
-can **add whatever HTML attribute you like.** All attributes that don't
-interfere with [component's API](#api) are forwarded to the native HTML input.
-
-<Playground>
-  <TextField
-    label="Address"
-    autoComplete="street-address"
-    minLength={3}
-    maxLength={80}
-  />
-  <TextField
-    label="Address"
-    variant="filled"
-    autoComplete="street-address"
-    minLength={3}
-    maxLength={80}
-  />
-  <TextField
-    inputSize={3}
-    min={13}
-    max={120}
-    label="Age"
-    type="number"
-  />
-  <TextField
-    inputSize={3}
-    min={13}
-    max={120}
-    label="Age"
-    type="number"
-    variant="filled"
-  />
-</Playground>
-
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[text][input-text], [email][input-email], [number][input-number],
-[tel][input-tel], and [password][input-password] input types.
-
 ## Invisible Label
 
 In some cases, it may be convenient to visually hide the field label. The label
@@ -489,12 +448,54 @@ It's possible to disable the whole input.
   />
 </Playground>
 
-## API
+## Forwarding HTML Attributes
 
-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
-interactive and helps improve its [accessibility](#forwarding-html-attributes).
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or you can **add whatever HTML attribute
+you like.** All attributes that don't interfere with the API are forwarded to
+the native HTML `<input>`. This enables making the component interactive and
+helps to improve its accessibility.
+
+<Playground>
+  <TextField
+    label="Address"
+    autoComplete="street-address"
+    minLength={3}
+    maxLength={80}
+  />
+  <TextField
+    label="Address"
+    variant="filled"
+    autoComplete="street-address"
+    minLength={3}
+    maxLength={80}
+  />
+  <TextField
+    inputSize={3}
+    min={13}
+    max={120}
+    label="Age"
+    type="number"
+  />
+  <TextField
+    inputSize={3}
+    min={13}
+    max={120}
+    label="Age"
+    type="number"
+    variant="filled"
+  />
+</Playground>
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[text][input-text], [email][input-email], [number][input-number],
+[tel][input-tel], and [password][input-password] input types.
+
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the native HTML `<input>` element.
+
+## API
 
 <Props table of={TextField} />
 
@@ -507,10 +508,11 @@ Head to [Forms Theming][theming-forms] to see shared form theming options.
 [size]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#size
 [max]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#max
 [input-number-size]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Controlling_input_size
-[input-text]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
-[input-email]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
-[input-number]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
-[input-tel]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel
-[input-password]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
+[input-text]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#additional_attributes
+[input-email]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#additional_attributes
+[input-number]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#additional_attributes
+[input-tel]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel#additional_attributes
+[input-password]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#additional_attributes
 [theming-forms]: /customize/theming/forms
 [React synthetic events]: https://reactjs.org/docs/events.html
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/lib/components/TextField/TextField.jsx

@@ -7,31 +7,28 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import withForwardedRef from '../withForwardedRef';
 import styles from './TextField.scss';
 
 const SMALL_INPUT_SIZE = 10;
 
-export const TextField = ({
-  disabled,
-  forwardedRef,
-  fullWidth,
-  helpText,
-  id,
-  inputSize,
-  isLabelVisible,
-  label,
-  layout,
-  placeholder,
-  required,
-  size,
-  type,
-  validationState,
-  validationText,
-  value,
-  variant,
-  ...restProps
-}) => {
+export const TextField = React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    fullWidth,
+    helpText,
+    id,
+    inputSize,
+    isLabelVisible,
+    label,
+    layout,
+    required,
+    size,
+    type,
+    validationState,
+    validationText,
+    variant,
+    ...restProps
+  } = props;
   const context = useContext(FormLayoutContext);
   const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
 
@@ -44,13 +41,13 @@ export const TextField = ({
         inputSize && styles.hasRootCustomInputSize,
         context && styles.isRootInFormLayout,
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
-          ? styles.rootLayoutHorizontal
-          : styles.rootLayoutVertical,
+          ? styles.isRootLayoutHorizontal
+          : styles.isRootLayoutVertical,
         disabled && styles.isRootDisabled,
         required && styles.isRootRequired,
         getRootSizeClassName(size, styles),
         getRootValidationStateClassName(validationState, styles),
-        variant === 'filled' ? styles.rootVariantFilled : styles.rootVariantOutline,
+        variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
       )}
       htmlFor={id}
       id={id && `${id}__label`}
@@ -72,12 +69,10 @@ export const TextField = ({
             className={styles.input}
             disabled={disabled}
             id={id}
-            placeholder={placeholder}
-            ref={forwardedRef}
+            ref={ref}
             required={required}
             size={type !== 'number' ? inputSize : null}
             type={type}
-            value={value}
           />
           {variant === 'filled' && (
             <div className={styles.bottomLine} />
@@ -102,24 +97,21 @@ export const TextField = ({
       </div>
     </label>
   );
-};
+});
 
 TextField.defaultProps = {
   disabled: false,
-  forwardedRef: undefined,
   fullWidth: false,
   helpText: null,
   id: undefined,
   inputSize: null,
   isLabelVisible: true,
   layout: 'vertical',
-  placeholder: null,
   required: false,
   size: 'medium',
   type: 'text',
   validationState: null,
   validationText: null,
-  value: undefined,
   variant: 'outline',
 };
 
@@ -128,14 +120,6 @@ TextField.propTypes = {
    * If `true`, the input will be disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * Reference forwarded to the `input` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * If `true`, the field will span the full width of its parent.
    */
@@ -153,7 +137,7 @@ TextField.propTypes = {
    */
   id: PropTypes.string,
   /**
-   * Treat the field differently when it's inside a FormLayout. Do not set manually!
+   * Width of the input field. Translated as `size` attribute for input types other than `number`.
    */
   inputSize: PropTypes.number,
   /**
@@ -172,10 +156,6 @@ TextField.propTypes = {
    * as the value is inherited in such case.
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * Optional example value.
-   */
-  placeholder: PropTypes.string,
   /**
    * If `true`, the input will be required.
    */
@@ -196,19 +176,12 @@ TextField.propTypes = {
    * Validation message to be displayed.
    */
   validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
   /**
    * Design variant of the field, further customizable with CSS custom properties.
    */
   variant: PropTypes.oneOf(['filled', 'outline']),
 };
 
-export const TextFieldWithGlobalProps = withForwardedRef(withGlobalProps(TextField, 'TextField'));
+export const TextFieldWithGlobalProps = withGlobalProps(TextField, 'TextField');
 
 export default TextFieldWithGlobalProps;

package/src/lib/components/TextField/TextField.scss

@@ -40,11 +40,11 @@
 }
 
 // Variants
-.rootVariantFilled {
+.isRootVariantFilled {
     @include variants.visual(box, $variant: filled);
 }
 
-.rootVariantOutline {
+.isRootVariantOutline {
     @include variants.visual(box, $variant: outline);
 }
 
@@ -67,12 +67,12 @@
 }
 
 // Layouts
-.rootLayoutVertical,
-.rootLayoutHorizontal {
+.isRootLayoutVertical,
+.isRootLayoutHorizontal {
     @include box-field-layout.vertical();
 }
 
-.rootLayoutHorizontal {
+.isRootLayoutHorizontal {
     @include box-field-layout.horizontal();
 }
 
@@ -84,19 +84,19 @@
     @include box-field-layout.in-form-layout();
 }
 
-.hasRootSmallInput.rootLayoutHorizontal {
+.hasRootSmallInput.isRootLayoutHorizontal {
     @include box-field-layout.horizontal-with-small-input();
 }
 
 // Sizes
-.rootSizeSmall {
+.isRootSizeSmall {
     @include box-field-sizes.size(small);
 }
 
-.rootSizeMedium {
+.isRootSizeMedium {
     @include box-field-sizes.size(medium);
 }
 
-.rootSizeLarge {
+.isRootSizeLarge {
     @include box-field-sizes.size(large);
 }

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

@@ -1 +1 @@
-export { default } from './TextField';
+export { default as TextField } from './TextField';

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

@@ -10,7 +10,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { TextLink } from './TextLink'
+import { TextLink } from '../..'
 
 TextLink allows users to follow navigation.
 
@@ -56,12 +56,18 @@ It's common to use custom function for routing within SPAs. Use the
   />
 </Playground>
 
-## API
+## 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 `<a>` HTML
+element. This enables making the component interactive and helps to improve its
+accessibility.
 
-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.
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[a] element.
+
+## API
 
 <Props table of={TextLink} />
 
@@ -75,3 +81,4 @@ and helps improve its accessibility.
 | `--rui-TextLink--hover__text-decoration` | Text decoration on hover          |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes

package/src/lib/components/TextLink/TextLink.jsx

@@ -6,7 +6,6 @@ import styles from './TextLink.scss';
 
 export const TextLink = ({
   href,
-  id,
   label,
   ...restProps
 }) => (
@@ -14,25 +13,16 @@ export const TextLink = ({
     {...transferProps(restProps)}
     href={href}
     className={styles.root}
-    id={id}
   >
     {label}
   </a>
 );
 
-TextLink.defaultProps = {
-  id: undefined,
-};
-
 TextLink.propTypes = {
   /**
    * Link's `href` attribute.
    */
   href: PropTypes.string.isRequired,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Link label.
    */

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

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

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

@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Toggle } from './Toggle'
+import { Toggle } from '../..'
 
 ## Basic Usage
 
@@ -177,12 +177,22 @@ Disabled state makes the input unavailable.
   />
 </Playground>
 
-## API
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or you can **add whatever HTML attribute
+you like.** All attributes that don't interfere with the API are forwarded to
+the native HTML `<input>`. 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
+[checkbox] input type.
 
-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
-interactive and helps improve its accessibility.
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the native HTML `<input>` element.
+
+## API
 
 <Props table of={Toggle} />
 
@@ -202,3 +212,5 @@ options. On top of that, the following options are available for Toggle.
 | `--rui-FormField--check__input--toggle--checked__background-position` | Background position of checked input        |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[checkbox]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

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

@@ -5,24 +5,22 @@ import { classNames } from '../../utils/classNames';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import withForwardedRef from '../withForwardedRef';
 import styles from './Toggle.scss';
 
-export const Toggle = ({
-  checked,
-  disabled,
-  forwardedRef,
-  helpText,
-  id,
-  isLabelVisible,
-  label,
-  labelPosition,
-  required,
-  validationState,
-  validationText,
-  value,
-  ...restProps
-}) => {
+export const Toggle = React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    helpText,
+    id,
+    isLabelVisible,
+    label,
+    labelPosition,
+    required,
+    validationState,
+    validationText,
+    ...restProps
+  } = props;
+
   const context = useContext(FormLayoutContext);
 
   return (
@@ -30,7 +28,7 @@ export const Toggle = ({
       className={classNames(
         styles.root,
         context && styles.isRootInFormLayout,
-        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        context && context.layout === 'horizontal' ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical,
         labelPosition === 'before' && styles.hasRootLabelBefore,
         disabled && styles.isRootDisabled,
         required && styles.isRootRequired,
@@ -51,15 +49,13 @@ export const Toggle = ({
         </div>
         <input
           {...transferProps(restProps)}
-          checked={checked}
           className={styles.input}
           disabled={disabled}
           id={id}
           name={id}
-          ref={forwardedRef}
+          ref={ref}
           required={required}
           type="checkbox"
-          value={value}
         />
       </div>
       {helpText && (
@@ -80,12 +76,10 @@ export const Toggle = ({
       )}
     </label>
   );
-};
+});
 
 Toggle.defaultProps = {
-  checked: undefined,
   disabled: false,
-  forwardedRef: undefined,
   helpText: null,
   id: undefined,
   isLabelVisible: true,
@@ -93,26 +87,13 @@ Toggle.defaultProps = {
   required: false,
   validationState: null,
   validationText: null,
-  value: undefined,
 };
 
 Toggle.propTypes = {
-  /**
-   * If `true`, the input will be checked.
-   */
-  checked: PropTypes.bool,
   /**
    * If `true`, the input will be disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * Reference forwarded to the `input` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * Optional help text.
    */
@@ -150,15 +131,8 @@ Toggle.propTypes = {
    * Validation message to be displayed.
    */
   validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
 };
 
-export const ToggleWithGlobalProps = withForwardedRef(withGlobalProps(Toggle, 'Toggle'));
+export const ToggleWithGlobalProps = withGlobalProps(Toggle, 'Toggle');
 
 export default ToggleWithGlobalProps;

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

@@ -1 +1 @@
-export { default } from './Toggle';
+export { default as Toggle } from './Toggle';

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

@@ -11,12 +11,14 @@ import {
   Props,
 } from 'docz'
 import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import { CheckboxField } from '../CheckboxField/CheckboxField'
-import { Button } from '../Button/Button'
-import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
-import { Toolbar } from './Toolbar'
-import { ToolbarGroup } from './ToolbarGroup'
-import { ToolbarItem } from './ToolbarItem'
+import {
+  CheckboxField,
+  Button,
+  ButtonGroup,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem,
+} from '../..'
 
 The responsive Toolbar layout is a versatile tool that allows spacing, grouping,
 and aligning inline items.
@@ -333,6 +335,17 @@ Or to build a classic media layout with image on the left and text on the right:
   </Toolbar>
 </Playground>
 
+## 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
+its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[div] element.
+
 ## API
 
 <Props table of={Toolbar} />
@@ -361,3 +374,5 @@ A wrapper for individual toolbar items.
 [grid]: /components/grid
 [spacing]: /css-helpers/spacing
 [text]: /components/text
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes