Support tooltip for Page primary & secondary actions

[aminpaks]

WHY are these changes introduced?

Fixes https://github.com/Shopify/core-access/issues/409

These changes are being introduced because we want to be able to provide context for a user if there is a reason why we disable a Page Action. The above ticket shows an example of this where we want to show a Tooltip so we can tell the user why this button is disabled for them.

This change will allow us to provide this context to consumers of Polaris that utilize Page actions, it's optional and will not effect existing Page actions.

WHAT is this pull request doing?

Adds an option tooltip prop to Page actions.

How to 🎩

Top-hat instructions available in this PR which is using a snapshot of this Polaris change. https://github.com/Shopify/web/pull/69430

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

Not tophatted on mobile since this change does not effect Page actions inside the mobile ... ActionList. Not tested for accessibility since it is not adding any new visual elements.

• 🚫 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

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[aminpaks]

/snapit

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	198.39 KB (+0.05% 🔺)
polaris-react-esm	133.15 KB (-0.03% 🔽)
polaris-react-esnext	188.35 KB (+0.02% 🔺)
polaris-react-css	41.79 KB (+0.1% 🔺)

[aminpaks]

/snapit

[github-actions]

🫰✨ Thanks @aminpaks! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

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

[aminpaks]

/snapit

[github-actions]

🫰✨ Thanks @aminpaks! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

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

[sarahill]

This looks good on larger screens. Works on hover and focus as expected.

Couple things on small screens:

• Disabled option is interactive
• Since I can't hover to get a tooltip here, we'll need to think about how that message shows up when it's in a dropdown. You could potentially show the message below Refund when it's in the list... would need to see how that would fit.

[peterlazzarino]

Thanks for the feedback @sarahill , for those two items, we are planning on following up on a UX pattern for mobile but IIRC the team had concerns around tooltips on mobile (stacking actions) obscuring other items, so the tooltip would have to be custom styled. They wanted to get this shipped while they come up with a solution.

As for the interact-able button, I looked at what this is like now on the Page component and it seems this is currently how that button behaves for small screen disabled actions, so not a regression from this PR. I put up a code sandbox using Polaris 9.2.1 to confirm if you want to take a look. https://codesandbox.io/s/tmg9qm?module=App.js&file=/App.js . Even though in this case the button is properly disabled, there are some Polaris styles on hover and active that make it appear interact-able.

[peterlazzarino]

/snapit

[github-actions]

🫰✨ Thanks @peterlazzarino! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

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

[peterlazzarino]

Snapped and 🎩 on web, looking good!

[ghost]

🎉 Thanks for your contribution to Polaris!