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.

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

Make input width consistent by default #9686

Closed
wants to merge 4 commits into from
Closed

Make input width consistent by default #9686

wants to merge 4 commits into from

Conversation

fzaninotto
Copy link
Member

@fzaninotto fzaninotto commented Feb 27, 2024

Problem

MUI doesn't defaine a consistent input width, and neither do we. As a consequence, forms mixing various input types don't show a proper alignment by default.

See this story for an illustration. Refs #8796.

Solution

Define a minimum input width in each themes.

Before After
image image

The story has been updated to let the user test all existing themes, as well as an empty theme (default MUI) and a compat theme (to get the same input widths as in react-admin v4)

@fzaninotto
Copy link
Member Author

After thinking it through, I think the hassle isn't worth the benefit. Users will wonder why setting a custom width doesn't shrink an input. And if they worry about the alignment problem, it's easy enough to solve.

I think we should only document the 2 techniques for sizing inputs:

  1. make all inputs fullWidth, and lay them out using a layout component (Grid or Stack)
  2. Alter the theme to add a minWidth

@fzaninotto
Copy link
Member Author

So after discussion with the rest of the core team, we won't move forward with a default minWidth for inputs as it would cause too much problems with custom (short) widths.

So I'm closing this PR.

@fzaninotto fzaninotto closed this Feb 29, 2024
@fzaninotto fzaninotto deleted the input-width branch June 20, 2024 08:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant