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] - Active syles are not present on actions with transparent appearance #10982

Closed
2 of 6 tasks
sagewall opened this issue Dec 4, 2024 · 9 comments
Closed
2 of 6 tasks

[Action] - Active syles are not present on actions with transparent appearance #10982

sagewall opened this issue Dec 4, 2024 · 9 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. 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 - 2 Small fix or update, may require updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality regression Issues that are caused by changes in a release, but were working before that.
Milestone
2024-12-17 - Dec ...

Comments

@sagewall
Copy link

sagewall commented Dec 4, 2024

Check existing issues

Actual Behavior

Beginning with version 2.12.0-next.31 and currently at 2.13.2 there is no visible change to the action when setting the active property on an action element if the appearance is set to transparent. Both actions in this screenshot are identical with the exception of the second action has appearance="transparent"
image

Expected Behavior

Visually be able to determine which actions are visible regardless of the appearance attribute value as before the regression took place.
image

Reproduction Sample

https://codepen.io/sagewall/pen/JoPGPwJ

Reproduction Steps

  1. Open this code pen
  2. Observe how the transparent action has no styling to indicate it's active

Reproduction Version

2.13.2

Relevant Info

Seems independent of hardware

Regression?

2.12.0-next.31

Priority impact

impact - p2 - want for an upcoming milestone

Impact

Impacts users ability to see active actions in several JS SDK widgets and components

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
@sagewall sagewall added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Dec 4, 2024
@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 - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Dec 4, 2024
@geospatialem geospatialem mentioned this issue Dec 4, 2024
Merged
@geospatialem geospatialem added p - high Issue should be addressed in the current milestone, impacts component or core functionality regression Issues that are caused by changes in a release, but were working before that. estimate - 2 Small fix or update, may require updates to tests. and removed needs triage Planning workflow - pending design/dev review. labels Dec 4, 2024
@geospatialem
Copy link
Member

Regression related to #10058, refer to Matt's comment for more specifics: #10058 (comment)

@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. labels Dec 4, 2024
@alisonailea alisonailea mentioned this issue Dec 4, 2024
Merged
@alisonailea alisonailea added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Dec 4, 2024
alisonailea added a commit that referenced this issue Dec 12, 2024
@alisonailea
fix(action): active styles present with transparent appearance (#10988)
796b89b 
**Related Issue:** #10982

## Summary

Resolves issue where transparent styles are not correctly applied when
the action[active] state is set.
Adds optional "expectedValue" prop to themed test utility
Adds e2e test coverage
@geospatialem
Copy link
Member

@alisonailea It looks like the PR has been merged, is this issue ready for verification? If so, can you add the 3- installed label for us? 🤜🏻 🤛🏻

@alisonailea alisonailea added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Dec 16, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned alisonailea Dec 16, 2024
@geospatialem
Copy link
Member

The above doesn't seem to be mitigated with the original repro case in the latest 3.0.0-next.65.

@alisonailea can you take a peek to explore what might be occurring?: https://codepen.io/geospatialem/pen/azopwzM 👀

@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Dec 16, 2024
@alisonailea
Copy link
Contributor

alisonailea commented Dec 16, 2024 •
edited
Loading

The above doesn't seem to be mitigated with the original repro case in the latest 3.0.0-next.65.
https://codepen.io/geospatialem/pen/azopwzM 👀

^ the above codepen shows the issue is mitigated.

will make a new pr to use -hover instead of -press for when the "active" prop is manually set

@alisonailea alisonailea 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 Dec 16, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned alisonailea Dec 16, 2024
@geospatialem
Copy link
Member

@alisonailea To mitigate the regression we should migrate to transparent.hover, here's a before an after the change for comparison:

Before After
image image

@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Dec 16, 2024
@alisonailea alisonailea mentioned this issue Dec 16, 2024
Merged
@alisonailea alisonailea added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Dec 16, 2024
alisonailea added a commit that referenced this issue Dec 16, 2024
@alisonailea
fix(action): component in transparent active mode should use -hover (#…
355f51e 
…11075)

**Related Issue:** #10982

## Summary

Update the background color of the component when active=true and
appearance=transparent to use the transparent-hover instead of
transparent-press.
@alisonailea alisonailea added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Dec 16, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned alisonailea Dec 16, 2024
@geospatialem geospatialem 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 Dec 16, 2024
@geospatialem
Copy link
Member

Verified on 3.0.0-next.68 🎉

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 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 - 2 Small fix or update, may require updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality regression Issues that are caused by changes in a release, but were working before that.
Projects
None yet
Milestone
2024-12-17 - Dec Milestone
Development

No branches or pull requests
4 participants
@sagewall @alisonailea @geospatialem @DitwanP