copy button that copies text to clipboard #1112

nreese · 2018-08-10T22:12:37Z

Kibana uses this in the home page tutorials and needs the component in am more generic location so it can be used in other places. Figured the best place for it is in EUI.

cchaos

There are some issues with the tooltip rendering:

cchaos · 2018-08-13T14:53:16Z

src/components/button/button_copy/button_copy.js

+ content={this.state.tooltipText}
+ onMouseOut={this.resetTooltipText}
+ >
+ <EuiButton


I think we may want to pull this out into a more generic service so that they can pass any type of child node (any button or link) that gets wrapped in this functionality. As it stands, you can't use EuiButtonEmpty or EuiButtonIcon.

I would also like to look into creating a "disappearing" tooltip to use here. Where there is no tooltip on hover, but then when you click the trigger element, the tooltip only stays up for a short period of time. I'll look into this in another branch.

Maybe use a toast instead, which will auto dismiss itself and is good for this action (as well as for accessibility because it'll announce itself). The button will likely have the action in it so the tooltip on hover is likely unnecessary. Agree it should be more generic and accept any child element, not just a regular button.

My concern with a toast, is that it's not very tied to the button itself and can be easily overlooked. For small actions like this, maybe we should consider a new type of tooltip that reads out like a toast, but whose proximity is much closer to the triggering element?

There are some issues with the tooltip rendering

is a known bug, #996 ; coincidentally this exact use case

chandlerprall · 2018-08-13T15:52:02Z

Related to #594 , echoing what @cchaos said that this should be a service in EUI that can be used in buttons and anything else.

nreese · 2018-08-13T18:59:17Z

@cchaos @chandlerprall I have moved the component under utilities and now anything can be used as the child.

elasticdog · 2018-08-13T19:36:22Z

Jenkins, test this please.

chandlerprall · 2018-08-13T20:28:43Z

src-docs/src/views/copy/copy.js

+
+ <EuiSpacer size="m" />
+
+ <EuiCopy textToCopy={this.state.copyText}>


What do you think about making this a render prop instead of adding a span with its own onClick?

<EuiCopy textToCopy={this.state.copyText}> {(copyFn) => ( <EuiButton onClick={copyFn}>Click to copy input text</EuiButton> )} </EuiCopy> That keeps the utility component from affecting DOM and makes it more re-useable in other places.

nreese · 2018-08-13T21:30:52Z

Should textToCopy prop be a function?

chandlerprall · 2018-08-13T21:52:25Z

Should textToCopy prop be a function?

I think leaving it as a string makes sense; the parent is still in control, and the copy operation uses the current value on props, there's no caching happening.

cchaos · 2018-08-13T22:26:22Z

src/components/copy/copy.js

+import { EuiToolTip } from '../tool_tip';
+
+const UNCOPIED_MSG = 'Copy';
+const COPIED_MSG = 'Copied';


Can you make these messages customizable via props?

cchaos

Just a couple nit things, but thank you so much for adding this in. I'm excited to be able to start using it in our docs!

cchaos · 2018-08-14T01:26:31Z

src-docs/src/views/copy/copy_example.js

+ }],
+ text: (
+ <p>
+ The <EuiCode>EuiCopy</EuiCode> component is a simplified utility for copying text to clipboard.


Can you give more description on how it's used?

cchaos · 2018-08-14T01:27:52Z

src/components/copy/copy.js

+}
+
+EuiCopy.propTypes = {
+ textToCopy: PropTypes.string.isRequired,


Can you add comments to each prop type to populate the props list table in the docs?

Also, you may want to consider add TS def's ;)

cchaos · 2018-08-14T14:36:43Z

src/components/copy/copy.js

+};
+
+EuiCopy.defaultProps = {
+ beforeCopyMsg: 'Copy',


I think it's most likely that by default we won't need a before message (That'll also give us a quick fix for the tooltip positioning issue that probably won't be fixed relatively soon). Can you remove the before message default and in the component make the tooltip dependent on having either of these messages?

Also, since we've been being pretty verbose with our props, I think we can change these to "beforeMessage" and "afterMessage" ("Copy" is redundant of the component name and "Msg" can be remembered easily).

The problem with not having a default before message is that then the toolip is displayed with no text. I am not sure how this should work without a before and after message

Yeah you would need to conditionally wrap the child in a tooltip when one or both messages exist.

cchaos · 2018-08-14T14:39:54Z

src/components/copy/copy.js

+ } = this.props;
+
+ return (
+ <EuiToolTip


May want consider passing down {...rest} to the tooltip so consumers can customize it even more and pass down something like 'data-test-subj'.

cchaos · 2018-08-14T18:00:22Z

src/components/tool_tip/tool_tip.js

@@ -146,7 +146,7 @@ export class EuiToolTip extends Component {
 );

 let tooltip;
- if (visible) {
+ if (visible && content) {


Sorry, one last thing, but because tooltips accept title's as well can you change this to be if (visible && (content || title))

cchaos

Thanks! LGTM

copy button that copies text to clipboard

e2d6a02

nreese requested review from cchaos and chandlerprall August 10, 2018 22:12

change log

5859058

cchaos suggested changes Aug 13, 2018

View reviewed changes

nreese added 3 commits August 13, 2018 12:15

merge with master

6b02dfb

move to component under utilities

c6f3268

update change log

c87f029

chandlerprall reviewed Aug 13, 2018

View reviewed changes

nreese added 2 commits August 13, 2018 15:22

Merge branch 'master' of github.com:elastic/eui into copy_botton

b8196ca

make children be a function

8c7a378

cchaos reviewed Aug 13, 2018

View reviewed changes

make copy messages be props

9247100

cchaos suggested changes Aug 14, 2018

View reviewed changes

nreese added 2 commits August 14, 2018 09:46

add comments on props, pass rest, more details in usage example

1860b1b

do not provide default beforeMessage

45c41d9

cchaos reviewed Aug 14, 2018

View reviewed changes

besure to check for title in tooltip

d8724a4

cchaos approved these changes Aug 14, 2018

View reviewed changes

nreese merged commit 8391daf into elastic:master Aug 14, 2018

This was referenced Aug 14, 2018

Copy service in EUI #594

Closed

Allow copy an EuiCodeBlock #343

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

copy button that copies text to clipboard #1112

copy button that copies text to clipboard #1112

nreese commented Aug 10, 2018

cchaos left a comment

cchaos Aug 13, 2018

snide Aug 13, 2018

cchaos Aug 13, 2018

chandlerprall Aug 13, 2018

chandlerprall commented Aug 13, 2018

nreese commented Aug 13, 2018

elasticdog commented Aug 13, 2018

chandlerprall Aug 13, 2018

cchaos Aug 13, 2018

nreese commented Aug 13, 2018

chandlerprall commented Aug 13, 2018

cchaos Aug 13, 2018

cchaos left a comment

cchaos Aug 14, 2018

cchaos Aug 14, 2018

cchaos Aug 14, 2018

nreese Aug 14, 2018

cchaos Aug 14, 2018

cchaos Aug 14, 2018

cchaos Aug 14, 2018 •

edited

Loading

cchaos left a comment


		<EuiSpacer size="m" />

		<EuiCopy textToCopy={this.state.copyText}>

copy button that copies text to clipboard #1112

copy button that copies text to clipboard #1112

Conversation

nreese commented Aug 10, 2018

cchaos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chandlerprall commented Aug 13, 2018

nreese commented Aug 13, 2018

elasticdog commented Aug 13, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nreese commented Aug 13, 2018

chandlerprall commented Aug 13, 2018

Choose a reason for hiding this comment

cchaos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cchaos Aug 14, 2018 • edited Loading

Choose a reason for hiding this comment

cchaos left a comment

Choose a reason for hiding this comment

cchaos Aug 14, 2018 •

edited

Loading