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

[Action] Wrong CSS variable precedence order #11245

Open
2 of 6 tasks
maxpatiiuk opened this issue Jan 9, 2025 · 0 comments
Open
2 of 6 tasks

[Action] Wrong CSS variable precedence order #11245

maxpatiiuk opened this issue Jan 9, 2025 · 0 comments
Labels
0 - new New issues that need assignment. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. p - medium Issue is non core or affecting less that 60% of people using the library

Comments

@maxpatiiuk
Copy link
Member

Check existing issues

Actual Behavior

When calcite-action has both active attribute set, and is clicked, the button color is determined by --calcite-action-background-color variable

Screenshot 2025-01-09 at 13 30 05

Expected Behavior

Expected --calcite-action-background-color-press or --calcite-action-background-color-pressed CSS variable to be used when active, as per <arcgis-web-components>/pull/2902#discussion_r1318308

Reproduction Sample

https://codepen.io/maxpatiiuk/pen/RNbQdWR?editors=1100

Reproduction Steps

  1. Open DevTools
  2. Find the button inside of calcite-action
  3. Set "Force element state -> active" (or simply click on the calcite-action and hold)
  4. See that --calcite-action-background-color takes precedence over --calcite-action-background-color-press or --calcite-action-background-color-pressed

Reproduction Version

3.0.0-next.90

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/calcite-ui-icons
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript
@maxpatiiuk maxpatiiuk added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 9, 2025
@github-actions github-actions bot added ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. calcite-components Issues specific to the @esri/calcite-components package. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Jan 9, 2025
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library 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 Jan 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
0 - new New issues that need assignment. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@geospatialem @maxpatiiuk