sl-copy-button: allow text inside the button and allow disabling tooltip

[jetwiwo]

My site has a number of copy buttons to copy different things next to each other. An icon is not sufficient to communicate the purpose of the button. I'd like to see a text slot added which is displayed alongside the icon.

My site also doesn't use tooltips so I'd like the option to disable it on this particular button.

[notophir]

@jetwiwo
I completely understand the need to have text next to the icon. Users may also click on the text itself, expecting it to behave the same as clicking on the icon itself. I managed to work around this issue, by setting a class on the sl-copy-button, and the text content inside a data attribute, then displaying it in a ::before pseudo element. To wrap the whole solution up, set csspart button as absolute and inset: 0. Hope it helps you achieve what you need. As for disabling tooltips, I believe you can select it using a csspart so you can change its visibility on your site.

<sl-copy-button class='copy' data-text='some text' value='this text will be copied' />

.copy {
    height: 3em;
    width: 100%;
    position: relative;
    &:before {
        content: attr(data-text);
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
    }
    &::part(button) {
        position: absolute;
        inset: 0;
    }
}

Edit: Alternative to explicitly settings width / height is to use the display to inline-grid or set min-width/height style attributes as needed.

[claviska]

Thanks for the suggestion. It will be trivial to disable the tooltip, e.g. we could add a tooltip-placement="none" option, but this is currently what gets announced to screen readers. Without the tooltip, the copy button becomes inaccessible so we'd need to add a label. So we have a little bit of refactoring to do if we want to tackle this the right way :)