From a5525bbeb6c5ec1c19a25286cb05ac411b38c7b0 Mon Sep 17 00:00:00 2001 From: ens13533 Date: Mon, 19 Feb 2024 13:24:16 +0200 Subject: [PATCH 1/6] add labels to color picker swatches --- coral-base-button/src/scripts/BaseButton.js | 15 ++++++++++----- coral-base-component/src/scripts/BaseComponent.js | 12 ++++++++---- .../src/scripts/ColorInput.js | 2 ++ .../src/scripts/ColorInputSwatch.js | 10 ++++++++++ coral-component-colorinput/src/styles/index.styl | 15 ++++++++++++--- .../src/templates/base.html | 3 ++- .../src/templates/colorLabel.html | 1 + 7 files changed, 45 insertions(+), 13 deletions(-) create mode 100644 coral-component-colorinput/src/templates/colorLabel.html diff --git a/coral-base-button/src/scripts/BaseButton.js b/coral-base-button/src/scripts/BaseButton.js index 73ec41be31..bbc4e6afbc 100644 --- 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 index ce3b1bf19a..48f7350fa8 100644 --- 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 index 6204ced69c..20af533d0b 100644 --- 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 index 2247ceae35..e6a8344078 100644 --- 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 index 7b04ded686..0e4d3f77d8 100644 --- 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 index 5e1eb767d3..0b6719eb99 100644 --- a/coral-component-colorinput/src/templates/base.html +++ b/coral-component-colorinput/src/templates/base.html @@ -21,6 +21,7 @@ - + diff --git a/coral-component-colorinput/src/templates/colorLabel.html b/coral-component-colorinput/src/templates/colorLabel.html new file mode 100644 index 0000000000..6cc2e806ab --- /dev/null +++ b/coral-component-colorinput/src/templates/colorLabel.html @@ -0,0 +1 @@ + \ No newline at end of file From 547c197d94fac27eccba90eb2066b2959dbfc836 Mon Sep 17 00:00:00 2001 From: ens13533 Date: Mon, 19 Feb 2024 13:34:46 +0200 Subject: [PATCH 2/6] fixed curly brace warnings --- .../src/scripts/BaseComponent.js | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/coral-base-component/src/scripts/BaseComponent.js b/coral-base-component/src/scripts/BaseComponent.js index 48f7350fa8..b3bd17b27d 100644 --- a/coral-base-component/src/scripts/BaseComponent.js +++ b/coral-base-component/src/scripts/BaseComponent.js @@ -174,10 +174,12 @@ const delegateEvents = function () { for (let i = 0 ; i < elements.length ; ++i) { commons.addResizeListener(elements[i], listener); } - } else { + } + else { commons.addResizeListener(this, listener); } - } else { + } + else { this._vent.on(eventName, selector, listener, isCapture); } } @@ -276,7 +278,8 @@ const getConstructorName = function (constructor) { if (found) { break; - } else { + } + else { found = find(obj[key], constructorToFind); } } @@ -295,7 +298,8 @@ const getConstructorName = function (constructor) { if (constructor._namespace) { constructorName.push(constructor._namespace.value); constructor = constructor._namespace.parent; - } else { + } + else { constructor = false; } } @@ -319,7 +323,8 @@ const _recursiveIgnoreConnectedCallback = function(el, value) { // todo better check for coral-component if(typeof child._ignoreConnectedCallback === 'boolean') { child._ignoreConnectedCallback = value; - } else { + } + else { _recursiveIgnoreConnectedCallback(child, value); } } @@ -478,16 +483,19 @@ const BaseComponent = (superClass) => class extends superClass { } // Insert new node insert.call(this, value); - } else if (oldNode && oldNode.parentNode) { + } + else if (oldNode && oldNode.parentNode) { commons._log('warn', `${this._componentName} does not define an insert method for content zone ${handle}, falling back to replace.`); // Old way -- assume we have an old node this._elements[handle].parentNode.replaceChild(value, this._elements[handle]); - } else { + } + else { commons._log('error', `${this._componentName} does not define an insert method for content zone ${handle}, falling back to append.`); // Just append, which may introduce bugs, but at least doesn't crazy this.appendChild(value); } - } else { + } + else { // we need to remove the content zone if it exists oldNode = this._elements[handle]; if (oldNode && oldNode.parentNode) { From b3324f1ead22e54cd88ccc2c90bd2d4c3e67a783 Mon Sep 17 00:00:00 2001 From: ens13533 Date: Mon, 19 Feb 2024 13:44:13 +0200 Subject: [PATCH 3/6] fixed curly brace warnings --- coral-base-component/src/scripts/BaseComponent.js | 15 ++++++++++----- coral-base-formfield/src/scripts/BaseFormField.js | 6 ++++-- .../src/scripts/BaseLabellable.js | 3 ++- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/coral-base-component/src/scripts/BaseComponent.js b/coral-base-component/src/scripts/BaseComponent.js index b3bd17b27d..1a5dee55f3 100644 --- a/coral-base-component/src/scripts/BaseComponent.js +++ b/coral-base-component/src/scripts/BaseComponent.js @@ -519,12 +519,14 @@ const BaseComponent = (superClass) => class extends superClass { this._reflectedAttribute = true; this.setAttribute(attributeName, ''); this._reflectedAttribute = false; - } else if (!value && this.hasAttribute(attributeName)) { + } + else if (!value && this.hasAttribute(attributeName)) { this._reflectedAttribute = true; this.removeAttribute(attributeName); this._reflectedAttribute = false; } - } else if (this.getAttribute(attributeName) !== String(value)) { + } + else if (this.getAttribute(attributeName) !== String(value)) { this._reflectedAttribute = true; this.setAttribute(attributeName, value); this._reflectedAttribute = false; @@ -695,7 +697,8 @@ const BaseComponent = (superClass) => class extends superClass { const setProperty = (prop, val) => { if (isContentZone(prop)) { updateContentZone(prop, val); - } else { + } + else { this._silenced = silent; /** @ignore */ this[prop] = val; @@ -709,7 +712,8 @@ const BaseComponent = (superClass) => class extends superClass { value = valueOrSilent; setProperty(property, value); - } else { + } + else { properties = propertyOrProperties; silent = valueOrSilent; @@ -775,7 +779,8 @@ const BaseComponent = (superClass) => class extends superClass { let handler = event.detail.handler; if(typeof handler === 'function') { handler(this); - } else { + } + else { throw new Error("Messenger handler should be a function"); } } diff --git a/coral-base-formfield/src/scripts/BaseFormField.js b/coral-base-formfield/src/scripts/BaseFormField.js index 016603b986..8b2d920225 100644 --- a/coral-base-formfield/src/scripts/BaseFormField.js +++ b/coral-base-formfield/src/scripts/BaseFormField.js @@ -224,7 +224,8 @@ const BaseFormField = (superClass) => class extends superClass { if (element.matches(LABELLABLE_ELEMENTS_SELECTOR)) { this._updateForAttributes(value, elementId); } - } else { + } + else { // since no labelledby value was set, we remove everything element.removeAttribute('aria-labelledby'); } @@ -361,7 +362,8 @@ const BaseFormField = (superClass) => class extends superClass { if (forAttribute === elementId) { labelElement.removeAttribute('for'); } - } else { + } + else { // if we do not have to remove, it does not matter the current value of the label, we can set it in every // case labelElement.setAttribute('for', elementId); diff --git a/coral-base-labellable/src/scripts/BaseLabellable.js b/coral-base-labellable/src/scripts/BaseLabellable.js index 9ea0adfa28..ed0c3d5e09 100644 --- a/coral-base-labellable/src/scripts/BaseLabellable.js +++ b/coral-base-labellable/src/scripts/BaseLabellable.js @@ -55,7 +55,8 @@ const BaseLabellable = (superClass) => class extends superClass { attributeChangedCallback(name, oldValue, value) { if (name === 'aria-label' || name === 'aria-labelledby') { this._toggleIconAriaHidden(); - } else { + } + else { super.attributeChangedCallback(name, oldValue, value); } } From b2073bc7c7479f010fc3aa0da6f976143c4d53ec Mon Sep 17 00:00:00 2001 From: ens13533 Date: Mon, 19 Feb 2024 13:53:34 +0200 Subject: [PATCH 4/6] fixed curly brace warnings --- coral-base-list/src/scripts/BaseList.js | 6 ++- coral-base-list/src/scripts/BaseListItem.js | 3 +- coral-base-overlay/src/scripts/BaseOverlay.js | 39 ++++++++++++------- 3 files changed, 32 insertions(+), 16 deletions(-) diff --git a/coral-base-list/src/scripts/BaseList.js b/coral-base-list/src/scripts/BaseList.js index 552c7c74a8..0270f8a9c0 100644 --- a/coral-base-list/src/scripts/BaseList.js +++ b/coral-base-list/src/scripts/BaseList.js @@ -160,7 +160,8 @@ const BaseList = (superClass) => class extends superClass { if (index < items.length - 1) { items[index + 1].focus(); - } else { + } + else { items[0].focus(); } } @@ -182,7 +183,8 @@ const BaseList = (superClass) => class extends superClass { if (index > 0) { items[index - 1].focus(); - } else { + } + else { items[items.length - 1].focus(); } } diff --git a/coral-base-list/src/scripts/BaseListItem.js b/coral-base-list/src/scripts/BaseListItem.js index a8cc98644a..b7cc5c3bf3 100644 --- a/coral-base-list/src/scripts/BaseListItem.js +++ b/coral-base-list/src/scripts/BaseListItem.js @@ -95,7 +95,8 @@ const BaseListItem = (superClass) => class extends BaseLabellable(superClass) { const el = this._getIconElement(); if (transform.string(value) === '') { el.remove(); - } else { + } + else { this.insertBefore(el, this.firstChild); } diff --git a/coral-base-overlay/src/scripts/BaseOverlay.js b/coral-base-overlay/src/scripts/BaseOverlay.js index 2720090ae6..90eb494d51 100644 --- a/coral-base-overlay/src/scripts/BaseOverlay.js +++ b/coral-base-overlay/src/scripts/BaseOverlay.js @@ -85,7 +85,8 @@ function hideEverythingBut(instance) { // It's already true, don't bother setting continue; } - } else { + } + else { // Nothing is hidden by default, store that child._previousAriaHidden = 'false'; } @@ -244,7 +245,8 @@ function createDocumentTabCaptureEls() { } } }); - } else { + } + else { if (document.body.firstElementChild !== topTabCaptureEl) { // Make sure we stay at the very top document.body.insertBefore(topTabCaptureEl, document.body.firstChild); @@ -325,7 +327,8 @@ function hideOrRepositionBackdrop() { if (!keepBackdrop) { // Hide the backdrop doBackdropHide(); - } else { + } + else { // Reposition the backdrop doRepositionBackdrop(); } @@ -335,7 +338,8 @@ function hideOrRepositionBackdrop() { const top = OverlayManager.top(); if (!top || !(top.instance.trapFocus === trapFocus.ON && top.instance._requestedBackdrop)) { hideDocumentTabCaptureEls(); - } else if (top && top.instance.trapFocus === trapFocus.ON && top.instance._requestedBackdrop) { + } + else if (top && top.instance.trapFocus === trapFocus.ON && top.instance._requestedBackdrop) { createDocumentTabCaptureEls(); } } @@ -432,7 +436,8 @@ const BaseOverlay = (superClass) => class extends superClass { this._vent.on('keydown', this._handleRootKeypress); this._vent.on('focus', '[coral-tabcapture]', this._handleTabCaptureFocus); - } else if (this._trapFocus === trapFocus.OFF) { + } + else if (this._trapFocus === trapFocus.OFF) { // Remove elements this._elements.topTabCapture && this._elements.topTabCapture.remove(); this._elements.intermediateTabCapture && this._elements.intermediateTabCapture.remove(); @@ -547,7 +552,8 @@ const BaseOverlay = (superClass) => class extends superClass { // Doesn't matter when we set aria-hidden true (nothing being announced) if (open) { this.removeAttribute('aria-hidden'); - } else { + } + else { this.setAttribute('aria-hidden', !open); } @@ -568,7 +574,8 @@ const BaseOverlay = (superClass) => class extends superClass { // element that had focus before opening the overlay (document.activeElement === document.body ? null : document.activeElement); } - } else { + } + else { // Release zIndex this._popOverlay(); } @@ -622,11 +629,13 @@ const BaseOverlay = (superClass) => class extends superClass { if (this._overlayAnimationTime) { // Wait for animation to complete commons.transitionEnd(this, openComplete); - } else { + } + else { // Execute immediately openComplete(); } - } else { + } + else { // Fade out this.classList.remove('is-open'); @@ -657,7 +666,8 @@ const BaseOverlay = (superClass) => class extends superClass { if (this._overlayAnimationTime) { // Wait for animation to complete commons.transitionEnd(this, closeComplete); - } else { + } + else { // Execute immediately closeComplete(); } @@ -816,9 +826,11 @@ const BaseOverlay = (superClass) => class extends superClass { // ON handles the focusing per accessibility recommendations if (this.focusOnShow === focusOnShow.ON) { this._focusOn('first'); - } else if (this.focusOnShow instanceof HTMLElement) { + } + else if (this.focusOnShow instanceof HTMLElement) { this.focusOnShow.focus(preventScroll(this)); - } else if (typeof this.focusOnShow === 'string' && this.focusOnShow !== focusOnShow.OFF) { + } + else if (typeof this.focusOnShow === 'string' && this.focusOnShow !== focusOnShow.OFF) { // we need to add :not([coral-tabcapture]) to avoid selecting the tab captures const selectedElement = this.querySelector(`${this.focusOnShow}:not([coral-tabcapture])`); @@ -1039,7 +1051,8 @@ const BaseOverlay = (superClass) => class extends superClass { // Show the backdrop again this._showBackdrop(); } - } else { + } + else { // If overlay is closed, make sure that it is hidden with `display: none`, // but set `visibility: visible` to ensure that the overlay will be included in accessibility name or description // of an element that references it using `aria-labelledby` or `aria-describedby`. From 66ddfa2bb5ae5824f8a25196df6613c79285f273 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Thu, 25 Jul 2024 15:28:40 -0400 Subject: [PATCH 5/6] fix(Accessibility): use tooltip to fix broken layouts caused by text label --- coral-component-colorinput/src/scripts/ColorInput.js | 4 ++-- .../src/scripts/ColorInputSwatch.js | 9 ++++++--- coral-component-colorinput/src/styles/index.styl | 9 +++++++-- coral-component-colorinput/src/templates/base.html | 4 ++-- .../src/templates/colorButton.html | 3 ++- coral-component-colorinput/src/templates/colorLabel.html | 2 +- 6 files changed, 20 insertions(+), 11 deletions(-) diff --git a/coral-component-colorinput/src/scripts/ColorInput.js b/coral-component-colorinput/src/scripts/ColorInput.js index 20af533d0b..c7180e542a 100644 --- a/coral-component-colorinput/src/scripts/ColorInput.js +++ b/coral-component-colorinput/src/scripts/ColorInput.js @@ -222,7 +222,7 @@ const ColorInput = Decorator(class extends BaseFormField(BaseComponent(HTMLEleme this.classList.remove('_coral-ColorInput--swatch'); this._elements.input.removeAttribute('tabindex'); } - + this._syncColorPreviewIcon(); } @@ -814,7 +814,7 @@ 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 : ''; + this._elements.colorPreviewLabel.textContent = currentColor ? this.value : i18n.get('unset'); // Update preview in overlay const preview = this._elements.overlay.querySelector('._coral-ColorInput-preview'); diff --git a/coral-component-colorinput/src/scripts/ColorInputSwatch.js b/coral-component-colorinput/src/scripts/ColorInputSwatch.js index e6a8344078..b9acde068b 100644 --- a/coral-component-colorinput/src/scripts/ColorInputSwatch.js +++ b/coral-component-colorinput/src/scripts/ColorInputSwatch.js @@ -18,6 +18,7 @@ import colorButton from '../templates/colorButton'; import colorLabel from '../templates/colorLabel'; import {commons, i18n, transform} from '../../../coral-utils'; import {Decorator} from '../../../coral-decorator'; +import {Tooltip} from '../../../coral-component-tooltip'; const CLASSNAME = '_coral-ColorInput-swatch'; @@ -39,7 +40,7 @@ const ColorInputSwatch = Decorator(class extends BaseColorInputAbstractSubview(B // Templates this._elements = {}; - colorButton.call(this._elements); + colorButton.call(this._elements, {commons}); colorLabel.call(this._elements); } @@ -109,12 +110,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._elements.colorLabel.content.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._elements.colorLabel.content.textContent = i18n.get('unset'); this.setAttribute('data-value', ''); } } @@ -203,6 +204,8 @@ const ColorInputSwatch = Decorator(class extends BaseColorInputAbstractSubview(B this.appendChild(this._elements.colorButton); this.appendChild(this._elements.colorLabel); + + this._elements.colorLabel.target = '#' + this._elements.colorButton.id; } }); diff --git a/coral-component-colorinput/src/styles/index.styl b/coral-component-colorinput/src/styles/index.styl index 0e4d3f77d8..6e8673b666 100644 --- a/coral-component-colorinput/src/styles/index.styl +++ b/coral-component-colorinput/src/styles/index.styl @@ -186,12 +186,13 @@ coral-colorinput-item { ._coral-Icon { display: inherit; vertical-align: inherit; + filter: drop-shadow(0 0 0.25px rgba(0 0 0 0.4)); } } } - label { - display block; + ._coral-ColorInput-swatch-tooltip { + min-width: max-content; } } @@ -207,6 +208,10 @@ coral-colorinput-item { ._coral-ColorInput-preview { border-width: $colorinput-button-border-width; } + + ._coral-ColorInput-preview-tooltip { + min-width: max-content; + } } ._coral-ColorInput-button { diff --git a/coral-component-colorinput/src/templates/base.html b/coral-component-colorinput/src/templates/base.html index 0b6719eb99..fff45dad22 100644 --- a/coral-component-colorinput/src/templates/base.html +++ b/coral-component-colorinput/src/templates/base.html @@ -20,8 +20,8 @@ var uid = data.commons.getUID();