Update Copy to Clipboard recipe to show/hide on hover/focus events #11802

aaronccasanova · 2024-03-28T18:41:15Z

WHAT is this pull request doing?

This PR updates the Copy to Clipboard recipe to show/hide the copy button on hover/focus events. This was accomplished by adding a few more hooks to the system:

useHover - Tracks mouseenter/mouseleave events on a target ref
useFocus - Tracks focus/blur events on a target ref
useFocusIn - Tracks focusin/focusout events on a target ref
useMediaQuery - Tracks change events on a target matchMedia(query). Additionally, supports queryAliases to streamline the application of common media queries e.g.
const isMouseDevice = useMediaQuery('mouse')

Example: Show the copy button on mouseenter of the target ref:

Screen.Recording.2024-03-28.at.11.43.12.AM.mov

Example: Always show the copy button on non-mouse devices

Screen.Recording.2024-03-28.at.11.44.31.AM.mov

Example: Show the copy button on focusin of the target ref

Screen.Recording.2024-03-28.at.2.20.51.PM.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

…-copy-to-clipboard

sarahill

🎉 👏 🚀

aaronccasanova · 2024-03-29T07:16:26Z

polaris-react/src/utilities/use-focus.ts

+  const handleFocusIn = useCallback(() => {
+    if (deferredFocusOut.current) {
+      clearTimeout(deferredFocusOut.current);
+      deferredFocusOut.current = null;
+    }
+    setIsFocusedIn(true);
+  }, []);
+
+  const handleFocusOut = useCallback(() => {
+    // Push focusout state update to the end of the event queue to
+    // allow subsequent focusin events to persist the isFocusedIn state
+    deferredFocusOut.current = setTimeout(() => {
+      setIsFocusedIn(false);
+    }, 0);


Prevents the internal state from toggling off and on when moving focus between child elements

sam-b-rose

The code and examples look great!

Curious to know more about the feedback that was given on why we made these UX changes? The show/hide of the copy button after hover and focus seem like a two-step process rather than one.

@aaronccasanova did you consider composing a useMediaQuery hook with the useHover instead of creating a useMouseHover? Still the same number of hooks, but maybe more flexible in the long-term 😄

I could see something like:

// predefined set of media or custom string
const isMouseDevice = useMediaQuery("mouse");
const isHover = useHover(ref);
const isMouseHover = isMouseDevice ? isHover : fallback;

aaronccasanova · 2024-03-29T17:48:27Z

Curious to know more about the feedback that was given on why we made these UX changes? The show/hide of the copy button after hover and focus seem like a two-step process rather than one.

The UX changes were made based on feedback from our Vault review. The suggestion was to not have the copy icon visible at all times, but only when a user hovers over the text. The rationale behind this is that if a user intends to copy a piece of text, their natural instinct would be to bring their cursor to the text. When they do this, the copy icon will be revealed, leading them to the action of copying. I do agree it has the effect of being a two-step process but should be the same number of operations as the original recipe.

@aaronccasanova did you consider composing a useMediaQuery hook with the useHover instead of creating a useMouseHover?

Yes, early explorations were implemented with a useMediaQuery hook (albeit still within the useMouseHover). I ended up removing it to avoid confusion with our existing useMediaQuery hook and reduce overall complexity. That said, I like the idea of moving more logic to the recipe and happy to reintroduce it.

sam-b-rose

💯 ✅

sam-b-rose · 2024-04-01T10:13:46Z

polaris-react/src/components/Button/Button.stories.tsx

+  const isFocusedIn = useFocusIn(ref);
+  const isHovered = useHover(ref);
+  const isMouseDevice = useMediaQuery('mouse');
+  const isMouseHovered = isMouseDevice ? isHovered : true;


Very nice! This pattern feels much more composable to me. Thanks for updating this so fast ⚡

Thanks for the suggestion! I am also much happier with this composition 🎉

laurkim

Nice! 💯
Just a small suggestion to adjust the vertical alignment of the button in the story but not blocking

laurkim · 2024-04-01T13:30:42Z

polaris-react/src/components/Button/Button.stories.tsx

+                <Button
+                  variant="tertiary"
+                  accessibilityLabel="Copy email address"
+                  onClick={copy}
+                  icon={status === 'copied' ? CheckIcon : ClipboardIcon}
+                />


Suggested change

<Button

variant="tertiary"

accessibilityLabel="Copy email address"

onClick={copy}

icon={status === 'copied' ? CheckIcon : ClipboardIcon}

/>

<InlineStack align="center">

<Button

variant="tertiary"

accessibilityLabel="Copy email address"

onClick={copy}

icon={status === 'copied' ? CheckIcon : ClipboardIcon}

/>

</InlineStack>

Thanks for flagging the alignment issue! Instead of introducing an element, I added blockAlign="center" to the parent InlineStack and activatorWrapper="div" to the Tooltip:

Before:

After:

Before:

After:

Co-authored-by: Lo Kim <lo.kim@shopify.com>

@aaronccasanova

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/polaris@12.25.0 ### Minor Changes - [#11802](#11802) [`3d93f8daf`](3d93f8d) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added `useHover`, `useFocus`, `useFocusIn`, and `useMediaQuery` hooks for building Copy to Clipboard actions - [#11801](#11801) [`f6308995e`](f630899) Thanks [@sophschneider](https://github.com/sophschneider)! - Added white alpha ramp and more dark experimental tokens ### Patch Changes - [#11617](#11617) [`2ff9427b3`](2ff9427) Thanks [@jesstelford](https://github.com/jesstelford)! - [IndexTable] Unify sticky table header rendering with regular heading for consistency - Updated dependencies \[[`f6308995e`](f630899)]: - @shopify/polaris-tokens@8.10.0 ## @shopify/polaris-tokens@8.10.0 ### Minor Changes - [#11801](#11801) [`f6308995e`](f630899) Thanks [@sophschneider](https://github.com/sophschneider)! - Added white alpha ramp and more dark experimental tokens ## @shopify/polaris-migrator@0.28.5 ### Patch Changes - Updated dependencies \[[`f6308995e`](f630899)]: - @shopify/polaris-tokens@8.10.0 - @shopify/stylelint-polaris@15.5.1 ## @shopify/stylelint-polaris@15.5.1 ### Patch Changes - Updated dependencies \[[`f6308995e`](f630899)]: - @shopify/polaris-tokens@8.10.0 ## polaris-for-vscode@0.9.8 ### Patch Changes - Updated dependencies \[[`f6308995e`](f630899)]: - @shopify/polaris-tokens@8.10.0 ## polaris.shopify.com@0.67.1 ### Patch Changes - Updated dependencies \[[`3d93f8daf`](3d93f8d), [`2ff9427b3`](2ff9427), [`f6308995e`](f630899)]: - @shopify/polaris@12.25.0 - @shopify/polaris-tokens@8.10.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

…hopify#11802) ### WHAT is this pull request doing? This PR updates the Copy to Clipboard recipe to show/hide the copy button on hover/focus events. This was accomplished by adding a few more hooks to the system: - `useHover` - Tracks `mouseenter`/`mouseleave` events on a target ref - `useFocus` - Tracks `focus`/`blur` events on a target ref - `useFocusIn` - Tracks `focusin`/`focusout` events on a target ref - `useMediaQuery` - Tracks `change` events on a target `matchMedia(query)`. Additionally, supports `queryAliases` to streamline the application of [common media queries](https://github.com/argyleink/open-props/blob/09e70c03c0a2533d06ec823f47490f018eb27f23/src/props.media.css#L21-L24) e.g. `const isMouseDevice = useMediaQuery('mouse')` Example: Show the copy button on `mouseenter` of the target ref: https://github.com/Shopify/polaris/assets/32409546/b3799bdf-e915-4761-a68c-f2724cccd9f1 Example: Always show the copy button on non-mouse devices https://github.com/Shopify/polaris/assets/32409546/221d7c76-9a4a-49e2-8be3-8f97d1d7a3b2 Example: Show the copy button on `focusin` of the target ref https://github.com/Shopify/polaris/assets/32409546/49c078f0-158a-40b3-8494-c15d94f3d0ea --------- Co-authored-by: Lo Kim <lo.kim@shopify.com> Co-authored-by: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>

aaronccasanova added 5 commits March 28, 2024 10:10

Update Copy to Clipboard recipe

d757f29

Merge branch 'main' of https://github.com/Shopify/polaris into update…

7eb2b26

…-copy-to-clipboard

Add useFocus and useFocusIn hooks

f53a3c8

Apply useFocusIn hook in Copy to Clipboard recipe

e16e6d5

Add changeset entry

548e5cd

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

aaronccasanova changed the title ~~Update Copy to Clipboard recipe to show/hide on mouseHover/focus~~ Update Copy to Clipboard recipe to show/hide on hover/focus events Mar 28, 2024

aaronccasanova added 6 commits March 28, 2024 13:49

Update useMouseHover to use an options bag

29797b9

Remove extraneous ref and update useMouseHover options

44b42ec

Prevent flashing when moving focus between child elements

fcc4191

Add tests for useHover and useMouseHover hooks

b72f759

Update test variable names

5a272e7

Add tests for useFocus and useFocusIn hooks

28288ac

aaronccasanova self-assigned this Mar 29, 2024

aaronccasanova requested review from kyledurand, sarahill, sam-b-rose, sophschneider and laurkim March 29, 2024 00:10

aaronccasanova added the #gsd:38421 Polaris Common Action Patterns label Mar 29, 2024

aaronccasanova marked this pull request as ready for review March 29, 2024 00:10

sarahill approved these changes Mar 29, 2024

View reviewed changes

Update variable names and code comments

345c4e2

aaronccasanova commented Mar 29, 2024

View reviewed changes

sam-b-rose reviewed Mar 29, 2024

View reviewed changes

aaronccasanova added 3 commits March 29, 2024 16:15

Add useMediaQuery hook/tests and update Copy to Clipboard recipe

fffd56e

Remove useMouseHover in favor of useMediaQuery

629ce51

Update changeset entry

b2fd54d

sam-b-rose approved these changes Apr 1, 2024

View reviewed changes

laurkim approved these changes Apr 1, 2024

View reviewed changes

aaronccasanova and others added 3 commits April 1, 2024 11:43

Fix copy button alignment

bd58cc3

Co-authored-by: Lo Kim <lo.kim@shopify.com>

Update test descriptions

ea349d1

Update useHover JSDoc

a5eb555

aaronccasanova removed the 🤖Skip Changelog Causes CI to ignore changelog update check. label Apr 1, 2024

aaronccasanova merged commit 3d93f8d into main Apr 1, 2024
17 checks passed

aaronccasanova deleted the update-copy-to-clipboard branch April 1, 2024 21:26

shopify-github-actions-access bot mentioned this pull request Apr 1, 2024

Version Packages #11814

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Copy to Clipboard recipe to show/hide on hover/focus events #11802

Update Copy to Clipboard recipe to show/hide on hover/focus events #11802

aaronccasanova commented Mar 28, 2024 •

edited

sarahill left a comment

aaronccasanova Mar 29, 2024

sam-b-rose left a comment

aaronccasanova commented Mar 29, 2024

sam-b-rose left a comment

sam-b-rose Apr 1, 2024

aaronccasanova Apr 1, 2024

laurkim left a comment

laurkim Apr 1, 2024 •

edited

aaronccasanova Apr 1, 2024

Update Copy to Clipboard recipe to show/hide on hover/focus events #11802

Update Copy to Clipboard recipe to show/hide on hover/focus events #11802

Conversation

aaronccasanova commented Mar 28, 2024 • edited

WHAT is this pull request doing?

How to 🎩

🎩 checklist

sarahill left a comment

Choose a reason for hiding this comment

aaronccasanova Mar 29, 2024

Choose a reason for hiding this comment

sam-b-rose left a comment

Choose a reason for hiding this comment

aaronccasanova commented Mar 29, 2024

sam-b-rose left a comment

Choose a reason for hiding this comment

sam-b-rose Apr 1, 2024

Choose a reason for hiding this comment

aaronccasanova Apr 1, 2024

Choose a reason for hiding this comment

laurkim left a comment

Choose a reason for hiding this comment

laurkim Apr 1, 2024 • edited

Choose a reason for hiding this comment

aaronccasanova Apr 1, 2024

Choose a reason for hiding this comment

aaronccasanova commented Mar 28, 2024 •

edited

laurkim Apr 1, 2024 •

edited