Closed scurker closed 2 weeks ago
Rather than using a polymorphic component (e.g. as
), I think passing a child would be simpler, similar to an internal component we have in another project I could show you. Thoughts?
@thuey I would like to see it. I was primarily thinking of a polymorphic component for 2 reasons:
I think there's pros/cons to both methods so I guess it would be good to weigh them and see where we land.
For an example of copy functionality, look at the existing CopyToClipboardButton
component for Cauldron docs: https://github.com/dequelabs/cauldron/blob/develop/docs/components/CopyToClipboardButton.tsx
Copy button is a component that accepts an optional Cauldron Button variant (defaulting to
tertiary
) to render an in interactive element to copy a specified string of text.Interface
variant
should default to the Button variant,tertiary
children
should default to the string, CopynotificationLabel
should default to the string, CopiedtooltipPlacement
optional prop to position the tooltipImplementation
By default, the Button will have a visible label that will be displayed with children. When
hideVisibleLabel
is set,children
should be wrapped in anOffscreen
component with a tooltip displayed instead.When the button is clicked, the text should be copied to the clipboard with a visible notification and offscreen aria-live notification using the
notificationLabel
text.The existing copy icon should be updated to match the one from the design.
Notification
When copied, a temporary notification should be visible to indicate a successful copy. This includes the following sequence:
notificationLabel
check-solid
aria-live="polite"
announcement should occur with the value ofnotificationLabel
After 2s, all of the original content can revert back to its original state.
Usage
This component is essentially a thin polymorphic wrapper around
<Button>
to add additional copy functionality.