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

[mj12albert]

Resolves #37069, Resolves #36550, Resolves #39427

This PR enables users to more easily customize the maxWidth of a TextField's label based on it's focused state to control truncation of the label

The before/after end result look same, but after this fix you are no longer required to manually add a focused state to achieve the customization, and it can be done in the theme

Before: https://codesandbox.io/s/https-github-com-mui-material-ui-issues-39427-vx2gvd?file=/demo.tsx

After: https://codesandbox.io/s/https-github-com-mui-material-ui-pull-39470-y7gr8x

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 629cb06

[mj12albert]

Apparently color isn't the best property to use here as it's the one property that has a specificity conflict with FormLabel: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/FormLabel/FormLabel.js#L47-L49

[DiegoAndai]

Nice addition 🎉

[mj12albert]

Ported to v6 in #39483

[MelDommer]

It still looks a bit odd when you enter something into the field then tab to the next, the label then shrinks. It would be good to keep the - 0 if the field has a value.

I played around with the sandbox demo you made and figured out if you check the formControl.filled you can keep the full label up top when it is not focused. Since the only time you really want to shrink is when the label moves back down into the placeholder area.

Hope this helps anyone else that finds this PR

components: {
    MuiInputLabel: {
      styleOverrides: {
        root: (props: any) => {
          const hasValue = props.ownerState.formControl?.filled === true; // filled or not
          return {
            maxWidth: `calc(100% - ${props.ownerState.focused || hasValue ? 0 : 48}px)`,
          };
        },
      },
    },
  },