Expose the width scaling on shrunk outlined input legends

[Tamakimouto]

I'm trying to do what this person was trying to do: #14053, change the scaling for shrunk labels on the outlined inputs. But there seems to be this bit that's always assuming the scaling is 0.75

if (variant === 'outlined') {
      if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
        InputMore.notched = InputLabelProps.shrink;
      }

      InputMore.labelWidth = this.labelNode ? this.labelNode.offsetWidth * 0.75 + 8 : 0;
}

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

There doesn't seem to be a way to change the legend width to reciprocate with the new label size.

You can do something like font-size: calc(x / 0.75) on shrink override as a workaround, but maybe this is something worth looking into. And even with the workaround, you'd have to keep track of the label width with anything that replaces the Input component.

[oliviertassinari]

@Tamakimouto There is one way I can think of with CSS variables:

.PrivateNotchedOutline-legend-335 {
  width: calc(8px + var(--label-width) * 0.75);
  --label-width: 93px;
}

The problem is that not all the browsers we are supporting have CSS variables built-in, so we can't use it internally. However, we could apply the label width as a CSS variable. Then, you could override the inline style:

.MuiOutlinedInput-root legend {
  width: calc(8px + var(--label-width) * 0.75) !important;
}

Would this solution work for you? Otherwise, the solution is to expose a prop for the width function.

[Tamakimouto]

Unfortunately I can't use CSS variables for that same reason, namely IE. I can get around the problem by manually controlling the label width for now.

[oliviertassinari]

@Tamakimouto Could you share a codesandbox that reproduces the problem? I believe we could support a labelFactor (0.75 by default) and labelSpacing (8 by default) props.

[LeviWB]

My workaround for this in the meantime was to set a background color on the label (e.g. white). The background colour hides the overlap of the label and the field border.

[junjettrasmonte]

@LeviWB Thank you! solution below as per Levi's suggestion.

import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
  root:{
    '& label.MuiFormLabel-root':{
      backgroundColor: '#fff',
      marginLeft: '-5px',
      padding: '0 6px',
    }
  }
}))

const Component= () => {
  const classes = useStyles()
  return (
      <div className={classes.root}>
            <TextField
              id="id"
              value={value}
              label="label"
              InputLabelProps={{
                shrink: true,
              }}
              margin="normal"
              variant="outlined"
              fullWidth
            />
    </div>
)

export default Component

[oliviertassinari]

Solved in #17680, question answered in #19952.

[NathanHealea]

@oliviertassinari,

Maybe I'm missing something, but I attempted implementing #19952 with not change.

As you can see .MuiInputLabel-outlined.MuiInputLabel-shrink still takes the default values, and not the values I'm specifying transform: "translate(14px, -6px) scale(2)"

Here is a codepen with my attempt: https://codesandbox.io/s/fast-cache-yg6cf

[oliviertassinari]

See #19952.