[Joy][docs] Add documentation for `Input` component

[hbjORbj]

• [x] I have followed (at least) the PR section of the contributing guide.

As we are progressing towards removing TextField from Joy UI (https://github.com/mui/material-ui/pull/35462) (https://github.com/mui/material-ui/issues/34176), documentation for Input component has become essential.

Preview: https://deploy-preview-35482--material-ui.netlify.app/joy-ui/react-input

[mui-bot]

	Messages
:book:	Netlify deploy preview: https://deploy-preview-35482--material-ui.netlify.app/

No bundle size changes

Generated by :no_entry_sign: dangerJS against 9230e2e019f6c5c145e4104537f1205527bfe6cc

[hbjORbj]

@siriwatknp I restructured the docs, polished and added a common example "newsletter subscription", inspired by https://dribbble.com/shots/14442751-Newsletter-Subscribe-Animation; Let me know!

[siriwatknp]

@siriwatknp I restructured the docs, polished and added a common example "newsletter subscription", inspired by https://dribbble.com/shots/14442751-Newsletter-Subscribe-Animation; Let me know!

Thanks, @hbjORbj. After seeing the subscription demo, I think the input deserves to have a CSS variables playground to help developers create their own version of Input.

Here is the list of variables that should be in the playground.

• --Input-radius
• --Input-gap
• --Input-placeholderOpacity
• --Input-focusedThickness
• --Input-minHeight
• --Input-paddingInline
• --Input-decorator-childHeight

The input preview should have:

• placeholder
• an icon as the start decorator
• a button (or icon button) as the end decorator

[hbjORbj]

Hey, Jun, I added CSS variable playground. Opacity can't be in px, so I made some changes to JoyVariablesDemo.tsx. e.g.,

index 8ef657dc55..861acb8320 100644
--- a/docs/src/modules/components/JoyVariablesDemo.tsx
+++ b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -15,11 +15,11 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 
 interface DataItem {
   var: string;
-  defaultValue?: string;
+  defaultValue?: string | number;
   helperText?: string;
 }

I wanted to make the stepper to increment/decrement by 0.1 but I couldn't find where that stepper is coming from. I found that it disappears when I remove type='number' from TextField, but couldn't locate the logic in the behind-the-scenes. Can you help?

[siriwatknp]

Hey, Jun, I added CSS variable playground. Opacity can't be in px, so I made some changes to JoyVariablesDemo.tsx. e.g.,

index 8ef657dc55..861acb8320 100644
--- a/docs/src/modules/components/JoyVariablesDemo.tsx
+++ b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -15,11 +15,11 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 
 interface DataItem {
   var: string;
-  defaultValue?: string;
+  defaultValue?: string | number;
   helperText?: string;
 }

I wanted to make the stepper to increment/decrement by 0.1 but I couldn't find where that stepper is coming from. I found that it disappears when I remove type='number' from TextField, but couldn't locate the logic in the behind-the-scenes. Can you help?

It is the native HTML input attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step.

[hbjORbj]

Made some improvements to JoyVariablesDemo.tsx. DataItem now has an extra prop inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>; e.g.,

        {
          var: '--Input-placeholderOpacity',
          defaultValue: 0.5,
          inputAttributes: {
            min: 0.1,
            max: 1,
            step: 0.1,
          },
        },

Inner HTML input demo is ready as well.