From 6e5fe64e8b8a3fa622b95cfc50a9a3e913f91969 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 26 Oct 2021 09:35:07 -0400
Subject: [PATCH] add eye dropper

---
 .../color-picker/color-picker.styles.ts       |  5 +-
 src/components/color-picker/color-picker.ts   | 49 ++++++++++++++++---
 src/components/icon/library.system.ts         |  5 ++
 3 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index c147832f5..ee302109d 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -191,11 +191,14 @@ export default css`
     flex: 1 1 auto;
   }
 
+  .color-picker__user-input sl-button-group {
+    margin-left: var(--sl-spacing-small);
+  }
+
   .color-picker__user-input sl-button {
     min-width: 3.25rem;
     max-width: 3.25rem;
     font-size: 1rem;
-    margin-left: var(--sl-spacing-small);
   }
 
   .color-picker__swatches {
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index 24208b326..c99445c7c 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -13,15 +13,19 @@ import color from 'color';
 import styles from './color-picker.styles';
 
 import '../button/button';
+import '../button-group/button-group';
 import '../dropdown/dropdown';
 import '../icon/icon';
 import '../input/input';
 
+const hasEyeDropper = 'EyeDropper' in window;
+
 /**
  * @since 2.0
  * @status stable
  *
  * @dependency sl-button
+ * @dependency sl-button-group
  * @dependency sl-dropdown
  * @dependency sl-input
  *
@@ -570,6 +574,22 @@ export default class SlColorPicker extends LitElement {
     this.previewButton.classList.remove('color-picker__preview-color--copied');
   }
 
+  handleEyeDropper() {
+    if (!hasEyeDropper) {
+      return;
+    }
+
+    // @ts-ignore
+    const eyeDropper = new EyeDropper();
+
+    eyeDropper
+      .open()
+      .then((colorSelectionResult: any) => this.setColor(colorSelectionResult.sRGBHex))
+      .catch(() => {
+        // The user canceled, do nothing
+      });
+  }
+
   @watch('format')
   handleFormatChange() {
     this.syncValues();
@@ -606,6 +626,7 @@ export default class SlColorPicker extends LitElement {
     const x = this.saturation;
     const y = 100 - this.lightness;
 
+    // TODO - i18n for format, copy, and eye dropper buttons
     const colorPicker = html`
       <div
         part="base"
@@ -708,6 +729,7 @@ export default class SlColorPicker extends LitElement {
             type="button"
             part="preview"
             class="color-picker__preview color-picker__transparent-bg"
+            aria-label="Copy"
             style=${styleMap({
               '--preview-color': `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
             })}
@@ -730,13 +752,26 @@ export default class SlColorPicker extends LitElement {
             @sl-change=${this.handleInputChange}
           ></sl-input>
 
-          ${!this.noFormatToggle
-            ? html`
-                <sl-button exportparts="base:format-button" @click=${this.handleFormatToggle}>
-                  ${this.setLetterCase(this.format)}
-                </sl-button>
-              `
-            : ''}
+          <sl-button-group>
+            ${!this.noFormatToggle
+              ? html`
+                  <sl-button
+                    aria-label="Change format"
+                    exportparts="base:format-button"
+                    @click=${this.handleFormatToggle}
+                  >
+                    ${this.setLetterCase(this.format)}
+                  </sl-button>
+                `
+              : ''}
+            ${hasEyeDropper
+              ? html`
+                  <sl-button exportparts="base:eye-dropper-button" @click=${this.handleEyeDropper}>
+                    <sl-icon library="system" name="eyedropper" label="Select a color from the screen"></sl-icon>
+                  </sl-button>
+                `
+              : ''}
+          </sl-button-group>
         </div>
 
         ${this.swatches
diff --git a/src/components/icon/library.system.ts b/src/components/icon/library.system.ts
index 008e4cb98..0de597c84 100644
--- a/src/components/icon/library.system.ts
+++ b/src/components/icon/library.system.ts
@@ -41,6 +41,11 @@ const icons = {
       <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
     </svg>
   `,
+  eyedropper: `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eyedropper" viewBox="0 0 16 16">
+      <path d="M13.354.646a1.207 1.207 0 0 0-1.708 0L8.5 3.793l-.646-.647a.5.5 0 1 0-.708.708L8.293 5l-7.147 7.146A.5.5 0 0 0 1 12.5v1.793l-.854.853a.5.5 0 1 0 .708.707L1.707 15H3.5a.5.5 0 0 0 .354-.146L11 7.707l1.146 1.147a.5.5 0 0 0 .708-.708l-.647-.646 3.147-3.146a1.207 1.207 0 0 0 0-1.708l-2-2zM2 12.707l7-7L10.293 7l-7 7H2v-1.293z"></path>
+    </svg>
+  `,
   'grip-vertical': `
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16">
       <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>