[Tooltip] Tweak animation duration and box-shadow #8629

mrcthms · 2023-03-10T13:13:56Z

WHY are these changes introduced?

After liaising with @dGoligorsky we wanted to tweak some of the primitive values for the Tooltip, namely the animation duration and the box-shadow for the overlay. The animation felt too slow, and the shadow meant that Tooltips being displayed over white backgrounds were quite hard to distinguish.

We have sped up the animation duration from 200ms to 50ms, and added an extra shadow on top of the --p-shadow-popover for the Tooltip to ensure the top edge is visible.

Spin URL: https://admin.web.tooltip-tweak-demo.marc-thomas.eu.spin.dev/store/shop1/products/1

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

mrcthms · 2023-03-10T13:17:57Z

/snapit

github-actions · 2023-03-10T13:23:18Z

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230310132103

yarn add @shopify/polaris@0.0.0-snapshot-release-20230310132103

github-actions · 2023-03-10T13:33:42Z

size-limit report 📦

Path	Size
polaris-react-cjs	221.34 KB (0%)
polaris-react-esm	140.79 KB (0%)
polaris-react-esnext	197.55 KB (+0.01% 🔺)
polaris-react-css	43.09 KB (+0.02% 🔺)

mrcthms · 2023-03-10T16:55:11Z

@Shopify/polaris-eng Can I get a review of this little one please? Thx!

kyledurand

Changes look good, just the one comment about using a secondary token vs adding a snowflake

kyledurand · 2023-03-10T18:04:06Z

polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss

  opacity: 1;
-  box-shadow: var(--p-shadow-popover);
+  // stylelint-disable-next-line -- hardcoding an extra shadow for the Tooltip to enable it to be more visible against white backgrounds
+  box-shadow: var(--p-shadow-popover), 0 0 20px 8px rgba(23, 24, 24, 0.02);


Suggested change

box-shadow: var(--p-shadow-popover), 0 0 20px 8px rgba(23, 24, 24, 0.02);

box-shadow: var(--p-shadow-popover), var(--p-shadow-deep);

Can we do something like this? It seems to only increase in contrast which should be a good thing and we stick with tokens

Also want to add in v11 we will be switching from our current depth tokens to these new shadow tokens (we have a migration that maps all current values to new ones but if you want to be able to hand pick the values yourself I'd recommend using the new shadow tokens here instead).

Looking at the upcoming shadow tokens, it seems that --p-shadow-lg will do the trick

Looks like --p-shadow-lg doesn't exist currently, are we okay to hardcode it for now with a comment to update it once we move to v11.0?

It should exist. You might need to run a local build and get latest from main if it isn't there. https://github.com/Shopify/polaris/blob/764f17d86c30c9f30bec6717c09f07b2e04e23f8/polaris-tokens/src/token-groups/shadow.ts#L46-L49

mrcthms · 2023-03-14T10:58:27Z

/snapit

github-actions · 2023-03-14T11:02:48Z

🫰✨ Thanks @mrcthms! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-cli@0.0.0-snapshot-release-20230314110050

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20230314110050

yarn add @shopify/polaris@0.0.0-snapshot-release-20230314110050

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20230314110050

mrcthms · 2023-03-14T13:57:27Z

Is this okay to merge now @kyledurand ?

kyledurand · 2023-03-14T13:58:32Z

🚢 !

@alex-page

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/stylelint-polaris@9.0.0 ### Major Changes - [#8657](#8657) [`764f17d86`](764f17d) Thanks [@alex-page](https://github.com/alex-page)! - Turn on reportNeedlessDisables for all comments ## @shopify/polaris-migrator@0.16.0 ### Minor Changes - [#8272](#8272) [`cccd69848`](cccd698) Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0 ### Patch Changes - Updated dependencies \[[`764f17d86`](764f17d)]: - @shopify/stylelint-polaris@9.0.0 ## @shopify/polaris@10.36.0 ### Minor Changes - [#8555](#8555) [`696473b82`](696473b) Thanks [@clarkjennings](https://github.com/clarkjennings)! - Added a forward `ref` to permit programmatic scrolling for `Scrollable` (example: `scrollRef.current?.scrollTo(0)`) - [#8650](#8650) [`078cf9aea`](078cf9a) Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated breadcrumbs prop on SkeletonPage, added backAction prop with story - [#8586](#8586) [`83bde8690`](83bde86) Thanks [@tatianau](https://github.com/tatianau)! - Made hiding the stepper arrows for inputs of type "number" and revealing them on hover and focus the default `TextField` behaviour to mimic the default browser experience - [#8288](#8288) [`d27a361c2`](d27a361) Thanks [@rcd00](https://github.com/rcd00)! - Updated the style of keyboard component and add optional size prop - [#8600](#8600) [`515a62f3b`](515a62f) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed list reset class from not applying to ordered lists - [#8655](#8655) [`fb373c3e1`](fb373c3) Thanks [@stewx](https://github.com/stewx)! - Adjust CSS for expanded navigation section to remove unwanted space during collapse/expand ### Patch Changes - [#8595](#8595) [`437a3bbf1`](437a3bb) Thanks [@KateWood](https://github.com/KateWood)! - Added option zebra striping to `IndexTable` ([#8595](#8595)) - [#8626](#8626) [`ff70ab3d1`](ff70ab3) Thanks [@alex-page](https://github.com/alex-page)! - Fix border radius on active/pressed navigation items - [#8644](#8644) [`62b712362`](62b7123) Thanks [@alex-page](https://github.com/alex-page)! - Remove unnecessary stylelint-disable comments - [#8651](#8651) [`446ba341c`](446ba34) Thanks [@aveline](https://github.com/aveline)! - Updated default stack order custom property - [#8659](#8659) [`3e7e0837d`](3e7e083) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed comments after stylelint rule changes that are breaking the rules - [#8606](#8606) [`230786ace`](230786a) Thanks [@alex-page](https://github.com/alex-page)! - Remove unused shared scss functions and move low usage or low value functions into components - [#8629](#8629) [`6ee523a5f`](6ee523a) Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the animation duration and box-shadow for the `Tooltip` ## @shopify/polaris-cli@0.1.17 ### Patch Changes - Updated dependencies \[[`cccd69848`](cccd698)]: - @shopify/polaris-migrator@0.16.0 ## polaris.shopify.com@0.39.0 ### Minor Changes - [#8604](#8604) [`65a678d29`](65a678d) Thanks [@lgriffee](https://github.com/lgriffee)! - Added a `shadow` token page - [#8615](#8615) [`4aacd1983`](4aacd19) Thanks [@yurm04](https://github.com/yurm04)! - Added search event that sets the default google parameters in addition to custom - [#8613](#8613) [`1a36ed60c`](1a36ed6) Thanks [@yurm04](https://github.com/yurm04)! - Added 'engagement' category to search event - [#8272](#8272) [`cccd69848`](cccd698) Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0 ### Patch Changes - [#8621](#8621) [`dca759b0b`](dca759b) Thanks [@jesstelford](https://github.com/jesstelford)! - Fix <Code> renderer on Patterns pages to support code blocks without meta - [#8622](#8622) [`613f637c9`](613f637) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix minor layout bugs in app-settings-layout pattern code example - [#8379](#8379) [`c8207636c`](c820763) Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`, `Bleed`, `Columns`, and `Inline` - [#8614](#8614) [`3526fc2fc`](3526fc2) Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to `Text`, `AlphaCard`, and `AlphaStack` - [#8616](#8616) [`74f0bc42a`](74f0bc4) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed icon page layout - [#8602](#8602) [`575b351d5`](575b351) Thanks [@yurm04](https://github.com/yurm04)! - Added search tracking using google analytics - Updated dependencies \[[`696473b82`](696473b), [`437a3bbf1`](437a3bb), [`078cf9aea`](078cf9a), [`83bde8690`](83bde86), [`ff70ab3d1`](ff70ab3), [`62b712362`](62b7123), [`446ba341c`](446ba34), [`d27a361c2`](d27a361), [`3e7e0837d`](3e7e083), [`230786ace`](230786a), [`6ee523a5f`](6ee523a), [`515a62f3b`](515a62f), [`fb373c3e1`](fb373c3)]: - @shopify/polaris@10.36.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@dGoligorsky

### WHY are these changes introduced? After liaising with @dGoligorsky we wanted to tweak some of the primitive values for the Tooltip, namely the animation duration and the box-shadow for the overlay. The animation felt too slow, and the shadow meant that Tooltips being displayed over white backgrounds were quite hard to distinguish. We have sped up the animation duration from 200ms to 50ms, and added an extra shadow on top of the `--p-shadow-popover` for the Tooltip to ensure the top edge is visible. Spin URL: https://admin.web.tooltip-tweak-demo.marc-thomas.eu.spin.dev/store/shop1/products/1 ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

@alex-page

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/stylelint-polaris@9.0.0 ### Major Changes - [Shopify#8657](Shopify#8657) [`764f17d86`](Shopify@764f17d) Thanks [@alex-page](https://github.com/alex-page)! - Turn on reportNeedlessDisables for all comments ## @shopify/polaris-migrator@0.16.0 ### Minor Changes - [Shopify#8272](Shopify#8272) [`cccd69848`](Shopify@cccd698) Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0 ### Patch Changes - Updated dependencies \[[`764f17d86`](Shopify@764f17d)]: - @shopify/stylelint-polaris@9.0.0 ## @shopify/polaris@10.36.0 ### Minor Changes - [Shopify#8555](Shopify#8555) [`696473b82`](Shopify@696473b) Thanks [@clarkjennings](https://github.com/clarkjennings)! - Added a forward `ref` to permit programmatic scrolling for `Scrollable` (example: `scrollRef.current?.scrollTo(0)`) - [Shopify#8650](Shopify#8650) [`078cf9aea`](Shopify@078cf9a) Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated breadcrumbs prop on SkeletonPage, added backAction prop with story - [Shopify#8586](Shopify#8586) [`83bde8690`](Shopify@83bde86) Thanks [@tatianau](https://github.com/tatianau)! - Made hiding the stepper arrows for inputs of type "number" and revealing them on hover and focus the default `TextField` behaviour to mimic the default browser experience - [Shopify#8288](Shopify#8288) [`d27a361c2`](Shopify@d27a361) Thanks [@rcd00](https://github.com/rcd00)! - Updated the style of keyboard component and add optional size prop - [Shopify#8600](Shopify#8600) [`515a62f3b`](Shopify@515a62f) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed list reset class from not applying to ordered lists - [Shopify#8655](Shopify#8655) [`fb373c3e1`](Shopify@fb373c3) Thanks [@stewx](https://github.com/stewx)! - Adjust CSS for expanded navigation section to remove unwanted space during collapse/expand ### Patch Changes - [Shopify#8595](Shopify#8595) [`437a3bbf1`](Shopify@437a3bb) Thanks [@KateWood](https://github.com/KateWood)! - Added option zebra striping to `IndexTable` ([Shopify#8595](Shopify#8595)) - [Shopify#8626](Shopify#8626) [`ff70ab3d1`](Shopify@ff70ab3) Thanks [@alex-page](https://github.com/alex-page)! - Fix border radius on active/pressed navigation items - [Shopify#8644](Shopify#8644) [`62b712362`](Shopify@62b7123) Thanks [@alex-page](https://github.com/alex-page)! - Remove unnecessary stylelint-disable comments - [Shopify#8651](Shopify#8651) [`446ba341c`](Shopify@446ba34) Thanks [@aveline](https://github.com/aveline)! - Updated default stack order custom property - [Shopify#8659](Shopify#8659) [`3e7e0837d`](Shopify@3e7e083) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed comments after stylelint rule changes that are breaking the rules - [Shopify#8606](Shopify#8606) [`230786ace`](Shopify@230786a) Thanks [@alex-page](https://github.com/alex-page)! - Remove unused shared scss functions and move low usage or low value functions into components - [Shopify#8629](Shopify#8629) [`6ee523a5f`](Shopify@6ee523a) Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the animation duration and box-shadow for the `Tooltip` ## @shopify/polaris-cli@0.1.17 ### Patch Changes - Updated dependencies \[[`cccd69848`](Shopify@cccd698)]: - @shopify/polaris-migrator@0.16.0 ## polaris.shopify.com@0.39.0 ### Minor Changes - [Shopify#8604](Shopify#8604) [`65a678d29`](Shopify@65a678d) Thanks [@lgriffee](https://github.com/lgriffee)! - Added a `shadow` token page - [Shopify#8615](Shopify#8615) [`4aacd1983`](Shopify@4aacd19) Thanks [@yurm04](https://github.com/yurm04)! - Added search event that sets the default google parameters in addition to custom - [Shopify#8613](Shopify#8613) [`1a36ed60c`](Shopify@1a36ed6) Thanks [@yurm04](https://github.com/yurm04)! - Added 'engagement' category to search event - [Shopify#8272](Shopify#8272) [`cccd69848`](Shopify@cccd698) Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0 ### Patch Changes - [Shopify#8621](Shopify#8621) [`dca759b0b`](Shopify@dca759b) Thanks [@jesstelford](https://github.com/jesstelford)! - Fix <Code> renderer on Patterns pages to support code blocks without meta - [Shopify#8622](Shopify#8622) [`613f637c9`](Shopify@613f637) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix minor layout bugs in app-settings-layout pattern code example - [Shopify#8379](Shopify#8379) [`c8207636c`](Shopify@c820763) Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`, `Bleed`, `Columns`, and `Inline` - [Shopify#8614](Shopify#8614) [`3526fc2fc`](Shopify@3526fc2) Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to `Text`, `AlphaCard`, and `AlphaStack` - [Shopify#8616](Shopify#8616) [`74f0bc42a`](Shopify@74f0bc4) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed icon page layout - [Shopify#8602](Shopify#8602) [`575b351d5`](Shopify@575b351) Thanks [@yurm04](https://github.com/yurm04)! - Added search tracking using google analytics - Updated dependencies \[[`696473b82`](Shopify@696473b), [`437a3bbf1`](Shopify@437a3bb), [`078cf9aea`](Shopify@078cf9a), [`83bde8690`](Shopify@83bde86), [`ff70ab3d1`](Shopify@ff70ab3), [`62b712362`](Shopify@62b7123), [`446ba341c`](Shopify@446ba34), [`d27a361c2`](Shopify@d27a361), [`3e7e0837d`](Shopify@3e7e083), [`230786ace`](Shopify@230786a), [`6ee523a5f`](Shopify@6ee523a), [`515a62f3b`](Shopify@515a62f), [`fb373c3e1`](Shopify@fb373c3)]: - @shopify/polaris@10.36.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

mrcthms requested a review from a team March 10, 2023 16:55

kyledurand approved these changes Mar 10, 2023

View reviewed changes

mrcthms force-pushed the mrcthms-tooltip-tweaking branch from 33bf9bd to 18a72f0 Compare March 14, 2023 10:57

mrcthms added 4 commits March 14, 2023 13:34

chore: tweak animation time and shadow of tooltip overlay

6c7e1a6

chore: update shadow value

7262e91

chore: add changeset

6a79576

chore: use shadow-lg

e554dc4

mrcthms force-pushed the mrcthms-tooltip-tweaking branch from 18a72f0 to e554dc4 Compare March 14, 2023 13:34

mrcthms merged commit 6ee523a into main Mar 14, 2023

mrcthms deleted the mrcthms-tooltip-tweaking branch March 14, 2023 14:33

shopify-github-actions-access bot mentioned this pull request Mar 14, 2023

Version Packages #8612

Merged

	box-shadow: var(--p-shadow-popover), 0 0 20px 8px rgba(23, 24, 24, 0.02);
	box-shadow: var(--p-shadow-popover), var(--p-shadow-deep);

[Tooltip] Tweak animation duration and box-shadow #8629

[Tooltip] Tweak animation duration and box-shadow #8629

Uh oh!

Conversation

mrcthms commented Mar 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

🎩 checklist

Uh oh!

mrcthms commented Mar 10, 2023

Uh oh!

github-actions bot commented Mar 10, 2023

Uh oh!

github-actions bot commented Mar 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

mrcthms commented Mar 10, 2023

Uh oh!

kyledurand left a comment

Choose a reason for hiding this comment

Uh oh!

kyledurand Mar 10, 2023

Choose a reason for hiding this comment

Uh oh!

lgriffee Mar 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dGoligorsky Mar 13, 2023

Choose a reason for hiding this comment

Uh oh!

mrcthms Mar 14, 2023

Choose a reason for hiding this comment

Uh oh!

alex-page Mar 14, 2023

Choose a reason for hiding this comment

Uh oh!

mrcthms commented Mar 14, 2023

Uh oh!

github-actions bot commented Mar 14, 2023

Uh oh!

mrcthms commented Mar 14, 2023

Uh oh!

kyledurand commented Mar 14, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mrcthms commented Mar 10, 2023 •

edited

Loading

github-actions bot commented Mar 10, 2023 •

edited

Loading

lgriffee Mar 10, 2023 •

edited

Loading