feat(tooltip): add tooltip support to multiple components #1379
Conversation
Remove dismissible tooltip functionality and standardize interaction patterns. Tooltips now follow consistent hover/focus behavior as per accessibility guidelines. BREAKING CHANGE: removed `triggers` input The `triggers` input has been removed to standardize tooltip behavior according to accessibility guidelines. If you were using `triggers="focus"` to create dismissible tooltips, remove the `triggers` attribute as this functionality is no longer supported.
Summary of ChangesHello @dauriamarco, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a major enhancement to the tooltip system, integrating it more deeply and consistently across various UI components. The changes focus on providing a more dynamic and accessible tooltip experience, complete with animations and intelligent display logic for truncated content. This broadens the utility of tooltips and refines their visual and interactive behavior throughout the application. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces tooltip support to several components, including content-action-bar, collapsible-panel, and tree-view for truncated labels. The implementation is well-done, with nice additions like animations for the tooltip and accessibility improvements by replacing title attributes with aria-label. The refactoring of the siTooltip directive to have fixed triggers (focus and hover) with different delays simplifies its API and aligns with common UX patterns. The updated example page is now much more comprehensive.
I've found one minor issue in a test file regarding a brittle selector, which could be improved for better maintainability.
| action = btn; | ||
| } | ||
| }); | ||
| const action = element.querySelectorAll('si-content-action-bar button')[0] as HTMLButtonElement; |
There was a problem hiding this comment.
Selecting the sort button by its index ([0]) is brittle and can lead to test failures if other buttons are added to the action bar. A more robust approach is to use a unique and stable selector.
Since the button's aria-label likely changes based on the sort order, a data-id attribute would be an ideal selector. The si-content-action-bar supports this via the id property on the action item. You could add an id to the sort action within the si-list-widget component and then use a query selector like button[data-id="your-sort-action-id"] here. This makes the test independent of the button's position or its text/label.
|
Documentation. Coverage Reports: |
dauriamarco
force-pushed
the
feat/tooltip-support-btn
branch
from
7a2ce63 to
56c2446
Compare
dauriamarco
force-pushed
the
feat/tooltip-support-btn
branch
from
56c2446 to
be359d5
Compare
|
|
Adds support for multiple components.