search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
280 stars 76 forks source link

Menu items/components do not get custom colors when slotted inside Navigation #8018

Open tyanthony opened 10 months ago

tyanthony commented 10 months ago

Check existing issues

Actual Behavior

When using the Navigation component with a slotted Menu/Menut Items component and setting a custom background color using the variable, the background color does not get applied to the Menu items.

Expected Behavior

Reproduction Sample

https://codepen.io/tyleranthony/pen/mdaZJqJ?editors=100

Reproduction Steps

  1. Implement a Navigation component with a Menu (and Menu Item) component slotted into the Navigation
  2. Set the --calcite-navigation-background to a different color
  3. Notice the Menu (items) do not change color (there is also no documented way to change the background color of Menus)

Reproduction Version

1.9.2

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

Esri team

ArcGIS Mission

macandcheese commented 10 months ago

Yeah, we need to leverage the new design tokens to solve some inheritance issues / allow more aspects of the component to be overridden.

Once that happens, Menu will offer more customization, or you could set the token overrides up in a way that allows it to inherit from a parent.

Currently it can be themed at the Menu level with the global css properties (https://codepen.io/mac_and_cheese/pen/dywBYOX?editors=100), but once we implement the tokens it should be better documented and easier to implement.

geospatialem commented 9 months ago

Will revisit after the efforts of https://github.com/Esri/calcite-design-system/issues/7180, where design tokens should encompass the above in a more readily available manner.