feat(slider): add tooltips for single and two handle sliders #15129

m4olivei · 2023-11-08T20:11:29Z

Adds tooltips to the Slider componet handles. Currently present by default for both single handle and double handle. Subject to design approval.

Changelog

New

Single and two handle Slider's now have a tooltip that displays on focus / hover that will show the current slider value

Testing / Reviewing

Open the Default Slider story. Should work the same with no regressions. We expect no tooltips when there are text inputs.
Open the Slider > Two Handle Slider story. Should work the same with no regressions. We expect no tooltips when there are text inputs.
Pay particular attention to regressions in thumb / handle positioning. Was necessary to adjust CSS transforms to accomodate when there are tooltips present.
Open the Slider > Slider with Hidden Inputs story. Here we expect tooltips to show on hover / focus.
Tooltips should lock open while dragging handles.
Tooltips should be positioned per design guidance
Pay particular attention to the Tooltips, should behave just like the Tooltip component in isolation in terms of hover / delay / focus behaviours and spacing.
Regression testing for Tooltip stories, eg. IconButton > Default, Tooltip > Default and friends.

netlify · 2023-11-08T20:16:18Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`65a5dc7`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/655e7220d5c277000865eb5f
😎 Deploy Preview	https://deploy-preview-15129--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-11-08T20:18:40Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`573a500`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/654ce64c26dd5000084b7958
😎 Deploy Preview	https://deploy-preview-15129--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

m4olivei · 2023-11-08T22:09:41Z

Ahh, there are some legit test failures on account of markup and styles here that needed to shuffle around on account of the Tooltips.

I'll take a look at those in the morning.

tay1orjones

Code side of things looks pretty solid. The interaction when dragging is a bit odd though. The tooltip seems to disappear randomly. Also when you drag and get near the other handle, the other handle's tooltip appears on hover, which probably shouldn't happen.

two.handle.slider.dragging.interaction.mov

Would it make sense to "lock" the tooltip open (or closed) when dragging? @laurenmrice do you have any thoughts?

tay1orjones · 2023-11-09T17:10:11Z

@m4olivei If you haven't already, could you take a look at how this impacts the way in which the component is read via screenreaders? I wonder if it might make sense to hide the tooltips from assistive tech?

tay1orjones · 2023-11-09T17:11:29Z

I also see there's some recent comments on the original issue questioning the approach #14549 (comment)

laurenmrice · 2023-11-10T17:42:49Z

See update in connected issue #14549 (comment)

laurenmrice · 2023-11-21T15:37:01Z

Following on to Kevins comment above^

It may be the fact there are 2 different kinds of active states happening and one of them is a bug?

One is blue and the tooltip appears.
One is black and the tooltip disappears. (I think this is the bug)

m4olivei · 2023-11-21T15:40:37Z

Nice catches!

Upon checking the base skeleton state on Chrome and Safari, the handle icon gets squashed and stretched.

This is a regression, I hadn't even checked the skeletons. Oops 😊 .

The tooltip only appears on hover, but I believe it should appear upon being active and interacted with. If a user misses the target, they won't have a tooltip unless directly hovered.

This is a bug. I'm not accounting for and locking the tooltip open, when the drag start begins with a track click, and not a direct click on the handle.

Will work on these probably tomorrow, but maybe today if I can burn through some other tasks.

m4olivei · 2023-11-22T21:55:23Z

@KevinCamelo @laurenmrice

Skeleton slider issues are fixed, including a regression that snuck in on the last PR where handles were lost.
The track click and drag issue is now fixed as well
I also found and addressed RTL issues for the Skeletons and for the tooltip use cases

Should be ready for another look.

KevinCamelo · 2023-11-29T00:47:11Z

@m4olivei LGTM! 💯 Great work. Love that we were able to sneak in the tooltips. I'm going to let Carbon have final say on if this is good to go but I think it is. CC: @laurenmrice 😄

laurenmrice · 2023-11-29T13:03:57Z

Looks good to me! Thanks @m4olivei !

alisonjoseph

LGTM! 🥳

tay1orjones

🥳 🎉

m4olivei · 2023-12-04T15:02:25Z

Yay, approved! @tay1orjones noticed that we got booted from the merge queue. I'm unclear on why, do you have any insight?

tay1orjones · 2023-12-04T20:39:49Z

@m4olivei sorry, not sure. Sometimes the merge queue checks time out without reason. We're still figuring out the best settings for the merge queue. We got this in though just now 👍

m4olivei · 2023-12-04T20:42:48Z

Thanks @tay1orjones !

…design-system#15129) * fix(slider): refine what is focusable to be more broadly inclusive * feat(slider): add tooltips to slider * fix(slider): adjust for nice default tooltips on single handle * fix(slider): correct single handle RTL bug * fix(slider): put back the focus handler for the lower thumb * fix(slider): rtl positioning bug * chore: udpate tests * test(slider): adjust unit tests for slider w/ tooltips * fix(slider): remove space when text input is hidden * fix(slider): restore blue focus filled track * feat(slider): adjustments to tooltip positioning * feat(slider): use a ThumbWrapper component to conditionaly do tooltips * feat(slider): add stories for hidden inputs * fix(tooltip): hold the tooltip open if the user is mid-drag interaction * refactor(slider): move slider handle componets into own file * fix(slider): make skeletons good again * fix(slider): manage focus when activating using the track * chore(slider): remove redundant preventDefault * fix(slider): more robust activeHandle detection * test(slider): fix slider tests * fix(slider): fix positioning of thumbs for rtl * fix(slider): correct tooltips rtl --------- Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>

m4olivei added 6 commits November 8, 2023 13:25

fix(slider): refine what is focusable to be more broadly inclusive

a614050

feat(slider): add tooltips to slider

7d17624

fix(slider): adjust for nice default tooltips on single handle

23d6972

fix(slider): correct single handle RTL bug

aed9823

fix(slider): put back the focus handler for the lower thumb

5147cfb

fix(slider): rtl positioning bug

a03bbf4

m4olivei requested a review from a team as a code owner November 8, 2023 20:11

m4olivei requested review from tw15egan and andreancardona November 8, 2023 20:11

m4olivei mentioned this pull request Nov 8, 2023

[Feature Request]: Range Slider - Handle Tooltip Hovers #14549

Closed

1 task

andreancardona added 2 commits November 8, 2023 13:24

chore: udpate tests

1bd0a2f

Merge branch 'main' into feat/slider-tooltips

1bf4ffe

m4olivei added 2 commits November 9, 2023 09:01

test(slider): adjust unit tests for slider w/ tooltips

f856716

Merge branch 'main' into feat/slider-tooltips

573a500

tay1orjones added the status: visual review 🔍 label Nov 9, 2023

tay1orjones requested a review from laurenmrice November 9, 2023 17:07

tay1orjones reviewed Nov 9, 2023

View reviewed changes

tay1orjones removed the request for review from andreancardona November 9, 2023 17:12

m4olivei added 3 commits November 10, 2023 08:49

Merge branch 'main' into feat/slider-tooltips

8fa79c4

fix(slider): remove space when text input is hidden

f235822

fix(slider): restore blue focus filled track

0213aff

m4olivei added 3 commits November 10, 2023 16:13

feat(slider): adjustments to tooltip positioning

0ed9df0

feat(slider): use a ThumbWrapper component to conditionaly do tooltips

e32aaa7

feat(slider): add stories for hidden inputs

0335f04

m4olivei added 9 commits November 21, 2023 13:53

Merge branch 'main' into feat/slider-tooltips

a661383

refactor(slider): move slider handle componets into own file

c3b30ef

fix(slider): make skeletons good again

e51e916

fix(slider): manage focus when activating using the track

bf8b72c

chore(slider): remove redundant preventDefault

9b120fb

fix(slider): more robust activeHandle detection

7469fd2

test(slider): fix slider tests

4a6b89c

fix(slider): fix positioning of thumbs for rtl

2f5368b

fix(slider): correct tooltips rtl

65a5dc7

laurenmrice added status: ready for review 👀 status: one more review 👀 and removed status: visual review 🔍 labels Nov 29, 2023

alisonjoseph approved these changes Nov 29, 2023

View reviewed changes

tay1orjones approved these changes Nov 30, 2023

View reviewed changes

tay1orjones added status: ready to merge 🎉 and removed status: ready for review 👀 status: one more review 👀 labels Nov 30, 2023

github-actions bot added this pull request to the merge queue Nov 30, 2023

github-merge-queue bot removed this pull request from the merge queue due to no response for status checks Nov 30, 2023

tay1orjones merged commit 8263d2c into carbon-design-system:main Dec 4, 2023
23 checks passed

m4olivei deleted the feat/slider-tooltips branch December 4, 2023 20:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(slider): add tooltips for single and two handle sliders #15129

feat(slider): add tooltips for single and two handle sliders #15129

m4olivei commented Nov 8, 2023 •

edited

Loading

netlify bot commented Nov 8, 2023 •

edited

Loading

netlify bot commented Nov 8, 2023 •

edited

Loading

m4olivei commented Nov 8, 2023

tay1orjones left a comment •

edited

Loading

tay1orjones commented Nov 9, 2023

tay1orjones commented Nov 9, 2023

laurenmrice commented Nov 10, 2023

laurenmrice commented Nov 21, 2023

m4olivei commented Nov 21, 2023

m4olivei commented Nov 22, 2023

KevinCamelo commented Nov 29, 2023

laurenmrice commented Nov 29, 2023

alisonjoseph left a comment

tay1orjones left a comment

m4olivei commented Dec 4, 2023

tay1orjones commented Dec 4, 2023

m4olivei commented Dec 4, 2023

feat(slider): add tooltips for single and two handle sliders #15129

feat(slider): add tooltips for single and two handle sliders #15129

Conversation

m4olivei commented Nov 8, 2023 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Nov 8, 2023 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented Nov 8, 2023 • edited Loading

✅ Deploy Preview for carbon-elements ready!

m4olivei commented Nov 8, 2023

tay1orjones left a comment • edited Loading

Choose a reason for hiding this comment

tay1orjones commented Nov 9, 2023

tay1orjones commented Nov 9, 2023

laurenmrice commented Nov 10, 2023

laurenmrice commented Nov 21, 2023

m4olivei commented Nov 21, 2023

m4olivei commented Nov 22, 2023

KevinCamelo commented Nov 29, 2023

laurenmrice commented Nov 29, 2023

alisonjoseph left a comment

Choose a reason for hiding this comment

tay1orjones left a comment

Choose a reason for hiding this comment

m4olivei commented Dec 4, 2023

tay1orjones commented Dec 4, 2023

m4olivei commented Dec 4, 2023

m4olivei commented Nov 8, 2023 •

edited

Loading

netlify bot commented Nov 8, 2023 •

edited

Loading

netlify bot commented Nov 8, 2023 •

edited

Loading

tay1orjones left a comment •

edited

Loading