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

Improve tooltip arrow to allow semi-transparent background color #6798

Closed
avkolomeets opened this issue Apr 17, 2023 · 10 comments
Closed

Improve tooltip arrow to allow semi-transparent background color #6798

avkolomeets opened this issue Apr 17, 2023 · 10 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Business/Community Analyst Issues logged by ArcGIS Business/Community Analyst team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 3 A day or two of work, likely requires updates to tests. impact - p0 - emergency User set priority impact status of p0 - emergency p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2023 May Priorities

Comments

@avkolomeets
Copy link

Actual Behavior

We have customizable tooltips and if a user changes the background transparency, the arrow artifacts become visible.

image

Expected Behavior

Please fix the arrow, so it doesn't go inside the container.

Reproduction Sample

https://codepen.io/cont-kolomeets/pen/JjmKGGb?editors=100

Reproduction Steps

See the sample.

Reproduction Version

1.0.7

Relevant Info

No response

Regression?

No response

Priority impact

p0 - emergency

Impact

No response

Esri team

ArcGIS Business/Community Analyst
@avkolomeets avkolomeets 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 Apr 17, 2023
@github-actions github-actions bot added impact - p0 - emergency User set priority impact status of p0 - emergency ArcGIS Business/Community Analyst Issues logged by ArcGIS Business/Community Analyst team members. labels Apr 17, 2023
@geospatialem
Copy link
Member

@cont-kolomeets We're interested in learning more of the use case behind adding transparency to the tooltips background as it could impact accessibility and contrast.

@driskull
Copy link
Member

If we want to fix this, we can use css clip-path instead of just rotating the div 45deg.

@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. 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Apr 17, 2023
@geospatialem geospatialem added this to the 2023 May Priorities milestone Apr 17, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Apr 17, 2023
driskull added a commit that referenced this issue Apr 17, 2023
@driskull
fix(tooltip, popover): Support transparent backgrounds. #6798
e2eaf28
@driskull driskull mentioned this issue Apr 17, 2023
Closed
@driskull
Copy link
Member

If we want to support transparent backgrounds on all of our components we may need to set up some screenshot tests for each one.

@avkolomeets
Copy link
Author

@geospatialem

We're interested in learning more of the use case behind adding transparency to the tooltips background as it could impact accessibility and contrast.

Agree that usage of transparency should be limited, but it's just something we allow for tables and charts in our infographic builder. In some cases alpha of 0.8 can be used. Also you never now in which context users might want to use the tooltips.

image

@driskull
Copy link
Member

driskull commented Apr 18, 2023 •
edited
Loading

@jcfranco @macandcheese if we want to support semi-transparent backgrounds in all of our components, we need to do some work to make sure we're only setting the background on one element within the component and any components used within the component have appearance="transparent". Otherwise, the backgrounds get overlapped which compounds the transparency and color.

This would probably be an audit of every component to setup screenshot tests and make sure that backgrounds with some transparency look good. Do we want to create an epic for this?

Block example

image

@driskull driskull added 0 - new New issues that need assignment. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Apr 24, 2023
@driskull driskull removed their assignment Apr 24, 2023
@driskull
Copy link
Member

Going forward, we may want to introduce an internal component (possibly functional component) to handle rendering a triangle SVG and styling it with a stroke/fill.

See: floating-ui/floating-ui#2195

@driskull driskull mentioned this issue Apr 25, 2023
Merged
driskull added a commit that referenced this issue Apr 26, 2023
@driskull
fix(tooltip, popover): Support transparent backgrounds #6803 (#6847)
7eec6fb 
**Related Issue:** #6798

## Summary

- Creates a `FloatingArrow` functional component to generate an SVG for
the arrow.
- Uses `FloatingArrow` instead of `transform: rotate` to create the
caret arrow tail.
- Introduces optional state property `floatingLayout` on
`FloatingUIComponent` class for sizing the arrow properly.
- Removes CSS where we are setting the BG on two separate elements.
- Sets `Action` used in the popover to be transparent.
- Removes unnecessary styles
- Screener tests
- See: floating-ui/floating-ui#2195
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 0 - new New issues that need assignment. labels Apr 26, 2023
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem removed the 3 - installed Issues that have been merged to master branch and are ready for final confirmation. label May 4, 2023
@geospatialem geospatialem added the 4 - verified Issues that have been released and confirmed resolved. label May 4, 2023
@geospatialem
Copy link
Member

Verified in 1.4.0-next.6

image

@avkolomeets
Copy link
Author

@geospatialem Tested with 1.4.2.
It looks much improved, but the arrow seems to look a bit darker.

image

@geospatialem
Copy link
Member

Thanks for identifying, @cont-kolomeets. Checking in with the team to determine if this is expected behavior - will comment further when we know next steps.

@jcfranco jcfranco mentioned this issue Sep 12, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Business/Community Analyst Issues logged by ArcGIS Business/Community Analyst team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 3 A day or two of work, likely requires updates to tests. impact - p0 - emergency User set priority impact status of p0 - emergency p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2023 May Priorities
Development

No branches or pull requests
3 participants
@driskull @geospatialem @avkolomeets