[RFR] Improve form look and feel

UPGRADE.md

@@ -799,3 +799,38 @@ const OrderEdit = (props) => (
 
 Some components (such as `<SelectArrayInput />`) accepted the `helperText` in their `meta` prop. They now receive it directly in their props.
 Besides, all components now display their error or their helperText, but not both at the same time.
+
+## Form Inputs are now filled and dense by default
+
+To better match the [Material Design](https://material.io/components/text-fields/) specification, react-admin defaults to the 'filled' variant for form inputs, and uses a *dense* margin to allow more compact forms. This will change the look and fill of existing forms built with `<SimpleForm>`, `<TabbedForm>`, and `<Filter>`. If you want your forms to look just like before, you need to set the `variant` and `margin` props as follows: 
+
+```diff
+// for SimpleForm
+const PostEdit = props =>
+    <Edit {...props}>
+        <SimpleForm
++           variant="standard"
++           margin="normal"
+        >
+            // ...
+        </SimpleForm>
+    </Edit>;
+// for TabbedForm
+const PostEdit = props =>
+    <Edit {...props}>
+        <TabbedForm
++           variant="standard"
++           margin="normal"
+        >
+            <FormTab label="Identity>
+                // ...
+            </FormTab>
+        </TabbedForm>
+    </Edit>;
+// for Filter
+const PostFilter = props => 
+-   <Filter>
++   <Filter variant="standard">
+        // ...
+    </Filter>;
+```

docs/CreateEdit.md

@@ -363,6 +363,8 @@ Here are all the props accepted by the `<SimpleForm>` component:
 * [`submitOnEnter`](#submit-on-enter)
 * [`redirect`](#redirection-after-submission)
 * [`toolbar`](#toolbar)
+* [`variant`](#variant)
+* [`margin`](#margin)
 * `save`: The function invoked when the form is submitted. This is passed automatically by `react-admin` when the form component is used inside `Create` and `Edit` components.
 * `saving`: A boolean indicating whether a save operation is ongoing. This is passed automatically by `react-admin` when the form component is used inside `Create` and `Edit` components.
 
@@ -394,6 +396,8 @@ Here are all the props accepted by the `<TabbedForm>` component:
 * [`submitOnEnter`](#submit-on-enter)
 * [`redirect`](#redirection-after-submission)
 * [`toolbar`](#toolbar)
+* [`variant`](#variant)
+* [`margin`](#margin)
 * `save`: The function invoked when the form is submitted. This is passed automatically by `react-admin` when the form component is used inside `Create` and `Edit` components.
 * `saving`: A boolean indicating whether a save operation is ongoing. This is passed automatically by `react-admin` when the form component is used inside `Create` and `Edit` components.
 
@@ -440,6 +444,7 @@ To style the tabs, the `<FormTab>` component accepts two props:
 - `contentClassName` is passed to the tab *content*
 
 ### TabbedFormTabs
+
 By default `<TabbedForm>` uses `<TabbedFormTabs>`, an internal react-admin component to renders tabs. You can pass a custom component as the `tabs` prop to override the default component. Besides, props from `<TabbedFormTabs>` are passed to material-ui's `<Tabs>` component inside `<TabbedFormTabs>`.
 
 The following example shows how to make use of scrollable `<Tabs>`. Pass the `scrollable` prop to `<TabbedFormTabs>` and pass that as the `tabs` prop to `<TabbedForm>`
@@ -827,6 +832,34 @@ Here are the props received by the `Toolbar` component when passed as the `toolb
 
 **Tip**: To alter the form values before submitting, you should use the `handleSubmit` prop. See [Altering the Form Values before Submitting](./Actions.md#altering-the-form-values-before-submitting) for more information and examples.
 
+## Variant
+
+By default, react-admin input components use the Material Design "filled" variant. If you want to use the "standard" or "outlined" variants, you can either set the `variant` prop on each Input component individually, or set the `variant` prop directly on the Form component. In that case, the Form component will transmit the `variant` to each Input.
+
+```jsx
+export const PostEdit = (props) => (
+    <Edit {...props}>
+        <SimpleForm variant="standard">
+            ...
+        </SimpleForm>
+    </Edit>
+);
+```
+
+## Margin
+
+By default, react-admin input components use the Material Design "dense" margin. If you want to use the "normal" or "none" margins, you can either set the `margin` prop on each Input component individually, or set the `margin` prop directly on the Form component. In that case, the Form component will transmit the `margin` to each Input.
+
+```jsx
+export const PostEdit = (props) => (
+    <Edit {...props}>
+        <SimpleForm margin="normal">
+            ...
+        </SimpleForm>
+    </Edit>
+);
+```
+
 ## Customizing Input Container Styles
 
 The input components are wrapped inside a `div` to ensure a good looking form by default. You can pass a `formClassName` prop to the input components to customize the style of this `div`. For example, here is how to display two inputs on the same line:

examples/demo/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "^4.2.1",
+        "@material-ui/core": "^4.3.3",
         "@material-ui/icons": "^4.2.1",
         "data-generator-retail": "^2.7.0",
         "fakerest": "~2.1.0",

examples/demo/src/layout/Menu.js

@@ -119,6 +119,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                 leftIcon={<reviews.icon />}
                 onClick={onMenuClick}
                 sidebarIsOpen={open}
+                dense
             />
             {isXsmall && (
                 <MenuItemLink
@@ -127,6 +128,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     leftIcon={<SettingsIcon />}
                     onClick={onMenuClick}
                     sidebarIsOpen={open}
+                    dense
                 />
             )}
             {isXsmall && logout}

examples/demo/src/layout/themes.js

@@ -13,4 +13,14 @@ export const lightTheme = {
             contrastText: '#fff',
         },
     },
+    overrides: {
+        MuiFilledInput: {
+            root: {
+                backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                '&$disabled': {
+                    backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                },
+            },
+        },
+    },
 };

examples/demo/src/products/ProductCreate.js

@@ -9,15 +9,16 @@ import {
     TextInput,
     required,
 } from 'react-admin';
+import { InputAdornment } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import RichTextInput from 'ra-input-rich-text';
 
 export const styles = {
-    stock: { width: '5em' },
-    price: { width: '5em' },
-    width: { width: '5em' },
+    price: { width: '7em' },
+    width: { width: '7em' },
+    height: { width: '7em' },
+    stock: { width: '7em' },
     widthFormGroup: { display: 'inline-block' },
-    height: { width: '5em' },
     heightFormGroup: { display: 'inline-block', marginLeft: 32 },
 };
 
@@ -32,12 +33,12 @@ const ProductCreate = props => {
                     <TextInput
                         autoFocus
                         source="image"
-                        options={{ fullWidth: true }}
+                        fullWidth
                         validate={required()}
                     />
                     <TextInput
                         source="thumbnail"
-                        options={{ fullWidth: true }}
+                        fullWidth
                         validate={required()}
                     />
                 </FormTab>
@@ -47,18 +48,39 @@ const ProductCreate = props => {
                         source="price"
                         validate={required()}
                         className={classes.price}
+                        InputProps={{
+                            startAdornment: (
+                                <InputAdornment position="start">
+                                    €
+                                </InputAdornment>
+                            ),
+                        }}
                     />
                     <NumberInput
                         source="width"
                         validate={required()}
                         className={classes.width}
                         formClassName={classes.widthFormGroup}
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="start">
+                                    cm
+                                </InputAdornment>
+                            ),
+                        }}
                     />
                     <NumberInput
                         source="height"
                         validate={required()}
                         className={classes.height}
                         formClassName={classes.heightFormGroup}
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="start">
+                                    cm
+                                </InputAdornment>
+                            ),
+                        }}
                     />
                     <ReferenceInput
                         source="category_id"
@@ -77,7 +99,7 @@ const ProductCreate = props => {
                     label="resources.products.tabs.description"
                     path="description"
                 >
-                    <RichTextInput source="description" addLabel={false} />
+                    <RichTextInput source="description" label="" />
                 </FormTab>
             </TabbedForm>
         </Create>

examples/demo/src/products/ProductEdit.js

@@ -14,6 +14,7 @@ import {
     TextField,
     TextInput,
 } from 'react-admin';
+import { InputAdornment } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import RichTextInput from 'ra-input-rich-text';
 
@@ -43,24 +44,45 @@ const ProductEdit = props => {
             <TabbedForm>
                 <FormTab label="resources.products.tabs.image">
                     <Poster />
-                    <TextInput source="image" options={{ fullWidth: true }} />
-                    <TextInput
-                        source="thumbnail"
-                        options={{ fullWidth: true }}
-                    />
+                    <TextInput source="image" fullWidth />
+                    <TextInput source="thumbnail" fullWidth />
                 </FormTab>
                 <FormTab label="resources.products.tabs.details" path="details">
                     <TextInput source="reference" />
-                    <NumberInput source="price" className={classes.price} />
+                    <NumberInput
+                        source="price"
+                        className={classes.price}
+                        InputProps={{
+                            startAdornment: (
+                                <InputAdornment position="start">
+                                    €
+                                </InputAdornment>
+                            ),
+                        }}
+                    />
                     <NumberInput
                         source="width"
                         className={classes.width}
                         formClassName={classes.widthFormGroup}
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="start">
+                                    cm
+                                </InputAdornment>
+                            ),
+                        }}
                     />
                     <NumberInput
                         source="height"
                         className={classes.height}
                         formClassName={classes.heightFormGroup}
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="start">
+                                    cm
+                                </InputAdornment>
+                            ),
+                        }}
                     />
                     <ReferenceInput source="category_id" reference="categories">
                         <SelectInput source="name" />
@@ -71,14 +93,15 @@ const ProductEdit = props => {
                     label="resources.products.tabs.description"
                     path="description"
                 >
-                    <RichTextInput source="description" addLabel={false} />
+                    <RichTextInput source="description" label="" />
                 </FormTab>
                 <FormTab label="resources.products.tabs.reviews" path="reviews">
                     <ReferenceManyField
                         reference="reviews"
                         target="product_id"
                         addLabel={false}
                         pagination={<Pagination />}
+                        fullWidth
                     >
                         <Datagrid>
                             <DateField source="date" />

examples/simple/package.json

@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@babel/polyfill": "^7.0.0",
-        "@material-ui/core": "^4.2.1",
+        "@material-ui/core": "^4.3.3",
         "@material-ui/icons": "^4.2.1",
         "ra-data-fakerest": "^3.0.0-alpha.0",
         "ra-input-rich-text": "^3.0.0-alpha.0",

examples/simple/src/posts/PostList.js

@@ -30,7 +30,7 @@ export const PostIcon = BookIcon;
 
 const useQuickFilterStyles = makeStyles(theme => ({
     chip: {
-        marginBottom: theme.spacing(3),
+        marginBottom: theme.spacing(1),
     },
 }));
 const QuickFilter = ({ label }) => {

examples/tutorial/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "^4.2.1",
+        "@material-ui/core": "^4.3.3",
         "ra-data-json-server": "^3.0.0-alpha.0",
         "react": "~16.8.0",
         "react-admin": "^3.0.0-alpha.0",