Added IE support

packages/main/src/ColorPalette.hbs

@@ -1,12 +1,13 @@
-<div class="ui5-cp-swatch-container" 
+<div class="ui5-cp-item-container" 
 	role="region"
-	aria-label="{{colorContainerLabel}}">
+	aria-label="{{colorContainerLabel}}"
+	@click={{_onclick}}
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}>
 	{{#each this.displayedColors}}
 		<slot
 			name="{{this._individualSlot}}"
-			@click={{../_onclick}}
-			@keyup={{../_onkeyup}}
-			@keydown={{../_onkeydown}}>
+		>
 		</slot>
 	{{/each}}
 </div>

packages/main/src/ColorPalette.js

@@ -143,7 +143,9 @@ class ColorPalette extends UI5Element {
 	}
 
 	_onclick(event) {
-		this.selectColor(event.target);
+		if(event.target.localName === "ui5-color-palette-item") {
+			this.selectColor(event.target);
+		}
 	}
 
 	_onkeyup(event) {

packages/main/src/ColorPaletteItem.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-cp-swatch"
+	class="ui5-cp-item"
 	style="background-color: {{value}}"
 	value="{{value}}"
 	tabindex="{{_tabIndex}}"

packages/main/src/themes/ColorPalette.css

@@ -2,7 +2,7 @@
 	display: inline-block;
 }
 
-.ui5-cp-swatch-container {
+.ui5-cp-item-container {
 	display: flex;
 	max-width: var(--_ui5_color-palette-row-width);
 	flex-flow: wrap;

packages/main/src/themes/ColorPaletteItem.css

@@ -1,29 +1,29 @@
-.ui5-cp-swatch {
-	height: var(--_ui5_color-palette-swatch-height);
-	width: var(--_ui5_color-palette-swatch-height);
+.ui5-cp-item {
+	height: var(--_ui5_color-palette-item-height);
+	width: var(--_ui5_color-palette-item-height);
 	border: 1px solid var(--sapContent_ForegroundBorderColor);
 	border-radius: 0.25rem;
 	display: inline-block;
-	margin: var(--_ui5_color-palette-swatch-margin);
+	margin: var(--_ui5_color-palette-item-margin);
 }
 
-.ui5-cp-swatch:focus:before {
+.ui5-cp-item:focus:before {
 	content: "";
-	width: var(--_ui5_color-palette-swatch-focus-height);
-	height: var(--_ui5_color-palette-swatch-focus-height);
+	width: var(--_ui5_color-palette-item-focus-height);
+	height: var(--_ui5_color-palette-item-focus-height);
 	margin: 2px;
 	position: absolute;
 	outline: rgb(0, 0, 0) dotted 0.0625rem;
 }
 
-.ui5-cp-swatch:focus {
+.ui5-cp-item:focus {
 	pointer-events: none;
 	outline: white solid 0.0625rem;
 	outline-offset: -3px;
 }
 
-.ui5-cp-swatch:hover {
-	height: var(--_ui5_color-palette-swatch-hover-height);
-	width: var(--_ui5_color-palette-swatch-hover-height);
-	margin: var(--_ui5_color-palette-swatch-hover-margin);
+.ui5-cp-item:hover {
+	height: var(--_ui5_color-palette-item-hover-height);
+	width: var(--_ui5_color-palette-item-hover-height);
+	margin: var(--_ui5_color-palette-item-hover-margin);
 }

packages/main/src/themes/base/ColorPalette-parameters.css

@@ -1,12 +1,12 @@
 :root {
-	--_ui5_color-palette-swatch-height: 1.75rem;
-	--_ui5_color-palette-swatch-container-sides-padding: 0.3125rem;
-	--_ui5_color-palette-swatch-container-rows-padding: 0.6875rem;
-	--_ui5_color-palette-swatch-focus-height: 1.5rem;
-	--_ui5_color-palette-swatch-container-padding: var(--_ui5_color-palette-swatch-container-sides-padding) var(--_ui5_color-palette-swatch-container-rows-padding);
-	--_ui5_color-palette-swatch-hover-height: 2.25rem;
-	--_ui5_color-palette-swatch-margin: calc(var(--_ui5_color-palette-swatch-hover-height) - var(--_ui5_color-palette-swatch-height));
-	--_ui5_color-palette-swatch-hover-margin: calc(var(--_ui5_color-palette-swatch-margin) / 2);
-	--_ui5_color-palette-row-width: 14.375rem;
+	--_ui5_color-palette-item-height: 1.75rem;
+	--_ui5_color-palette-item-container-sides-padding: 0.3125rem;
+	--_ui5_color-palette-item-container-rows-padding: 0.6875rem;
+	--_ui5_color-palette-item-focus-height: 1.5rem;
+	--_ui5_color-palette-item-container-padding: var(--_ui5_color-palette-item-container-sides-padding) var(--_ui5_color-palette-item-container-rows-padding);
+	--_ui5_color-palette-item-hover-height: 2.25rem;
+	--_ui5_color-palette-item-margin: calc(var(--_ui5_color-palette-item-hover-height) - var(--_ui5_color-palette-item-height));
+	--_ui5_color-palette-item-hover-margin: calc(var(--_ui5_color-palette-item-margin) / 2);
+	--_ui5_color-palette-row-width: 14.5rem;
 	--_ui5_color-palette-row-height: 9.5rem;
 }

packages/main/src/themes/base/sizes-parameters.css

@@ -118,12 +118,12 @@
 	--_ui5_checkbox_icon_size: .75rem;
 
 	/* ColorPalette */
-	--_ui5_color-palette-swatch-height: 1.25rem;
-	--_ui5_color-palette-swatch-focus-height: 1rem;
-	--_ui5_color-palette-swatch-container-sides-padding: 0.1875rem;
-	--_ui5_color-palette-swatch-container-rows-padding: 0.8125rem;
-	--_ui5_color-palette-swatch-hover-height: 1.65rem;
-	--_ui5_color-palette-swatch-hover-margin: 0.3125rem;
+	--_ui5_color-palette-item-height: 1.25rem;
+	--_ui5_color-palette-item-focus-height: 1rem;
+	--_ui5_color-palette-item-container-sides-padding: 0.1875rem;
+	--_ui5_color-palette-item-container-rows-padding: 0.8125rem;
+	--_ui5_color-palette-item-hover-height: 1.65rem;
+	--_ui5_color-palette-item-hover-margin: 0.3125rem;
 	--_ui5_color-palette-row-width: 12rem;
 	--_ui5_color-palette-row-height: 7.25rem;
 

packages/main/test/specs/ColorPalette.spec.js

@@ -17,12 +17,12 @@ describe("ColorPalette interactions", () => {
 		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
 		const colorPalette = browser.$("#cp1");
 		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
-		const swatch = colorPaletteEntries[0];
+		const item = colorPaletteEntries[0];
 
-		swatch.click();
+		item.click();
 
-		swatch.keys("ArrowRight");
-		swatch.keys("Space");
+		item.keys("ArrowRight");
+		item.keys("Space");
 
 		assert.strictEqual(colorPalette.getProperty("value"), "pink", "Check if selected value is pink");
 	});
@@ -31,12 +31,12 @@ describe("ColorPalette interactions", () => {
 		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
 		const colorPalette = browser.$("#cp1");
 		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
-		const swatch = colorPaletteEntries[0];
+		const item = colorPaletteEntries[0];
 
-		swatch.click();
+		item.click();
 
-		swatch.keys("ArrowLeft");
-		swatch.keys("Space");
+		item.keys("ArrowLeft");
+		item.keys("Space");
 
 		colorPalette.keys("Space");
 
@@ -47,12 +47,12 @@ describe("ColorPalette interactions", () => {
 		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
 		const colorPalette = browser.$("#cp1");
 		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
-		const swatch = colorPaletteEntries[0];
+		const item = colorPaletteEntries[0];
 
-		swatch.click();
+		item.click();
 
-		swatch.keys("ArrowUp");
-		swatch.keys("Space");
+		item.keys("ArrowUp");
+		item.keys("Space");
 
 		assert.strictEqual(colorPalette.getProperty("value"), "orange", "Check if selected value is orange");
 	});
@@ -61,12 +61,12 @@ describe("ColorPalette interactions", () => {
 		browser.url("http://localhost:8080/test-resources/pages/ColorPalette.html");
 		const colorPalette = browser.$("#cp1");
 		const colorPaletteEntries = colorPalette.$$("[ui5-color-palette-item]");
-		const swatch = colorPaletteEntries[9];
+		const item = colorPaletteEntries[9];
 
-		swatch.click();
+		item.click();
 
-		swatch.keys("ArrowDown");
-		swatch.keys("Space");
+		item.keys("ArrowDown");
+		item.keys("Space");
 
 		assert.strictEqual(colorPalette.getProperty("value"), "darkblue", "Check if selected value is darkblue");
 	});