Copy button for input fields about cel-playground

[pateldivyesh1323]

@matheusfm

• The hover effect does not work correctly, because when the cursor moves on the copy button, the hover effect from the text area gets removed and copy button display becomes none.
• Sometimes copy button is barely visible as it overlaps with the text (Maybe it needs a background color)

CEL.Playground.-.Google.Chrome.2023-10-25.22-14-22.mp4

[pateldivyesh1323]

@monuelo I would like to work on this.

[matheusfm]

Hi @pateldivyesh1323 !
Thanks for your interest in working on this issue.

That figma already has this copy button: https://www.figma.com/file/pasjtGKiZws9pkiVK9Gzp3/Playground?type=design&node-id=0-1&mode=design

The expected behavior is for the copy button to appear when hovering over the text area.

[matheusfm]

PS: you can interact with the figma prototype here: https://www.figma.com/proto/pasjtGKiZws9pkiVK9Gzp3/Playground?type=design&node-id=29-836&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=29%3A836&hide-ui=1

[joaovictor3g]

Hi @pateldivyesh1323, are you using the display property to make the copy button visible, right? Maybe if you use the visibility property that could work as expected. Also, our UX/UI designer is going to update the prototype adding the background-color in the copy button as you suggested.

[pateldivyesh1323]

• Hello @joaovictor3g

  Using visibility property didn't worked. I wrapped text editor and copy button inside a div and applied hover event listener on it, so it started treating them as a single entity.

• @matheusfm

  I opened a pull request, can you please review it.