Summary
This issue deals with two separate, but closely related topics:
Copy confirmation is lost when customizing the footer content
CodeBlockFooter currently does not accept children, so consumers using the codeBlockFooter slot end up re-implementing the Copy button, confirmation etc. themselves. The CustomCodeBlockFooter story illustrates this.
Add children?: ReactNode to CodeBlockFooter. Children render to the left of the Copy button, which is always present and rightmost.
Consumers who want custom footer content pass a <CodeBlockFooter> with children into the codeBlockFooter slot rather than building their own footer from scratch. The copy prop is preserved on the footer and respected, so the Copy button will be rendered as the rightmost button in the footer or not, depending on the value of the copy prop even when customizing the footer.
Update the CustomCodeBlockFooter story accordingly.
Inline "Copied!" confirmation disrupts layout
When preserving the Copy button as described above along with the current in-place confirmation, theer is a conflict, as custom options and the confirmation will need to go to the same location:
The <span> showing "Copied!" shifts footer layout on each copy action and will push custom children around. Replace it with a Tooltip on the Copy button, driven by isCopied, visible for the same 1000 ms. The tooltip floats above the layout and thus does not affect footer dimensions nor interferes with any other (custom) options.
Sub-tasks
Related Issues
This issue is a follow-up to #1829
Summary
This issue deals with two separate, but closely related topics:
Copy confirmation is lost when customizing the footer content
CodeBlockFootercurrently does not acceptchildren, so consumers using thecodeBlockFooterslot end up re-implementing the Copy button, confirmation etc. themselves. TheCustomCodeBlockFooterstory illustrates this.Add
children?: ReactNodetoCodeBlockFooter. Children render to the left of the Copy button, which is always present and rightmost.Consumers who want custom footer content pass a
<CodeBlockFooter>with children into thecodeBlockFooterslot rather than building their own footer from scratch. Thecopyprop is preserved on the footer and respected, so the Copy button will be rendered as the rightmost button in the footer or not, depending on the value of thecopyprop even when customizing the footer.Update the
CustomCodeBlockFooterstory accordingly.Inline "Copied!" confirmation disrupts layout
When preserving the Copy button as described above along with the current in-place confirmation, theer is a conflict, as custom options and the confirmation will need to go to the same location:
The
<span>showing"Copied!"shifts footer layout on each copy action and will push custom children around. Replace it with aTooltipon the Copy button, driven byisCopied, visible for the same 1000 ms. The tooltip floats above the layout and thus does not affect footer dimensions nor interferes with any other (custom) options.Sub-tasks
children?: ReactNodeprop toCodeBlockFooter; render children left, Copy button (if poresent as perCopyprop) right"Copied!"span with aTooltip"Copied!" on the Copy buttonCustomCodeBlockFooterstory to pass a<CodeBlockFooter>with a Download icon as children, no Copy buttonCustomCodeBlockFooterWithCopystory that setsCopyto true to illustrate how custom content (can be "Download", too) and Copy button can coexistRelated Issues
This issue is a follow-up to #1829