[Input][material-next] Add InputBase component #38392

mj12albert · 2023-08-09T10:58:21Z

This PR ports InputBase from Material UI to material-next, converts it to TypeScript, and replaces as much functionality as possible with Base UI's useInput.

Additionally:

Styles are changed to consume MD3 tokens from CssVarsProvider (though all the styles are style resets)
inputComponent, inputProps, components, and componentsProps are dropped, related features and tests are refactored to use slots/slotProps
FormControl integration and related tests are skipped in this PR, I think this is as far as we can get with InputBase without it

mui-bot · 2023-08-09T11:01:17Z

Netlify deploy preview

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

@mui/material-next: parsed: +2.55% , gzip: +1.53%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against b0c11a2

mj12albert · 2023-08-11T09:26:13Z

packages/mui-base/src/useInput/useInput.test.tsx

@@ -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', () => {


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

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.

Sounds good – I'll add a task to port additional relevant tests to Base in the issue

packages/mui-base/src/useInput/useInput.types.ts

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

packages/mui-material-next/src/InputBase/utils.ts

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

packages/mui-base/src/useInput/useInput.types.ts

Co-authored-by: Diego Andai <[email protected]> Signed-off-by: Albert Yu <[email protected]>

DiegoAndai

Looks good to me! Only have two questions regarding the test file

DiegoAndai · 2023-08-15T20:23:12Z

packages/mui-material-next/src/InputBase/InputBase.test.js

-          const [flag, setFlag] = React.useState(true);
-
-          return (
-            <FormControl>


Was this removed due to the use of FormControl? Or the use of Select? Or is there another reason?

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

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.

👍 I've added it as a task to #38411

packages/mui-material-next/src/InputBase/InputBase.test.js

DiegoAndai

This looks ready for me, let's ask @michaldudak @mnajdova if they wish to review it before merging.

Nice work 🎉

siriwatknp · 2023-08-22T09:47:26Z

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]>

mj12albert · 2023-08-22T09:53:23Z

Is there a doc page for this component to see what it looks like? If not, I will merge it.

@siriwatknp Thanks for checking this ~ I think for material-next there are no docs yet besides migration.md

mj12albert added v6.x component: input labels Aug 9, 2023

mj12albert force-pushed the material-next/input-base branch 8 times, most recently from f2b6c70 to daca6d3 Compare August 10, 2023 15:51

mj12albert mentioned this pull request Aug 11, 2023

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

Closed

11 tasks

mj12albert force-pushed the material-next/input-base branch 2 times, most recently from 4d635cd to b6818bc Compare August 11, 2023 09:11

mj12albert commented Aug 11, 2023

View reviewed changes

mj12albert marked this pull request as ready for review August 11, 2023 09:26

mj12albert requested review from DiegoAndai and mnajdova August 11, 2023 09:26

mj12albert force-pushed the material-next/input-base branch from b6818bc to 86f8244 Compare August 11, 2023 11:33

DiegoAndai reviewed Aug 11, 2023

View reviewed changes

mj12albert force-pushed the material-next/input-base branch 3 times, most recently from f4e1e12 to 8468f94 Compare August 14, 2023 06:50

mj12albert added 7 commits August 14, 2023 17:29

Copy InputBase from mui-material

74e9a80

Drop Select related tests

6df8dae

Refactor with useInput and TS

9278d35

Add a test to useInput

24faddc

Update proptypes

7830eb6

Convert utils to TS

712a42a

Fix spec

2007eab

mj12albert added 6 commits August 14, 2023 17:29

Update tests

216a13a

Update comments

e176eaf

Use CssVarsProvider

09f60b3

Update comments

337d811

Update types

abb0b06

Update event handler and ref types

c31c0a5

mj12albert force-pushed the material-next/input-base branch from 8468f94 to c31c0a5 Compare August 14, 2023 09:30

mj12albert requested a review from DiegoAndai August 14, 2023 10:46

DiegoAndai reviewed Aug 14, 2023

View reviewed changes

packages/mui-base/src/useInput/useInput.types.ts Outdated Show resolved Hide resolved

DiegoAndai mentioned this pull request Aug 14, 2023

[useButton][base-ui] Accept arbitrary props in getRootProps and forward them #38475

Merged

1 task

mj12albert and others added 3 commits August 15, 2023 01:47

Update packages/mui-base/src/useInput/useInput.types.ts

afa6179

Co-authored-by: Diego Andai <[email protected]> Signed-off-by: Albert Yu <[email protected]>

Update TextareaAutosize ownerState workaround

876018e

Update api docs

4db4090

mj12albert mentioned this pull request Aug 14, 2023

[FormControl][material-next] Add FormControl component #38411

Closed

9 tasks

DiegoAndai reviewed Aug 15, 2023

View reviewed changes

Add back Select as endAdornment test

6f4ba46

DiegoAndai approved these changes Aug 16, 2023

View reviewed changes

Add migration instructions

368688e

Merge branch 'master' into material-next/input-base

b0c11a2

Signed-off-by: Siriwat K <[email protected]>

siriwatknp enabled auto-merge (squash) August 22, 2023 10:00

siriwatknp merged commit ab8f160 into mui:master Aug 22, 2023

mj12albert deleted the material-next/input-base branch August 28, 2023 07:24

mj12albert mentioned this pull request Oct 13, 2023

[InputBase] Reptitive name of Adornment props for InputBase #39420

Open

2 tasks

mj12albert mentioned this pull request Oct 24, 2023

[Input][base-ui] Update and port additional tests from material-ui #39584

Merged

1 task

mj12albert mentioned this pull request Nov 1, 2023

[FilledInput][material-next] Add FilledInput component #39052

Closed

9 tasks

DiegoAndai added v7.x and removed v6.x labels Dec 26, 2023

oliviertassinari added the component: text field This is the name of the generic UI component, not the React module! label Nov 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Input][material-next] Add InputBase component #38392

[Input][material-next] Add InputBase component #38392

mj12albert commented Aug 9, 2023 •

edited

Loading

mui-bot commented Aug 9, 2023 •

edited

Loading

mj12albert Aug 11, 2023

michaldudak Aug 11, 2023

mj12albert Aug 11, 2023

DiegoAndai left a comment

DiegoAndai Aug 15, 2023

mj12albert Aug 16, 2023 •

edited

Loading

DiegoAndai Aug 16, 2023

mj12albert Aug 16, 2023 •

edited

Loading

DiegoAndai left a comment

siriwatknp commented Aug 22, 2023 •

edited

Loading

mj12albert commented Aug 22, 2023

[Input][material-next] Add InputBase component #38392

[Input][material-next] Add InputBase component #38392

Conversation

mj12albert commented Aug 9, 2023 • edited Loading

mui-bot commented Aug 9, 2023 • edited Loading

Netlify deploy preview

Bundle size report

mj12albert Aug 11, 2023

Choose a reason for hiding this comment

michaldudak Aug 11, 2023

Choose a reason for hiding this comment

mj12albert Aug 11, 2023

Choose a reason for hiding this comment

DiegoAndai left a comment

Choose a reason for hiding this comment

DiegoAndai Aug 15, 2023

Choose a reason for hiding this comment

mj12albert Aug 16, 2023 • edited Loading

Choose a reason for hiding this comment

DiegoAndai Aug 16, 2023

Choose a reason for hiding this comment

mj12albert Aug 16, 2023 • edited Loading

Choose a reason for hiding this comment

DiegoAndai left a comment

Choose a reason for hiding this comment

siriwatknp commented Aug 22, 2023 • edited Loading

mj12albert commented Aug 22, 2023

mj12albert commented Aug 9, 2023 •

edited

Loading

mui-bot commented Aug 9, 2023 •

edited

Loading

mj12albert Aug 16, 2023 •

edited

Loading

mj12albert Aug 16, 2023 •

edited

Loading

siriwatknp commented Aug 22, 2023 •

edited

Loading