Package
@carbon/react
Browser
Chrome
Package version
v11.28.0
React version
18.2.0
Description
In the Carbon React Modal (https://react.carbondesignsystem.com/?path=/story/components-modal--default), the dropdown/combobox menu children have $field-01 as background-color which does not match the design spec
The background color token for the dropdown children should be $layer-02 as per he design spec
This probably needs to be updated here
|
// V11: Question for design: do we have an updated tokens for fields that exist on `layer`? |
|
.#{$prefix}--pagination, |
|
.#{$prefix}--pagination__control-buttons, |
|
.#{$prefix}--text-input, |
|
.#{$prefix}--text-area, |
|
.#{$prefix}--search-input, |
|
.#{$prefix}--select-input, |
|
.#{$prefix}--dropdown, |
|
.#{$prefix}--dropdown-list, |
|
.#{$prefix}--number input[type='number'], |
|
.#{$prefix}--date-picker__input, |
|
.#{$prefix}--multi-select, |
|
.#{$prefix}--number__control-btn::before, |
|
.#{$prefix}--number__control-btn::after { |
|
background-color: $field-02; |
|
} |
Also, just below that is the declarations for fluid inputs too, which should also be using $layer-02 there instead of $field-01
Reproduction/example
https://react.carbondesignsystem.com/?path=/story/components-modal--default
Steps to reproduce
- Go to https://react.carbondesignsystem.com/?path=/story/components-modal--default
- Open dropdown
- Notice background color of children
Suggested Severity
Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.
Application/PAL
No response
Code of Conduct
Package
@carbon/react
Browser
Chrome
Package version
v11.28.0
React version
18.2.0
Description
In the Carbon React Modal (https://react.carbondesignsystem.com/?path=/story/components-modal--default), the dropdown/combobox menu children have
$field-01asbackground-colorwhich does not match the design specThe background color token for the dropdown children should be
$layer-02as per he design specThis probably needs to be updated here
carbon/packages/styles/scss/components/modal/_modal.scss
Lines 54 to 69 in de8d41b
Also, just below that is the declarations for fluid inputs too, which should also be using
$layer-02there instead of$field-01Reproduction/example
https://react.carbondesignsystem.com/?path=/story/components-modal--default
Steps to reproduce
Suggested Severity
Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.
Application/PAL
No response
Code of Conduct