[Input][material-next] Add InputBase component #38392
Conversation
mj12albert
added
v6.x
component: input
Netlify deploy previewhttps://deploy-preview-38392--material-ui.netlify.app/ @mui/material-next: parsed: +2.55% , gzip: +1.53% Bundle size reportDetails of bundle changes (Toolpad) |
mj12albert
force-pushed
the
material-next/input-base
branch
8 times, most recently
from
f2b6c70
to
daca6d3
Compare
mj12albert
force-pushed
the
material-next/input-base
branch
2 times, most recently
from
4d635cd
to
b6818bc
Compare
| @@ -20,4 +22,29 @@ describe('useInput', () => { | |||
| expect(inputRef.current).to.deep.equal(getByRole('textbox')); | |||
| }); | |||
| }); | |||
|
|
|||
| describe('prop: disabled', () => { | |||
| it('should reset the focused state if getting disabled', () => { | |||
There was a problem hiding this comment.
The code related to this used to be in InputBase here but it's now implemented in useInput, so I figure it's probably better to test it here? @michaldudak
There was a problem hiding this comment.
Yeah, let's test the hooks extensively so that other products can just assume they work correctly and focus on testing only the additional functionality they provide.
There was a problem hiding this comment.
Sounds good – I'll add a task to port additional relevant tests to Base in the issue
mj12albert
force-pushed
the
material-next/input-base
branch
from
b6818bc
to
86f8244
Compare
mj12albert
force-pushed
the
material-next/input-base
branch
3 times, most recently
from
f4e1e12
to
8468f94
Compare
mj12albert
force-pushed
the
material-next/input-base
branch
from
8468f94
to
c31c0a5
Compare
Co-authored-by: Diego Andai <[email protected]> Signed-off-by: Albert Yu <[email protected]>
| const [flag, setFlag] = React.useState(true); | ||
|
|
||
| return ( | ||
| <FormControl> |
There was a problem hiding this comment.
Was this removed due to the use of FormControl? Or the use of Select? Or is there another reason?
There was a problem hiding this comment.
It's because of Select, but now I'm wondering if this test should be moved to FormControl.test instead
"toggling between inputs (inside a FormControl)" could still be a valid case even the select prop on TextField is dropped in favor of a SelectField component (#21782)
What do you think? @DiegoAndai
There was a problem hiding this comment.
I thought the same; we should move it to FormControl.test when we migrate it. It's okay to remove it here, but let's write it down somewhere so we remember to bring it back later.
There was a problem hiding this comment.
👍 I've added it as a task to #38411
There was a problem hiding this comment.
This looks ready for me, let's ask @michaldudak @mnajdova if they wish to review it before merging.
Nice work 🎉
|
Is there a doc page for this component to see what it looks like? If not, I will merge it. |
Signed-off-by: Siriwat K <[email protected]>
@siriwatknp Thanks for checking this ~ I think for |
Part of #38372
This PR ports
InputBasefrom Material UI tomaterial-next, converts it to TypeScript, and replaces as much functionality as possible with Base UI'suseInput.Additionally:
inputComponent,inputProps,components, andcomponentsPropsare dropped, related features and tests are refactored to useslots/slotPropsFormControlintegration and related tests are skipped in this PR, I think this is as far as we can get withInputBasewithout it