Legend styling changes - Githubissues

susiekims commented 4 months ago

What does this implement/fix?

Follow up of https://github.com/Shopify/polaris-viz

Change font size for legends, labels, and tooltips to 11px
Remove focus state onClick in LegendItem (should still be visible for keyboard interaction)

Does this close any currently open issues?

What do the changes look like?

Before	After

Storybook link

https://6062ad4a2d14cd0021539c1b-yrsertjuva.chromatic.com/?path=/story/intro--page

Confirm the body text in legends, tooltips, annotations, axis labels, etc are 11px
Confirm you do not see the blue outline focus state when clicking on a legend item, but you can see it when focusing on it via keyboard

Before merging

[ ] Check your changes on a variety of browsers and devices.
[ ] Update the Changelog's Unreleased section with your changes.
[ ] Update relevant documentation, tests, and Storybook.
[ ] Make sure you're exporting any new shared Components, Types and Utilities from the top level index file of the package

github-actions[bot] commented 4 months ago

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
polaris-viz-core-cjs	61.15 KB (+0.01% 🔺)	1.3 s (+0.01% 🔺)	988 ms (+21.56% 🔺)	2.3 s
polaris-viz-cjs	215.96 KB (-0.01% 🔽)	4.4 s (-0.01% 🔽)	2.1 s (-1.73% 🔽)	6.4 s
polaris-viz-esm	176.69 KB (-0.01% 🔽)	3.6 s (-0.01% 🔽)	1.5 s (+7.77% 🔺)	5.1 s
polaris-viz-css	4.8 KB (+0.21% 🔺)	96 ms (+0.21% 🔺)	371 ms (+2.31% 🔺)	467 ms
polaris-viz-esnext	182.49 KB (+0.01% 🔺)	3.7 s (+0.01% 🔺)	1.4 s (-14.24% 🔽)	5.1 s

brendo commented 4 months ago

With this change, does the character widths file need to be regenerated (docs)?

To speed up the truncation logic for Labels we use a pre-built json file that includes the width of each available character the browser provides. This includes multiple languages.

Currently this process is manual, but it only needs to be re-ran if the font size, or family changes.

envex commented 4 months ago

@brendo It shouldn't need to be updated if only the font-size is changed.

There's the character-widths file and also a character-offsets file that handles the change between font-sizes.

The character-width file really only needs to be updated now if the font-family changes.