There has since been created a CopyTextButton.vue component for the tokens documentation, perhaps we can just reuse that?
I can work on this, but where should the button be located in the example - next to the "Hide code" toggle? And should it always be shown, or just when the code is being displayed?

(reposting this comment because I didn't want to bury an important edit I made)

In T295184#7768506, @DannyS712 wrote:

There has since been created a CopyTextButton.vue component for the tokens documentation, perhaps we can just reuse that?

I'm hoping we can reuse that component for this purpose. It's possible that more work may be needed to properly copy the code and retain formatting. I'm not sure how the CopyTextButton component work out of the box for this.

I can work on this, but where should the button be located in the example - next to the "Hide code" toggle? And should it always be shown, or just when the code is being displayed?

My first instinct was to put it in the bottom right corner of the code pane because there's space there, but it could easily be missed in that position. I think it makes sense to only show the button when the code is being displayed. @Volker_E, do you have any recommendations as far as where we might place the "copy code" button and whether it should be shown all the time or only when the code pane is expanded?

In T295184#7768595, @AnneT wrote:

In T295184#7768506, @DannyS712 wrote:

There has since been created a CopyTextButton.vue component for the tokens documentation, perhaps we can just reuse that?

I'm hoping we can reuse that component for this purpose. It's possible that more work may be needed to properly copy the code and retain formatting. I'm not sure how the CopyTextButton component work out of the box for this.

Looks like it works fine out of the box - in my patch I moved it from /components/tokens/CopyTextButton.vue to /components/copy-text-button/CopyTextButton.vue to make it clearer it can be used elsewhere in the docs (though perhaps we may want to make this an actual component (or composable) in the main package at some point.

I can work on this, but where should the button be located in the example - next to the "Hide code" toggle? And should it always be shown, or just when the code is being displayed?

My first instinct was to put it in the bottom right corner of the code pane because there's space there, but it could easily be missed in that position. I think it makes sense to only show the button when the code is being displayed. @Volker_E, do you have any recommendations as far as where we might place the "copy code" button and whether it should be shown all the time or only when the code pane is expanded?

For now I'm displaying it only when the code is being shown, and putting it right next to the show/hide toggle (on the left of the toggle so that it doesn't move the toggle, since the toggle is *always* on the right side of the box even when in RTL view this order is forced, though we may want to consider moving the buttons to the other side in RTL...)

Change 770046 had a related patch set uploaded (by DannyS712; author: DannyS712):

[design/codex@main] docs, Wrapper: add a "copy" button for code samples

https://gerrit.wikimedia.org/r/770046

Change 770046 merged by jenkins-bot:

[design/codex@main] docs, Wrapper: add a "copy" button for code samples

https://gerrit.wikimedia.org/r/770046

Change 772470 had a related patch set uploaded (by DannyS712; author: DannyS712):

[design/codex@main] docs, Wrapper: Add dynamic sample code generation with controls

https://gerrit.wikimedia.org/r/772470

Change 772470 merged by jenkins-bot:

[design/codex@main] docs, Wrapper: Add dynamic sample code generation with controls

https://gerrit.wikimedia.org/r/772470