fix(icons): operation copy-to-clipboard icon visibility - #11050
Merged
Merged
Conversation
Fix the doubling of the copy-to-clipboard icon by removing the inner svg element, and just leaving the button background. Allow the copy button to shrink to being invisible by removing its padding. Clean up the unused CopyIcon component.
Convert class component to functional component with typed Props interface. Remove PropTypes in favour of TypeScript types. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
React.FC is unnecessary since React 18 removed implicit children prop. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
glowcloud
approved these changes
Sep 16, 2026
cka121
approved these changes
Sep 16, 2026
Contributor
|
🎉 This PR is included in version 5.33.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Cherry-pick of #11047 plus a TypeScript migration of the affected component.
Changes
<CopyIcon>SVG element fromCopyToClipboardBtn— the icon was being rendered twice (once via React component, once via CSSbackground-image). The button is now self-closing; CSS remains the sole icon source.CopyIconcomponent (src/core/plugins/icons/components/copy.jsx) and its export from the icons plugin.copy-to-clipboard-btn.jsxto TypeScript (copy-to-clipboard-btn.tsx) — class component converted to functional component with a typedPropsinterface, PropTypes removed in favour of TypeScript types.Motivation and Context
The doubled icon caused visual glitches (duplicate copy icon). The a11y fixes from #10999 (
aria-label/titleon wrapper and button) are preserved — those were already merged before this branch.How Has This Been Tested?
CopyIconorcopy-to-clipboard-btn.jsxin sourceChecklist
My PR contains...
src/is unmodified: changes to documentation, CI, metadata, etc.)package.json)My changes...
Documentation
Automated tests
🤖 Generated with Claude Code