add labels to color picker swatches

adobe · Feb 19, 2024 · a5525bb · a5525bb
1 parent 474ab1b
commit a5525bb
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 13 deletions.
diff --git a/coral-base-button/src/scripts/BaseButton.js b/coral-base-button/src/scripts/BaseButton.js
@@ -192,7 +192,8 @@ const BaseButton = (superClass) => class extends BaseLabellable(superClass) {
 
         if (this.iconPosition === iconPosition.LEFT) {
           this.appendChild(label);
-        } else {
+        }
+        else {
           this.insertBefore(label, this.firstChild);
         }
       }
@@ -407,7 +408,8 @@ const BaseButton = (superClass) => class extends BaseLabellable(superClass) {
 
       if (value === variant._CUSTOM) {
         this.classList.remove(CLASSNAME);
-      } else {
+      }
+      else {
         this.classList.add(...VARIANT_MAP[value]);
 
         if (value === variant.ACTION || value === variant.QUIET_ACTION) {
@@ -505,7 +507,8 @@ const BaseButton = (superClass) => class extends BaseLabellable(superClass) {
     if (this._variant !== variant._CUSTOM) {
       if (this._variant === variant.ACTION || this._variant === variant.QUIET_ACTION) {
         label.classList.add(`${ACTION_CLASSNAME}-label`);
-      } else {
+      }
+      else {
         label.classList.add(`${CLASSNAME}-label`);
       }
     }
@@ -612,7 +615,8 @@ const BaseButton = (superClass) => class extends BaseLabellable(superClass) {
         // Don't add duplicated icons
         if (iconAdded) {
           this.removeChild(child);
-        } else {
+        }
+        else {
           // Conserve existing icon element to content
           this._elements.icon = child;
           fragment.appendChild(child);
@@ -622,7 +626,8 @@ const BaseButton = (superClass) => class extends BaseLabellable(superClass) {
       // Avoid content zone to be voracious
       else if (contentZoneProvided) {
         fragment.appendChild(child);
-      } else {
+      }
+      else {
         // Move anything else into the label
         label.appendChild(child);
       }

diff --git a/coral-base-component/src/scripts/BaseComponent.js b/coral-base-component/src/scripts/BaseComponent.js
@@ -39,7 +39,8 @@ const getListenerFromMethodNameOrFunction = function (obj, eventName, methodName
   // Try to get the method
   if (typeof methodNameOrFunction === 'function') {
     return methodNameOrFunction;
-  } else if (typeof methodNameOrFunction === 'string') {
+  }
+  else if (typeof methodNameOrFunction === 'string') {
     if (!obj[methodNameOrFunction]) {
       throw new Error(`Coral.Component: Unable to add ${eventName} listener for ${obj.toString()}, method
       ${methodNameOrFunction} not found`);
@@ -53,7 +54,8 @@ const getListenerFromMethodNameOrFunction = function (obj, eventName, methodName
     }
 
     return listener;
-  } else if (methodNameOrFunction) {
+  }
+  else if (methodNameOrFunction) {
     // If we're passed something that's truthy (like an object), but it's not a valid method name or a function, get
     // angry
     throw new Error(`Coral.Component: Unable to add ${eventName} listener for ${obj.toString()}, ${methodNameOrFunction}
@@ -147,7 +149,8 @@ const delegateEvents = function () {
             selector: selector,
             listener: listener
           });
-        } else {
+        }
+        else {
           this._globalEvents = this._globalEvents || [];
           this._globalEvents.push({eventName, selector, listener, isCapture});
         }
@@ -164,7 +167,8 @@ const delegateEvents = function () {
 
         // Add listener locally
         this._keys.on(eventName, selector, listener);
-      } else if (isResize) {
+      }
+      else if (isResize) {
         if (selector) {
           elements = document.querySelectorAll(selector);
           for (let i = 0 ; i < elements.length ; ++i) {

diff --git a/coral-component-colorinput/src/scripts/ColorInput.js b/coral-component-colorinput/src/scripts/ColorInput.js
@@ -814,6 +814,8 @@ const ColorInput = Decorator(class extends BaseFormField(BaseComponent(HTMLEleme
     this._elements.colorPreview.style.backgroundColor = currentColor ? currentColor.rgbaValue : '';
     this.classList.toggle('_coral-ColorInput--novalue', isValueEmpty);
 
+    this._elements.colorPreviewLabel.textContent = currentColor ? this._color.value : '';
+
     // Update preview in overlay
     const preview = this._elements.overlay.querySelector('._coral-ColorInput-preview');
     if (preview) {

diff --git a/coral-component-colorinput/src/scripts/ColorInputSwatch.js b/coral-component-colorinput/src/scripts/ColorInputSwatch.js
@@ -15,6 +15,7 @@ import BaseColorInputAbstractSubview from './BaseColorInputAbstractSubview';
 import Color from './Color';
 import '../../../coral-component-button';
 import colorButton from '../templates/colorButton';
+import colorLabel from '../templates/colorLabel';
 import {commons, i18n, transform} from '../../../coral-utils';
 import {Decorator} from '../../../coral-decorator';
 
@@ -39,6 +40,7 @@ const ColorInputSwatch = Decorator(class extends BaseColorInputAbstractSubview(B
     // Templates
     this._elements = {};
     colorButton.call(this._elements);
+    colorLabel.call(this._elements);
   }
 
   /**
@@ -107,10 +109,12 @@ const ColorInputSwatch = Decorator(class extends BaseColorInputAbstractSubview(B
     if (cssColorValue) {
       this._elements.colorButton.style.backgroundColor = cssColorValue;
       this._elements.colorButton.label.textContent = hexColorValue;
+      this._elements.colorLabel.textContent = hexColorValue;
       this.setAttribute('data-value', hexColorValue);
     } else {
       this._elements.colorButton.classList.add('_coral-ColorInput-swatch-novalue');
       this._elements.colorButton.label.textContent = i18n.get('unset');
+      this._elements.colorLabel.textContent = i18n.get('unset');
       this.setAttribute('data-value', '');
     }
   }
@@ -192,7 +196,13 @@ const ColorInputSwatch = Decorator(class extends BaseColorInputAbstractSubview(B
       button.remove();
     }
 
+    const label = this.querySelector('[handle="colorLabel"]');
+    if (label) {
+      label.remove();
+    }
+
     this.appendChild(this._elements.colorButton);
+    this.appendChild(this._elements.colorLabel);
   }
 });
 

diff --git a/coral-component-colorinput/src/styles/index.styl b/coral-component-colorinput/src/styles/index.styl
@@ -50,6 +50,9 @@ $colorinput-button-size = 28px;
 
 $colorinput-input-swatch-size = 38px;
 
+$colorinput-swatch-preview-width = 44px;
+$colorinput-swatch-preview-height = 57px;
+
 $colorinput-slider-width = 160px;
 $colorinput-slider-margin = 5px 16px 0 16px;
 
@@ -141,6 +144,7 @@ coral-colorinput-item {
 ._coral-ColorInput-swatch {
   display: block;
   float: left;
+  text-align: center;
   padding: $colorinput-swatch-top-padding $colorinput-swatch-left-right-padding 0;
 
   /* All buttons inside the colorinput are square */
@@ -185,12 +189,17 @@ coral-colorinput-item {
       }
     }
   }
+
+  label {
+    display block;
+  }
 }
 
 ._coral-ColorInput-buttonWrapper {
   position: absolute;
   right: $colorinput-button-wrapper-offset;
   top: $colorinput-button-wrapper-offset;
+  text-align: center;
 
   // set opacity < 1 to create new stacking context (for checker image to work)
   opacity: .999;
@@ -233,11 +242,11 @@ coral-colorinput-item {
 
 // Swatch variant
 ._coral-ColorInput--swatch {
-  width: $colorinput-input-swatch-size;
-  height: $colorinput-input-swatch-size;
+  width: $colorinput-swatch-preview-width;
+  height: $colorinput-swatch-preview-height;
 
   // makes sure the width stays no matter the parent's configuration
-  max-width: $colorinput-input-swatch-size;
+  max-width: $colorinput-swatch-preview-width;
 
   ._coral-ColorInput-input {
     position: absolute;

diff --git a/coral-component-colorinput/src/templates/base.html b/coral-component-colorinput/src/templates/base.html
@@ -21,14 +21,15 @@
 <input handle="input" is="coral-textfield" class="_coral-ColorInput-input" type="text" value="" role="combobox" aria-autocomplete="none" aria-haspopup="dialog" aria-expanded="false" aria-controls="{{uid}}" />
 <div class="_coral-ColorInput-buttonWrapper" handle="buttonWrapper" role="presentation">
   <button handle="colorPreview" is="coral-button" variant="_custom" class="_coral-FieldButton _coral-ColorInput-button _coral-ColorInput-preview" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="{{uid}}"></button>
+  <label handle="colorPreviewLabel" type="label"></label>
   <js>
     // Since we don't have a mutation observer anymore to replace content zones magically, we have to do it manually.
     this.colorPreview.label.classList.add('u-coral-screenReaderOnly');
     this.colorPreview.label.innerText = data.i18n.get('Color Picker');
     this.colorPreview.label.id = uid + '-coral-button-label';
   </js>
 </div>
-<coral-popover smart class="_coral-ColorInput-overlay" role="dialog" focusonshow="on" trapfocus="on" handle="overlay" breadthoffset="50%r - 50%p" placement="bottom" id="{{uid}}" aria-label="{{data.i18n.get('Color Picker')}}">
+<coral-popover smart class="_coral-ColorInput-overlay" role="dialog" focusonshow="on" trapfocus="on" handle="overlay" breadthoffset="50%r - 50%p" lengthoffset="20" placement="bottom" id="{{uid}}" aria-label="{{data.i18n.get('Color Picker')}}">
   <coral-colorinput-colorproperties handle="propertiesView"></coral-colorinput-colorproperties>
   <coral-colorinput-swatches handle="swatchesView"></coral-colorinput-swatches>
 </coral-popover>
diff --git a/coral-component-colorinput/src/templates/colorLabel.html b/coral-component-colorinput/src/templates/colorLabel.html
@@ -0,0 +1 @@
+<label handle="colorLabel" type="label"></label>