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

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

@@ -1,19 +1,7 @@
----
-name: TextField
-menu: 'Inputs'
-route: /components/text-field
----
-
 # TextField
 
 TextField allows users to input text information.
 
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { TextField } from '../..'
-
 ## Basic Usage
 
 To implement the TextField component, you need to import it first:
@@ -24,9 +12,9 @@ import { TextField } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-  <TextField label="First name" />
-</Playground>
+```docoff-react-preview
+<TextField label="First name" />
+```
 
 See [API](#api) for all available options.
 
@@ -72,106 +60,106 @@ To satisfy the design requirements of your project, all input fields in React UI
 come in **two design variants** to choose from: outline and filled. Both can be
 further [customized](#theming) with CSS custom properties.
 
-<Playground>
-  <TextField
-    label="First name"
-  />
-  <TextField
-    label="First name"
-    variant="filled"
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  label="First name"
+/>
+<TextField
+  label="First name"
+  variant="filled"
+/>
+```
 
 ## Sizes
 
 Aside from the default (medium) size, two additional sizes are available: small
 and large.
 
-<Playground>
-  <TextField
-    label="First name"
-    size="small"
-  />
-  <TextField
-    label="First name"
-  />
-  <TextField
-    label="First name"
-    size="large"
-  />
-  <TextField
-    label="First name"
-    size="small"
-    variant="filled"
-  />
-  <TextField
-    label="First name"
-    variant="filled"
-  />
-  <TextField
-    label="First name"
-    size="large"
-    variant="filled"
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  label="First name"
+  size="small"
+/>
+<TextField
+  label="First name"
+/>
+<TextField
+  label="First name"
+  size="large"
+/>
+<TextField
+  label="First name"
+  size="small"
+  variant="filled"
+/>
+<TextField
+  label="First name"
+  variant="filled"
+/>
+<TextField
+  label="First name"
+  size="large"
+  variant="filled"
+/>
+```
 
 Full-width fields span the full width of a parent:
 
-<Playground>
-  <TextField
-    label="First name"
-    fullWidth
-  />
-  <TextField
-    label="First name"
-    variant="filled"
-    fullWidth
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  label="First name"
+  fullWidth
+/>
+<TextField
+  label="First name"
+  variant="filled"
+  fullWidth
+/>
+```
 
 ## Input Types
 
 Aside from the common `text` type, there are also `email`, `number`, `password`,
 and `tel` types at your disposal.
 
-<Playground>
-  <TextField
-    label="Email"
-    type="email"
-  />
-  <TextField
-    label="Email"
-    variant="filled"
-    type="email"
-  />
-  <TextField
-    label="Age"
-    type="number"
-  />
-  <TextField
-    label="Age"
-    variant="filled"
-    type="number"
-  />
-  <TextField
-    label="Password"
-    type="password"
-  />
-  <TextField
-    label="Password"
-    variant="filled"
-    type="password"
-  />
-  <TextField
-    label="Phone"
-    type="tel"
-  />
-  <TextField
-    label="Phone"
-    variant="filled"
-    type="tel"
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  label="Email"
+  type="email"
+/>
+<TextField
+  label="Email"
+  variant="filled"
+  type="email"
+/>
+<TextField
+  label="Age"
+  type="number"
+/>
+<TextField
+  label="Age"
+  variant="filled"
+  type="number"
+/>
+<TextField
+  label="Password"
+  type="password"
+/>
+<TextField
+  label="Password"
+  variant="filled"
+  type="password"
+/>
+<TextField
+  label="Phone"
+  type="tel"
+/>
+<TextField
+  label="Phone"
+  variant="filled"
+  type="tel"
+/>
+```
 
 ## Input Size
 
@@ -192,28 +180,28 @@ by `inputSize` API option) is
 it suitable. Just keep in mind the `size` attribute will not be present in the
 DOM for numeric inputs.
 
-<Playground>
-  <TextField
-    inputSize={3}
-    label="Title"
-  />
-  <TextField
-    inputSize={3}
-    label="Title"
-    variant="filled"
-  />
-  <TextField
-    inputSize={3}
-    label="Age"
-    type="number"
-  />
-  <TextField
-    inputSize={3}
-    label="Age"
-    type="number"
-    variant="filled"
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  inputSize={3}
+  label="Title"
+/>
+<TextField
+  inputSize={3}
+  label="Title"
+  variant="filled"
+/>
+<TextField
+  inputSize={3}
+  label="Age"
+  type="number"
+/>
+<TextField
+  inputSize={3}
+  label="Age"
+  type="number"
+  variant="filled"
+/>
+```
 
 ## Invisible Label
 
@@ -225,19 +213,19 @@ 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>
-  <TextField
-    label="User name"
-    isLabelVisible={false}
-    placeholder="Eg. john@example.com"
-  />
-  <TextField
-    label="User name"
-    isLabelVisible={false}
-    variant="filled"
-    placeholder="Eg. john@example.com"
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  label="User name"
+  isLabelVisible={false}
+  placeholder="Eg. john@example.com"
+/>
+<TextField
+  label="User name"
+  isLabelVisible={false}
+  variant="filled"
+  placeholder="Eg. john@example.com"
+/>
+```
 
 ## Horizontal Layout
 
@@ -245,135 +233,135 @@ 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>
-  <TextField
-    inputSize={3}
-    label="Title"
-    layout="horizontal"
-  />
-  <TextField
-    inputSize={3}
-    label="Title"
-    layout="horizontal"
-    variant="filled"
-  />
-  <TextField
-    label="First name"
-    layout="horizontal"
-  />
-  <TextField
-    label="First name"
-    layout="horizontal"
-    variant="filled"
-  />
-  <TextField
-    label="First name"
-    layout="horizontal"
-    fullWidth
-  />
-  <TextField
-    label="First name"
-    layout="horizontal"
-    variant="filled"
-    fullWidth
-  />
-  <TextField
-    isLabelVisible={false}
-    label="First name"
-    layout="horizontal"
-    placeholder="First name"
-    fullWidth
-  />
-  <TextField
-    isLabelVisible={false}
-    label="First name"
-    layout="horizontal"
-    placeholder="First name"
-    variant="filled"
-    fullWidth
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  inputSize={3}
+  label="Title"
+  layout="horizontal"
+/>
+<TextField
+  inputSize={3}
+  label="Title"
+  layout="horizontal"
+  variant="filled"
+/>
+<TextField
+  label="First name"
+  layout="horizontal"
+/>
+<TextField
+  label="First name"
+  layout="horizontal"
+  variant="filled"
+/>
+<TextField
+  label="First name"
+  layout="horizontal"
+  fullWidth
+/>
+<TextField
+  label="First name"
+  layout="horizontal"
+  variant="filled"
+  fullWidth
+/>
+<TextField
+  isLabelVisible={false}
+  label="First name"
+  layout="horizontal"
+  placeholder="First name"
+  fullWidth
+/>
+<TextField
+  isLabelVisible={false}
+  label="First name"
+  layout="horizontal"
+  placeholder="First name"
+  variant="filled"
+  fullWidth
+/>
+```
 
 ## Help Text
 
 You may provide an additional help text to clarify how the input should be
 filled.
 
-<Playground>
-  <TextField
-    label="First name"
-    helpText="Choose one or more kinds of fruit to feel happy."
-  />
-  <TextField
-    label="First name"
-    variant="filled"
-    helpText="Choose one or more kinds of fruit to feel happy."
-  />
-  <TextField
-    label="First name"
-    layout="horizontal"
-    helpText="Choose one or more kinds of fruit to feel happy."
-  />
-  <TextField
-    label="First name"
-    layout="horizontal"
-    helpText="Choose one or more kinds of fruit to feel happy."
-    variant="filled"
-  />
-  <TextField
-    label="First name"
-    layout="horizontal"
-    helpText="Choose one or more kinds of fruit to feel happy."
-    fullWidth
-  />
-  <TextField
-    label="First name"
-    layout="horizontal"
-    variant="filled"
-    helpText="Choose one or more kinds of fruit to feel happy."
-    fullWidth
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  label="First name"
+  helpText="Choose one or more kinds of fruit to feel happy."
+/>
+<TextField
+  label="First name"
+  variant="filled"
+  helpText="Choose one or more kinds of fruit to feel happy."
+/>
+<TextField
+  label="First name"
+  layout="horizontal"
+  helpText="Choose one or more kinds of fruit to feel happy."
+/>
+<TextField
+  label="First name"
+  layout="horizontal"
+  helpText="Choose one or more kinds of fruit to feel happy."
+  variant="filled"
+/>
+<TextField
+  label="First name"
+  layout="horizontal"
+  helpText="Choose one or more kinds of fruit to feel happy."
+  fullWidth
+/>
+<TextField
+  label="First name"
+  layout="horizontal"
+  variant="filled"
+  helpText="Choose one or more kinds of fruit to feel happy."
+  fullWidth
+/>
+```
 
 Keep in mind that **long help texts don't play well with small input sizes,**
 especially in vertical layout. To fix this at least for horizontal layout, help
 text expands over the full field width when the desired input width (based on
 `inputSize` option) is 10 characters or smaller.
 
-<Playground>
-  <TextField
-    inputSize={3}
-    label="Title"
-    layout="horizontal"
-    helpText="What academic degree do you hold?"
-  />
-  <TextField
-    inputSize={3}
-    label="Title"
-    layout="horizontal"
-    variant="filled"
-    helpText="What academic degree do you hold?"
-  />
-  <TextField
-    label="Age"
-    layout="horizontal"
-    min={13}
-    max={120}
-    inputSize={3}
-    type="number"
-    helpText="How old do you see yourself?"
-  />
-  <TextField
-    label="Age"
-    layout="horizontal"
-    min={13}
-    max={120}
-    inputSize={3}
-    variant="filled"
-    type="number"
-    helpText="How old do you see yourself?"
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  inputSize={3}
+  label="Title"
+  layout="horizontal"
+  helpText="What academic degree do you hold?"
+/>
+<TextField
+  inputSize={3}
+  label="Title"
+  layout="horizontal"
+  variant="filled"
+  helpText="What academic degree do you hold?"
+/>
+<TextField
+  label="Age"
+  layout="horizontal"
+  min={13}
+  max={120}
+  inputSize={3}
+  type="number"
+  helpText="How old do you see yourself?"
+/>
+<TextField
+  label="Age"
+  layout="horizontal"
+  min={13}
+  max={120}
+  inputSize={3}
+  variant="filled"
+  type="number"
+  helpText="How old do you see yourself?"
+/>
+```
 
 ## States
 
@@ -384,69 +372,75 @@ should always **provide a validation message for states other than valid** so
 users know what happened and what action they should take or what options they
 have.
 
-<Playground>
-  <TextField
-    label="User name"
-    validationState="valid"
-    validationText="Looks good!"
-    value="johnny1986"
-    required
-  />
-  <TextField
-    label="User name"
-    validationState="warning"
-    validationText="Account with this name already exists, pick a different one."
-    value="joe"
-    required
-  />
-  <TextField
-    label="User name"
-    validationState="invalid"
-    validationText="Please enter a user name of your choice."
-    required
-  />
-  <TextField
-    label="User name"
-    validationState="valid"
-    validationText="Looks good!"
-    variant="filled"
-    value="johnny1986"
-    required
-  />
-  <TextField
-    label="User name"
-    validationState="warning"
-    validationText="Account with this name already exists, pick a different one."
-    variant="filled"
-    value="joe"
-    required
-  />
-  <TextField
-    label="User name"
-    validationState="invalid"
-    validationText="Please enter a user name of your choice."
-    variant="filled"
-    required
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  label="User name"
+  onChange={() => {}}
+  validationState="valid"
+  validationText="Looks good!"
+  value="johnny1986"
+  required
+/>
+<TextField
+  label="User name"
+  onChange={() => {}}
+  validationState="warning"
+  validationText="Account with this name already exists, pick a different one."
+  value="joe"
+  required
+/>
+<TextField
+  label="User name"
+  validationState="invalid"
+  validationText="Please enter a user name of your choice."
+  required
+/>
+<TextField
+  label="User name"
+  onChange={() => {}}
+  validationState="valid"
+  validationText="Looks good!"
+  variant="filled"
+  value="johnny1986"
+  required
+/>
+<TextField
+  label="User name"
+  onChange={() => {}}
+  validationState="warning"
+  validationText="Account with this name already exists, pick a different one."
+  variant="filled"
+  value="joe"
+  required
+/>
+<TextField
+  label="User name"
+  validationState="invalid"
+  validationText="Please enter a user name of your choice."
+  variant="filled"
+  required
+/>
+```
 
 ### Disabled State
 
 It's possible to disable the whole input.
 
-<Playground>
-  <TextField
-    label="First name"
-    value="John"
-    disabled
-  />
-  <TextField
-    label="First name"
-    variant="filled"
-    value="John"
-    disabled
-  />
-</Playground>
+```docoff-react-preview
+<TextField
+  label="First name"
+  onChange={() => {}}
+  value="John"
+  disabled
+/>
+<TextField
+  label="First name"
+  onChange={() => {}}
+  variant="filled"
+  value="John"
+  disabled
+/>
+```
 
 ## Forwarding HTML Attributes
 
@@ -456,36 +450,36 @@ 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>
+```docoff-react-preview
+<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"
+/>
+```
 
 👉 Refer to the MDN reference for the full list of supported attributes of the
 [text][input-text], [email][input-email], [number][input-number],
@@ -497,7 +491,7 @@ If you provide [ref], it is forwarded to the native HTML `<input>` element.
 
 ## API
 
-<Props table of={TextField} />
+<docoff-react-props src="/components/TextField/TextField.jsx"></docoff-react-props>
 
 ## Theming
 
@@ -513,6 +507,6 @@ Head to [Forms Theming][theming-forms] to see shared form theming options.
 [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
+[theming-forms]: /docs/customize/theming/forms
 [React synthetic events]: https://reactjs.org/docs/events.html
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html