Skip to content

[Task](ui): implement custom CodeBlock footer and options #1829

Description

@franzheidl

Currently, CodeBlock only supports ether rendering a Copy option in the footer (default), or not.

We see a need to add custom functionality to the CodeBlock, such as an option to download the file as displayed, etc.

In order to allow users to pass their own functionality to the CodeBlock while not breaking the component and keeping the API consistent with other, similar components in our system (Modal, which provides a default set-up as well as the option to pass a fully customized footer with custom options), we need to do the following:

Subtasks

  • Modularize CodeBlock by factoring out a CodeBlockFooter (currently a div.juno-codeblock-bottombar) that can be passed into a slot, set to false to not render at all, or set to true to render the "Copy" option (default), in order to keep the approach and API consistent with Modal
  • add a CustomCodeBlockFooter story (title: CodeBlock with Custom Options) that adds a custom footer with a Download and a Copy button (in this sequence ltr). For the Download button use the Download icon to align with the Copy buton.
  • add the necessary tests

Metadata

Metadata

Labels

documentationImprovements or additions to documentationui-componentsAll tasks related to juno-ui-components library

Type

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions