remove icon dep; improve copy animation

docs/resources/changelog.md

@@ -8,8 +8,9 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
-- Improve visibility of elevations and overlays in dark theme
-- Reduce the size of `<sl-color-picker>` slightly to better accommodate mobile devices
+- Improved visibility of elevations and overlays in dark theme
+- Reduced the size of `<sl-color-picker>` slightly to better accommodate mobile devices
+- Removed `<sl-icon>` dependency from `<sl-color-picker>` and improve copy animation
 
 ## 2.0.0-beta.50
 

src/components/color-picker/color-picker.styles.ts

@@ -165,38 +165,19 @@ export default css`
     border: solid 1px rgba(0, 0, 0, 0.125);
   }
 
-  .color-picker__copy-feedback {
-    width: calc(var(--sl-input-height-small) / 2);
-    height: calc(var(--sl-input-height-small) / 2);
-    color: white;
-    background-color: rgb(var(--sl-color-neutral-900));
-    border-radius: var(--sl-border-radius-circle);
-    opacity: 0;
+  .color-picker__preview-color--copied {
+    animation: pulse 0.75s;
   }
 
-  .color-picker__copy-feedback.color-picker__copy-feedback--visible {
-    animation: copied 1s;
-  }
-
-  @keyframes copied {
+  @keyframes pulse {
     0% {
-      transform: scale(0.8);
-      opacity: 0;
+      box-shadow: 0 0 0 0 rgb(var(--sl-focus-ring-color));
     }
-
-    30% {
-      transform: scale(1.2);
-      opacity: 1;
-    }
-
     70% {
-      transform: scale(1.2);
-      opacity: 1;
+      box-shadow: 0 0 0 0.5rem transparent;
     }
-
     100% {
-      transform: scale(1.4);
-      opacity: 0;
+      box-shadow: 0 0 0 0 transparent;
     }
   }
 

src/components/color-picker/color-picker.ts

@@ -23,7 +23,6 @@ import '../input/input';
  *
  * @dependency sl-button
  * @dependency sl-dropdown
- * @dependency sl-icon
  * @dependency sl-input
  *
  * @event sl-change Emitted when the color picker's value changes.
@@ -65,7 +64,6 @@ export default class SlColorPicker extends LitElement {
   @state() private saturation = 100;
   @state() private lightness = 100;
   @state() private alpha = 100;
-  @state() private showCopyFeedback = false;
 
   /** The current color. */
   @property() value = '#ffffff';
@@ -203,8 +201,12 @@ export default class SlColorPicker extends LitElement {
     this.input.select();
     document.execCommand('copy');
     this.previewButton.focus();
-    this.showCopyFeedback = true;
-    this.previewButton.addEventListener('animationend', () => (this.showCopyFeedback = false), { once: true });
+
+    // Show copied animation
+    this.previewButton.classList.add('color-picker__preview-color--copied');
+    this.previewButton.addEventListener('animationend', () =>
+      this.previewButton.classList.remove('color-picker__preview-color--copied')
+    );
   }
 
   handleFormatToggle() {
@@ -388,10 +390,6 @@ export default class SlColorPicker extends LitElement {
     }
   }
 
-  handleDropdownAfterHide() {
-    this.showCopyFeedback = false;
-  }
-
   normalizeColorString(colorString: string) {
     //
     // The color module we're using doesn't parse % values for the alpha channel in RGBA and HSLA. It also doesn't parse
@@ -568,6 +566,10 @@ export default class SlColorPicker extends LitElement {
     this.isSafeValue = false;
   }
 
+  handleAfterHide() {
+    this.previewButton.classList.remove('color-picker__preview-color--copied');
+  }
+
   @watch('format')
   handleFormatChange() {
     this.syncValues();
@@ -710,17 +712,7 @@ export default class SlColorPicker extends LitElement {
               '--preview-color': `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
             })}
             @click=${this.handleCopy}
-          >
-            <sl-icon
-              name="check"
-              library="system"
-              class=${classMap({
-                'color-picker__copy-feedback': true,
-                'color-picker__copy-feedback--visible': this.showCopyFeedback,
-                'color-picker__copy-feedback--dark': this.lightness > 50
-              })}
-            ></sl-icon>
-          </button>
+          ></button>
         </div>
 
         <div class="color-picker__user-input">
@@ -785,7 +777,7 @@ export default class SlColorPicker extends LitElement {
         .containing-element=${this}
         ?disabled=${this.disabled}
         ?hoist=${this.hoist}
-        @sl-after-hide=${this.handleDropdownAfterHide}
+        @sl-after-hide=${this.handleAfterHide}
       >
         <button
           part="trigger"