Merge pull request #9169 from marmelab/input-width-mobile

Make inputs full width on mobile
marmelab · Aug 9, 2023 · aaccd75 · aaccd75
2 parents 402dec8 + e0dbfca
commit aaccd75
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 1 deletion.
diff --git a/packages/ra-ui-materialui/src/defaultTheme.ts b/packages/ra-ui-materialui/src/defaultTheme.ts
@@ -11,12 +11,30 @@ const defaultThemeInvariants = {
         closedWidth: 50,
     },
     components: {
+        MuiAutocomplete: {
+            variants: [
+                {
+                    props: {},
+                    style: ({ theme }) => ({
+                        [theme.breakpoints.down('sm')]: { width: '100%' },
+                    }),
+                },
+            ],
+        },
         MuiTextField: {
             defaultProps: {
                 variant: 'filled' as const,
                 margin: 'dense' as const,
                 size: 'small' as const,
             },
+            variants: [
+                {
+                    props: {},
+                    style: ({ theme }) => ({
+                        [theme.breakpoints.down('sm')]: { width: '100%' },
+                    }),
+                },
+            ],
         },
         MuiFormControl: {
             defaultProps: {

diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx
@@ -118,6 +118,11 @@ const StyledTextField = styled(TextField, {
     [`&.${NullableBooleanInputClasses.input}`]: {
         width: fullWidth ? '100%' : theme.spacing(16),
     },
+    [theme.breakpoints.down('sm')]: {
+        [`&.${NullableBooleanInputClasses.input}`]: {
+            width: '100%',
+        },
+    },
 }));
 
 const getBooleanFromString = (value: string): boolean | null => {

diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
@@ -445,6 +445,9 @@ const StyledFormControl = styled(FormControl, {
     overridesResolver: (props, styles) => styles.root,
 })(({ theme }) => ({
     minWidth: theme.spacing(20),
+    [theme.breakpoints.down('sm')]: {
+        width: '100%',
+    },
     [`& .${SelectArrayInputClasses.chips}`]: {
         display: 'flex',
         flexWrap: 'wrap',

diff --git a/packages/ra-ui-materialui/src/input/inputs.stories.tsx b/packages/ra-ui-materialui/src/input/inputs.stories.tsx
@@ -0,0 +1,123 @@
+import * as React from 'react';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import englishMessages from 'ra-language-english';
+
+import { AdminContext } from '../AdminContext';
+import { Create } from '../detail';
+import { SimpleForm } from '../form';
+import {
+    AutocompleteInput,
+    CheckboxGroupInput,
+    TextInput,
+    DateInput,
+    AutocompleteArrayInput,
+    SelectInput,
+    BooleanInput,
+    SelectArrayInput,
+    DateTimeInput,
+    NullableBooleanInput,
+    NumberInput,
+    RadioButtonGroupInput,
+    TimeInput,
+    TranslatableInputs,
+    SearchInput,
+    PasswordInput,
+    ImageInput,
+    ArrayInput,
+    SimpleFormIterator,
+} from './';
+import { ImageField } from '../field';
+
+export default {
+    title: 'ra-ui-materialui/input',
+};
+
+const i18nProvider = polyglotI18nProvider(() => englishMessages);
+
+export const AllInputs = () => (
+    <AdminContext i18nProvider={i18nProvider}>
+        <Create
+            resource="posts"
+            record={{ id: 1, title: 'Lorem Ipsum', updated_at: new Date() }}
+        >
+            <SimpleForm>
+                <TextInput source="title" helperText="TextInput" />
+                <NumberInput source="average_note" helperText="NumberInput" />
+                <DateInput source="published_at" helperText="DateInput" />
+                <TimeInput source="published_at_time" helperText="TimeInput" />
+                <DateTimeInput source="updated_at" helperText="DateTimeInput" />
+                <AutocompleteInput
+                    source="author_id"
+                    choices={[
+                        { id: 1, name: 'John Doe' },
+                        { id: 2, name: 'Jane Doe' },
+                    ]}
+                    helperText="AutocompleteInput"
+                />
+                <AutocompleteArrayInput
+                    source="secondary_authors_id"
+                    helperText="AutocompleteArrayInput"
+                    choices={[
+                        { id: 1, name: 'John Doe' },
+                        { id: 2, name: 'Jane Doe' },
+                    ]}
+                />
+                <SelectInput
+                    source="status"
+                    choices={[
+                        { id: 'draft', name: 'Draft' },
+                        { id: 'published', name: 'Published' },
+                    ]}
+                    helperText="SelectInput"
+                />
+                <SelectArrayInput
+                    source="tags"
+                    choices={[
+                        { id: 1, name: 'Tech' },
+                        { id: 2, name: 'Lifestyle' },
+                    ]}
+                    helperText="SelectArrayInput"
+                />
+                <RadioButtonGroupInput
+                    source="workflow"
+                    helperText="RadioButtonGroupInput"
+                    choices={[
+                        { id: 1, name: 'Simple' },
+                        { id: 2, name: 'Manager' },
+                        { id: 3, name: 'All' },
+                    ]}
+                />
+                <CheckboxGroupInput
+                    source="roles"
+                    choices={[
+                        { id: 'admin', name: 'Admin' },
+                        { id: 'u001', name: 'Editor' },
+                        { id: 'u002', name: 'Moderator' },
+                        { id: 'u003', name: 'Reviewer' },
+                    ]}
+                    helperText="CheckboxGroupInput"
+                />
+                <NullableBooleanInput
+                    source="exclusive"
+                    helperText="NullableBooleanInput"
+                />
+                <BooleanInput source="commentable" helperText="BooleanInput" />
+                <ArrayInput source="backlinks" helperText="ArrayInput">
+                    <SimpleFormIterator>
+                        <TextInput source="url" />
+                        <TextInput source="title" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+                <TranslatableInputs locales={['en', 'fr']} defaultLocale="en">
+                    <TextInput source="description" />
+                    <TextInput source="body" />
+                </TranslatableInputs>
+                <PasswordInput source="password" helperText="PasswordInput" />
+                <SearchInput source="q" helperText="SearchInput" />
+                <ImageInput source="pictures" helperText="ImageInput">
+                    <ImageField source="src" title="title" />
+                </ImageInput>
+            </SimpleForm>
+        </Create>
+    </AdminContext>
+);
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterForm.tsx b/packages/ra-ui-materialui/src/list/filter/FilterForm.tsx
@@ -213,6 +213,9 @@ const StyledForm = styled('form', {
 })(({ theme }) => ({
     display: 'flex',
     flex: '0 1 auto',
+    [theme.breakpoints.down('sm')]: {
+        width: '100%',
+    },
     [theme.breakpoints.up('md')]: {
         flex: '0 1 100%',
     },

diff --git a/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx b/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
+import { IconButton } from '@mui/material';
 import ActionHide from '@mui/icons-material/HighlightOff';
 import clsx from 'clsx';
 import { useResourceContext, useTranslate } from 'ra-core';
@@ -64,6 +64,9 @@ const Root = styled('div', {
     display: 'flex',
     alignItems: 'flex-end',
     pointerEvents: 'auto',
+    [theme.breakpoints.down('sm')]: {
+        width: '100%',
+    },
 
     [`& .${FilterFormInputClasses.spacer}`]: { width: theme.spacing(2) },
     [`& .${FilterFormInputClasses.hideButton}`]: {