feat: react tooltips, tooltips for table #1546
Conversation
samspi
commented
Aug 30, 2024
samspi
commented
- Added tooltip link component
- Added tooltip button component
- Implemented tooltip feature in Table
🦋 Changeset statusBased on the included changeset, the following releases will be published as a result of this PR:
Note: If unpublished changesets where merged to |
|
👋 Thanks for creating a pull request! 🚀 Checkout the storybook we've created for it: |
This one is a bit too specific to export as a general component IMO
|
@samspi Thank you for the PR! I added a story for the tooltip and updated the docs for Table. Also, I removed the |
There was a problem hiding this comment.
Hi and thank you for your contribution!
We (The Green Design System team) have found some issues that needs to be addressed:
Dynamic width
Long messages get very high:
The width should be dynamic (follow the width of the text) but still follow the writing guidelines.
Accessibility issues
- Tooltip only trigger on mouse hover - needs to support keyboard navigation
- Tooltip is placed outside of screen, see storybook we are using floating UI to handle this.
| @@ -124,7 +124,7 @@ export const SortableTable = () => { | |||
| <TableHeader> | |||
| <TableRow> | |||
| {columnData.map((column: SuperHeroColumnDataT, i: number) => ( | |||
| <TableHeaderCell key={i} {...column} /> | |||
| <TableHeaderCell key={i} {...column} tooltipText={'Tooltip'} /> | |||
There was a problem hiding this comment.
Its better to pass children to TableHeaderCell here:
<TableHeaderCell key={i} {...column}>
<TooltipButton tooltip={tooltipText} className="sg-table-sort">
{children}
</TooltipButton>
</TableHeaderCell>and remove the logic from the Table component. That way we keep components seperate and minimize dependencies.
There was a problem hiding this comment.
Makes sense! I'll get started on that!
There was a problem hiding this comment.
How is this going @samspi? Can we assist you in any way?
There was a problem hiding this comment.
Hi there. An update. I've been unable to dedicate time to these fixes and I'm looking into handing it over to another member in the team. Thanks for your patience!
