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

[docs] Improve FormControl duplication warning #22823

Merged
merged 3 commits into from
Oct 5, 2020
Merged

[docs] Improve FormControl duplication warning #22823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bf6927e
update warning in FormControl
talgautb Oct 1, 2020
9f09008
update test, docs
Oct 1, 2020
e166f92
add an example
oliviertassinari Oct 4, 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
3 changes: 2 additions & 1 deletion docs/pages/api-docs/form-control.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ You can find one composition example below and more going to [the demos](/compon
</FormControl>
```

⚠️Only one input can be used within a FormControl.
⚠️ Only one `InputBase` can be used within a FormControl because it create visual inconsistencies.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have a concrete example for this? Ideally we could list all so that people searching by problem find the cause.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In #22535 (comment), we have:

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we describe this pattern in words?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do i need to add this to docs?

Copy link
Member

@eps1lon eps1lon Oct 2, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That'd be nice. "visual inconsistencies" is not helpful. Either we describe examples or we remove it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i get it from comment, I think to delete this will be good decision if we have no other variants

For instance, only one input can be focused at the same time, the state shouldn't be shared.

## Component name

Expand Down
3 changes: 2 additions & 1 deletion packages/material-ui/src/FormControl/FormControl.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,8 @@ export interface FormControlTypeMap<P = {}, D extends React.ElementType = 'div'>
* </FormControl>
* ```
*
* ⚠️Only one input can be used within a FormControl.
* ⚠️ Only one `InputBase` can be used within a FormControl because it create visual inconsistencies.
* For instance, only one input can be focused at the same time, the state shouldn't be shared.
* Demos:
*
* - [Checkboxes](https://material-ui.com/components/checkboxes/)
Expand Down
8 changes: 4 additions & 4 deletions packages/material-ui/src/FormControl/FormControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@ export const styles = {
* </FormControl>
* ```
*
* ⚠️Only one input can be used within a FormControl.
* ⚠️ Only one `InputBase` can be used within a FormControl because it create visual inconsistencies.
* For instance, only one input can be focused at the same time, the state shouldn't be shared.
*/
const FormControl = React.forwardRef(function FormControl(props, ref) {
const {
Expand Down Expand Up @@ -134,9 +135,8 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
if (registeredInput.current) {
console.error(
[
'Material-UI: There are multiple InputBase components inside a FormControl.',
'This is not supported. It might cause infinite rendering loops.',
'Only use one InputBase.',
'Material-UI: There are multiple `InputBase` components inside a FormControl.',
'This creates visual inconsistencies, only use one `InputBase`.',
].join('\n'),
);
}
Expand Down
4 changes: 3 additions & 1 deletion packages/material-ui/src/InputBase/InputBase.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -499,7 +499,9 @@ describe('<InputBase />', () => {
</div>
</FormControl>,
);
}).toErrorDev('Material-UI: There are multiple InputBase components inside a FormControl.');
}).toErrorDev(
'Material-UI: There are multiple `InputBase` components inside a FormControl.\nThis creates visual inconsistencies, only use one `InputBase`.',
);
});

it('should not warn if only one input is rendered', () => {
Expand Down