Merge pull request #7856 from marmelab/doc-inpus

[Doc] Fix Inputs doc is too concise
marmelab · Jun 18, 2022 · 5c52e9c · 5c52e9c
2 parents 817ae9a + a1cc555
commit 5c52e9c
Show file tree

Hide file tree

Showing 7 changed files with 315 additions and 45 deletions.
diff --git a/docs/Inputs.md b/docs/Inputs.md
diff --git a/docs/TextInput.md b/docs/TextInput.md
@@ -5,17 +5,26 @@ title: "The TextInput Component"
 
 # `<TextInput>`
 
-`<TextInput>` is the most common input. It is used for texts, emails, URL or passwords. In translates to an HTML `<input>` tag.
+`<TextInput>` is the most common input. It is used for texts, emails, URL or passwords. In translates into [an MUI `<TextField>`](https://mui.com/material-ui/react-text-field/), and renders as `<input type="text">` in HTML.
 
 ![TextInput](./img/text-input.gif)
 
-```jsx
-import { TextInput } from 'react-admin';
+## Usage
 
-<TextInput source="title" />
+```jsx
+import { Edit, SimpleForm, TextInput, required } from 'react-admin';
+
+export const PostEdit = () => (
+    <Edit title={<PostTitle />}>
+        <SimpleForm>
+            <TextInput source="title" validate={[required()]} fullWidth />
+            <TextInput source="teaser" validate={[required()]} defaultValue="Lorem Ipsum" multiline fullWidth />
+        </SimpleForm>
+    </Edit>
+);
 ```
 
-## Properties
+## Props
 
 | Prop         | Required | Type      | Default | Description                                                          |
 | ------------ | -------- | --------- | ------- | -------------------------------------------------------------------- |
@@ -25,20 +34,18 @@ import { TextInput } from 'react-admin';
 
 `<TextInput>` also accepts the [common input props](./Inputs.md#common-input-props).
 
-## Usage
+Additional props are passed down to the underlying MUI [`<TextField>`](https://mui.com/material-ui/react-text-field/) component.
 
-You can choose a specific input type using the `type` attribute, for instance `text` (the default), `email`, `url`, or `password`:
-
-```jsx
-<TextInput label="Email Address" source="email" type="email" />
-```
+## `multiline`
 
 You can make the `<TextInput>` expandable using the `multiline` prop for multiline text values. It renders as an auto expandable textarea.
 
 ```jsx
 <TextInput multiline source="body" />
 ```
 
+## `resettable`
+
 You can make the `<TextInput>` component resettable using the `resettable` prop. This will add a reset button which will be displayed only when the field has a value and is focused.
 
 ```jsx
@@ -49,4 +56,12 @@ import { TextInput } from 'react-admin';
 
 ![resettable TextInput](./img/resettable-text-input.gif)
 
+## `type`
+
+You can choose a specific input type using the `type` attribute, for instance `text` (the default), `email`, `url`, or `password`:
+
+```jsx
+<TextInput label="Email Address" source="email" type="email" />
+```
+
 **Warning**: Do not use `type="number"`, or you'll receive a string as value (this is a [known React bug](https://github.com/facebook/react/issues/1425)). Instead, use [`<NumberInput>`](./NumberInput.md).
diff --git a/docs/img/input-full-width.png b/docs/img/input-full-width.png
diff --git a/docs/img/input-helper-text.png b/docs/img/input-helper-text.png
diff --git a/docs/img/inputs.webp b/docs/img/inputs.webp
diff --git a/packages/ra-ui-materialui/src/field/types.ts b/packages/ra-ui-materialui/src/field/types.ts
@@ -19,6 +19,9 @@ export interface PublicFieldProps {
     className?: string;
     cellClassName?: string;
     headerClassName?: string;
+    /*
+     * @deprecated this property is not used anymore
+     */
     formClassName?: string;
     textAlign?: TextAlign;
     emptyText?: string;

diff --git a/packages/ra-ui-materialui/src/input/CommonInputProps.ts b/packages/ra-ui-materialui/src/input/CommonInputProps.ts
@@ -2,6 +2,9 @@ import { InputProps } from 'ra-core';
 
 export type CommonInputProps = InputProps & {
     cellClassName?: string;
+    /*
+     * @deprecated this property is not used anymore
+     */
     formClassName?: string;
     fullWidth?: boolean;
     headerCellClassName?: string;