From fa0ad0306c06250f8af5f842d86b86f609fe02ea Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 20 Dec 2024 14:12:13 -0500
Subject: [PATCH] UX: improve link copy status transition (#30401)

---
 .../discourse/app/lib/post-action-feedback.js | 17 ++++++----
 .../common/post-action-feedback.scss          |  9 ++---
 .../desktop/post-action-feedback.scss         | 34 ++++++++++++-------
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/lib/post-action-feedback.js b/app/assets/javascripts/discourse/app/lib/post-action-feedback.js
index 05a986b957a..28b741d5d77 100644
--- a/app/assets/javascripts/discourse/app/lib/post-action-feedback.js
+++ b/app/assets/javascripts/discourse/app/lib/post-action-feedback.js
@@ -1,6 +1,9 @@
 import { SVG_NAMESPACE } from "discourse-common/lib/icon-library";
 import { i18n } from "discourse-i18n";
 
+const TIMEOUT = 2500;
+const TRANSITION_BUFFER = 250;
+
 export default function postActionFeedback({
   postId,
   actionClass,
@@ -58,8 +61,7 @@ function createAlert(message, postId, actionBtn) {
 
   actionBtn.appendChild(alertDiv);
 
-  setTimeout(() => alertDiv.classList.add("slide-out"), 1000);
-  setTimeout(() => removeElement(alertDiv), 2500);
+  setTimeout(() => removeElement(alertDiv), TIMEOUT);
 }
 
 function createCheckmark(btn, actionClass, postId) {
@@ -67,13 +69,16 @@ function createCheckmark(btn, actionClass, postId) {
   const checkmark = makeCheckmarkSvg(postId, actionClass, svgId);
   btn.appendChild(checkmark.content);
 
-  setTimeout(() => checkmark.classList.remove("is-visible"), 3000);
-  setTimeout(() => removeElement(document.getElementById(svgId)), 3500);
+  setTimeout(() => removeElement(document.getElementById(svgId)), TIMEOUT);
 }
 
 function styleBtn(btn) {
-  btn.classList.add("is-copied");
-  setTimeout(() => btn.classList.remove("is-copied"), 3200);
+  btn.classList.add("--activated", "--transition");
+  setTimeout(
+    () => btn.classList.remove("--activated"),
+    TIMEOUT - TRANSITION_BUFFER
+  );
+  setTimeout(() => btn.classList.remove("--transition"), TIMEOUT);
 }
 
 function makeCheckmarkSvg(postId, actionClass, svgId) {
diff --git a/app/assets/stylesheets/common/post-action-feedback.scss b/app/assets/stylesheets/common/post-action-feedback.scss
index a073f04a12a..af2cd1a590f 100644
--- a/app/assets/stylesheets/common/post-action-feedback.scss
+++ b/app/assets/stylesheets/common/post-action-feedback.scss
@@ -9,8 +9,8 @@
     position: relative;
     height: 100%;
 
-    &.is-copied,
-    &.is-copied:hover {
+    &.--activated,
+    &.--activated:hover {
       .d-icon-d-post-share {
         color: var(--success);
       }
@@ -25,11 +25,6 @@
     display: block;
     stroke: var(--success);
     opacity: 0;
-    transition: opacity 0.5s ease-in-out;
-
-    &.is-visible {
-      opacity: 1;
-    }
 
     path {
       stroke: var(--success);
diff --git a/app/assets/stylesheets/desktop/post-action-feedback.scss b/app/assets/stylesheets/desktop/post-action-feedback.scss
index 3439d2918b1..2d32ebd70ae 100644
--- a/app/assets/stylesheets/desktop/post-action-feedback.scss
+++ b/app/assets/stylesheets/desktop/post-action-feedback.scss
@@ -1,24 +1,32 @@
 .post-action-feedback-alert {
   position: absolute;
   top: -1.5rem;
-  left: 50%;
+  left: 60%;
   transform: translateX(-50%);
   color: var(--success);
   padding: 0.25rem 0.5rem;
   white-space: nowrap;
   font-size: var(--font-down-2);
-  opacity: 1;
-  transition: opacity 0.5s ease-in-out;
+  opacity: 0;
   z-index: calc(z("timeline") + 1);
-  &.-success {
-    color: var(--success);
-  }
-
-  &.-fail {
-    color: var(--danger);
-  }
-
-  &.slide-out {
-    animation: slide 1s cubic-bezier(0, 0, 0, 2) forwards;
+}
+.--transition {
+  .post-action-feedback-alert,
+  .post-action-feedback-svg {
+    transition: opacity 0.25s, color 0.25s;
+  }
+}
+.--activated {
+  .post-action-feedback-alert,
+  .post-action-feedback-svg {
+    opacity: 1;
+  }
+  .post-action-feedback-alert {
+    &.-success {
+      color: var(--success);
+    }
+    &.-fail {
+      color: var(--danger);
+    }
   }
 }