carbon

carbon copied to clipboard

Package

@carbon/styles

Browser

Chrome, Edge

Package version

V10, V11

React version

No response

Description

When putting my own tables into cells or expanded rows of a data-table, those tables are styled by Carbon CSS rules that should only style the data-table and not my content. The reason for that seems to be CSS selectors like this: https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/data-table/_data-table.scss#L95

  .#{$prefix}--data-table tbody tr:hover td,
  .#{$prefix}--data-table tbody tr:hover th {

These rules will not only style those elements that should be styled, but also their descendants, which are potentially not supposed to be styled with Carbon styles. I would suggest to rewrite these rules as sth. like:

  .#{$prefix}--data-table > tbody > tr:hover > td,
  .#{$prefix}--data-table > tbody > tr:hover > th {

Thanks in advance for considering.

Reproduction/example

https://codepen.io/berndfuhrmann/pen/abqWMzo

Steps to reproduce

• Create a data-table
• Put a table into that table

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

+1 Such CSS rules which grab unintended elements are a big problem. Thank you, @berndfuhrmann for contributing this fix. @Carbon Maintainer: Please accept his PR.

More precisely scoping these styles to prevent conflicts within your user code is a fine idea. If you'd like to suggest some changes through a PR we'd be happy to review it. I'd also like to note that this has been explored in the past with mixed results https://github.com/carbon-design-system/carbon/issues/2006, https://github.com/carbon-design-system/carbon/issues/2006

With no bug identified here, I'm going to recategorize this as a feature request.

From the Backlog grooming call:

Lots of concerns around breaking things downstream. Consumers can always use overrides. Not a priority atm.

Lots of concerns around breaking things downstream.

FYI, the very bug here is that the current situation is "breaking things downstream".

To quantify the extend of this problem: Problems with unwanted CSS rules (in general) are the number 1 problem for our project. We very often have to debug and override Carbon CSS rules. With almost every use of a Carbon component, I need to extensively override unwanted Carbon CSS rules. This has has caused many headaches and burns a lot of development time. The problem is so big that I have been actively advocating to move to another widget set, just because of the CSS.

It is sad to see that this problem is being ignored. Unwanted CSS rules are the biggest problem with Carbon right now.

Thanks for the context Ben. Perhaps we were too hasty and maybe we can revisit this conversation in the future.

@sstrubberg Thanks a lot! That is appreciated. How do we proceed with this issue? I am not allowed to re-open, and a closed issue is unlikely to be remembered.