feat(ui5-color-palette): implement more-colors property

packages/main/bundle.esm.js

@@ -38,6 +38,7 @@ import "@ui5/webcomponents-icons-tnt/dist/Assets.js";
 
 import "./dist/features/InputElementsFormSupport.js";
 import "./dist/features/InputSuggestions.js";
+import "./dist/features/ColorPaletteMoreColors.js";
 
 import Avatar from "./dist/Avatar.js";
 import AvatarGroup from "./dist/AvatarGroup.js";

packages/main/src/ColorPalette.hbs

@@ -1,13 +1,26 @@
-<div class="ui5-cp-item-container" 
-	role="region"
-	aria-label="{{colorContainerLabel}}"
-	@click={{_onclick}}
-	@keyup={{_onkeyup}}
-	@keydown={{_onkeydown}}>
-	{{#each this.displayedColors}}
-		<slot
-			name="{{this._individualSlot}}"
-		>
-		</slot>
-	{{/each}}
+<div class="ui5-cp-root">
+	<div class="ui5-cp-item-container" 
+		role="region"
+		aria-label="{{colorContainerLabel}}"
+		@click={{_onclick}}
+		@keyup={{_onkeyup}}
+		@keydown={{_onkeydown}}>
+		{{#each this.displayedColors}}
+			<slot
+				name="{{this._individualSlot}}"
+			>
+			</slot>
+		{{/each}}
+	</div>
+
+	{{#if moreColors}}
+		<div class="ui5-cp-more-colors-wrapper">
+			<div class="ui5-cp-separator"></div>
+			<ui5-button
+				design="Transparent"
+				class="ui5-cp-more-colors"
+				@click="{{_openMoreColorsDialog}}"
+			>{{colorPaleteMoreColorsText}}...</ui5-button design="Transparent">
+		</div>
+	{{/if}}
 </div>

packages/main/src/ColorPalette.js

@@ -8,14 +8,18 @@ import {
 	isSpace,
 	isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
+import ColorPaletteDialogTemplate from "./generated/templates/ColorPaletteDialogTemplate.lit.js";
 import ColorPaletteItem from "./ColorPaletteItem.js";
 import {
 	COLORPALETTE_CONTAINER_LABEL,
+	COLOR_PALETTE_MORE_COLORS_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import ColorPaletteCss from "./generated/themes/ColorPalette.css.js";
+import ColorPaletteStaticAreaCss from "./generated/themes/ColorPaletteStaticArea.css.js";
 
 /**
  * @public
@@ -24,6 +28,16 @@ const metadata = {
 	tag: "ui5-color-palette",
 	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+		/**
+		 * Defines whether the user can choose a custom color from a color picker
+		 * @type {Boolean}
+		 * @public
+		 * @since 1.0.0-rc.12
+		 */
+		moreColors: {
+			type: Boolean,
+		},
+
 		/**
 		 *
 		 * The selected color.
@@ -103,12 +117,20 @@ class ColorPalette extends UI5Element {
 		return ColorPaletteCss;
 	}
 
+	static get staticAreaStyles() {
+		return ColorPaletteStaticAreaCss;
+	}
+
 	static get template() {
 		return ColorPaletteTemplate;
 	}
 
+	static get staticAreaTemplate() {
+		return ColorPaletteDialogTemplate;
+	}
+
 	static get dependencies() {
-		return [ColorPaletteItem];
+		return [ColorPaletteItem].concat(this.moreColorsFeature ? this.moreColorsFeature.dependencies : []);
 	}
 
 	static async onDefine() {
@@ -129,13 +151,26 @@ class ColorPalette extends UI5Element {
 		this.displayedColors.forEach((item, index) => {
 			item.index = index + 1;
 		});
+
+		if (this.moreColors) {
+			const moreColorsFeature = getFeature("ColorPaletteMoreColors");
+			if (moreColorsFeature) {
+				this.moreColorsFeature = new moreColorsFeature();
+			} else {
+				throw new Error(`You have to import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js" module to use the more-colors functionality.`);
+			}
+		}
 	}
 
 	selectColor(item) {
 		item.focus();
 		this._itemNavigation.setCurrentItem(item);
 
-		this.value = item.value;
+		this._setColor(item.value);
+	}
+
+	_setColor(color) {
+		this.value = color;
 
 		this.fireEvent("change", {
 			color: this.value,
@@ -161,13 +196,43 @@ class ColorPalette extends UI5Element {
 		}
 	}
 
+	async chooseCustomColor(event) {
+		const colorPicker = await this.getColorPicker();
+		this._setColor(colorPicker.color);
+		this.closeDialog();
+	}
+
+	async closeDialog() {
+		const dialog = await this._getDialog();
+		dialog.close();
+	}
+
+	async _openMoreColorsDialog() {
+		const dialog = await this._getDialog();
+		dialog.open();
+	}
+
 	get displayedColors() {
 		return this.colors.filter(item => item.value).slice(0, 15);
 	}
 
 	get colorContainerLabel() {
 		return this.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
 	}
+
+	get colorPaleteMoreColorsText() {
+		return this.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
+	}
+
+	async _getDialog() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector("ui5-dialog");
+	}
+
+	async getColorPicker() {
+		const dialog = await this._getDialog();
+		return dialog.content[0].querySelector("ui5-color-picker");
+	}
 }
 
 ColorPalette.define();

packages/main/src/ColorPaletteDialog.hbs

@@ -0,0 +1,18 @@
+<ui5-dialog
+    header-text="{{moreColorsFeature.colorPaletteDialogTitle}}"
+>
+    <div class="ui5-cp-dialog-content">
+        <ui5-color-picker></ui5-color-picker>
+    </div>
+
+    <div slot="footer" class="ui5-cp-dialog-footer">
+        <ui5-button
+            design="Transparent"
+            @click="{{chooseCustomColor}}"
+        >{{moreColorsFeature.colorPaletteDialogOKButton}}</ui5-button>
+        <ui5-button
+            design="Transparent"
+            @click="{{closeDialog}}"    
+        >{{moreColorsFeature.colorPaletteCancelButton}}</ui5-button>
+    </div>
+</ui5-dialog>

packages/main/src/Popup.js

@@ -29,6 +29,7 @@ const metadata = {
 		 */
 		"default": {
 			type: HTMLElement,
+			propertyName: "content",
 		},
 	},
 	properties: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {

packages/main/src/features/ColorPaletteMoreColors.js

@@ -0,0 +1,43 @@
+import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
+import Dialog from "../Dialog.js";
+import Button from "../Button.js";
+import ColorPicker from "../ColorPicker.js";
+
+
+import {
+  COLOR_PALETTE_DIALOG_CANCEL_BUTTON,
+  COLOR_PALETTE_DIALOG_OK_BUTTON,
+  COLOR_PALETTE_DIALOG_TITLE,
+} from "../generated/i18n/i18n-defaults.js";
+
+class ColorPaletteMoreColors {
+  constructor() {
+    this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+  }
+
+  static get dependencies() {
+		return [
+      Dialog,
+      Button,
+      ColorPicker,
+    ];
+	}
+
+  get colorPaletteDialogTitle() {
+    return this.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE);
+  }
+
+  get colorPaletteDialogOKButton() {
+    return this.i18nBundle.getText(COLOR_PALETTE_DIALOG_OK_BUTTON);
+  }
+
+  get colorPaletteCancelButton() {
+    return this.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
+  }
+}
+
+registerFeature("ColorPaletteMoreColors", ColorPaletteMoreColors);
+
+export default ColorPaletteMoreColors;

packages/main/src/i18n/messagebundle.properties

@@ -49,6 +49,18 @@ COLORPALETTE_CONTAINER_LABEL=Color palette - Predefined colors
 #XFLD: Label of the color box
 COLORPALETTE_COLOR_LABEL=Color
 
+#XFLD: Color Palette dialog button
+COLOR_PALETTE_DIALOG_CANCEL_BUTTON=Cancel
+
+#XFLD: Color Palette dialog button
+COLOR_PALETTE_DIALOG_OK_BUTTON=OK
+
+#XTIT: Color Palette dialog title of the Color Picker
+COLOR_PALETTE_DIALOG_TITLE=Change Color
+
+#XTIT: Color Palette dialog title of the Color Picker
+COLOR_PALETTE_MORE_COLORS_TEXT=More Colors...
+
 #XACT: DatePicker 'Open Picker' icon title
 DATEPICKER_OPEN_ICON_TITLE=Open Picker
 

packages/main/src/themes/ColorPalette.css

@@ -2,10 +2,26 @@
 	display: inline-block;
 }
 
+.ui5-cp-root {
+	display: flex;
+	flex-direction: column;
+}
+
 .ui5-cp-item-container {
 	display: flex;
 	max-width: var(--_ui5_color-palette-row-width);
 	flex-flow: wrap;
 	max-height: var(--_ui5_color-palette-row-height);
 	overflow: hidden;
-}
+}
+
+.ui5-cp-separator {
+	height: 0.0625rem;
+    background: var(--sapContent_ForegroundBorderColor);
+}
+
+.ui5-cp-more-colors {
+	width: 100%;
+	text-align: center;
+	border: none;
+}

packages/main/src/themes/ColorPaletteStaticArea.css

@@ -0,0 +1,17 @@
+.ui5-cp-dialog-content {
+	display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 1rem 0;
+}
+
+.ui5-cp-dialog-footer {
+    width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	margin: 0.1875rem 1rem;
+}
+
+.ui5-cp-dialog-footer ui5-button:first-child{
+	margin-right: 1rem;
+}

packages/main/test/pages/ColorPalette.html

@@ -37,7 +37,7 @@
 <body style="background-color: var(--sapBackgroundColor);">
 
 </body>
-	<ui5-color-palette id="cp1">
+	<ui5-color-palette id="cp1" more-colors>
 		<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
 		<ui5-color-palette-item value="pink"></ui5-color-palette-item>
 		<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
@@ -51,7 +51,13 @@
 		<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
 		<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
 	</ui5-color-palette>
-	<br>
+	<br/>
+	<br/>
+	<br/>
+	<br/>
+	<br/>
+	<br/>
+	<br/>
 	<ui5-input id="changeResult" value="Nothing selected"></ui5-input>
 	<br>
 	<ui5-button id="colorPaletteBtn" >Open ColorPalette</ui5-button> <br/>
@@ -83,6 +89,26 @@
 			<ui5-button id="btnClose" design="Emphasized">Close</ui5-button>
 		</div>
 	</ui5-responsive-popover>
+
+	<br/>
+	<br/>
+	<br/>
+
+	<ui5-color-palette id="cp3" more-colors>
+		<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
+		<ui5-color-palette-item value="pink"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
+		<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
+		<ui5-color-palette-item value="green"></ui5-color-palette-item>
+		<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
+		<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
+		<ui5-color-palette-item value="blue"></ui5-color-palette-item>
+		<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
+		<ui5-color-palette-item value="orange"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
+		<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
+	</ui5-color-palette>
+
 	<script>
 		cp1.addEventListener("change", function(event) {
 			changeResult.value = event.detail.color;

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

@@ -70,4 +70,29 @@ describe("ColorPalette interactions", () => {
 
 		assert.strictEqual(colorPalette.getProperty("value"), "darkblue", "Check if selected value is darkblue");
 	});
+
+	it("Tests more-colors functionality", () => {
+		const colorPalette = browser.$("#cp3");
+		const colorPaletteMoreColorsButton = colorPalette.shadow$(".ui5-cp-more-colors");
+
+		colorPaletteMoreColorsButton.click();
+
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#cp3");
+		const colorPicker = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-color-picker");
+
+		assert.ok(colorPicker, "Color picker is rendered");
+
+		colorPicker.setProperty("color", "#fafafa");
+
+		// The initial focus is on the HEX input
+		browser.keys("Tab"); // Red
+		browser.keys("Tab"); // Green
+		browser.keys("Tab"); // Blue
+		browser.keys("Tab"); // Alpha
+		browser.keys("Tab"); // Ok Button
+
+		browser.keys("Enter"); // Close the dialog & change the value of the color palette
+
+		assert.strictEqual(colorPalette.getProperty("value"), "#fafafa", "Custom color is selected from the color picker");
+	})
 });