mui / mui/material-ui

Theming: Checkbox indeterminate is not being treated the same as checked/disabled

Open
#30,494 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

discussion scope: checkbox waiting for 👍
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Current behavior 😯

When overriding the indeterminate state's style, is not throwing the same warning/error message as disabled.

Example code:

  MuiCheckbox: {
    styleOverrides: {
      root: {
        '&.Mui-checked': {
          // will tell me to use this instead
          // color: 'rebeccapurple'
        },
      },
      checked: {
        // MUI will throw console error, telling devloppers to use '&.Mui-checked'
        color: 'rebeccapurple'
      },
      indeterminate: {
        color: 'rebeccapueple'
      }
    }
  }

I am greeted with a message such as

MUI: The MuiCheckbox component increases the CSS specificity of the checked internal state.

However, not for indeterminate?

Expected behavior 🤔

indeterminate should be treated the same as checked and disabled, hence should throw the same error message?

Example:

MUI: The MuiCheckbox component increases the CSS specificity of the indeterminate internal state.

The expected behavior is that all of them should behave the same, if for some reason MUI team decided that indeterminate would be treated differently, then I believe you guys should revert the same steps you guys did on the checked and disabled... the theme should override them the same ways.

Steps to reproduce 🕹

See example in Current behavior section

Context 🔦

No response

Your environment 🌎
`npx @mui/envinfo`
  System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (16) x64 Intel(R) Xeon(R) Silver 4108 CPU @ 1.80GHz
    Memory: 2.12 GB / 15.33 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 10.24.1 - ~/.config/nvm/versions/node/v10.24.1/bin/node
    Yarn: 1.22.10 - ~/.config/nvm/versions/node/v10.24.1/bin/yarn
    npm: 6.14.15 - ~/projects/gravity/ui-components/packages/ui-components/node_modules/.bin/npm
  Managers:
    Apt: 2.2.4 - /usr/bin/apt
    Maven: 3.6.3 - /usr/bin/mvn
    pip2: 20.3.4 - ~/.local/bin/pip2
    pip3: 20.3.4 - /usr/bin/pip3
  Utilities:
    Make: 4.3 - /usr/bin/make
    GCC: 10.3.0 - /usr/bin/gcc
    Git: 2.30.2 - /usr/bin/git
  Virtualization:
    Docker: 20.10.7 - /usr/bin/docker
  IDEs:
    Nano: 5.4 - /usr/bin/nano
    VSCode: 1.63.1 - /home/eto/.vscode-server/bin/fe719cd3e5825bf14e14182fddeb88ee8daf044f/bin/code
    Vim: 8.2 - /usr/bin/vim
  Languages:
    Bash: 5.1.4 - /usr/bin/bash
    Java: 1.8.0_312 - /usr/bin/javac
    Perl: 5.32.1 - /usr/bin/perl
    Python: 2.7.18 - /usr/bin/python
    Python3: 3.9.5 - /usr/bin/python3
  Browsers:
    Chrome: 96.0.4664.45
    Chromium: 96.0.4664.110
    Firefox: 95.0.1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Checkbox theme override reproduction in the issue and compare how the checked, disabled, and indeterminate states are handled. Verify the behavior against the reported console warning, and consider the work complete when indeterminate produces the same appropriate warning as the other internal states.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
40/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.