feat(ui): improve code-block-footer api

[vlad-schur-external-sap]

Summary

1. Copy confirmation is applied when customizing the footer content.
2. Inline "Copied!" confirmation does not disrupts the layout.

Changes Made

• Refactors CodeBlock to always render a unified CodeBlockFooter, passing codeBlockFooter as children.
• Updated CodeBlockFooter to use tooltip for copied action.
• Adjusts unit tests and Storybook stories to reflect the new footer composition behavior.

Related Issues

• Issue 1844: [Task](ui): improve `CodeBlockFooter´ API and copy confirmation #1844

Testing Instructions

1. pnpm i
2. pnpm TASK

Checklist

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.
• I have made corresponding changes to the documentation (if applicable).
• My changes generate no new warnings or errors.
• I have created a changeset for my changes.

PR Manifesto

Review the PR Manifesto for best practises.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0686a98

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@cloudoperators/juno-ui-components	Minor
@cloudoperators/juno-app-carbon	Patch
@cloudoperators/juno-app-doop	Patch
@cloudoperators/juno-app-example	Patch
@cloudoperators/juno-app-greenhouse	Patch
@cloudoperators/juno-app-heureka	Patch
@cloudoperators/juno-app-supernova	Patch
@cloudoperators/juno-app-template	Patch
@cloudoperators/juno-messages-provider	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-08-05 12:33 UTC

[Copilot]

Pull request overview

This PR refines the CodeBlock footer API in ui-components so custom footer content can be composed alongside (or instead of) the Copy button, and updates tests/stories accordingly.

Changes:

• Refactors CodeBlock to always render a unified CodeBlockFooter, passing codeBlockFooter as children.
• Updates CodeBlockFooter to support optional custom children and a “Copied!” tooltip on the Copy action.
• Adjusts unit tests and Storybook stories to reflect the new footer composition behavior.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
packages/ui-components/src/components/CodeBlock/CodeBlockFooter.component.tsx	Makes footer composable (children + optional Copy) and adds tooltip feedback for copied state.
packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx	Switches to a single footer composition model (custom content rendered inside CodeBlockFooter).
packages/ui-components/src/components/CodeBlock/CodeBlock.test.tsx	Updates/extends tests for combined custom footer + Copy behavior and new footer API.
packages/ui-components/src/components/CodeBlock/CodeBlock.stories.tsx	Updates stories to demonstrate custom footer with/without Copy under the new API.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.

Suppressed comments (3)

packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx:163

• codeBlockFooter is now typed as ReactNode, so it can legally be values like 0 or an empty string. The current truthy check (copy || codeBlockFooter) would skip rendering the footer for those values; use a null/undefined check instead.

      {(copy || codeBlockFooter) && (
        <CodeBlockFooter onCopy={handleCopyClick} isCopied={isCopied} copy={copy}>
          {codeBlockFooter}
        </CodeBlockFooter>
      )}

packages/ui-components/src/components/CodeBlockFooter/CodeBlockFooter.component.tsx:40

• isCopied and copy are implemented with defaults (isCopied = false, copy = true), but the props interface currently requires callers to always pass them. This is a breaking API change and also mismatches runtime behavior; consider making them optional and documenting the defaults.

  isCopied: boolean

  /**
   * Whether to show the Copy button. Defaults to true.
   */
  copy: boolean

.changeset/hip-feet-divide.md:5

• The changeset note mentions CodeBlockFooter changes, but the PR also changes CodeBlock’s public API semantics: codeBlockFooter no longer replaces the footer/copy UI and its type widened to ReactNode. It’d be helpful to capture that behavior change in the release note.

`CodeBlockFooter`: add `children`, `copy` props; replace inline "Copied!" span with a Tooltip on the Copy button

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.

Suppressed comments (2)

packages/ui-components/src/components/CodeBlockFooter/CodeBlockFooter.component.tsx:50

• isCopied and copy are typed as required, but the component provides defaults (isCopied = false, copy = true). This forces consumers to pass values unnecessarily and makes the exported API inconsistent with runtime behavior.

export interface CodeBlockFooterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
  /**
   * Callback function to handle the copy action. Required when `copy` is true (the default).
   */
  onCopy: () => void

  /**
   * Indicates whether the content has been copied. Drives the "Copied!" tooltip on the Copy button.
   */
  isCopied: boolean

  /**
   * Whether to show the Copy button. Defaults to true.
   */
  copy: boolean

.changeset/hip-feet-divide.md:5

• This changeset only mentions CodeBlockFooter, but this PR also changes CodeBlock’s public API/behavior (codeBlockFooter is now rendered inside the unified footer and its type changed from ReactElement to ReactNode). The release note should mention that behavior change so consumers aren’t surprised.

`CodeBlockFooter`: add `children`, `copy` props; replace inline "Copied!" span with a Tooltip on the Copy button

[franzheidl]

Overall LGTM!

Some notes I am not sure about:

• Should we export the CodeBlockFooter from the index file, too?
• Strictly speaking, the reworked footer is a breaking change – instead of passing a whole new footer, we inject content into the footer now. Not sure if this warrants a major in the changeset, would be good to document/note either way.
• In the CodeBlock test, we now import the component directly form the component file, which makes it consistent with the rest / most of our tests. Using this strategy however wouldn't catch an error in case somebody removed the export from an index file. This is more of a general topic rather than for this specific component or PR though, that we should discuss at some point.

[franzheidl]

LGTM, see my my other comment.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Suppressed comments (5)

packages/ui-components/src/index.ts:27

• CodeBlockFooter is no longer exported from the package entrypoint, even though a new components/CodeBlockFooter module was added and CodeBlock now depends on it. This breaks consumers importing CodeBlockFooter from @cloudoperators/juno-ui-components.

export { Code } from "./components/Code/Code.component"
export { CodeBlock } from "./components/CodeBlock/CodeBlock.component"
export { ComboBox } from "./components/ComboBox/ComboBox.component"

packages/ui-components/src/index.ts:137

• CodeBlockFooterProps is no longer exported from the package types entrypoint. If CodeBlockFooter remains part of the public API, its props type should be re-exported consistently with other components.

export type { CodeProps } from "./components/Code/Code.component"
export type { CodeBlockProps } from "./components/CodeBlock/CodeBlock.component"
export type { ComboBoxProps, ComboBoxWidth, ComboBoxContextType } from "./components/ComboBox/ComboBox.component"

packages/ui-components/src/components/CodeBlockFooter/index.ts:6

• Component barrel files in this package typically re-export both the component and its public prop types (e.g. Button/index.ts). Exporting CodeBlockFooterProps here enables clean re-exports from the package root.

export { CodeBlockFooter } from "./CodeBlockFooter.component"

packages/ui-components/src/components/CodeBlockFooter/CodeBlockFooter.component.tsx:40

• CodeBlockFooterProps currently requires onCopy, isCopied, and copy even though defaults exist and copy={false} is a supported mode. This makes the public API harder to use (e.g. forcing a no-op onCopy when hiding the Copy button). Consider making these props optional and relying on defaults / no-op behavior.

export interface CodeBlockFooterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
  /**
   * Callback function to handle the copy action. Required when `copy` is true (the default).
   */
  onCopy: () => void

.changeset/hip-feet-divide.md:2

• This changeset describes a breaking change to CodeBlock (and also removes/reworks CodeBlockFooter exports). With the package currently at version 9.x, the bump should be major to follow semver.

"@cloudoperators/juno-ui-components": minor

[franzheidl]

LGTM