material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

[joy-ui][Radio] Can't use a checked icon/unchecked icon when setting a background color

Open rsslldnphy opened this issue 1 year ago • 1 comments

Steps to reproduce

Link to live example: (required)

Steps:

  1. Create a radio group that contains radios with disableIcon set and slotProps that change the background color of the action component when the radio is checked. e.g. This example from the docs
  2. See that it's possible to select the different options, the background color changes, and the label text is still visible.
  3. Remove the disableIcon prop and pass a checkedIcon and/or uncheckedIcon prop with a random icon from @mui/icons-material.
  4. See that the background color of a selected radio hides the icon and label.

Current behavior

The label and icon are hidden when the option is selected.

https://github.com/mui/material-ui/assets/1231200/59b99689-359f-4921-9963-18de4f04b017

Expected behavior

The label and icon should remain visible when the option is selected.

Context

Create a radio button group with options that change background color when selected and include icons.

Your environment

npx @mui/envinfo
System:
    OS: macOS 14.4.1
  Binaries:
    Node: 21.7.3 - ~/.asdf/installs/nodejs/21.7.3/bin/node
    npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.0.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.62
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/joy: 5.0.0-beta.36 => 5.0.0-beta.36 
    @mui/material: ^5.15.15 => 5.15.15 
    @types/react: ^18.2.79 => 18.2.79 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.4.5 => 5.4.5 

Tested in Chrome, Safari, and Firefox

Search keywords: radio background color icon

rsslldnphy avatar Apr 24 '24 13:04 rsslldnphy

Just to note, I'm trying to create an uncontrolled component so I am unable (as far as I cant tell) to do anything programmatically based on the inputs value (unless I guess I use a ref?)

rsslldnphy avatar Apr 24 '24 13:04 rsslldnphy

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI

siriwatknp avatar Aug 21 '24 10:08 siriwatknp