Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Helper Text space under Inputs to avoid layout flashes #4364

Merged
merged 11 commits into from Jan 28, 2020
Merged

Fix Helper Text space under Inputs to avoid layout flashes #4364

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
07ae952
Fixer helper place on inputs to avoid clipping/unclipping forms
JulienMattiussi Jan 27, 2020
1f5d752
change on each inputs
JulienMattiussi Jan 27, 2020
e766fb3
fix tests
JulienMattiussi Jan 27, 2020
cb36418
fix rich text typing in demo
JulienMattiussi Jan 27, 2020
8bcf9de
fix e2e
JulienMattiussi Jan 27, 2020
ef5791b
Same for 2 missing inputs
JulienMattiussi Jan 28, 2020
8b93c6f
Use empty string instead of empty component
JulienMattiussi Jan 28, 2020
5dfea6a
fix
JulienMattiussi Jan 28, 2020
56bd040
must return a ReactElement
JulienMattiussi Jan 28, 2020
ff35d5f
fix tests
JulienMattiussi Jan 28, 2020
dbbe6d8
fix last test
JulienMattiussi Jan 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion cypress/integration/create.js
View file
Open in desktop
Expand Up @@ -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', () => {
Expand Down
1 change: 1 addition & 0 deletions examples/demo/src/ra-input-rich-text.d.ts
View file
Open in desktop
@@ -0,0 +1 @@
declare module 'ra-input-rich-text';
22 changes: 10 additions & 12 deletions packages/ra-input-rich-text/src/index.js
View file
Open in desktop
Expand Up @@ -107,18 +107,16 @@ const RichTextInput = ({
</InputLabel>
)}
<div data-testid="quill" ref={divRef} className={variant} />
{helperText || (touched && error) ? (
<FormHelperText
error={!!error}
className={!!error ? 'ra-rich-text-input-error' : ''}
>
<InputHelperText
error={error}
helperText={helperText}
touched={touched}
/>
</FormHelperText>
) : null}
<FormHelperText
error={!!error}
className={!!error ? 'ra-rich-text-input-error' : ''}
>
<InputHelperText
error={error}
helperText={helperText}
touched={touched}
/>
</FormHelperText>
</FormControl>
);
};
Expand Down
12 changes: 5 additions & 7 deletions packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx
View file
Open in desktop
Expand Up @@ -418,13 +418,11 @@ const AutocompleteArrayInput: FunctionComponent<
htmlFor: id,
})}
helperText={
(touched && error) || helperText ? (
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
) : null
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
}
variant={variant}
margin={margin}
Expand Down
12 changes: 5 additions & 7 deletions packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
View file
Open in desktop
Expand Up @@ -362,13 +362,11 @@ const AutocompleteInput: FunctionComponent<
htmlFor: id,
})}
helperText={
(touched && error) || helperText ? (
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
) : null
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
}
variant={variant}
margin={margin}
Expand Down
16 changes: 7 additions & 9 deletions packages/ra-ui-materialui/src/input/BooleanInput.tsx
View file
Open in desktop
Expand Up @@ -74,15 +74,13 @@ const BooleanInput: FunctionComponent<
/>
}
/>
{(touched && error) || helperText ? (
<FormHelperText error={!!error}>
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
</FormHelperText>
) : null}
<FormHelperText error={!!error}>
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
</FormHelperText>
</FormGroup>
);
};
Expand Down
8 changes: 4 additions & 4 deletions packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.tsx
View file
Open in desktop
Expand Up @@ -147,7 +147,7 @@ describe('<CheckboxGroupInput />', () => {
render={() => (
<CheckboxGroupInput
{...defaultProps}
optionText={<Foobar />}
optionText={<Foobar record={{}} />}
choices={[{ id: 'foo', foobar: 'Bar' }]}
/>
)}
Expand Down Expand Up @@ -223,17 +223,17 @@ describe('<CheckboxGroupInput />', () => {
render={() => <CheckboxGroupInput {...defaultProps} />}
/>
);
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(
<Form
onSubmit={jest.fn}
render={() => <CheckboxGroupInput {...defaultProps} />}
/>
);
expect(container.querySelector('p')).toBeNull();
expect(container.querySelector('p').innerHTML).toBe('');
});

it('should be displayed if field has been touched and is invalid', () => {
Expand Down
16 changes: 7 additions & 9 deletions packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx
View file
Open in desktop
Expand Up @@ -187,15 +187,13 @@ const CheckboxGroupInput: FunctionComponent<
/>
))}
</FormGroup>
{(touched && error) || helperText ? (
<FormHelperText>
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
</FormHelperText>
) : null}
<FormHelperText>
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
</FormHelperText>
</FormControl>
);
};
Expand Down
12 changes: 5 additions & 7 deletions packages/ra-ui-materialui/src/input/DateInput.tsx
View file
Open in desktop
Expand Up @@ -86,13 +86,11 @@ export const DateInput: FunctionComponent<
type="date"
error={!!(touched && error)}
helperText={
(touched && error) || helperText ? (
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
) : null
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
}
label={
<FieldTitle
Expand Down
12 changes: 5 additions & 7 deletions packages/ra-ui-materialui/src/input/DateTimeInput.tsx
View file
Open in desktop
Expand Up @@ -105,13 +105,11 @@ export const DateTimeInput: FunctionComponent<
margin={margin}
error={!!(touched && error)}
helperText={
(touched && error) || helperText ? (
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
) : null
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
}
label={
<FieldTitle
Expand Down
16 changes: 7 additions & 9 deletions packages/ra-ui-materialui/src/input/FileInput.tsx
View file
Open in desktop
Expand Up @@ -213,15 +213,13 @@ const FileInput: FunctionComponent<
))}
</div>
)}
{(touched && error) || helperText ? (
<FormHelperText>
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
</FormHelperText>
) : null}
<FormHelperText>
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
</FormHelperText>
</>
</Labeled>
);
Expand Down
4 changes: 3 additions & 1 deletion packages/ra-ui-materialui/src/input/InputHelperText.tsx
View file
Open in desktop
Expand Up @@ -18,7 +18,9 @@ const InputHelperText: FunctionComponent<Props> = ({
<ValidationError error={error} />
) : helperText ? (
<>{translate(helperText, { _: helperText })}</>
) : null;
) : (
<></>
JulienMattiussi marked this conversation as resolved.
Show resolved Hide resolved
);
};

export default InputHelperText;
12 changes: 5 additions & 7 deletions packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx
View file
Open in desktop
Expand Up @@ -82,13 +82,11 @@ const NullableBooleanInput: FunctionComponent<
}
error={!!(touched && error)}
helperText={
(touched && error) || helperText ? (
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
) : null
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
}
className={classnames(classes.input, className)}
variant={variant}
Expand Down
12 changes: 5 additions & 7 deletions packages/ra-ui-materialui/src/input/NumberInput.tsx
View file
Open in desktop
Expand Up @@ -77,13 +77,11 @@ const NumberInput: FunctionComponent<
variant={variant}
error={!!(touched && error)}
helperText={
(touched && error) || helperText ? (
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
) : null
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
}
label={
<FieldTitle
Expand Down
16 changes: 7 additions & 9 deletions packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
View file
Open in desktop
Expand Up @@ -156,15 +156,13 @@ export const RadioButtonGroupInput: FunctionComponent<
/>
))}
</RadioGroup>
{(touched && error) || helperText ? (
<FormHelperText>
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
</FormHelperText>
) : null}
<FormHelperText>
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
</FormHelperText>
</FormControl>
);
};
Expand Down
12 changes: 5 additions & 7 deletions packages/ra-ui-materialui/src/input/TextInput.tsx
View file
Open in desktop
Expand Up @@ -73,13 +73,11 @@ export const TextInput: FunctionComponent<TextInputProps> = ({
}
error={!!(touched && error)}
helperText={
(touched && error) || helperText ? (
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
) : null
<InputHelperText
touched={touched}
error={error}
helperText={helperText}
/>
}
{...options}
{...sanitizeRestProps(rest)}
Expand Down