[Tooltip] Complete API #231
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
onmax
changed the title
* [Accordion]feat: 2/3 * Added useSingleOrMultipleValue * [Accordion]fix: Check if item is disabled onClick * [useSingleOrMultipleValue] fix: use defaultValue from props * [AccordionStory] fix: Use collapsible for single type * [Accordion] fix: Remove unnecessary type in inject
* fix avatar rendering issue * add nuxt playground to demo ssr * fix requestAnimationFrame throwing error * fix element selected even though undefined * fix navigation menu not updating position for indicator correctly
…nnecessary question mark (#237)
* Fix : Alert Dialog handle click outside * Fix : remove event handler
zernonia
reviewed
Jul 25, 2023
| <slot /> | ||
| <ScreenReaderOnly :id="injectedValue?.contentId" :ariaLabel="ariaLabel" /> |
There was a problem hiding this comment.
We already have VisuallyHidden component, I think it's the same as this.
There was a problem hiding this comment.
Just updated the code, I had to update VisuallyHidden component with a new slot.
In NavigationMenuTrigger, we have the following code:
<template v-if="open">
<VisuallyHidden
aria-hidden
:tabIndex="0"
:ref="setFocusProxyRef"
@focus="handleVisuallyHiddenFocus"
>
</VisuallyHidden>
<span :aria-owns="contentId" v-if="context?.viewport"></span>
</template>But I don't fully understand this code. I would appreciate any feedback of my current implementation, which imitates Radix implementation.
misbahansori
added a commit
to misbahansori/radix-vue
that referenced
this pull request
Jul 26, 2023
* [Tooltip] feat: Added props to TooltipArrow * useHoverDelay accept callbacks and options * Updated useHover * Updated PopperContent * [Tooltip] Finished API * [Accordion]feat: 2/3 (radix-vue#211) * [Accordion]feat: 2/3 * Added useSingleOrMultipleValue * [Accordion]fix: Check if item is disabled onClick * [useSingleOrMultipleValue] fix: use defaultValue from props * [AccordionStory] fix: Use collapsible for single type * [Accordion] fix: Remove unnecessary type in inject * [Bug] ssg/ssr not rendering correctly (radix-vue#233) * fix avatar rendering issue * add nuxt playground to demo ssr * fix requestAnimationFrame throwing error * fix element selected even though undefined * fix navigation menu not updating position for indicator correctly * chore: release v0.1.10 * [Tooltip]fix : tooltip open on keyboard focus (radix-vue#238) * [Tooltip]fix: bind props values to data-side and data-align, remove unnecessary question mark (radix-vue#237) * [Alert Dialog]fix : Alert Dialog handle click outside (radix-vue#236) * Fix : Alert Dialog handle click outside * Fix : remove event handler * chore: release 0.1.11 * [Tooltip] feat: Removed TooltipPortal in favor of Teleport * [Tooltip] feat: Use flg disable on hover * Tooltip: Define emits event in TooltipContent * Tooltip: Create stories folder * Tooltip: Fixed content story * Revert HoverCard changes * Use VisuallyHidden component * run lint * fix triggerElement missing, test some story props --------- Co-authored-by: zernonia <59365435+zernonia@users.noreply.github.com> Co-authored-by: khairulhaaziq <rhycoz@yahoo.com> Co-authored-by: Misbah Ansori <misbah.ansori24@gmail.com> Co-authored-by: Artem Melnyk <51422045+MellKam@users.noreply.github.com> Co-authored-by: zernonia <zernonia@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Complete the Tooltip API.
Relevant changes:
Tooltip*components with commentsScreenReaderOnlycomponentuseHoverDelay->useHoverTooltipPortalin favor ofTeleportPopperContentPropsonEscapeKeyDownandonPointerDownOutsidecallback functions as props inTooltipContent. I think we decided that we instead we would emit events.Regarding @Focus
At some point I think we have to update the Tooltip focus event. We don't really want to open it for every event, just for events triggered by keyboard.
I opened this vueuse/vueuse#3254 so we can use that composable or we just copy and paste that function into our project, as we want.
In Radix, for example, they just check if the event was triggered by a PointerDown, see Radix Code
Related Issue
#149
Motivation and Context
How Has This Been Tested?
Visually and I created some stories. Not sure how to do propper stories, that's why I did the minimum to test the props
Screenshots (if appropriate):