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

[Select] Remove labelWidth prop #22799

Closed
2 tasks done
Nipodemos opened this issue Sep 29, 2020 · 4 comments · Fixed by #26026
Closed
2 tasks done

[Select] Remove labelWidth prop #22799

Nipodemos opened this issue Sep 29, 2020 · 4 comments · Fixed by #26026
Assignees
@eps1lon
Labels
breaking change component: select This is the name of the generic UI component, not the React module!
Milestone
v5-beta

Comments

@Nipodemos
Copy link

Nipodemos commented Sep 29, 2020 •
edited
Loading

I am trying to use the Select component, however when I set the label to be shrinked by default, it has a strike though. It is not respecting labelWidth not label nor anything

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When select label component is set to shrink by default, the line remains there instead of give space for the label.
image

Expected Behavior 🤔

If it is shrinked by default, it should not have the strike through

Steps to Reproduce 🕹

https://codesandbox.io/s/heuristic-kepler-vdhml?file=/src/App.js

Steps:

  1. Just open the codesandbox code and you will see the problem

Context 🔦

The design of the website demands that I have a label shrinked and a placeholder on the empty input

Your Environment 🌎

Tech Version
Material-UI v4.11.0
React 16.13.1
Browser Chrome
TypeScript no
@Nipodemos Nipodemos added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 29, 2020
@eps1lon eps1lon added component: select This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 29, 2020
@eps1lon eps1lon added this to the v5 milestone Sep 29, 2020
@eps1lon eps1lon self-assigned this Sep 29, 2020
@eps1lon
Copy link
Member

eps1lon commented Sep 29, 2020

We'll probably fix this by introducing a dedicated component for this pattern: #21782

Until then <Select label="Age" notched> should do.

@oliviertassinari oliviertassinari added the support: question Community support but can be turned into an improvement label Sep 29, 2020
@Nipodemos
Copy link
Author

Thank you very much for the tip!

@oliviertassinari
Copy link
Member

It is not respecting labelWidth

@eps1lon What do you think about dropping this prop? From what I understand, we do no longer need it since we have refactored NotchedOutline.js to no longer depend on layout measurements.

@mbrookes mbrookes changed the title Select input has a strike through on label when the default state is shrinked [Select] Input has no notch when the default state is shrunk Oct 3, 2020
@oliviertassinari oliviertassinari added breaking change and removed support: question Community support but can be turned into an improvement labels Oct 6, 2020
@oliviertassinari oliviertassinari changed the title [Select] Input has no notch when the default state is shrunk [Select] Remove labelWidth prop Oct 6, 2020
This was referenced Jan 24, 2021
Merged
Closed
@oliviertassinari
Copy link
Member

Done by @m4theushw in #26026.

@oliviertassinari oliviertassinari mentioned this issue May 8, 2021
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@eps1lon eps1lon

Labels
breaking change component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
v5-beta
Development

Successfully merging a pull request may close this issue.

[Select] Remove labelWidth prop m4theushw/material-ui
3 participants
@oliviertassinari @Nipodemos @eps1lon