[TextField][material-next] Add FormLabel and InputLabel components #39483
Conversation
mj12albert
added
component: text field
Netlify deploy previewhttps://deploy-preview-39483--material-ui.netlify.app/ @mui/material-next: parsed: +0.42% , gzip: +0.41% Bundle size reportDetails of bundle changes (Toolpad) |
mj12albert
force-pushed
the
material-next/form-label
branch
3 times, most recently
from
b5b5dc7 to
ebd1433
Compare
mj12albert
force-pushed
the
material-next/form-label
branch
2 times, most recently
from
9c5d50d to
7af9d6c
Compare
mj12albert
changed the title
mj12albert
force-pushed
the
material-next/form-label
branch
3 times, most recently
from
8444c6e to
4e69fca
Compare
mj12albert
force-pushed
the
material-next/form-label
branch
5 times, most recently
from
7ba3c66 to
070f057
Compare
This reverts commit b44b03e.
mj12albert
force-pushed
the
material-next/form-label
branch
from
070f057 to
2e4f9b0
Compare
| color: | ||
| 'color-mix(in srgb, var(--md-comp-form-label-disabled-color), transparent calc(var(--md-comp-form-label-disabled-opacity) * 100%))', |
There was a problem hiding this comment.
From: https://una.im/color-mix-opacity/
A neat trick using color-mix to adjust the opacity of color ✨
There was a problem hiding this comment.
👏🏼 also using this in the Chip component. It's very useful for Material You's styles.
| @@ -243,7 +249,7 @@ InputLabel.propTypes /* remove-proptypes */ = { | |||
| /** | |||
| * The variant to use. | |||
| */ | |||
| variant: PropTypes.oneOf(['filled', 'outlined', 'standard']), | |||
| }; | |||
| variant: PropTypes.oneOf(['filled', 'outlined']), | |||
There was a problem hiding this comment.
Probably not in this PR, but we should remember to add the removal of the standard variants on the migration guide.
There was a problem hiding this comment.
Added it anyway for now, even though it's just copy-pasta from FilledInput but we can reorganize the content later when there's more components ~
Co-authored-by: Diego Andai <[email protected]> Signed-off-by: Albert Yu <[email protected]>
Asked @zanivan for a review 🙏 (PS I'm planning to do the layout change involving the InputAdornment when integrating InputAdornment #39628 (comment)) |
|
Hey @mj12albert it looks great! Just some clarifying questions:
If so, the filled variants look good, and as I see, it matches perfectly the tokens from MD3 :) |
@zanivan Yes and yes ~ I plan to assemble only the filled I will do the changes related to the adornment in the InputAdornment PR, if I spotted this change sooner I would have done the adornment first but either way will work out ok 😬 |
Part of #38374
Closes #39512
This PR refactors
FormLabelandInputLabelformaterial-next, I included both as they integrate directly together to make some visible progress on the experiments page ~material-next-filled-form-label.mov