Feat: [DS-209] Tooltip #517
Conversation
🦋 Changeset detectedLatest commit: 1a6b0b0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for wl-hopper ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
packages/components/src/Tooltip/tests/chromatic/Tooltip.stories.tsx
Outdated
Show resolved
Hide resolved
| export const DisabledTrigger = { | ||
| render: args => ( | ||
| <TooltipTrigger> | ||
| <PassiveTrigger data-testid="passive-trigger"> |
There was a problem hiding this comment.
Is there a way to automatically detect something like this and add the wrapper inside the tooltip trigger^
There was a problem hiding this comment.
hmm it would be ideal. off the top of my head I don't know, but I can check.
There was a problem hiding this comment.
as an update, I didn't find a way.
| <TooltipTrigger> | ||
| <ListBox selectionMode="multiple"> | ||
| <ListBoxItem id="1" isDisabled position="relative"> | ||
| <PassiveTrigger data-testid="passive-trigger" width="auto" position="absolute" top="0" bottom="0" right="0" left="0" /> |
There was a problem hiding this comment.
Oh no this synthax is really not appropriate for our DS.
i was expecting something a lot more similar to Orbiter
<Select placeholder="Planets">
<TooltipTrigger>
<ListBoxItem key="earth">Earth</ListBoxItem>
<Tooltip>Home sweet home!</Tooltip>
</TooltipTrigger>
<TooltipTrigger>
<ListBoxItem key="jupiter">Jupiter</ListBoxItem >
<Tooltip>The fourth-brightest object in the sky</Tooltip>
</TooltipTrigger>
<TooltipTrigger>
<ListBoxItem key="mars">Mars</ListBoxItem >
<Tooltip>See you in 2026</Tooltip>
</TooltipTrigger>
</Select>
There was a problem hiding this comment.
you can't have anything between a list item and ListBox.
Also, when I put TooltipTrigger inside the ListBoxitem, there was also an error.
I can try again to see if there's anything to be done, but I'm not sure.
There was a problem hiding this comment.
There is lots of possible solution for this.
We can put the tooltip trigger inside the content ourselve inside the ListboxItem component
We can create a ListBoxItemTooltipTrigger component that is an item with a tooltip
We can drop to the hook level and create our own ListboxItem if necessary.
It's a matter of making a plan and investigating the different avenues.
| ...styleProp | ||
| }; | ||
|
|
||
| return ( |
There was a problem hiding this comment.
This passive trigger is not focusable and has no focusable style. This lack of accessibility + mobile usage should be reflected in the jsdoc and in the documentation.
| } | ||
| } satisfies Story; | ||
|
|
||
| export const DisabledListItem = { |
There was a problem hiding this comment.
This story should be in the listbox.stories.tsx. Tooltip is going to be used in other components
packages/components/src/Tooltip/tests/chromatic/Tooltip.stories.tsx
Outdated
Show resolved
Hide resolved
No description provided.