Add a "Close" tooltip to close buttons #1823
Conversation
…+ offcanvas. Needed to add js to manage tooltip on live alert's btn-close Still have to fix tooltip z-index on toasts when inside toast container
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Another thing to notice: For Toast custom content, since we don't have toast-header class, close button has the standard size and is not smaller like in other toasts. It is strange with toast border, see below:
This is not new in this PR, it was less noticeable before because background had a bg-light:
But maybe this is not a problem? I checked the callout PR: no ODS incompatibility callout seem planned? ==> issue created: #1875 |
- change js to select all btn-close - add data-bs-container for some toasts to resolve z-index pbs - change js-dismiss short code 2nd example: remove btn-close class and make it a standard button (with no tooltip) - enhance migration guide
Can't you add a CSS rule to have the same rendering when it's a |
Actually, it should be on |
- enhance migration guide - simplify and enhance js
# Conflicts: # site/content/docs/5.3/migration.md
There was a problem hiding this comment.
-
Now that our close button is always shown associated with a tooltip, it might be worth adding it to the list of "Show components requiring JavaScript" (in /docs/5.3/getting-started/introduction/#js-components).
-
Our cookies management panel uses
.btn-close. IDK if you can add the tooltip as well. Not mandatory IMO if too tricky but it may be worth a try.
- IMO, /docs/5.3/components/alerts/#dismissing should be enhanced with an explanation of the tooltip which needs extra data-bs code + loading Boosted Tooltip JS.
- Check the same thing for the other components (Close button description itself, modals, offcanvases, etc.) to see if the descriptions must be enhanced.
# Conflicts: # site/content/docs/5.3/migration.md
OK, I add "Close button" component in the list. Do I need to precise in other components that JS is used for close button? (all these components alredy use JS: Modal, Alerts, Toasts, Navbar, Offcanvas) |
It's an indirect dependency so I'm not sure how to handle it TBH. |
I tried something by adding some info on tooltip enabling on each component, at different places depending on the context. I add some info in Intro > JS components, and in migration guide. I also tried to add tooltip on Yu tell me what you think :-) |
There was a problem hiding this comment.
I'm down with your suggestion of messages throughout the documentation. Let's see if folks understand it easily, we can still modify them later.
Would be nice to check if this section could be a reusable shortcode.
Regarding the cookies management panel, let's create a new issue to tackle it later.
|
Kudos, SonarCloud Quality Gate passed!
|
Add tooltip on close buttons
Related issues
Closes #1773
Description
Tooltip added on close button for components:
To be noted:
Motivation & Context
Compliance to design UI kit v5
Types of change
Live previews
Checklist
Contribution
Accessibility
Design
Development
Documentation
Checklist (for Core Team only)
After the merge