@react-ui-org/react-ui 0.52.1 → 0.54.0

package/src/{lib/components/InputGroup/README.mdx → components/InputGroup/README.md}

@@ -1,25 +1,7 @@
----
-name: InputGroup
-menu: 'Layouts'
-route: /components/input-group
----
-
 # InputGroup
 
 InputGroup visually groups related form fields and actions together.
 
-import {
-  Playground,
-  Props,
-} from 'docz'
-import Icon from '../../../docs/_components/Icon'
-import {
-  Button,
-  InputGroup,
-  SelectField,
-  TextField,
-} from '../..'
-
 ## Basic Usage
 
 To implement the InputGroup component, you need to import it first:
@@ -30,40 +12,40 @@ import { InputGroup } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-  {() => {
-    const [fruit, setFruit] = React.useState('apple');
-    const options = [
-      {
-        label: 'Apple',
-        value: 'apple',
-      },
-      {
-        label: 'Pear',
-        value: 'pear',
-      },
-      {
-        label: 'Cherry',
-        value: 'cherry',
-      },
-    ];
-    return (
-      <InputGroup label="Your favourite fruit">
-        <SelectField
-          label="Your favourite fruit"
-          onChange={(e) => setFruit(e.target.value)}
-          options={options}
-          value={fruit}
-        />
-        <TextField
-          label="Variety"
-          placeholder="Eg. Golden delicious"
-        />
-        <Button label="Submit" />
-      </InputGroup>
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [fruit, setFruit] = React.useState('apple');
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Pear',
+      value: 'pear',
+    },
+    {
+      label: 'Cherry',
+      value: 'cherry',
+    },
+  ];
+  return (
+    <InputGroup label="Your favourite fruit">
+      <SelectField
+        label="Your favourite fruit"
+        onChange={(e) => setFruit(e.target.value)}
+        options={options}
+        value={fruit}
+      />
+      <TextField
+        label="Variety"
+        placeholder="Eg. Golden delicious"
+      />
+      <Button label="Submit" />
+    </InputGroup>
+  );
+})
+```
 
 See [API](#api) for all available options.
 
@@ -83,11 +65,11 @@ See [API](#api) for all available options.
   group with a form outside. Consult [the MDN docs][fieldset] to learn more.
 
 - InputGroup currently **supports grouping of**
-  [TextField](/components/text-field), [SelectField](/components/select-field),
-  and [Button](/components/button) components.
+  [TextField](/components/TextField), [SelectField](/components/SelectField),
+  and [Button](/components/Button) components.
 
-- To group [Buttons](/components/button) only, use the
-  [ButtonGroup](/components/button-group) component which is designed
+- To group [Buttons](/components/Button) only, use the
+  [ButtonGroup](/components/ButtonGroup) component which is designed
   specifically for that purpose.
 
 ## Sizes
@@ -95,26 +77,26 @@ See [API](#api) for all available options.
 All existing field and button sizes are also available on the input group level:
 small, medium, and large.
 
-<Playground>
-  <InputGroup
-    label="Small size"
-    size="small"
-  >
-    <TextField label="Input" />
-    <Button label="Submit" />
-  </InputGroup>
-  <InputGroup label="Medium size">
-    <TextField label="Input" />
-    <Button label="Submit" />
-  </InputGroup>
-  <InputGroup
-    label="Large size"
-    size="large"
-  >
-    <TextField label="Input" />
-    <Button label="Submit" />
-  </InputGroup>
-</Playground>
+```docoff-react-preview
+<InputGroup
+  label="Small size"
+  size="small"
+>
+  <TextField label="Input" />
+  <Button label="Submit" />
+</InputGroup>
+<InputGroup label="Medium size">
+  <TextField label="Input" />
+  <Button label="Submit" />
+</InputGroup>
+<InputGroup
+  label="Large size"
+  size="large"
+>
+  <TextField label="Input" />
+  <Button label="Submit" />
+</InputGroup>
+```
 
 ### Shared Property
 
@@ -135,22 +117,22 @@ simple forms, it's dangerous to hide labels from users in most cases. Keep in
 mind you should **provide another visual clue** so users know what to fill into
 the input.
 
-<Playground>
-  <InputGroup
-    isLabelVisible={false}
-    label="First and last name"
-  >
-    <TextField
-      label="First name"
-      placeholder="Eg. John"
-    />
-    <TextField
-      label="Last name"
-      placeholder="Eg. Doe"
-    />
-    <Button label="Submit" />
-  </InputGroup>
-</Playground>
+```docoff-react-preview
+<InputGroup
+  isLabelVisible={false}
+  label="First and last name"
+>
+  <TextField
+    label="First name"
+    placeholder="Eg. John"
+  />
+  <TextField
+    label="Last name"
+    placeholder="Eg. Doe"
+  />
+  <Button label="Submit" />
+</InputGroup>
+```
 
 ## Horizontal layout
 
@@ -158,15 +140,15 @@ The default vertical layout is very easy to use and work with. However, there
 are situations where horizontal layout suits better — and that's why React UI
 supports this kind of layout as well.
 
-<Playground>
-  <InputGroup
-    label="Horizontal layout"
-    layout="horizontal"
-  >
-    <TextField label="Label" />
-    <Button label="Submit" />
-  </InputGroup>
-</Playground>
+```docoff-react-preview
+<InputGroup
+  label="Horizontal layout"
+  layout="horizontal"
+>
+  <TextField label="Label" />
+  <Button label="Submit" />
+</InputGroup>
+```
 
 ## States
 
@@ -174,12 +156,12 @@ supports this kind of layout as well.
 
 Disables all fields and buttons inside the group.
 
-<Playground>
-  <InputGroup disabled label="Disabled group">
-    <TextField label="Label" />
-    <Button label="Submit" />
-  </InputGroup>
-</Playground>
+```docoff-react-preview
+<InputGroup disabled label="Disabled group">
+  <TextField label="Label" />
+  <Button label="Submit" />
+</InputGroup>
+```
 
 ### Validation States
 
@@ -194,61 +176,76 @@ not show any `validationText`, they only show their respective `validationState`
 Validation messages passed to input elements' `validationText` prop will be
 ignored.
 
-<Playground>
-  <InputGroup
-    label="First and last name"
-    validationTexts={[
-      "First name must be filled in.",
-      "Last name must be filled in.",
-    ]}
-  >
-    <TextField
-      label="First name"
-      placeholder="Eg. John"
-      validationState="invalid"
-    />
-    <TextField
-      label="Last name"
-      placeholder="Eg. Doe"
-      validationState="invalid"
-    />
-    <Button label="Submit" />
-  </InputGroup>
-  <InputGroup
-    label="First and last name"
-    validationTexts={[
-      "Last name should not include any digits.",
-    ]}
-  >
-    <TextField
-      label="First name"
-      placeholder="Eg. John"
-      value="John"
-    />
-    <TextField
-      label="Last name"
-      placeholder="Eg. Doe"
-      validationState="warning"
-      value="123Doe"
-    />
-    <Button label="Submit" />
-  </InputGroup>
-  <InputGroup label="First and last name">
-    <TextField
-      label="First name"
-      placeholder="Eg. John"
-      validationState="valid"
-      value="John"
-    />
-    <TextField
-      label="Last name"
-      placeholder="Eg. Doe"
-      validationState="valid"
-      value="Doe"
-    />
-    <Button label="Submit" />
-  </InputGroup>
-</Playground>
+👉 While there is a `required` property to visually denote the whole input group
+is required, there is no functional effect as there is no such HTML attribute
+for the underlying `<fieldset>` element.
+
+```docoff-react-preview
+<InputGroup
+  label="First and last name"
+  required
+  validationTexts={[
+    "First name must be filled in.",
+    "Last name must be filled in.",
+  ]}
+>
+  <TextField
+    label="First name"
+    placeholder="Eg. John"
+    required
+    validationState="invalid"
+  />
+  <TextField
+    label="Last name"
+    placeholder="Eg. Doe"
+    required
+    validationState="invalid"
+  />
+  <Button label="Submit" />
+</InputGroup>
+<InputGroup
+  label="First and last name"
+  required
+  validationTexts={[
+    "Last name should not include any digits.",
+  ]}
+>
+  <TextField
+    label="First name"
+    placeholder="Eg. John"
+    required
+    value="John"
+  />
+  <TextField
+    label="Last name"
+    placeholder="Eg. Doe"
+    required
+    validationState="warning"
+    value="123Doe"
+  />
+  <Button label="Submit" />
+</InputGroup>
+<InputGroup
+  label="First and last name"
+  required
+>
+  <TextField
+    label="First name"
+    placeholder="Eg. John"
+    required
+    validationState="valid"
+    value="John"
+  />
+  <TextField
+    label="Last name"
+    placeholder="Eg. Doe"
+    required
+    validationState="valid"
+    value="Doe"
+  />
+  <Button label="Submit" />
+</InputGroup>
+```
 
 ## Forwarding HTML Attributes
 
@@ -259,11 +256,11 @@ element which wraps elements to be grouped. 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.
+[fieldset][fieldset-attributes] element.
 
 ## API
 
-<Props table of={InputGroup} />
+<docoff-react-props src="/components/InputGroup/InputGroup.jsx"></docoff-react-props>
 
 ## Theming
 
@@ -275,4 +272,4 @@ interactive and helps to improve its accessibility.
 [fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
 [React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[fieldset-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attributes

package/src/{lib/components → components}/Modal/Modal.jsx

@@ -38,8 +38,8 @@ const preRender = (
       onClick={(e) => {
         e.stopPropagation();
       }}
-      role="presentation"
       ref={childrenWrapperRef}
+      role="presentation"
     >
       {children}
     </div>
@@ -98,7 +98,7 @@ Modal.defaultProps = {
   closeButtonRef: null,
   portalId: null,
   position: 'center',
-  preventScrollUnderneath: 'default',
+  preventScrollUnderneath: window.document.body,
   primaryButtonRef: null,
   size: 'medium',
 };
@@ -137,15 +137,15 @@ Modal.propTypes = {
   position: PropTypes.oneOf(['top', 'center']),
   /**
    * Mode in which Modal prevents scroll of elements bellow:
-   * * `default` - Modal prevents scroll on the `body` element
    * * `off` - Modal does not prevent any scroll
+   * * [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) - Modal prevents scroll on this HTML element
    * * object
-   * * * `reset` - method called on Modal's unmount to reset scroll prevention
-   * * * `start` - method called on Modal's mount to custom scroll prevention
+   *   * `reset` - method called on Modal's unmount to reset scroll prevention
+   *   * `start` - method called on Modal's mount to custom scroll prevention
    */
   preventScrollUnderneath: PropTypes.oneOfType([
     PropTypes.oneOf([
-      'default',
+      HTMLElement,
       'off',
     ]),
     PropTypes.shape({