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

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

@@ -11,7 +11,6 @@ import styles from './TextArea.scss';
 
 export const TextArea = React.forwardRef((props, ref) => {
   const {
-    cols,
     disabled,
     fullWidth,
     helpText,
@@ -19,13 +18,10 @@ export const TextArea = React.forwardRef((props, ref) => {
     isLabelVisible,
     label,
     layout,
-    placeholder,
     required,
-    rows,
     size,
     validationState,
     validationText,
-    value,
     variant,
     ...restProps
   } = props;
@@ -39,13 +35,13 @@ export const TextArea = React.forwardRef((props, ref) => {
         fullWidth && styles.isRootFullWidth,
         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`}
@@ -64,14 +60,10 @@ export const TextArea = React.forwardRef((props, ref) => {
           <textarea
             {...transferProps(restProps)}
             className={styles.input}
-            cols={cols}
             disabled={disabled}
             id={id}
-            placeholder={placeholder}
             ref={ref}
             required={required}
-            rows={rows}
-            value={value}
           />
           {variant === 'filled' && (
             <div className={styles.bottomLine} />
@@ -99,29 +91,20 @@ export const TextArea = React.forwardRef((props, ref) => {
 });
 
 TextArea.defaultProps = {
-  cols: null,
   disabled: false,
   fullWidth: false,
   helpText: null,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
-  placeholder: null,
-  ref: undefined,
   required: false,
-  rows: 3,
   size: 'medium',
   validationState: null,
   validationText: null,
-  value: undefined,
   variant: 'outline',
 };
 
 TextArea.propTypes = {
-  /**
-   * The number of visible text columns for the control.
-   */
-  cols: PropTypes.number,
   /**
    * If `true`, the input will be disabled.
    */
@@ -157,26 +140,10 @@ TextArea.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.
    */
-  /**
-   * Reference forwarded to the `textarea` element.
-   */
-  ref: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   required: PropTypes.bool,
-  /**
-   * The number of visible text lines for the control.
-   */
-  rows: PropTypes.number,
   /**
    * Size of the field.
    */
@@ -189,13 +156,6 @@ TextArea.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.
    */

package/src/lib/components/TextArea/TextArea.scss

@@ -37,11 +37,11 @@
 }
 
 // Visual variants
-.rootVariantFilled {
+.isRootVariantFilled {
     @include variants.visual(box, $variant: filled);
 }
 
-.rootVariantOutline {
+.isRootVariantOutline {
     @include variants.visual(box, $variant: outline);
 }
 
@@ -64,12 +64,12 @@
 }
 
 // Layouts
-.rootLayoutVertical,
-.rootLayoutHorizontal {
+.isRootLayoutVertical,
+.isRootLayoutHorizontal {
     @include box-field-layout.vertical();
 }
 
-.rootLayoutHorizontal {
+.isRootLayoutHorizontal {
     @include box-field-layout.horizontal();
 }
 
@@ -82,14 +82,14 @@
 }
 
 // Sizes
-.rootSizeSmall {
+.isRootSizeSmall {
     @include box-field-sizes.size(small, $is-multiline: true);
 }
 
-.rootSizeMedium {
+.isRootSizeMedium {
     @include box-field-sizes.size(medium, $is-multiline: true);
 }
 
-.rootSizeLarge {
+.isRootSizeLarge {
     @include box-field-sizes.size(large, $is-multiline: true);
 }

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

@@ -215,47 +215,6 @@ DOM for 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

@@ -21,13 +21,11 @@ export const TextField = React.forwardRef((props, ref) => {
     isLabelVisible,
     label,
     layout,
-    placeholder,
     required,
     size,
     type,
     validationState,
     validationText,
-    value,
     variant,
     ...restProps
   } = props;
@@ -43,13 +41,13 @@ export const TextField = React.forwardRef((props, ref) => {
         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`}
@@ -71,12 +69,10 @@ export const TextField = React.forwardRef((props, ref) => {
             className={styles.input}
             disabled={disabled}
             id={id}
-            placeholder={placeholder}
             ref={ref}
             required={required}
             size={type !== 'number' ? inputSize : null}
             type={type}
-            value={value}
           />
           {variant === 'filled' && (
             <div className={styles.bottomLine} />
@@ -111,14 +107,11 @@ TextField.defaultProps = {
   inputSize: null,
   isLabelVisible: true,
   layout: 'vertical',
-  placeholder: null,
-  ref: undefined,
   required: false,
   size: 'medium',
   type: 'text',
   validationState: null,
   validationText: null,
-  value: undefined,
   variant: 'outline',
 };
 
@@ -163,18 +156,6 @@ TextField.propTypes = {
    * as the value is inherited in such case.
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * Optional example value.
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Reference forwarded to the `input` element.
-   */
-  ref: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * If `true`, the input will be required.
    */
@@ -195,13 +176,6 @@ 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.
    */

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/TextLink/README.mdx

@@ -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/Toggle/README.mdx

@@ -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

@@ -9,7 +9,6 @@ import styles from './Toggle.scss';
 
 export const Toggle = React.forwardRef((props, ref) => {
   const {
-    checked,
     disabled,
     helpText,
     id,
@@ -19,7 +18,6 @@ export const Toggle = React.forwardRef((props, ref) => {
     required,
     validationState,
     validationText,
-    value,
     ...restProps
   } = props;
 
@@ -30,7 +28,7 @@ export const Toggle = React.forwardRef((props, ref) => {
       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,7 +49,6 @@ export const Toggle = React.forwardRef((props, ref) => {
         </div>
         <input
           {...transferProps(restProps)}
-          checked={checked}
           className={styles.input}
           disabled={disabled}
           id={id}
@@ -59,7 +56,6 @@ export const Toggle = React.forwardRef((props, ref) => {
           ref={ref}
           required={required}
           type="checkbox"
-          value={value}
         />
       </div>
       {helpText && (
@@ -83,24 +79,17 @@ export const Toggle = React.forwardRef((props, ref) => {
 });
 
 Toggle.defaultProps = {
-  checked: undefined,
   disabled: false,
   helpText: null,
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
-  ref: undefined,
   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.
    */
@@ -130,14 +119,6 @@ Toggle.propTypes = {
    * Placement of the label relative to the input.
    */
   labelPosition: PropTypes.oneOf(['before', 'after']),
-  /**
-   * Reference forwarded to the `input` element.
-   */
-  ref: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * If `true`, the input will be required.
    */
@@ -150,13 +131,6 @@ Toggle.propTypes = {
    * Validation message to be displayed.
    */
   validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
 };
 
 export const ToggleWithGlobalProps = withGlobalProps(Toggle, 'Toggle');

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

@@ -335,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} />
@@ -363,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