Skip to content
This repository has been archived by the owner on Mar 8, 2023. It is now read-only.

fix(tooltip): update to match component spec #930

Merged
merged 7 commits into from
Feb 2, 2022
Merged

fix(tooltip): update to match component spec #930

merged 7 commits into from
Feb 2, 2022

Conversation

emyarod
Copy link
Member

@emyarod emyarod commented Jan 21, 2022

Related Ticket(s)

unblocks #551 so that the PR to address #551 can be exclusively scoped to the alignment property

Description

This PR adds support for activating and dismissing the tooltip via keyboard, and updates the positioning of the tooltip caret in the left and right directions.

Changelog

New

  • keyboard support for activating/dismissing tooltip

Changed

  • update tooltip copy type tokens
  • tooltip caret positioning

@emyarod emyarod requested a review from a team as a code owner January 21, 2022 19:53
@emyarod emyarod self-assigned this Jan 21, 2022
@emyarod emyarod requested review from oliviaflory and annawen1 and removed request for a team January 21, 2022 19:53
@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Jan 21, 2022 •
edited
Loading

Deploy preview created for Carbon Web Components - React:
https://carbon-web-components-react.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/930/index.html

Built with commit: e02ce2ba8a3eb97faddc9ecaaa371725c02e6707

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Jan 21, 2022 •
edited
Loading

Deploy preview created for Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/930/index.html

Built with commit: e02ce2ba8a3eb97faddc9ecaaa371725c02e6707

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Jan 21, 2022 •
edited
Loading

Deploy preview created for Carbon Web Components - Vue:
https://carbon-web-components-vue.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/930/index.html

Built with commit: e02ce2ba8a3eb97faddc9ecaaa371725c02e6707

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Jan 21, 2022 •
edited
Loading

Deploy preview created for Carbon Web Components - Angular:
https://carbon-web-components-angular.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/930/index.html

Built with commit: 6a3dc370b836341efaea8c9a50a330213b664d20

@ariellalgilmore
Copy link
Member

ariellalgilmore commented Jan 27, 2022 •
edited
Loading

Looks great!! one minor thing. I noticed for positioning left, top, and right the tooltip gets cut off. Can we center it more?
Screen Shot 2022-01-27 at 10 17 01 AM

Also, one other thing I am noticing when tabbing over the icon I don't see the tooltip appearing.

@emyarod emyarod force-pushed the interactive-tooltip-sync branch from f70e1f0 to ae09301 Compare January 27, 2022 18:35
@emyarod
Copy link
Member Author

emyarod commented Jan 31, 2022

@ariellalgilmore should be resolved now once the deploy previews are updated!

@ariellalgilmore
Copy link
Member

some tests are still failing :/ https://github.com/carbon-design-system/carbon-web-components/runs/5010076991?check_suite_focus=true

@emyarod
Copy link
Member Author

emyarod commented Jan 31, 2022

for some reason the test is timing out because of the CSS to center the component in storybook...

@emyarod emyarod force-pushed the interactive-tooltip-sync branch from ae09301 to 6a3dc37 Compare January 31, 2022 20:09
ariellalgilmore
ariellalgilmore approved these changes Jan 31, 2022
View reviewed changes
Copy link
Member

@ariellalgilmore ariellalgilmore left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@jeffchew jeffchew added Ready to merge Label for the pull requests that are ready to merge and removed Needs design approval 👀 eyes needed labels Feb 2, 2022
@oliviaflory
Copy link

@emyarod sorry we missed this, we will be sure to keep an eye on the Carbon web components repo moving forward!

  1. The "Learn more" link in the default tool tip doesn't look like the correct color token, we could update in the next PR too. I think it should be $inverse-link

Screen Shot 2022-02-02 at 9 58 51 AM

  1. Are we expecting a knob for the caret alignment (start, center, end) in the Default tooltip story, like the ones in the definition tooltip?

Screen Shot 2022-02-02 at 9 58 02 AM

Screen Shot 2022-02-02 at 9 58 07 AM

Everything looks great!

@kodiakhq kodiakhq bot merged commit 6b9a929 into carbon-design-system:main Feb 2, 2022
@emyarod
Copy link
Member Author

emyarod commented Feb 2, 2022

gotcha @oliviaflory, yes the alignment knob is coming in a follow up PR and I can include fixes for the first bullet point in that as well!

@emyarod emyarod deleted the interactive-tooltip-sync branch February 2, 2022 18:05
@oliviaflory oliviaflory mentioned this pull request Feb 2, 2022
Closed
@emyarod emyarod mentioned this pull request Feb 3, 2022
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ariellalgilmore ariellalgilmore ariellalgilmore approved these changes

@oliviaflory oliviaflory Awaiting requested review from oliviaflory oliviaflory is a code owner automatically assigned from carbon-design-system/carbon-for-ibm-com-members

@annawen1 annawen1 Awaiting requested review from annawen1 annawen1 is a code owner automatically assigned from carbon-design-system/carbon-for-ibm-com-members

Assignees

@emyarod emyarod

Labels
Ready to merge Label for the pull requests that are ready to merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@emyarod @ibmdotcom-bot @ariellalgilmore @oliviaflory @jeffchew