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

[Azquelt]

Q&A (please complete the following information)

• OS: Linux
• Browser: firefox + chrome
• Version: 155 + 153
• Method of installation: dist assets
• Swagger-UI version: 5.32.14
• Swagger/OpenAPI version: tested with Swagger 2.0, OpenAPI 3.0, 3.1

Content & configuration

Open dist/index.html with the default example.

Describe the bug you're encountering

1. The background of the copy-to-clipboard icon on each operation shrinks away when not hovered over, but the icon itself remains visible at all times
2. The copy-to-clipboard icon on each operation is doubled and slightly offset

To reproduce...

Steps to reproduce the behavior:

1. Open dist/index.html with the default example.
2. Roll over an operation

Expected behavior

The icon should disappear when not hovered as it did in 5.32.13

Screenshots

5.32.14 (broken):

5.32.14 with brightness curves adjusted so the problem is more visible:

5.32.13 (good):

Additional context or thoughts

I think this was introduced by #10999

The doubled icon seems to be because the icon is both the button content and the button background.

[Azquelt]

Thought to try dark mode and the problem is more visible there:

[Azquelt]

Looks like there are two different ways the copy-to-clipboard button is implemented?

The one on the operation bar had a <CopyToClipboardBtn> containing a <CopyToClipboard> containing a <CopyIcon> which is a component containing an SVG (from #8094).

The others (curl command, request snippet, copyable code) had a <CopyToClipboard> containing a button, where _buttons.scss adds an SVG as the button background (from #5278).

I'm not sure why the two were done differently, but the doubled icon is caused by #10999 adding a button to <CopyToClipboardBtn> which has the SVG set as its background.

[robert-hebel-sb]

hey 👋
thanks for reporting the issue; It has been fixed and released in https://github.com/swagger-api/swagger-ui/releases/tag/v5.33.0