Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Dialog] Add a css property for controlling background color #10093

Closed
1 of 6 tasks
Tracked by #7180
macandcheese opened this issue Aug 16, 2024 · 7 comments
Closed
1 of 6 tasks
Tracked by #7180

[Dialog] Add a css property for controlling background color #10093

macandcheese opened this issue Aug 16, 2024 · 7 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. ArcGIS Data Pipelines Issues logged by ArcGIS Data Pipelines team members. ArcGIS Hub Issues logged by ArcGIS Hub team members. ArcGIS Online Issues logged by ArcGIS Online team members. Calcite (design) Issues logged by Calcite designers. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2024-09-30 - 2.13...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Aug 16, 2024 •
edited
Loading

Check existing issues

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)
@macandcheese macandcheese added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Aug 16, 2024
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone labels Aug 16, 2024
@macandcheese macandcheese added the design-tokens Issues requiring design tokens. label Aug 16, 2024
@doreenbrinkman
Copy link

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.

@geospatialem geospatialem mentioned this issue Sep 3, 2024
Open
@geospatialem geospatialem added p - high Issue should be addressed in the current milestone, impacts component or core functionality estimate - 3 A day or two of work, likely requires updates to tests. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed needs triage Planning workflow - pending design/dev review. labels Sep 3, 2024
@abigailmbravo-uxuidev
Copy link

+1 needed for ArcGIS Online

@geospatialem geospatialem added ArcGIS Online Issues logged by ArcGIS Online team members. ArcGIS Data Pipelines Issues logged by ArcGIS Data Pipelines team members. labels Sep 3, 2024
@abp6318
Copy link
Contributor

abp6318 commented Sep 20, 2024

+1 needed for ArcGIS Hub as well

@geospatialem geospatialem added the ArcGIS Hub Issues logged by ArcGIS Hub team members. label Sep 20, 2024
@allyshah
Copy link

+1 for ArcGIS Dashboards

@geospatialem geospatialem added the ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. label Sep 24, 2024
@ashishgodbole
Copy link

+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.

@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Sep 25, 2024
@macandcheese macandcheese mentioned this issue Sep 25, 2024
Merged
macandcheese added a commit that referenced this issue Sep 25, 2024
@macandcheese
feat(dialog, panel): Add css properties for background-color (#10387)
d725293 
**Related Issue:** #10093 

## Summary
Adds `--calcite-dialog-background-color` to Dialog
Adds `--calcite-panel-background-color` to Panel

Further token work may occur through related issues: #7180, #10380, etc.
@macandcheese macandcheese added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Sep 25, 2024
@github-actions github-actions bot assigned DitwanP and unassigned macandcheese Sep 25, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Sep 26, 2024

🍠 Verified locally on dev
image

noticed Panel was also included in the PR that added the dialog token so verified that as well:
image

@DitwanP DitwanP closed this as completed Sep 26, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Sep 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Dashboards Issues logged by ArcGIS Dashboards team members. ArcGIS Data Pipelines Issues logged by ArcGIS Data Pipelines team members. ArcGIS Hub Issues logged by ArcGIS Hub team members. ArcGIS Online Issues logged by ArcGIS Online team members. Calcite (design) Issues logged by Calcite designers. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2024-09-30 - 2.13.0 Sep Main release
Development

No branches or pull requests
8 participants
@macandcheese @geospatialem @DitwanP @abp6318 @abigailmbravo-uxuidev @ashishgodbole @allyshah @doreenbrinkman