[Badge] showZero and invisible confusion

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The Badge showZero property is tightly coupled with the invisible property. It is stated that the invisible property is a boolean but in order to use the showZero property, the invisible property must be null. Either documentation may be improved on the invisible and showZero properties to clarify the behavior or a fix may be done in the Badge to handle the showZero when invisible is not true.

if (
    invisibleProp !== true &&
    ((badgeContentProp === 0 && !showZero) || (badgeContentProp == null && variantProp !== 'dot'))
  ) {
    invisible = true;
  }

Expected behavior 🤔

The showZero should work as expected when the invisible is false.

Steps to reproduce 🕹

Steps:

1. Use a Badge with the invisible at null
2. Set badgeContent at 0
3. Validate the badge is not visible
4. Set the invisible to false
5. Validate the badge is still visible

Here is a CodeSandbox.

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

I am using Chrome.

  System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE        
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.18.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 97.0.4692.71
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.69)
  npmPackages:
    @emotion/styled:  10.3.0
    @mui/base:  5.0.0-alpha.64
    @mui/icons-material: 5.3.1 => 5.2.5
    @mui/lab: 5.0.0-alpha.66 => 5.0.0-alpha.64
    @mui/material: 5.3.1 => 5.2.8
    @mui/private-theming:  5.2.3
    @mui/styled-engine: 5.3.0 => 5.2.6
    @mui/styles: 5.3.0 => 5.2.3
    @mui/system:  5.2.8
    @mui/types:  7.1.0
    @mui/utils:  5.2.3
    @types/react:  17.0.38
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    styled-components: 5.3.3 => 5.3.3
    typescript:  3.9.10

[hbjORbj]

@alisasanib Of course. Please go ahead and request a review from me!

[alisasanib]

@hbjORbj May I work on this issue? I think I’ve fixed the issue and I’m working on the tests.