[TextField][material-next] Add FormLabel and InputLabel components #39483

mj12albert · 2023-10-17T10:41:00Z

This PR refactors FormLabel and InputLabel for material-next, I included both as they integrate directly together to make some visible progress on the experiments page ~

material-next-filled-form-label.mov

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2023-10-17T10:44:40Z

Netlify deploy preview

https://deploy-preview-39483--material-ui.netlify.app/

@mui/material-next: parsed: +0.42% , gzip: +0.41%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 2ef3c7a

This reverts commit b44b03e.

5ad51ad

mj12albert · 2023-11-01T07:39:49Z

packages/mui-material-next/src/FormLabel/FormLabel.tsx

+      color:
+        'color-mix(in srgb, var(--md-comp-form-label-disabled-color), transparent calc(var(--md-comp-form-label-disabled-opacity) * 100%))',


From: https://una.im/color-mix-opacity/
A neat trick using color-mix to adjust the opacity of color ✨

👏🏼 also using this in the Chip component. It's very useful for Material You's styles.

DiegoAndai

Looks good to me 😄
As it has the Material You implementation, we should have someone from the design team review it from a design perspective, could you request a review from them?

packages/mui-material-next/src/InputLabel/InputLabel.types.ts

DiegoAndai · 2023-11-03T13:18:53Z

packages/mui-material-next/src/InputLabel/InputLabel.tsx

@@ -243,7 +249,7 @@ InputLabel.propTypes /* remove-proptypes */ = {
  /**
   * The variant to use.
   */
-  variant: PropTypes.oneOf(['filled', 'outlined', 'standard']),
-};
+  variant: PropTypes.oneOf(['filled', 'outlined']),


Probably not in this PR, but we should remember to add the removal of the standard variants on the migration guide.

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 <diego@mui.com> Signed-off-by: Albert Yu <albert@albertyu.co>

mj12albert · 2023-11-06T07:33:43Z

As it has the Material You implementation, we should have someone from the design team review it

Asked @zanivan for a review 🙏

(PS I'm planning to do the layout change involving the InputAdornment when integrating InputAdornment #39628 (comment))

zanivan · 2023-11-06T19:16:29Z

Hey @mj12albert it looks great!

Just some clarifying questions:

Is this PR only addressing the filled variant?
If I got it right, the adornment placing and behaviors will be addressed in a following PR, right?

If so, the filled variants look good, and as I see, it matches perfectly the tokens from MD3 :)

mj12albert · 2023-11-07T06:44:14Z

Just some clarifying questions

@zanivan Yes and yes ~ I plan to assemble only the filled TextField first before tackling outlined.

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 😬

…m-label

mj12albert added component: text field This is the name of the generic UI component, not the React module! design: material you labels Oct 17, 2023

mj12albert force-pushed the material-next/form-label branch 3 times, most recently from b5b5dc7 to ebd1433 Compare October 18, 2023 05:57

This was referenced Oct 19, 2023

[InputLabel][material-next] Add InputLabel component #39512

Closed

[material-next] Update Material You typescale tokens #39514

Merged

mj12albert force-pushed the material-next/form-label branch 2 times, most recently from 9c5d50d to 7af9d6c Compare October 24, 2023 10:33

mj12albert changed the title ~~[FormLabel][material-next] Add FormLabel component~~ [TextField][material-next] Add FormLabel and InputLabel components Oct 24, 2023

mj12albert force-pushed the material-next/form-label branch 3 times, most recently from 8444c6e to 4e69fca Compare October 26, 2023 10:20

mj12albert mentioned this pull request Oct 26, 2023

[InputBase][material-next] Add InputBase component #38372

Closed

11 tasks

mj12albert force-pushed the material-next/form-label branch 5 times, most recently from 7ba3c66 to 070f057 Compare October 31, 2023 12:43

mj12albert added 10 commits November 1, 2023 14:38

Convert FormLabel to TypeScript

1914bb0

Support slots and slotProps

fe0bf7f

Support CssVarsProvider instead of ThemeProvider

770b5ae

Implement component css vars

a497005

Fix tests

7dff629

Convert test to TS

f85efff

Update types and proptypes

920bb66

Support tertiary color

a3711b7

Fix font size

d2708d4

Update experiments page

926b9d5

mj12albert added 9 commits November 1, 2023 14:38

Fix className prop

eb07b1a

Convert test to TS

a67812d

Update proptypes

d3f4122

Update design tokens

c785a8d

Revert "Update useInput's returned inputRef to fix checkDirty on mount"

14d2ba4

This reverts commit b44b03e.

Rework inputRef handling

4309753

Revert "Fix className prop"

2fdb1c2

5ad51ad

Fix proptypes

d377d4b

Update experiments page

2e4f9b0

mj12albert force-pushed the material-next/form-label branch from 070f057 to 2e4f9b0 Compare November 1, 2023 06:38

Backfill ownerState.focused styleOverrides fix

202e558

mj12albert mentioned this pull request Nov 1, 2023

[InputLabel][material-ui] InputLabel supports ownerState.focused for styleOverrides #39470

Merged

1 task

mj12albert commented Nov 1, 2023

View reviewed changes

mj12albert marked this pull request as ready for review November 1, 2023 10:24

mj12albert requested review from mnajdova and DiegoAndai November 1, 2023 10:25

This was referenced Nov 2, 2023

[FormHelperText][material-next] Add FormHelperText component #39503

Merged

[InputAdornment][material-next] Add InputAdornment component #39722

Closed

DiegoAndai approved these changes Nov 3, 2023

View reviewed changes

Update packages/mui-material-next/src/InputLabel/InputLabel.types.ts

1604565

Co-authored-by: Diego Andai <diego@mui.com> Signed-off-by: Albert Yu <albert@albertyu.co>

mj12albert requested a review from zanivan November 6, 2023 07:30

mj12albert added 2 commits November 7, 2023 16:10

Update migration.md

81b571d

Merge remote-tracking branch 'upstream/master' into material-next/for…

23e3754

…m-label

zanivan approved these changes Nov 7, 2023

View reviewed changes

Merge remote-tracking branch 'upstream/master' into material-next/for…

2ef3c7a

…m-label

mj12albert merged commit 3bada36 into mui:master Nov 8, 2023
23 checks passed

mj12albert deleted the material-next/form-label branch November 8, 2023 06:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TextField][material-next] Add FormLabel and InputLabel components #39483

[TextField][material-next] Add FormLabel and InputLabel components #39483

mj12albert commented Oct 17, 2023 •

edited

mui-bot commented Oct 17, 2023 •

edited

mj12albert Nov 1, 2023

DiegoAndai Nov 3, 2023

DiegoAndai left a comment

DiegoAndai Nov 3, 2023

mj12albert Nov 7, 2023

mj12albert commented Nov 6, 2023

zanivan commented Nov 6, 2023

mj12albert commented Nov 7, 2023

		color:
		'color-mix(in srgb, var(--md-comp-form-label-disabled-color), transparent calc(var(--md-comp-form-label-disabled-opacity) * 100%))',

[TextField][material-next] Add FormLabel and InputLabel components #39483

[TextField][material-next] Add FormLabel and InputLabel components #39483

Conversation

mj12albert commented Oct 17, 2023 • edited

mui-bot commented Oct 17, 2023 • edited

Netlify deploy preview

Bundle size report

mj12albert Nov 1, 2023

Choose a reason for hiding this comment

DiegoAndai Nov 3, 2023

Choose a reason for hiding this comment

DiegoAndai left a comment

Choose a reason for hiding this comment

DiegoAndai Nov 3, 2023

Choose a reason for hiding this comment

mj12albert Nov 7, 2023

Choose a reason for hiding this comment

mj12albert commented Nov 6, 2023

zanivan commented Nov 6, 2023

mj12albert commented Nov 7, 2023

mj12albert commented Oct 17, 2023 •

edited

mui-bot commented Oct 17, 2023 •

edited