search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.86k stars 1.82k forks source link

[Bug]: <Tag type=outline /> background-color is incorrect on Layer 1/2/3 #16189

Open justindm234 opened 7 months ago

justindm234 commented 7 months ago

Package

@carbon/react

Browser

Chrome

Package version

1.55.0

React version

18.2.0

Description

When rendered on Layer 1, 2, or 3, the background color of a Tag with type=outline is incorrect. The background color is --cds-background instead of --cds-layer.

Reproduction/example

https://stackblitz.com/edit/github-srfy1t-qa1mdh?file=src%2FApp.jsx

image

Steps to reproduce

Render a Tag with type=outline on layer 1, 2, or 3

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

IBM Z Hardware Management Console

Code of Conduct

tay1orjones commented 7 months ago

I'm not sure if this is intentional or not. @carbon-design-system/design could you weigh in?

laurenmrice commented 7 months ago

Recently we have been doing a lot of work on revamping our tag component and adding new variants. I am thinking we should change the enabled background color to be transparent if it is being used on$background in some cases, and being used on different $layer sets. I actually did expect the outline tag to have a "hollow" background effect.

Using transparent as the background for outline tag, will also help differentiate it from a Selectable tag variant which was recently added to the system and uses $layer. I will create a spec exploration to make sure this works correctly.