Skip to content

Conversation

@jorgefilipecosta
Copy link
Member

Fixes: #34289
This PR fixes the issue #34289 by introducing a 3 seconds timer that resets the copied state allowing the user to copy the color again on the new color picker component after 3 seconds.

How has this been tested?

I verified that the UI of the "Copy" button resets (allowing the user to click the button again) after 3 seconds from the previous button click/press and that the "Copy!" button keeps copying the value to the clipboard as before.

@jorgefilipecosta jorgefilipecosta added the [Type] Enhancement A suggestion for improvement. label Sep 6, 2021
@ciampo ciampo added [Feature] Component System WordPress component system [Package] Components /packages/components labels Sep 13, 2021
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code changes LGTM and the Storybook example works as expected — thank you for working on this!

I wonder if we should write a unit test for this piece of functionality — something like:

  • focus on the color
  • check if the DOM contains the string "Copy"
  • click on the color
  • check if the value has been copied on the clipboard and if the DOM contains the string "Copied"
  • wait 3 seconds
  • check if the DOM contains the string "Copy"

Finally, while testing, I released that keyboard support is not great around this "copy to clipboard" functionality, and opened #34795 to track this issue separately.

@jorgefilipecosta jorgefilipecosta merged commit 7f13c37 into trunk Sep 14, 2021
@jorgefilipecosta jorgefilipecosta deleted the add/reset-timeout-to-ColorPickers-copy-functionality- branch September 14, 2021 11:16
@github-actions github-actions bot added this to the Gutenberg 11.6 milestone Sep 14, 2021
@jorgefilipecosta
Copy link
Member Author

Thank you for the review @ciampo, I will follow up with the creation of a new unit test.

fullofcaffeine added a commit that referenced this pull request Sep 16, 2021
* trunk: (74 commits)
  Update docs for ClipboardButton component (#34711)
  Post Title Block: add typography formatting options (#31623)
  Bump plugin version to 11.5.0
  Navigation Screen: Adjust header toolbar icon styles (#34833)
  Fix the parent menu item field in REST API responses (#34835)
  Rewrite FocusableIframe as hook API (#26753)
  Create Block: Remove wp-cli callout since not recommended and outdated (#34821)
  Global Styles: Fix dimensions panel default controls display (#34828)
  [RNMobile][Embed block] Enable embed preview for Instagram and Vimeo providers (#34563)
  Increase Link UI search results to 10 on Nav Editor screen (#34808)
  Prevent welcome guide overflow x scroll (#34713)
  Enable open on click for Page List inside Navigation. (#34675)
  [RNMobile] [Embed block] -  Unavailable preview fallback bottom sheet title update  (#34674)
  Add missing field _invalid in menu item REST API (#34670)
  Fix Dropdown/DropdownMenu toggle closing in all UAs (#31170)
  Navigation submenu block: replace global shortcut event handlers with local ones (#34812)
  Navigation Screen: Consolidate menu name and switcher (#34786)
  Remove parent and position validation from menu item REST API endpoint (#34672)
  Clean theme data when switching themes in the customizer (#34540)
  Components: add reset timeout to ColorPicker's copy functionality. (#34601)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Component System WordPress component system [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Components: add reset timeout to ColorPicker's copy functionality

3 participants