[InputLabel] Add missing component type

[sai6855]

It fixes comment #35724 (comment)

working preview: https://codesandbox.io/s/confident-ramanujan-tj1f0t?file=/demo.tsx

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

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35852--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 357c222

[sai6855]

@ZeeshanTamboli can you please review this PR

[ZeeshanTamboli]

Please add a TypeScript test case by creating a file named InputLabel.spec.tsx.

[ZeeshanTamboli]

I wonder that we can simply add component type in the InputLabelProps interface:

--- a/packages/mui-material/src/InputLabel/InputLabel.d.ts
+++ b/packages/mui-material/src/InputLabel/InputLabel.d.ts
@@ -18,6 +18,11 @@ export interface InputLabelProps extends StandardProps<FormLabelProps> {
    */
   classes?: Partial<InputLabelClasses>;
   color?: FormLabelProps['color'];
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component?: React.ElementType;
   /**
    * If `true`, the transition animation is disabled.
    * @default false

and that would be enough instead of having all these type wrappers.

[sai6855]

I wonder that we can simply add component type in the InputLabelProps interface:

--- a/packages/mui-material/src/InputLabel/InputLabel.d.ts
+++ b/packages/mui-material/src/InputLabel/InputLabel.d.ts
@@ -18,6 +18,11 @@ export interface InputLabelProps extends StandardProps<FormLabelProps> {
    */
   classes?: Partial<InputLabelClasses>;
   color?: FormLabelProps['color'];
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component?: React.ElementType;
   /**
    * If `true`, the transition animation is disabled.
    * @default false

and that would be enough instead of having all these type wrappers.

Then i think following test would fail and it is expected to pass.

https://github.com/mui/material-ui/pull/35852/files#diff-f5beb3d0a6cd307137bc2c29e830648a962b649fb44ea6b0221f9d0360f8cadaR18

[ZeeshanTamboli]

I wonder that we can simply add component type in the InputLabelProps interface:

--- a/packages/mui-material/src/InputLabel/InputLabel.d.ts
+++ b/packages/mui-material/src/InputLabel/InputLabel.d.ts
@@ -18,6 +18,11 @@ export interface InputLabelProps extends StandardProps<FormLabelProps> {
    */
   classes?: Partial<InputLabelClasses>;
   color?: FormLabelProps['color'];
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component?: React.ElementType;
   /**
    * If `true`, the transition animation is disabled.
    * @default false

and that would be enough instead of having all these type wrappers.

Then i think following test would fail and it is expected to pass.

https://github.com/mui/material-ui/pull/35852/files#diff-f5beb3d0a6cd307137bc2c29e830648a962b649fb44ea6b0221f9d0360f8cadaR18

Oh yes. Thanks for the test. 👍 We need to get props of the component if component={Component} is used.

[ZeeshanTamboli]

@sai6855 This works well 👍. But because InputLabel inherits FormLabel component, I realised that we need to extend the types with the Extend keyword as per convention.

For this, as an example, you can refer to the Button component types in Button.d.ts file, where the Button component inherits ButtonBase component. You can take a look at other components as well, where one component inherits another. I am sorry; I should have said it earlier.

[sai6855]

@sai6855 This works well 👍. But because InputLabel inherits FormLabel component, I realised that we need to extend the types with the Extend keyword as per convention.

For this, as an example, you can refer to the Button component types in Button.d.ts file, where the Button component inherits ButtonBase component. You can take a look at other components as well, where one component inherits another. I am sorry; I should have said it earlier.

Ah okay, i didn't noticed there is already a convention for this use-case. As suggested migrated code as per existing convention.

https://github.com/mui/material-ui/pull/35852/files#diff-40c72c413c58d6ccab3754f4c54a76b05d428fffc892c85f66bae5b290934912R75-R79

[ZeeshanTamboli]

Looks good to me! Thanks @sai6855 for your contribution.