Swatch and Title Attributes Updates / Fixes

packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte

@@ -17,8 +17,8 @@
   import { keyevents } from "../actions"
 
   export let value = "#3ec1d3ff"
-  export let open = false;
-  export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
+  export let open = false
+  export let swatches = []
   export let disableSwatches = false
   export let format = "hexa"
   export let style = ""
@@ -27,6 +27,7 @@
 
   let colorPicker = null
   let adder = null
+  let swatchesSetFromLocalStore = false
 
   let h = 0
   let s = 0
@@ -38,7 +39,14 @@
   onMount(() => {
     if (!swatches.length > 0) {
       //Don't use locally stored recent colors if swatches have been passed as props
-      getRecentColors()
+      swatchesSetFromLocalStore = true
+      swatches = getRecentColors() || []
+    }
+
+    if (swatches.length > 12) {
+      console.warn(
+        `Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.`
+      )
     }
 
     if (colorPicker) {
@@ -53,24 +61,21 @@
   function getRecentColors() {
     let colorStore = localStorage.getItem("cp:recent-colors")
     if (colorStore) {
-      swatches = JSON.parse(colorStore)
+      return JSON.parse(colorStore)
     }
   }
 
   function handleEscape() {
     if (open) {
-      open = false;
+      open = false
     }
   }
 
-  function setRecentColor(color) {
-    if (swatches.length === 12) {
-      swatches.splice(0, 1)
-    }
-    if (!swatches.includes(color)) {
-      swatches = [...swatches, color]
-      localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
-    }
+  function setRecentColors(color) {
+    const s = swatchesSetFromLocalStore
+      ? swatches
+      : [...getRecentColors(), color]
+    localStorage.setItem("cp:recent-colors", JSON.stringify(s))
   }
 
   function convertAndSetHSVA() {
@@ -134,8 +139,16 @@
 
   function addSwatch() {
     if (format) {
+      if (swatches.length === 12) {
+        swatches.splice(0, 1)
+      }
+
+      if (!swatches.includes(value)) {
+        swatches = [...swatches, value]
+        setRecentColors(value)
+      }
+
       dispatch("addswatch", value)
-      setRecentColor(value)
     }
   }
 
@@ -143,7 +156,10 @@
     let removedSwatch = swatches.splice(idx, 1)
     swatches = swatches
     dispatch("removeswatch", removedSwatch)
-    localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
+    if (swatchesSetFromLocalStore) {
+      //as could be a swatch not present in local storage
+      setRecentColors()
+    }
   }
 
   function applySwatch(color) {
@@ -159,14 +175,13 @@
 
   $: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
   $: selectedColorStyle = buildStyle({ background: value, border })
-  $: shrink = swatches.length > 0
-    
+  $: hasSwatches = swatches.length > 0
 </script>
 
 <Portal>
   <div
     class="colorpicker-container"
-    use:keyevents={{"Escape": handleEscape}}
+    use:keyevents={{ Escape: handleEscape }}
     transition:fade
     bind:this={colorPicker}
     {style}
@@ -182,7 +197,10 @@
       <div class="alpha-hue-panel">
         <div>
           <CheckedBackground borderRadius="50%" backgroundSize="8px">
-            <div class="selected-color" style={selectedColorStyle} />
+            <div
+              class="selected-color"
+              title={value}
+              style={selectedColorStyle} />
           </CheckedBackground>
         </div>
         <div>
@@ -205,22 +223,24 @@
 
       {#if !disableSwatches}
         <div transition:fade class="swatch-panel">
-          {#if swatches.length > 0}
+          {#if hasSwatches}
             {#each swatches as color, idx}
+              {#if idx < 12}
                 <Swatch
                   {color}
                   on:click={() => applySwatch(color)}
                   on:removeswatch={() => removeSwatch(idx)} />
+              {/if}
             {/each}
           {/if}
-          {#if swatches.length !== 12}
+          {#if swatches.length < 12}
             <div
               tabindex="0"
-              use:keyevents={{"Enter": addSwatch}}
+              use:keyevents={{ Enter: addSwatch }}
               bind:this={adder}
               transition:fade
               class="adder"
-              class:shrink
+              class:shrink={hasSwatches}
               on:click={addSwatch}>
               <span>&plus;</span>
             </div>

packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte

@@ -38,7 +38,6 @@
     }
   })
 
-
   function openColorpicker(event) {
     if (colorPreview) {
       open = true
@@ -62,17 +61,17 @@
     const spaceBelow = window.innerHeight - bottom
     const previewCenter = previewWidth / 2
 
-    let y, x;
+    let y, x
 
     if (spaceAbove > spaceBelow) {
       positionSide = "bottom"
-      y = (window.innerHeight - spaceAbove)
+      y = window.innerHeight - spaceAbove
     } else {
       positionSide = "top"
       y = bottom
     }
 
-    x = (left + previewCenter) - (220 / 2)
+    x = left + previewCenter - 220 / 2
 
     dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
   }
@@ -87,7 +86,6 @@
     [positionSide]: `${dimensions[positionSide]}px`,
     left: `${dimensions.left}px`,
   })
-  
 </script>
 
 <svelte:window on:resize={debounce(calculateDimensions, 200)} />
@@ -99,6 +97,7 @@
         bind:this={colorPreview}
         bind:clientHeight={previewHeight}
         bind:clientWidth={previewWidth}
+        title={value}
         class="color-preview"
         style={previewStyle}
         on:click={openColorpicker} />
@@ -116,12 +115,14 @@
         bind:pickerWidth
         bind:open
         {swatches}
-      {disableSwatches}
-       />
+        {disableSwatches} />
       <div on:click|self={() => (open = false)} class="overlay" />
     {/if}
   {:else}
-    <div class="color-preview preview-error" style={errorPreviewStyle}>
+    <div
+      class="color-preview preview-error"
+      title="Invalid Color"
+      style={errorPreviewStyle}>
       <span>&times;</span>
     </div>
   {/if}

packages/builder/src/components/userInterface/Colorpicker/components/Swatch.svelte

@@ -14,8 +14,9 @@
   <CheckedBackground borderRadius="6px">
     <div
       tabindex="0"
-      use:keyevents={{"Enter": () => dispatch("click")}}
+      use:keyevents={{ Enter: () => dispatch('click') }}
       in:fade
+      title={color}
       class="swatch"
       style={`background: ${color};`}
       on:click|self