From 07ae95225f21371829b9d0cefef8abdc9bc471b8 Mon Sep 17 00:00:00 2001 From: JulienM Date: Mon, 27 Jan 2020 10:58:47 +0100 Subject: [PATCH 01/11] Fixer helper place on inputs to avoid clipping/unclipping forms --- packages/ra-ui-materialui/src/input/DateInput.tsx | 12 +++++------- .../ra-ui-materialui/src/input/InputHelperText.tsx | 4 +++- packages/ra-ui-materialui/src/input/NumberInput.tsx | 12 +++++------- packages/ra-ui-materialui/src/input/TextInput.tsx | 12 +++++------- 4 files changed, 18 insertions(+), 22 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/DateInput.tsx b/packages/ra-ui-materialui/src/input/DateInput.tsx index be1ba1d2091..e60d016d99b 100644 --- a/packages/ra-ui-materialui/src/input/DateInput.tsx +++ b/packages/ra-ui-materialui/src/input/DateInput.tsx @@ -86,13 +86,11 @@ export const DateInput: FunctionComponent< type="date" error={!!(touched && error)} helperText={ - (touched && error) || helperText ? ( - - ) : null + } label={ = ({ ) : helperText ? ( <>{translate(helperText, { _: helperText })} - ) : null; + ) : ( + <> + ); }; export default InputHelperText; diff --git a/packages/ra-ui-materialui/src/input/NumberInput.tsx b/packages/ra-ui-materialui/src/input/NumberInput.tsx index ffc3f5cf260..578851feee0 100644 --- a/packages/ra-ui-materialui/src/input/NumberInput.tsx +++ b/packages/ra-ui-materialui/src/input/NumberInput.tsx @@ -77,13 +77,11 @@ const NumberInput: FunctionComponent< variant={variant} error={!!(touched && error)} helperText={ - (touched && error) || helperText ? ( - - ) : null + } label={ = ({ } error={!!(touched && error)} helperText={ - (touched && error) || helperText ? ( - - ) : null + } {...options} {...sanitizeRestProps(rest)} From 1f5d7525089685dd8867154326f74aff98bf0eeb Mon Sep 17 00:00:00 2001 From: JulienM Date: Mon, 27 Jan 2020 11:48:54 +0100 Subject: [PATCH 02/11] change on each inputs --- packages/ra-input-rich-text/src/index.js | 22 +++++++++---------- .../src/input/AutocompleteArrayInput.tsx | 12 +++++----- .../src/input/AutocompleteInput.tsx | 12 +++++----- .../src/input/BooleanInput.tsx | 16 ++++++-------- .../src/input/CheckboxGroupInput.tsx | 16 ++++++-------- .../src/input/DateTimeInput.tsx | 12 +++++----- .../src/input/RadioButtonGroupInput.tsx | 16 ++++++-------- 7 files changed, 46 insertions(+), 60 deletions(-) diff --git a/packages/ra-input-rich-text/src/index.js b/packages/ra-input-rich-text/src/index.js index 1b1fd2cdf6a..86a258ca1bd 100644 --- a/packages/ra-input-rich-text/src/index.js +++ b/packages/ra-input-rich-text/src/index.js @@ -107,18 +107,16 @@ const RichTextInput = ({ )}
- {helperText || (touched && error) ? ( - - - - ) : null} + + + ); }; diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx index 53bf59a65f2..009fa9aa166 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx @@ -418,13 +418,11 @@ const AutocompleteArrayInput: FunctionComponent< htmlFor: id, })} helperText={ - (touched && error) || helperText ? ( - - ) : null + } variant={variant} margin={margin} diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx index 4e3aa86e085..3dd44d88c29 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx @@ -362,13 +362,11 @@ const AutocompleteInput: FunctionComponent< htmlFor: id, })} helperText={ - (touched && error) || helperText ? ( - - ) : null + } variant={variant} margin={margin} diff --git a/packages/ra-ui-materialui/src/input/BooleanInput.tsx b/packages/ra-ui-materialui/src/input/BooleanInput.tsx index 4dddd6862df..7ab4832e50c 100644 --- a/packages/ra-ui-materialui/src/input/BooleanInput.tsx +++ b/packages/ra-ui-materialui/src/input/BooleanInput.tsx @@ -74,15 +74,13 @@ const BooleanInput: FunctionComponent< /> } /> - {(touched && error) || helperText ? ( - - - - ) : null} + + + ); }; diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx index fab7faa9248..196d4f43f93 100644 --- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx +++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx @@ -187,15 +187,13 @@ const CheckboxGroupInput: FunctionComponent< /> ))} - {(touched && error) || helperText ? ( - - - - ) : null} + + + ); }; diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.tsx b/packages/ra-ui-materialui/src/input/DateTimeInput.tsx index 884acf46ad0..bacc003f7a2 100644 --- a/packages/ra-ui-materialui/src/input/DateTimeInput.tsx +++ b/packages/ra-ui-materialui/src/input/DateTimeInput.tsx @@ -105,13 +105,11 @@ export const DateTimeInput: FunctionComponent< margin={margin} error={!!(touched && error)} helperText={ - (touched && error) || helperText ? ( - - ) : null + } label={ ))} - {(touched && error) || helperText ? ( - - - - ) : null} + + + ); }; From e766fb35d86c09c87500b7c1e99a5d9854889306 Mon Sep 17 00:00:00 2001 From: JulienM Date: Mon, 27 Jan 2020 14:15:15 +0100 Subject: [PATCH 03/11] fix tests --- .../src/input/CheckboxGroupInput.spec.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx index 84e3c237f2a..c99e94b4d18 100644 --- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx @@ -147,7 +147,7 @@ describe('', () => { render={() => ( } + optionText={} choices={[{ id: 'foo', foobar: 'Bar' }]} /> )} @@ -223,17 +223,17 @@ describe('', () => { render={() => } /> ); - expect(container.querySelector('p')).toBeNull(); + expect(container.querySelector('p').innerHTML).toBe(''); }); - it('should not be displayed if field has been touched but is valid', () => { + it('should be empty if field has been touched but is valid', () => { const { container } = render(
} /> ); - expect(container.querySelector('p')).toBeNull(); + expect(container.querySelector('p').innerHTML).toBe(''); }); it('should be displayed if field has been touched and is invalid', () => { From cb364188dd8d2e6c938b3bc64eb5180e0a611d37 Mon Sep 17 00:00:00 2001 From: JulienM Date: Mon, 27 Jan 2020 14:15:47 +0100 Subject: [PATCH 04/11] fix rich text typing in demo --- examples/demo/src/ra-input-rich-text.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 examples/demo/src/ra-input-rich-text.d.ts diff --git a/examples/demo/src/ra-input-rich-text.d.ts b/examples/demo/src/ra-input-rich-text.d.ts new file mode 100644 index 00000000000..e9040f114c8 --- /dev/null +++ b/examples/demo/src/ra-input-rich-text.d.ts @@ -0,0 +1 @@ +declare module 'ra-input-rich-text'; From 8bcf9de376dac5d2319b9af1f4fcae9bdc415bcf Mon Sep 17 00:00:00 2001 From: JulienM Date: Mon, 27 Jan 2020 14:33:17 +0100 Subject: [PATCH 05/11] fix e2e --- cypress/integration/create.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/create.js b/cypress/integration/create.js index 85c58d947f9..cc89b084ddd 100644 --- a/cypress/integration/create.js +++ b/cypress/integration/create.js @@ -249,7 +249,7 @@ describe('Create Page', () => { }); it('should not show rich text input error message when field is untouched', () => { - cy.get(CreatePage.elements.richTextInputError).should('not.exist'); + cy.get(CreatePage.elements.richTextInputError).should('not.have.value'); }); it('should show rich text input error message when form is submitted', () => { From ef5791b68111d2fbf325b71a98b0132b1684791b Mon Sep 17 00:00:00 2001 From: JulienM Date: Tue, 28 Jan 2020 10:02:54 +0100 Subject: [PATCH 06/11] Same for 2 missing inputs --- .../ra-ui-materialui/src/input/FileInput.tsx | 16 +++++++--------- .../src/input/NullableBooleanInput.tsx | 12 +++++------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/FileInput.tsx b/packages/ra-ui-materialui/src/input/FileInput.tsx index 4f92750f077..162adc4864d 100644 --- a/packages/ra-ui-materialui/src/input/FileInput.tsx +++ b/packages/ra-ui-materialui/src/input/FileInput.tsx @@ -213,15 +213,13 @@ const FileInput: FunctionComponent< ))}
)} - {(touched && error) || helperText ? ( - - - - ) : null} + + + ); diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx index b9232fa0e46..0971418ebe7 100644 --- a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx +++ b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx @@ -82,13 +82,11 @@ const NullableBooleanInput: FunctionComponent< } error={!!(touched && error)} helperText={ - (touched && error) || helperText ? ( - - ) : null + } className={classnames(classes.input, className)} variant={variant} From 8b93c6f731aa3a7136103d2bc0620784b0ed5bac Mon Sep 17 00:00:00 2001 From: JulienM Date: Tue, 28 Jan 2020 11:44:50 +0100 Subject: [PATCH 07/11] Use empty string instead of empty component --- packages/ra-ui-materialui/src/input/InputHelperText.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/input/InputHelperText.tsx b/packages/ra-ui-materialui/src/input/InputHelperText.tsx index f11718b7f39..6cf6d145ce8 100644 --- a/packages/ra-ui-materialui/src/input/InputHelperText.tsx +++ b/packages/ra-ui-materialui/src/input/InputHelperText.tsx @@ -19,7 +19,7 @@ const InputHelperText: FunctionComponent = ({ ) : helperText ? ( <>{translate(helperText, { _: helperText })} ) : ( - <> + ' ' ); }; From 5dfea6a3f0bbbf808ec929e1e28d17fe8c69b042 Mon Sep 17 00:00:00 2001 From: JulienM Date: Tue, 28 Jan 2020 12:00:30 +0100 Subject: [PATCH 08/11] fix --- packages/ra-ui-materialui/src/input/InputHelperText.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/input/InputHelperText.tsx b/packages/ra-ui-materialui/src/input/InputHelperText.tsx index 6cf6d145ce8..134ca58a1f4 100644 --- a/packages/ra-ui-materialui/src/input/InputHelperText.tsx +++ b/packages/ra-ui-materialui/src/input/InputHelperText.tsx @@ -19,7 +19,7 @@ const InputHelperText: FunctionComponent = ({ ) : helperText ? ( <>{translate(helperText, { _: helperText })} ) : ( - ' ' + <>' ' ); }; From 56bd040d5137c62f69a1149a650fb2c710b58948 Mon Sep 17 00:00:00 2001 From: JulienM Date: Tue, 28 Jan 2020 12:14:05 +0100 Subject: [PATCH 09/11] must return a ReactElement --- packages/ra-ui-materialui/src/input/InputHelperText.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/input/InputHelperText.tsx b/packages/ra-ui-materialui/src/input/InputHelperText.tsx index 134ca58a1f4..c098bc6ed16 100644 --- a/packages/ra-ui-materialui/src/input/InputHelperText.tsx +++ b/packages/ra-ui-materialui/src/input/InputHelperText.tsx @@ -19,7 +19,7 @@ const InputHelperText: FunctionComponent = ({ ) : helperText ? ( <>{translate(helperText, { _: helperText })} ) : ( - <>' ' + <> ); }; From ff35d5f6d989e407fbc9944269ebb050b3018bf7 Mon Sep 17 00:00:00 2001 From: JulienM Date: Tue, 28 Jan 2020 14:00:49 +0100 Subject: [PATCH 10/11] fix tests --- .../ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx | 2 +- packages/ra-ui-materialui/src/input/InputHelperText.spec.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx index c99e94b4d18..b79716d6d1b 100644 --- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx @@ -233,7 +233,7 @@ describe('', () => { render={() => } /> ); - expect(container.querySelector('p').innerHTML).toBe(''); + expect(container.querySelector('p').innerHTML).toBe(' '); }); it('should be displayed if field has been touched and is invalid', () => { diff --git a/packages/ra-ui-materialui/src/input/InputHelperText.spec.tsx b/packages/ra-ui-materialui/src/input/InputHelperText.spec.tsx index b56587128d6..5b7377c3cf8 100644 --- a/packages/ra-ui-materialui/src/input/InputHelperText.spec.tsx +++ b/packages/ra-ui-materialui/src/input/InputHelperText.spec.tsx @@ -6,11 +6,11 @@ import InputHelperText from './InputHelperText'; describe('InputHelperText', () => { afterEach(cleanup); - it('does not render anything when the input has not been touched yet and has no helper text', () => { + it('does render empty string when the input has not been touched yet and has no helper text', () => { const { container } = render( ); - expect(container.innerHTML).toBe(''); + expect(container.innerHTML).toBe(' '); }); it('renders the helperText when there is no error', () => { From dbbe6d8699fa28ca296447669171f8d6eeab4e87 Mon Sep 17 00:00:00 2001 From: JulienM Date: Tue, 28 Jan 2020 14:14:17 +0100 Subject: [PATCH 11/11] fix last test --- packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx index b79716d6d1b..eb8fcc72c54 100644 --- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx @@ -223,7 +223,7 @@ describe('', () => { render={() => } /> ); - expect(container.querySelector('p').innerHTML).toBe(''); + expect(container.querySelector('p').innerHTML).toBe(' '); }); it('should be empty if field has been touched but is valid', () => {