update Clipboard

CHANGELOG.md

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ## [UNRELEASED]
 
 ## Added
+- [#3568]((https://github.com/plotly/dash/pull/3568) Added `children` and `copied_children` props to `dcc.Clipboard` to customize the button contents before and after copying.
 - [#3534]((https://github.com/plotly/dash/pull/3534) Adds `playsInline` prop to `html.Video`.  Based on [#2338]((https://github.com/plotly/dash/pull/2338)
 - [#3541](https://github.com/plotly/dash/pull/3541) Add `attributes` dictionary to be be formatted on script/link (_js_dist/_css_dist) tags of the index, allows for `type="module"` or `type="importmap"`. [#3538](https://github.com/plotly/dash/issues/3538)
 

components/dash-core-components/src/components/Clipboard.react.js

@@ -128,10 +128,14 @@ export default class Clipboard extends React.Component {
     }
 
     render() {
-        const {id, title, className, style} = this.props;
-        const copyIcon = <FontAwesomeIcon icon={faCopy} />;
-        const copiedIcon = <FontAwesomeIcon icon={faCheckCircle} />;
-        const btnIcon = this.state.copied ? copiedIcon : copyIcon;
+        const {id, title, className, style, children, copied_children} =
+            this.props;
+
+        const isCopied = this.state.copied;
+
+        const button_children = isCopied
+            ? copied_children ?? <FontAwesomeIcon icon={faCheckCircle} />
+            : children ?? <FontAwesomeIcon icon={faCopy} />;
 
         return clipboardAPI ? (
             <LoadingElement
@@ -141,7 +145,7 @@ export default class Clipboard extends React.Component {
                 className={className}
                 onClick={this.onClickHandler}
             >
-                <i> {btnIcon}</i>
+                {button_children}
             </LoadingElement>
         ) : null;
     }
@@ -160,6 +164,16 @@ Clipboard.propTypes = {
      */
     id: PropTypes.string,
 
+    /**
+     * Children rendered inside the Clipboard button before copying. By default, a copy icon.
+     */
+    children: PropTypes.node,
+
+    /**
+     * Children rendered inside the Clipboard button after the value has been copied. By default, a check icon.
+     */
+    copied_children: PropTypes.node,
+
     /**
      * The id of target component containing text to copy to the clipboard.
      * The inner text of the `children` prop will be copied to the clipboard.  If none, then the text from the
@@ -173,7 +187,7 @@ Clipboard.propTypes = {
     content: PropTypes.string,
 
     /**
-     * The number of times copy button was clicked
+     * The number of times Clipboard button was clicked
      */
     n_clicks: PropTypes.number,
 

components/dash-core-components/tests/integration/clipboard/test_clipboard.py

@@ -90,3 +90,46 @@ def selected(icon_clicks, button_clicks):
         == copy_text,
         timeout=3,
     )
+
+
+def test_clp004_clipboard_children_and_copied_children(dash_dcc_headed):
+    content = "https://dash.plotly.com/"
+    children_text = "Copy URL"
+    copied_children_text = "Copied!"
+
+    app = Dash(__name__, prevent_initial_callbacks=True)
+    app.layout = html.Div(
+        [
+            dcc.Clipboard(
+                id="clipboard",
+                children=children_text,
+                copied_children=copied_children_text,
+                content=content,
+            ),
+            dcc.Textarea(id="textarea"),
+        ]
+    )
+
+    dash_dcc_headed.start_server(app)
+
+    clipboard = dash_dcc_headed.find_element("#clipboard")
+
+    assert clipboard.text == children_text
+
+    clipboard.click()
+    wait.until(
+        lambda: dash_dcc_headed.find_element("#clipboard").text == copied_children_text,
+        timeout=3,
+    )
+    textarea = dash_dcc_headed.find_element("#textarea")
+    textarea.click()
+
+    ActionChains(dash_dcc_headed.driver).key_down(Keys.CONTROL).send_keys("v").key_up(
+        Keys.CONTROL
+    ).perform()
+
+    wait.until(
+        lambda: dash_dcc_headed.find_element("#textarea").get_attribute("value")
+        == content,
+        timeout=3,
+    )