[Dialog] Add a css property for controlling background color

macandcheese commented 2 months ago

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Description

As part of the migration story from Modal -> Dialog, users are currently unable to replicate the --calcite-modal-background-color functionality in Dialog.

Acceptance Criteria

While we plan to add support for this as part of the larger effort in #7180 - currently users cannot migrate from Modal to Dialog and persist their existing design. I'd expect this to be --calcite-dialog-background-color

Relevant Info

Dialog will of course get the "full token treatment" when that lands, but this could be a way to ease the migration issue in the meantime. We should use the same name we expect to use as part of #7180 to ensure no breaking changes occur when that lands.

Which Component

Dialog

Example Use Case

As a user, I want to set the background color of the Dialog via css property.

Priority impact

impact - p1 - need for current milestone

Calcite package

[ ] @esri/calcite-components
[ ] @esri/calcite-components-angular
[ ] @esri/calcite-components-react
[ ] @esri/calcite-design-tokens
[ ] @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

doreenbrinkman commented 2 months ago

Currently converting CalciteModal to CalciteDialog components to make use of the new alerts slot for Data Pipelines and we need to maintain the same visual design as the CalciteModal for now. The content background color is grey and cannot be changed. Adding --calcite-dialog-background-color will help with the migration. Thanks.

abigailmbravo-uxuidev commented 2 months ago

+1 needed for ArcGIS Online

abp6318 commented 1 month ago

+1 needed for ArcGIS Hub as well

allyshah commented 1 month ago

+1 for ArcGIS Dashboards

ashishgodbole commented 1 month ago

+1 for Dialog. We seem to still be using Modals with white bkg in Web Editor haha. Btw, do we have this for other containers like panels, sheets, pages, etc. Imo this is partly calcite enhancement, and partly us designers better aligning on visual consistency in pattern usage.