Skip to content

Fix chart tooltips and make popovers comply with design specs

Paul Gascou-Vaillancourt requested to merge 457-fix-charts-tooltips into master

After the removal of application.css, we noticed some visual regressions in chart legends and tooltips in Storybook.

The legends were fixed in a separate MR. This MR focuses on fixing styles in the tooltips.

Here's what we've done here:

  1. Converted utility classes to utility mixins
  2. Dropped unnecessary float: right; rule (via the the .pull-right utility) on series values since it was redundant with the flex-grow: 1; rule on series labels
  3. Adjusted the line-height and font-weight to improve compliance with the design specs
Before (w/o application.css) Before (w/ application.css) After
Screen_Shot_2019-10-02_at_1.00.20_PM before_w_application_css after

While working on the fixes above, we noticed that popovers weren't exactly complying with our design specs. Since chart tooltips and popovers are closely tied, we fixed popovers' styling, they should now comply with Pajamas and have been marked as such with the followsDesignSpecs flag.

Closes #457 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports