Tooltip: v11 audit

[aagonzales]

Audit

A designer and developer will pair on this audit, some tasks may be discipline focused. Follow the checklist below for the features and items to review. If there are no issues with the item then check the item as complete. If any problems or bugs come up when auditing add a comment to this issue with the problem and how to correct it (if you know how). Bugs do not need to be fixed while auditing.

Resources

• Design spec in Sketch
• V11 Website
• SCSS
• Storybook

Checklist

Visual (in React code)
Design and dev check

• Component is using the correct design tokens (color and type), see design spec and scss code.
• Component is rendering correctly across themes and layers, see design spec and storybook.
  • White theme
  • Gray 10 theme
  • Gray 90 theme
  • Gray 100 theme
• Component is rendering correctly across browsers (check themes across browsers as well), see storybook.
  • Firefox
  • Safari
  • Chrome
• Component sizes are rendering and named correctly (if applicable) NA

Website (v11)
Design checks

• Style tab has correct design tokens listed
• Style and usage tabs are using the correct size props names (if applicable) NA
• Usage tab is up-to-date for with any v11 behavioral changes (if any)
• Live Demo has applied v11 changes
  • Themes are rendering correctly
  • Size props are named correctlyNA
  • No light props included

Design Kits (Sketch only)
Design checks

• Correct design tokens (type and color) are used
• Component using the correct size prop names NA
• Any additional v11 behaviors have been added

Storybook
Dev checks

• Confirm that prop table is populating
• Take note of missing examples/stories (if any)

React package
Dev checks

• Go to https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox and confirm that you can use the component as expected from @carbon/react

Accessibility
Dev checks

• Confirm that there are no violations in Accessibility checker
• Confirm that component works as expected with VoiceOver

Migration docs
Design and dev check

• Any breaking changes to this component are present in the v11 migration guide.
  • Design
  • Develop

[laurenmrice]

Visual bugs

scss

• For Tooltip styles the focus should be using color token $focus

&:focus {
  @include focus-outline('border');

  fill: $button-primary-hover;
}

• There is a fix for popover that tooltip will inherit to adjust the alignment of caret, container, and trigger button fix(Popover): adjust popover content placement #10539 (comment)

Icon button tooltip

• Tooltip type-style should be using $body-long. As per our discussion, we are going to keep the type token at body-01 in cases where text wraps to multiple lines.
• Check to make sure all spacing tokens use the format $spacing- instead of having to prefix the token with $carbon--.

Definition tooltip

• Hover state: The icon should be using color token $icon-primary. It may be using this but I just didn't see the token explicitly in code.
• Enabled state:border-bottom should be using color token $border-interactive.

Storybook

• The Tooltip story needs to come out of Experimental and into Stable before the v11 release.
• There should be 3 variants under the main component Tooltip: Standard, Icon button, and Definition. We need to rename the story "Default" to be Standard and we need to add a story for Icon button.
  Example of our usage guidance:

[laurenmrice]

Website

Style tab

• Typography section: Type token should be $body-01. As per our discussion, we are going to keep the type token at body-01 in cases where text wraps to multiple lines.

Live demo

*Updating the Live demo with our current code may fix some of these bugs.

• The variants should appear as Standard, Icon button, and Definition tooltip in the variant dropdown. The names are inconsistent right now.
• There should be a modifier panel for the Standard tooltip variant. And it should include the directions and alignments.
• Styling is outdated for all tooltip variants.