Skip to content

Commit e5d2c71

Browse files
djhidjhi
authored
Merge pull request marmelab#10608 from marmelab/feat/RichTextInput/fullWidth-by-default
Make `<RichTextInput>` fullWidth by default
2 parents 7e6f414 + 8affb58 commit e5d2c71

2 files changed

Lines changed: 149 additions & 125 deletions

File tree

‎packages/ra-input-rich-text/src/RichTextInput.stories.tsx‎

Lines changed: 148 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ import {
3030
} from './RichTextInput';
3131
import { RichTextInputToolbar } from './RichTextInputToolbar';
3232
import {
33+
Box,
3334
Button,
35+
Card,
3436
List,
3537
ListItem,
3638
ListItemButton,
@@ -44,12 +46,12 @@ export default { title: 'ra-input-rich-text/RichTextInput' };
4446
const FormInspector = ({ name = 'body' }) => {
4547
const value = useWatch({ name });
4648
return (
47-
<div style={{ backgroundColor: 'lightgrey' }}>
49+
<Box sx={theme => ({ backgroundColor: theme.palette.divider })}>
4850
{name} value in form:&nbsp;
4951
<code>
5052
{JSON.stringify(value)} ({typeof value})
5153
</code>
52-
</div>
54+
</Box>
5355
);
5456
};
5557

@@ -62,155 +64,173 @@ const i18nProvider: I18nProvider = {
6264
export const Basic = (props: Partial<SimpleFormProps>) => (
6365
<AdminContext i18nProvider={i18nProvider}>
6466
<ResourceContextProvider value="posts">
65-
<SimpleForm
66-
defaultValues={{ body: 'Hello World' }}
67-
onSubmit={() => {}}
68-
{...props}
69-
>
70-
<RichTextInput source="body" />
71-
<FormInspector />
72-
</SimpleForm>
67+
<Card>
68+
<SimpleForm
69+
defaultValues={{ body: 'Hello World' }}
70+
onSubmit={() => {}}
71+
{...props}
72+
>
73+
<RichTextInput source="body" />
74+
<FormInspector />
75+
</SimpleForm>
76+
</Card>
7377
</ResourceContextProvider>
7478
</AdminContext>
7579
);
7680

7781
export const Disabled = (props: Partial<SimpleFormProps>) => (
7882
<AdminContext i18nProvider={i18nProvider}>
7983
<ResourceContextProvider value="posts">
80-
<SimpleForm
81-
defaultValues={{ body: 'Hello World' }}
82-
onSubmit={() => {}}
83-
{...props}
84-
>
85-
<RichTextInput source="body" disabled />
86-
<FormInspector />
87-
</SimpleForm>
84+
<Card>
85+
<SimpleForm
86+
defaultValues={{ body: 'Hello World' }}
87+
onSubmit={() => {}}
88+
{...props}
89+
>
90+
<RichTextInput source="body" disabled />
91+
<FormInspector />
92+
</SimpleForm>
93+
</Card>
8894
</ResourceContextProvider>
8995
</AdminContext>
9096
);
9197

9298
export const ReadOnly = (props: Partial<SimpleFormProps>) => (
9399
<AdminContext i18nProvider={i18nProvider}>
94100
<ResourceContextProvider value="posts">
95-
<SimpleForm
96-
defaultValues={{ body: 'Hello World' }}
97-
onSubmit={() => {}}
98-
{...props}
99-
>
100-
<RichTextInput source="body" readOnly />
101-
<FormInspector />
102-
</SimpleForm>
101+
<Card>
102+
<SimpleForm
103+
defaultValues={{ body: 'Hello World' }}
104+
onSubmit={() => {}}
105+
{...props}
106+
>
107+
<RichTextInput source="body" readOnly />
108+
<FormInspector />
109+
</SimpleForm>
110+
</Card>
103111
</ResourceContextProvider>
104112
</AdminContext>
105113
);
106114

107115
export const Small = (props: Partial<SimpleFormProps>) => (
108116
<AdminContext i18nProvider={i18nProvider}>
109117
<ResourceContextProvider value="posts">
110-
<SimpleForm
111-
defaultValues={{ body: 'Hello World' }}
112-
onSubmit={() => {}}
113-
{...props}
114-
>
115-
<RichTextInput
116-
toolbar={<RichTextInputToolbar size="small" />}
117-
label="Body"
118-
source="body"
119-
/>
120-
<FormInspector />
121-
</SimpleForm>
118+
<Card>
119+
<SimpleForm
120+
defaultValues={{ body: 'Hello World' }}
121+
onSubmit={() => {}}
122+
{...props}
123+
>
124+
<RichTextInput
125+
toolbar={<RichTextInputToolbar size="small" />}
126+
label="Body"
127+
source="body"
128+
/>
129+
<FormInspector />
130+
</SimpleForm>
131+
</Card>
122132
</ResourceContextProvider>
123133
</AdminContext>
124134
);
125135

126136
export const Medium = (props: Partial<SimpleFormProps>) => (
127137
<AdminContext i18nProvider={i18nProvider}>
128138
<ResourceContextProvider value="posts">
129-
<SimpleForm
130-
defaultValues={{ body: 'Hello World' }}
131-
onSubmit={() => {}}
132-
{...props}
133-
>
134-
<RichTextInput
135-
toolbar={<RichTextInputToolbar size="medium" />}
136-
label="Body"
137-
source="body"
138-
/>
139-
<FormInspector />
140-
</SimpleForm>
139+
<Card>
140+
<SimpleForm
141+
defaultValues={{ body: 'Hello World' }}
142+
onSubmit={() => {}}
143+
{...props}
144+
>
145+
<RichTextInput
146+
toolbar={<RichTextInputToolbar size="medium" />}
147+
label="Body"
148+
source="body"
149+
/>
150+
<FormInspector />
151+
</SimpleForm>
152+
</Card>
141153
</ResourceContextProvider>
142154
</AdminContext>
143155
);
144156

145157
export const Large = (props: Partial<SimpleFormProps>) => (
146158
<AdminContext i18nProvider={i18nProvider}>
147159
<ResourceContextProvider value="posts">
148-
<SimpleForm
149-
defaultValues={{ body: 'Hello World' }}
150-
onSubmit={() => {}}
151-
{...props}
152-
>
153-
<RichTextInput
154-
toolbar={<RichTextInputToolbar size="large" />}
155-
label="Body"
156-
source="body"
157-
/>
158-
<FormInspector />
159-
</SimpleForm>
160+
<Card>
161+
<SimpleForm
162+
defaultValues={{ body: 'Hello World' }}
163+
onSubmit={() => {}}
164+
{...props}
165+
>
166+
<RichTextInput
167+
toolbar={<RichTextInputToolbar size="large" />}
168+
label="Body"
169+
source="body"
170+
/>
171+
<FormInspector />
172+
</SimpleForm>
173+
</Card>
160174
</ResourceContextProvider>
161175
</AdminContext>
162176
);
163177

164-
export const FullWidth = (props: Partial<SimpleFormProps>) => (
178+
export const NotFullWidth = (props: Partial<SimpleFormProps>) => (
165179
<AdminContext i18nProvider={i18nProvider}>
166180
<ResourceContextProvider value="posts">
167-
<SimpleForm
168-
defaultValues={{ body: 'Hello World' }}
169-
onSubmit={() => {}}
170-
{...props}
171-
>
172-
<RichTextInput
173-
toolbar={<RichTextInputToolbar />}
174-
label="Body"
175-
source="body"
176-
fullWidth
177-
/>
178-
<FormInspector />
179-
</SimpleForm>
181+
<Card>
182+
<SimpleForm
183+
defaultValues={{ body: 'Hello World' }}
184+
onSubmit={() => {}}
185+
{...props}
186+
>
187+
<RichTextInput
188+
toolbar={<RichTextInputToolbar />}
189+
label="Body"
190+
source="body"
191+
fullWidth={false}
192+
/>
193+
<FormInspector />
194+
</SimpleForm>
195+
</Card>
180196
</ResourceContextProvider>
181197
</AdminContext>
182198
);
183199

184200
export const Sx = (props: Partial<SimpleFormProps>) => (
185201
<AdminContext i18nProvider={i18nProvider}>
186202
<ResourceContextProvider value="posts">
187-
<SimpleForm
188-
defaultValues={{ body: 'Hello World' }}
189-
onSubmit={() => {}}
190-
{...props}
191-
>
192-
<RichTextInput
193-
label="Body"
194-
source="body"
195-
sx={{ border: '1px solid red' }}
196-
/>
197-
<FormInspector />
198-
</SimpleForm>
203+
<Card>
204+
<SimpleForm
205+
defaultValues={{ body: 'Hello World' }}
206+
onSubmit={() => {}}
207+
{...props}
208+
>
209+
<RichTextInput
210+
label="Body"
211+
source="body"
212+
sx={{ border: '1px solid red' }}
213+
/>
214+
<FormInspector />
215+
</SimpleForm>
216+
</Card>
199217
</ResourceContextProvider>
200218
</AdminContext>
201219
);
202220

203221
export const Validation = (props: Partial<SimpleFormProps>) => (
204222
<AdminContext i18nProvider={i18nProvider}>
205223
<ResourceContextProvider value="posts">
206-
<SimpleForm onSubmit={() => {}} {...props}>
207-
<RichTextInput
208-
label="Body"
209-
source="body"
210-
validate={required()}
211-
/>
212-
<FormInspector />
213-
</SimpleForm>
224+
<Card>
225+
<SimpleForm onSubmit={() => {}} {...props}>
226+
<RichTextInput
227+
label="Body"
228+
source="body"
229+
validate={required()}
230+
/>
231+
<FormInspector />
232+
</SimpleForm>
233+
</Card>
214234
</ResourceContextProvider>
215235
</AdminContext>
216236
);
@@ -226,17 +246,19 @@ const MyRichTextInputToolbar = ({ ...props }) => {
226246
export const Toolbar = (props: Partial<SimpleFormProps>) => (
227247
<AdminContext i18nProvider={i18nProvider}>
228248
<ResourceContextProvider value="posts">
229-
<SimpleForm
230-
defaultValues={{ body: 'Hello World' }}
231-
onSubmit={() => {}}
232-
{...props}
233-
>
234-
<RichTextInput
235-
source="body"
236-
toolbar={<MyRichTextInputToolbar />}
237-
/>
238-
<FormInspector />
239-
</SimpleForm>
249+
<Card>
250+
<SimpleForm
251+
defaultValues={{ body: 'Hello World' }}
252+
onSubmit={() => {}}
253+
{...props}
254+
>
255+
<RichTextInput
256+
source="body"
257+
toolbar={<MyRichTextInputToolbar />}
258+
/>
259+
<FormInspector />
260+
</SimpleForm>
261+
</Card>
240262
</ResourceContextProvider>
241263
</AdminContext>
242264
);
@@ -263,23 +285,25 @@ export const EditorReference = (props: Partial<SimpleFormProps>) => {
263285
return (
264286
<AdminContext i18nProvider={i18nProvider}>
265287
<ResourceContextProvider value="posts">
266-
<SimpleForm
267-
defaultValues={{ body: 'Hello World' }}
268-
toolbar={<EditorToolbar />}
269-
onSubmit={() => {}}
270-
{...props}
271-
>
272-
<RichTextInput
273-
source="body"
274-
editorOptions={{
275-
...DefaultEditorOptions,
276-
onCreate: ({ editor }: { editor: Editor }) => {
277-
editorRef.current = editor;
278-
},
279-
}}
280-
/>
281-
<FormInspector />
282-
</SimpleForm>
288+
<Card>
289+
<SimpleForm
290+
defaultValues={{ body: 'Hello World' }}
291+
toolbar={<EditorToolbar />}
292+
onSubmit={() => {}}
293+
{...props}
294+
>
295+
<RichTextInput
296+
source="body"
297+
editorOptions={{
298+
...DefaultEditorOptions,
299+
onCreate: ({ editor }: { editor: Editor }) => {
300+
editorRef.current = editor;
301+
},
302+
}}
303+
/>
304+
<FormInspector />
305+
</SimpleForm>
306+
</Card>
283307
</ResourceContextProvider>
284308
</AdminContext>
285309
);

‎packages/ra-input-rich-text/src/RichTextInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export const RichTextInput = (props: RichTextInputProps) => {
7979
defaultValue = '',
8080
disabled = false,
8181
editorOptions = DefaultEditorOptions,
82-
fullWidth,
82+
fullWidth = true,
8383
helperText,
8484
label,
8585
readOnly = false,

0 commit comments

Comments
 (0)