fix(clipboard-copy): update icons and verify tokens by jcmill · Pull Request #8228 · patternfly/patternfly

jcmill · 2026-03-18T20:11:43Z

Summary

Update the Clipboard Copy component to use the correct copy icon and confirm token usage.

What changed

Clipboard Copy icon: Replaced the copy-button icon from copy to rh-ui-copy-fill across all Clipboard Copy examples so the component uses the intended design-system icon.
File updated: src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md — all button--icon="copy" references are now button--icon="rh-ui-copy-fill" (basic, expandable, inline compact, and all variants).

Fixes #8186

Verification

Token usage for the Clipboard Copy component has been verified and is correct.

Summary by CodeRabbit

New Features
- Added read-only state styling support for the ClipboardCopy component with updated visual styling for read-only expandable content.
Documentation
- Updated ClipboardCopy component examples with new icon names and documented the read-only state modifier and styling options.

coderabbitai · 2026-03-18T20:12:05Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

Walkthrough

Updates ClipboardCopy component to replace the copy icon with rh-ui-copy-fill, introduces readonly state styling via new CSS variables and .pf-m-readonly modifier class for expandable content, and implements conditional readonly modifier rendering in the template.

Changes

Cohort / File(s)	Summary
Documentation & Examples `src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md`	Updated icon name from `copy` to `rh-ui-copy-fill` across all button instances (basic, expandable, inline, and code variants). Added `clipboard-copy--IsReadonly="true"` flag to read-only expandable examples. Added `.pf-m-readonly` documentation entry for readonly styling.
Component Styling `src/patternfly/components/ClipboardCopy/clipboard-copy.scss`	Introduced two new CSS variables for readonly expandable content styling (`--<clipboard-copy>--m-readonly__expandable-content--BackgroundColor` and `--<clipboard-copy>--m-readonly__expandable-content--BorderColor`) mapped to read-only design tokens. Added `.pf-m-readonly` modifier to override expandable content background and border colors.
Component Template `src/patternfly/components/ClipboardCopy/clipboard-copy.hbs`	Added conditional rendering of `pf-m-readonly` modifier class when `clipboard-copy--IsReadonly` parameter is true.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

patternfly/patternfly#8179 — Broader rh-ui icon name migration affecting multiple components' button icons, aligning with this PR's icon update.
patternfly/patternfly#8121 — Modifies ClipboardCopy expandable content token styling; directly related to the readonly expandable content styling changes in this PR.

Suggested labels

Needs design review

Suggested reviewers

mcoker
bekah-stephens
andrew-ronaldson

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title follows conventional commit guidelines with 'fix' type and descriptive message about icon updates and token verification.
Linked Issues check	✅ Passed	Changes align with issue `#8186`: icons updated from 'copy' to 'rh-ui-copy-fill', readonly token support added, and token usage verified.
Out of Scope Changes check	✅ Passed	All changes relate to the linked issue objectives: icon replacement, readonly styling implementation, and token verification for ClipboardCopy component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md`:
- Line 174: The button partial currently uses button--icon="rh-ui-copy-fill"
while its aria-label is "Run in web terminal", creating a semantic mismatch;
update the element so the visual icon and accessible label match by either
changing button--icon to a terminal/run icon (replace
button--icon="rh-ui-copy-fill" with the appropriate terminal icon name) or by
changing aria-label to a copy-focused text such as "Copy" to align with
button--icon="rh-ui-copy-fill" in the ClipboardCopy example.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 2a90a36e-87d0-4781-a0cd-36b215128f93

📥 Commits

Reviewing files that changed from the base of the PR and between 25e0e19 and 7ea4b02.

📒 Files selected for processing (1)

src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md

src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md

patternfly-build · 2026-03-18T20:26:04Z

Preview: https://pf-pr-8228.surge.sh

A11y report: https://pf-pr-8228-a11y.surge.sh

jcmill · 2026-03-20T20:23:40Z

@bekah-stephens, quick question. I noticed the token used for the read-only background color was correct but the actually value was different from the figma file. Does that value need to be updated? It was the difference between something like a -200 and a -300.

bekah-stephens

For the default state, the expanded area should use the default control tokens for the background and stroke colors.

Fill: global/background/color/control/default
Stroke: global/border/color/control/default

For the read-only state, the expanded area should use the read-only control tokens for the background and stroke colors.

Fill: global/background/color/control/read-only
Stroke: global/border/color/control/read-only

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md`:
- Line 270: Fix the typo in the table row describing the expandable readonly
modifier: change "boarder" to "border" in the cell that mentions
`.pf-m-expandable-readonly` and `.pf-v6-c-clipboard-copy__expandable-content` so
the description reads "Modifies expandable content to match readonly form
control background and border."

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 9fce8e53-2a4b-43a1-bc09-c970b430f507

📥 Commits

Reviewing files that changed from the base of the PR and between 7ea4b02 and 6817326.

📒 Files selected for processing (3)

src/patternfly/components/ClipboardCopy/clipboard-copy-expandable-content.hbs
src/patternfly/components/ClipboardCopy/clipboard-copy.scss
src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md

✅ Files skipped from review due to trivial changes (1)

src/patternfly/components/ClipboardCopy/clipboard-copy-expandable-content.hbs

src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md

src/patternfly/components/ClipboardCopy/clipboard-copy-expandable-content.hbs

src/patternfly/components/ClipboardCopy/clipboard-copy.scss

mcoker

Feature changes look good! Can you make a couple of small updates to the docs?

src/patternfly/components/ClipboardCopy/clipboard-copy-expandable-content.hbs

src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md

mcoker

Just a small syntax thing, but I would add clipboard-copy--IsReadonly="true" to the non-expandable example, too, even though it doesn't do anything at the moment. In react, we have a isReadOnly prop you apply to <ClipboardCopy /> so I'm thinking this class goes on any read-only clipboard copy component.

mcoker · 2026-03-27T16:03:20Z

src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md

 | `.pf-m-block` | `.pf-v6-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
 | `.pf-m-truncate` | `.pf-v6-c-clipboard-copy.pf-m-truncate` | Modifies the inline copy clipboard component for use with text used in trucate component. |
 | `.pf-m-expanded` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
+| `.pf-m-readonly` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for read-only styles |


bekah-stephens

It looks like there's something off with the collapsed editable field in dark mode (it doesn't match the editable expanded panel). It looks fine in light mode, though? (I marked the visually correct fields with green arrows)

bekah-stephens · 2026-03-30T15:40:40Z

I'm not sure if it's easy for you to update this, but something small I noticed is that the content for the read-only example says "This is an editable version..." which is confusing on first glance. I think it would be good to make those examples say "This is a read-only version..."

…der color of form control read-only input

…adonly on the root so read-only appearance is driven from the component, aligned with clipboard-copy--IsReadonly and updated examples/docs.

…entation, remove extra space

…en to match

jcmill · 2026-03-30T20:46:32Z

@bekah-stephens, I did a rebase because the tokens looked wrong and that pretty much fixed everything. Also changed the copy for the read-only items.

bekah-stephens

lgtm!

mcoker · 2026-04-01T18:24:54Z

src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md

Can you add the readonly class to this, too? Not sure if you saw it but I mentioned updating this in my last review comment here - #8228 (review)

Suggested change

{{#> clipboard-copy clipboard-copy--id="basic-readonly" clipboard-copy--IsReadonly="true"}}

mcoker

🚀

patternfly-build · 2026-04-01T20:09:50Z

🎉 This PR is included in version 6.5.0-prerelease.64 🎉

The release is available on:

Your semantic-release bot 📦🚀

coderabbitai bot reviewed Mar 18, 2026

View reviewed changes

src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md Show resolved Hide resolved

mcoker requested review from bekah-stephens, mcoker and srambach March 19, 2026 14:30

bekah-stephens requested changes Mar 23, 2026

View reviewed changes

jcmill linked an issue Mar 23, 2026 that may be closed by this pull request

Clipboard copy: Update icons and verify token changes #8186

Closed

coderabbitai bot reviewed Mar 25, 2026

View reviewed changes

src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md Outdated Show resolved Hide resolved

mcoker reviewed Mar 26, 2026

View reviewed changes

src/patternfly/components/ClipboardCopy/clipboard-copy-expandable-content.hbs Outdated Show resolved Hide resolved

src/patternfly/components/ClipboardCopy/clipboard-copy.scss Outdated Show resolved Hide resolved

mcoker requested changes Mar 26, 2026

View reviewed changes

src/patternfly/components/ClipboardCopy/clipboard-copy-expandable-content.hbs Outdated Show resolved Hide resolved

src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md Outdated Show resolved Hide resolved

mcoker reviewed Mar 26, 2026

View reviewed changes

src/patternfly/components/ClipboardCopy/examples/ClipboardCopy.md Outdated Show resolved Hide resolved

jcmill requested review from bekah-stephens and mcoker March 27, 2026 13:24

mcoker reviewed Mar 27, 2026

View reviewed changes

bekah-stephens requested changes Mar 30, 2026

View reviewed changes

jcmill added 7 commits March 30, 2026 16:10

add rh ui copy fill icon

732b82d

update read-only expandable content to match background color and bor…

0cb7ca3

…der color of form control read-only input

fix sp error

5321d15

Replace pf-m-expandable-readonly on __expandable-content with pf-m-re…

6ac13cb

…adonly on the root so read-only appearance is driven from the component, aligned with clipboard-copy--IsReadonly and updated examples/docs.

add read-only logic to all read-only groups, simplify read-only docum…

882d775

…entation, remove extra space

fix punctuation error

deef9c9

fix placeholder and expandable text for read-only elements

faeca7d

jcmill force-pushed the fix/3642-clipboard-copy branch from 4cdd568 to faeca7d Compare March 30, 2026 20:16

rebase for newest tokens and update expandable-content background tok…

ad5264b

…en to match

jcmill requested a review from bekah-stephens March 30, 2026 20:45

bekah-stephens approved these changes Apr 1, 2026

View reviewed changes

mcoker reviewed Apr 1, 2026

View reviewed changes

add read-only logic to basic example

bb5a615

mcoker approved these changes Apr 1, 2026

View reviewed changes

mcoker merged commit 4596bf8 into patternfly:main Apr 1, 2026
5 checks passed

patternfly-build added the released on @prerelease label Apr 1, 2026

	\| `.pf-m-readonly` \| `.pf-v6-c-clipboard-copy` \| Modifies the clipboard copy component for read-only styles \|
	\| `.pf-m-readonly` \| `.pf-v6-c-clipboard-copy` \| Modifies the clipboard copy component for read-only styles. \|


	{{#> clipboard-copy clipboard-copy--id="basic-readonly" clipboard-copy--IsReadonly="true"}}

Conversation

jcmill commented Mar 18, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What changed

Verification

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jcmill commented Mar 20, 2026

Uh oh!

bekah-stephens left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

bekah-stephens left a comment

Choose a reason for hiding this comment

Uh oh!

bekah-stephens commented Mar 30, 2026

Uh oh!

jcmill commented Mar 30, 2026

Uh oh!

bekah-stephens left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jcmill commented Mar 18, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 18, 2026 •

edited

Loading

patternfly-build commented Mar 18, 2026 •

edited

Loading