[joy-ui] FormLabel won't accept specific variant

[EnriqueWood]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

I'm trying to create a new variant to some elements in a form, and I achieved it with Sheet and Input, but I had no luck with FormLabel since it won't accept the attribute variant

Current behavior 😯

What I did for Sheet was

<Sheet variant="coordinates">
...
</Sheet>

and then

declare module '@mui/joy/Sheet' {
    interface SheetPropsVariantOverrides {
        coordinates: true
    }
}
...
extendTheme({
        components: {
           JoySheet: {
                styleOverrides: {
                    root: ({ownerState}) => ({
                        ...(
                            ownerState.variant === 'coordinates' && {
                                ...

Then I replicated the same using @mui/joy/Input and JoyInput instead of @mui/joy/Sheet and JoySheet

Expected behavior 🤔

I'd expect to do the same using

declare module '@mui/joy/FormLabel' {
    interface FormLabelPropsVariantOverrides {
        coordinates: true
    }
}
...
extendTheme({
        components: {
         JoyFormLabel: {
                styleOverrides: {
                    root: ({ownerState}) => ({
                        ...(
                            ownerState.variant === 'coordinates' && {
                                width: '100%',
                                justifyContent: 'center',
                            }),
                    }),
                },
            },

Context 🔦

I want to have declared the variant in all the components needed and be able to change it to some other later

Maybe I'm getting it wrong and It has to be done other way.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.4
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: Not Found
    npm: 8.6.0 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.5
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base:  5.0.0-alpha.125 
    @mui/core-downloads-tracker:  5.12.1 
    @mui/icons-material: ^5.11.16 => 5.11.16 
    @mui/joy: ^5.0.0-alpha.75 => 5.0.0-alpha.75 
    @mui/material: ^5.12.1 => 5.12.1 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/system:  5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.0 
    @types/react: ^18.0.35 => 18.0.35 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.5 => 4.9.5 

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

[mj12albert]

Here's a repro: https://codesandbox.io/s/joy-form-label-custom-variant-ts-error-o1tkyv?file=/index.tsx

[siriwatknp]

@EnriqueWood Thanks for opening the issue. The reason I did not add global variants to FormLabel is that it is not common for FormLabel to have a background or border.

I suggest that you create a new component like this:

import { styled } from '@mui/joy/styles';

const FormLabelCoordinate = styled(FormLabel)({
  …your styles
});

By the way, what's the design of coordinates looks like? Can you put it in a CodeSandbox, I'd love too see?

[EnriqueWood]

Thank you for the prompt response! I appreciate your help in clarifying my question.

@mj12albert, here's a fork of the repository with the changes I'd like to make: Repro

To clarify, I want to be able to render a label with the coordinates variant, which will make the input smaller and center the label right above it (there could be other aesthetic modifications in the actual use case).

@siriwatknp, currently I have to specify the sx property of every element inside the component to achieve this look, but I would like to simplify it by using the variant prop like so:

<FormLabel variant='coordinates'>A1</FormLabel>

Instead of:

<FormLabel
  sx={{
    width: '100%',
    justifyContent: 'center',
  }}
>A1</FormLabel>

This would make it easier to create a coordinates input in a form, and if I want to modify the way it looks in the future, I only have to change the specification in the extendTheme function instead of every sx property of every element inside the component. (I know this can be achieved by creating a new React element, but this is just a basic example of usage.)

And lastly, you said

The reason I did not add global variants to FormLabel is that it is not common for FormLabel to have a background or border.

That makes me think I might be misunderstanding the intended use of variants. Are they typically only meant to modify background and borders? In this case, I'm trying to achieve a modification related to element placement. Can you confirm if using a variant is still appropriate for this type of modification?

Thank you!

[siriwatknp]

Thinking again may be you are right.

Instead of deciding which component should or should not have variant, all Joy UI components have variant that might be better to communicate and is more consistent.

I mark this as an enhancement which can be done after the stable release.