Update the 'Copy' button animation (#10139)

Small little PR to update the 'Copy' button animation. You now get a
little more visual feedback that something has been copied successfully,
the copy symbol now transforms into a check mark.

**Before**


https://github.com/user-attachments/assets/65e9c661-3465-4734-a67c-9ccbc66880a3

**After**


https://github.com/user-attachments/assets/0486dc96-1e15-4974-832e-298b3a8a59e8

In doing so the 'Copied' tooltip has been dropped, happy to hear
thoughts on this, I personally found it a little janky in how it
replaced the existing tooltip on click.

### Testing done

* Animation displays as expected, copying still works

### Proposed changelog entries

- Update the 'Copy' button animation

### Proposed upgrade guidelines

N/A

<!-- Comment:
Leave the proposed upgrade guidelines in the pull request with the "N/A"
value if no upgrade guidelines are needed.
The changelog generator relies on the presence of the upgrade guidelines
section as part of its data extraction process.
-->

```[tasklist]
### Submitter checklist
- [ ] The Jira issue, if it exists, is well-described.
- [x] The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see [examples](https://github.com/jenkins-infra/jenkins.io/blob/master/content/_data/changelogs/weekly.yml)). Fill in the **Proposed upgrade guidelines** section only if there are breaking changes or changes that may require extra steps from users during upgrade.
- [x] There is automated testing or an explanation as to why this change has no tests.
- [ ] New public classes, fields, and methods are annotated with `@Restricted` or have `@since TODO` Javadocs, as appropriate.
- [ ] New deprecations are annotated with `@Deprecated(since = "TODO")` or `@Deprecated(forRemoval = true, since = "TODO")`, if applicable.
- [ ] New or substantially changed JavaScript is not defined inline and does not call `eval` to ease future introduction of Content Security Policy (CSP) directives (see [documentation](https://www.jenkins.io/doc/developer/security/csp/)).
- [ ] For dependency updates, there are links to external changelogs and, if possible, full differentials.
- [ ] For new APIs and extension points, there is a link to at least one consumer.
```

### Desired reviewers

@jenkinsci/sig-ux 

<!-- Comment:
If you need an accelerated review process by the community (e.g., for
critical bugs), mention @jenkinsci/core-pr-reviewers.
-->

Before the changes are marked as `ready-for-merge`:

```[tasklist]
### Maintainer checklist
- [x] There are at least two (2) approvals for the pull request and no outstanding requests for change.
- [x] Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
- [ ] Changelog entries in the pull request title and/or **Proposed changelog entries** are accurate, human-readable, and in the imperative mood.
- [ ] Proper changelog labels are set so that the changelog can be generated automatically.
- [ ] If the change needs additional upgrade steps from users, the `upgrade-guide-needed` label is set and there is a **Proposed upgrade guidelines** section in the pull request title (see [example](#4387)).
- [ ] If it would make sense to backport the change to LTS, a Jira issue must exist, be a _Bug_ or _Improvement_, and be labeled as `lts-candidate` to be considered (see [query](https://issues.jenkins.io/issues/?filter=12146)).
```

core/src/main/resources/lib/layout/copyButton.jelly

@@ -59,7 +59,9 @@ THE SOFTWARE.
           message="${attrs.message ?: '%Copied'}"
           tooltip="${attrs.label != null ? null : attrs.tooltip ?: '%Copy'}"
           type="button">
-    <span class="jenkins-copy-button__icon" />
+    <span class="jenkins-copy-button__icon">
+      <l:icon src="symbol-check" />
+    </span>
     ${attrs.label}
   </button>
 

core/src/main/resources/lib/layout/copyButton/copyButton.js

@@ -18,8 +18,10 @@ Behaviour.specify(
         navigator.clipboard
           .writeText(text)
           .then(() => {
-            // Show the completion message
-            hoverNotification(copyButton.getAttribute("message"), copyButton);
+            copyButton.classList.add("jenkins-copy-button--copied");
+            setTimeout(() => {
+              copyButton.classList.remove("jenkins-copy-button--copied");
+            }, 2000);
           })
           .catch(() => {
             hoverNotification(

src/main/scss/components/_buttons.scss

@@ -24,7 +24,6 @@
   min-height: 2.25rem;
   white-space: nowrap;
   gap: 1ch;
-  transition: var(--standard-transition);
 
   &::before {
     background: var(--button-background);
@@ -190,24 +189,44 @@
 .jenkins-copy-button {
   .jenkins-copy-button__icon {
     position: relative;
-    width: 0.9rem;
+    display: grid;
+    grid-template-columns: 1fr;
+    place-items: center;
+    width: 1.125rem;
     height: 1.125rem;
     transition: var(--standard-transition);
 
+    svg {
+      grid-area: 1 / 1;
+      scale: -0.5;
+      opacity: 0;
+      transition: var(--elastic-transition);
+      filter: blur(2px);
+      color: var(--success-color);
+
+      * {
+        stroke-width: 40px;
+      }
+    }
+
     &::before,
     &::after {
       content: "";
-      position: absolute;
-      width: 75%;
-      height: 75%;
+      position: relative;
+      width: 0.6875rem;
+      height: 0.875rem;
       border: 0.1rem solid currentColor;
       border-radius: 0.2rem;
-      transition: var(--standard-transition);
+      transition:
+        translate var(--standard-transition),
+        scale var(--standard-transition),
+        opacity var(--standard-transition),
+        filter var(--standard-transition);
+      grid-area: 1 / 1;
     }
 
     &::before {
-      top: 4%;
-      left: 1%;
+      translate: -16% -10%;
       clip-path: polygon(
         100% 0,
         100% 22.5%,
@@ -219,19 +238,45 @@
     }
 
     &::after {
-      bottom: 4%;
-      right: 1%;
+      translate: 16% 10%;
+    }
+  }
+
+  &--copied {
+    color: var(--success-color) !important;
+
+    --button-background: color-mix(
+      in sRGB,
+      var(--success-color) 10%,
+      transparent
+    );
+    --button-background--hover: var(--button-background);
+    --button-background--active: var(--button-background);
+
+    .jenkins-copy-button__icon {
+      &::before,
+      &::after {
+        scale: 1.25;
+        opacity: 0;
+        filter: blur(1px);
+      }
+
+      svg {
+        scale: 1.25;
+        opacity: 1;
+        filter: blur(0);
+      }
     }
   }
 
   &:hover {
     .jenkins-copy-button__icon {
       &::before {
-        transform: translate(7%, 4.5%);
+        translate: -11% -8%;
       }
 
       &::after {
-        transform: translate(-7%, -4.5%);
+        translate: 11% 8%;
       }
     }
   }