[Common actions] Add Copy To Clipboard recipe #11645

aaronccasanova · 2024-02-22T20:15:22Z

WHY are these changes introduced?

Closes https://github.com/Shopify/polaris-internal/issues/1521

WHAT is this pull request doing?

This PR introduces a minimal Copy to Clipboard recipe following the Common Actions guidance. Additionally, a new useCopyToClipboard hook was added to facilitate the native copy behavior and state management for the copied timeout.

Screen.Recording.2024-03-26.at.11.53.20.AM.mov

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

Tested a snapshot
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

…o-clipboard-recipe

sarahill · 2024-03-15T15:50:11Z

@aaronccasanova It's feeling a little flashy even when I wait the full transition time for the initial "Copy" tooltip. There's a flash the first couple times and then it goes into a flicker the next couple (see gif).

sam-b-rose

📋 💯

…o-clipboard-recipe

aaronccasanova · 2024-03-26T23:57:39Z

polaris-react/src/components/Tooltip/Tooltip.tsx

+      if (
+        event.key !== 'Escape' &&
+        event.key !== 'Enter' &&
+        event.key !== ' '
+      ) {
+        return;
+      }
      handleClose?.();


Updates the Tooltip to dismiss on enter/space key interactions (matching the behavior onClick)

Screen.Recording.2024-03-26.at.4.56.22.PM.mov

aaronccasanova · 2024-03-27T00:01:00Z

polaris-react/src/components/Tooltip/Tooltip.tsx

      onBlur={() => {
+        if (hoverDelayTimeout.current) {
+          clearTimeout(hoverDelayTimeout.current);
+          hoverDelayTimeout.current = null;
+        }


Prevents the Tooltip from flickering/reopening when clicking the activator before the hoverDelayTimeout (video at 25% speed)

Screen.Recording.2024-03-26.at.4.58.06.PM.mov

sarahill

This looks good and feels pretty smooth and easy to interact with 👏

chloerice

sam-b-rose

🚢

.changeset/flat-eagles-press.md

@sam-b-rose

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/[email protected] ### Minor Changes - [#11547](#11547) [`df5276317`](df52763) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Applied semantic type styles using the `Text` component - [#11728](#11728) [`281c8f8e9`](281c8f8) Thanks [@kyledurand](https://github.com/kyledurand)! - Added new AlphaPicker component - [#11645](#11645) [`b726dadbb`](b726dad) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added `useCopyToClipboard` hook for building copy actions matching common actions guidelines - [#11780](#11780) [`4fffc2dcc`](4fffc2d) Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - allows icons to be displayed on primary actions on Page component - [#11547](#11547) [`df5276317`](df52763) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added `base`,`inherit`, `disabled`, and `text-inverse` tone options for Text component - [#11547](#11547) [`df5276317`](df52763) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Updated plain/monochrome Button text size to bodySm for micro ### Patch Changes - [#11789](#11789) [`36df1aa6c`](36df1aa) Thanks [@laurkim](https://github.com/laurkim)! - Fixed logo spacing on `ContextualSaveBar` - [#11794](#11794) [`ffdcf1df7`](ffdcf1d) Thanks [@kyledurand](https://github.com/kyledurand)! - Set default scrollbar width to thin on scrollable - [#11804](#11804) [`d1b46c25c`](d1b46c2) Thanks [@laurkim](https://github.com/laurkim)! - Fixed layout shift on `EmptyState` when image is loading with skeleton image ## @shopify/[email protected] ### Minor Changes - [#11547](#11547) [`df5276317`](df52763) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added warning for `font-size`, `line-height`, and `font-weight` properties. Use the `Text` component as a preferred option. ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`df5276317`](df52763)]: - @shopify/[email protected] ## [email protected] ### Minor Changes - [#11779](#11779) [`86a6ba44a`](86a6ba4) Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added examples for `Card` and `Page` with icon actions ### Patch Changes - [#11547](#11547) [`df5276317`](df52763) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added page for `typography/property-disallow-list` Stylelint rule - Updated dependencies \[[`df5276317`](df52763), [`281c8f8e9`](281c8f8), [`b726dadbb`](b726dad), [`4fffc2dcc`](4fffc2d), [`df5276317`](df52763), [`36df1aa6c`](36df1aa), [`df5276317`](df52763), [`ffdcf1df7`](ffdcf1d), [`d1b46c25c`](d1b46c2)]: - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Co-authored-by: Chloe Rice <[email protected]>

Initial Copy To Clipboard recipe

f50e41b

aaronccasanova added the 🤖Skip Changelog Causes CI to ignore changelog update check. label Feb 22, 2024

aaronccasanova added 4 commits February 29, 2024 10:29

Remove pressed and isMouseHovered behavior

d588b73

Add controlled prop to open the Tooltip

068d0d8

Merge branch 'main' of https://github.com/Shopify/polaris into copy-t…

4681842

…o-clipboard-recipe

Remove test inputs for establishing default values

76905f8

aaronccasanova changed the title ~~Initial Copy To Clipboard recipe~~ [Common actions] Add Copy To Clipboard recipe Mar 14, 2024

aaronccasanova self-assigned this Mar 14, 2024

aaronccasanova added 4 commits March 14, 2024 15:49

Revert button style updates

2e84379

Remove useHover and useMouseHover hooks

44609ab

Revert Tooltip instant prop update

7ac665f

Add changeset entry

497a96f

aaronccasanova added #gsd:38421 Polaris Common Action Patterns and removed 🤖Skip Changelog Causes CI to ignore changelog update check. labels Mar 14, 2024

aaronccasanova marked this pull request as ready for review March 14, 2024 23:09

aaronccasanova requested review from chloerice, sarahill, sam-b-rose and alex-page March 14, 2024 23:09

alex-page approved these changes Mar 14, 2024

View reviewed changes

Remove extraneous imports

3b2f712

Add a11y label

c1e1060

sam-b-rose approved these changes Mar 18, 2024

View reviewed changes

aaronccasanova added 6 commits March 26, 2024 16:34

Merge branch 'main' of https://github.com/Shopify/polaris into copy-t…

df337f7

…o-clipboard-recipe

Simplify copy to clipboard recipe

aef1555

Update Tooltip to dismiss on enter/space key interactions

d93bc1a

Clear hoverDelayTimeout onBlur to prevent flickering

09d0bd9

Update React imports in useCopyToClipboard hook

037ad1a

Update changeset entry

2185140

aaronccasanova commented Mar 26, 2024

View reviewed changes

aaronccasanova commented Mar 27, 2024

View reviewed changes

sarahill approved these changes Mar 27, 2024

View reviewed changes

chloerice approved these changes Mar 27, 2024

View reviewed changes

aaronccasanova added 2 commits March 27, 2024 09:46

Add test cases for enter/space key interactions

d1618f8

Scope enter/space key dismissal to non-activator wrapper keyup events

518832c

sam-b-rose approved these changes Mar 27, 2024

View reviewed changes

aaronccasanova added 2 commits March 27, 2024 13:08

Improve readability of onKeyUp conditionals

fe089ee

Separate test cases to cover events trigger by activator or child nodes

0298d00

aaronccasanova commented Mar 27, 2024

View reviewed changes

.changeset/flat-eagles-press.md Outdated Show resolved Hide resolved

Update .changeset/flat-eagles-press.md

450eca7

aaronccasanova merged commit b726dad into main Mar 27, 2024
14 checks passed

aaronccasanova deleted the copy-to-clipboard-recipe branch March 27, 2024 22:03

aaronccasanova mentioned this pull request Mar 27, 2024

Update Tooltip to dismiss on enter/space key interactions #11790

Closed

6 tasks

shopify-github-actions-access bot mentioned this pull request Mar 27, 2024

Version Packages #11793

Merged

This was referenced Mar 27, 2024

Update Tooltip props and state management #11760

Closed

Revert Tooltip updates to close on child enter/space key interactions #11800

Merged

AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024

[Common actions] Add Copy To Clipboard recipe (Shopify#11645)

2517315

Co-authored-by: Chloe Rice <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Common actions] Add Copy To Clipboard recipe #11645

[Common actions] Add Copy To Clipboard recipe #11645

aaronccasanova commented Feb 22, 2024 •

edited

Loading

sarahill commented Mar 15, 2024 •

edited

Loading

sam-b-rose left a comment

aaronccasanova Mar 26, 2024

aaronccasanova Mar 27, 2024 •

edited

Loading

sarahill left a comment

chloerice left a comment

sam-b-rose left a comment

[Common actions] Add Copy To Clipboard recipe #11645

[Common actions] Add Copy To Clipboard recipe #11645

Conversation

aaronccasanova commented Feb 22, 2024 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

sarahill commented Mar 15, 2024 • edited Loading

sam-b-rose left a comment

Choose a reason for hiding this comment

aaronccasanova Mar 26, 2024

Choose a reason for hiding this comment

aaronccasanova Mar 27, 2024 • edited Loading

Choose a reason for hiding this comment

sarahill left a comment

Choose a reason for hiding this comment

chloerice left a comment

Choose a reason for hiding this comment

sam-b-rose left a comment

Choose a reason for hiding this comment

aaronccasanova commented Feb 22, 2024 •

edited

Loading

sarahill commented Mar 15, 2024 •

edited

Loading

aaronccasanova Mar 27, 2024 •

edited

Loading