Extra space between the input label in shrink mode and border

[slim-hmidi]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I'm using an outlined textField and I changed the font-size to 12px for the label in the shrink mode:

* as React from "react";
import TextField from "@mui/material/TextField";
import { createTheme } from "@mui/material/styles";
import createStyled from "@mui/system/createStyled";
import type { TextFieldProps } from "@mui/material/TextField";

const defaultTheme = createTheme({});
const styled = createStyled({ defaultTheme });

const CustomTextField = styled(TextField)<TextFieldProps>(
  ({ theme, size }) => ({
    "& .MuiOutlinedInput-root": {
      height: size === "small" ? theme.spacing(5) : theme.spacing(6)
    },
    "& .MuiInputLabel-root": {
      transform: "translate(14px, 8px) scale(1)"
    },
   "& .MuiInputLabel-shrink": {
      transform: "translate(12px, -9px) scale(0.75)",
      fontSize: "12px",
      fontWeight: 500,
      letterSpacing: 0.6,
      lineHeight: '20px',
      "&.MuiInputLabel-sizeSmall": {
        transform: "translate(12px, -9px) scale(0.75)"
      }
    }
  })
);

export default function BasicTextFields() {
  return (
    <CustomTextField
      id="outlined-basic"
      label="long"
      variant="outlined"
      size="medium"
      InputLabelProps={{ shrink: true }}
    />
  );
}

I got extra space between the label and border

Expected behavior 🤔

The margin between the input label and the border should not be huge.

Steps to reproduce 🕹

Steps:

Check this example on https://codesandbox.io/s/basictextfields-material-demo-forked-zp0mnn?file=/demo.tsx:680-967

Context 🔦

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.4
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Edge: Not Found
    Firefox: 99.0
    Safari: 15.5
  npmPackages:
    @emotion/react: 11.9.0 => 11.9.0 
    @emotion/styled: 11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.81 
    @mui/icons-material: 5.8.0 => 5.8.0 
    @mui/material: 5.8.0 => 5.8.0 
    @mui/private-theming:  5.8.0 
    @mui/styled-engine:  5.8.0 
    @mui/system: 5.8.0 => 5.8.0 
    @mui/types:  7.1.3 
    @mui/utils:  5.8.0 
    @types/react: 18.0.9 => 18.0.9 
    react: 18.1.0 => 18.1.0 
    react-dom: 18.1.0 => 18.1.0 
    typescript: 4.6.4 => 4.6.4 

[siriwatknp]

I recommend not using CSS scale(0.x) when the label shrinks. This is because the outlined input contains a hidden label to reserve the space when the actual label shrinks. Instead, uses font-size to control the size of the label and applies to the fieldset as well.

Here is an example: https://codesandbox.io/s/basictextfields-material-demo-forked-16wqj1?file=/demo.tsx

The hidden label is in the fieldset element.