Skip to content

fix: Operation copy-to-clipboard icon visibility. - #11047

Closed
Azquelt wants to merge 1 commit into
swagger-api:mainfrom
Azquelt:bug/11046-copy-operation-path-icon
Closed

Azquelt wants to merge 1 commit into
swagger-api:mainfrom
Azquelt:bug/11046-copy-operation-path-icon

Conversation

@Azquelt

@Azquelt Azquelt commented Sep 11, 2026

Copy link
Copy Markdown

Description

  • 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.

Motivation and Context

Fixes #11046

How Has This Been Tested?

Tested manually in Firefox 155 and Chrome 153

Ran npm run cy:ci to check existing tests were not impacted.

Screenshots (if appropriate):

Operation:
image

Curl command:
image

Response body:
image

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • Bug fixes (non-breaking change which fixes an issue)
  • Improvements (misc. changes to existing features)
  • Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • are not breaking changes.

Documentation

  • My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • All new and existing tests passed.

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.
@@ -13,8 +13,6 @@
render() {
let { getComponent } = this.props

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
let { getComponent } = this.props

}

static propTypes = {
getComponent: PropTypes.func.isRequired,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

@robert-hebel-sb

Copy link
Copy Markdown
Contributor

Hi @Azquelt 👋

thank you for the fix! The doubled icon issue was a real pain point, and your diagnosis was spot on 🏅

We needed to get this out today as part of a planned release, so we've cherry-picked your commit and opened a superseding PR (#11050) on our side. We also took the opportunity to migrate the affected component to TypeScript while we were in there

Thanks again for the contribution, and sorry we couldn't wait for this PR to go through the normal review cycle

@Azquelt

Azquelt commented Sep 16, 2026

Copy link
Copy Markdown
Author

Awesome, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Copy operation path to clipboard button icon is doubled and does not hide correctly

2 participants