feat(ui5-color-picker): add simplified display mode (#10153)

Introducing a new property `displayMode` for the `ui5-color-picker` allowing users to select between the `default` (classic) color picker or the new `simplified` color picker. The simplified picker does not include the RGB inputs and alpha slider. You can create a color picker in simplified mode as follows: <ui5-color-picker display-mode="Simplified"></ui5-color-picker> Fixes: #9979
SAP · Nov 14, 2024 · bf9c0d6 · bf9c0d6
1 parent 4abf15e
commit bf9c0d6
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 57 deletions.
diff --git a/packages/main/cypress/specs/ColorPicker.cy.ts b/packages/main/cypress/specs/ColorPicker.cy.ts
@@ -0,0 +1,27 @@
+import { html } from "lit";
+import "../../src/ColorPicker.js";
+import type ColorPicker from "../../src/ColorPicker.js";
+
+describe("Color Picker tests", () => {
+	it("should not display color channel inputs and alpha slider in simplified mode", () => {
+		cy.mount(html`<ui5-color-picker display-mode="Simplified"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hex-input")
+			.should("exist");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#red")
+			.should("not.exist");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#alpha")
+			.should("not.exist");
+	});
+});
diff --git a/packages/main/src/ColorPicker.hbs b/packages/main/src/ColorPicker.hbs
@@ -23,16 +23,18 @@
             accessible-name="{{hueSliderLabel}}"
             @ui5-input="{{_handleHueInput}}"
         ></ui5-slider>
-        <ui5-slider
-            disabled="{{inputsDisabled}}"
-            class="ui5-color-picker-alpha-slider"
-            min="0"
-            max="1"
-            step="0.01"
-            value="{{_alpha}}"
-            accessible-name="{{alphaSliderLabel}}"
-            @ui5-input="{{_handleAlphaInput}}"
-        ></ui5-slider>
+        {{#if _isDefaultPickerMode}}
+            <ui5-slider
+                disabled="{{inputsDisabled}}"
+                class="ui5-color-picker-alpha-slider"
+                min="0"
+                max="1"
+                step="0.01"
+                value="{{_alpha}}"
+                accessible-name="{{alphaSliderLabel}}"
+                @ui5-input="{{_handleAlphaInput}}"
+            ></ui5-slider>
+        {{/if}}
     </div>
 
     <div class="ui5-color-picker-current-color">
@@ -56,51 +58,53 @@
         </div>
     </div>
 
-    <div
-        class="ui5-color-picker-rgb-wrapper"
-        @ui5-change="{{_handleRGBInputsChange}}"
-    >
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="red"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{redInputLabel}}"
-                value="{{_value.r}}"
-            ></ui5-input>
-            <ui5-label>R</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="green"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{greenInputLabel}}"
-                value="{{_value.g}}"
-            ></ui5-input>
-            <ui5-label>G</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="blue"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{blueInputLabel}}"
-                value="{{_value.b}}"
-            ></ui5-input>
-            <ui5-label>B</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-				id="alpha"
-                disabled="{{inputsDisabled}}"
-                class="ui5-color-picker-rgb-input"
-                value="{{_alpha}}"
-                accessible-name="{{alphaInputLabel}}"
-                @ui5-input="{{_handleAlphaInput}}"
-                @ui5-change="{{_handleAlphaChange}}"
-            ></ui5-input>
-            <ui5-label>A</ui5-label>
+    {{#if _isDefaultPickerMode}}
+        <div
+            class="ui5-color-picker-rgb-wrapper"
+            @ui5-change="{{_handleRGBInputsChange}}"
+        >
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="red"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{redInputLabel}}"
+                    value="{{_value.r}}"
+                ></ui5-input>
+                <ui5-label>R</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="green"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{greenInputLabel}}"
+                    value="{{_value.g}}"
+                ></ui5-input>
+                <ui5-label>G</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="blue"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{blueInputLabel}}"
+                    value="{{_value.b}}"
+                ></ui5-input>
+                <ui5-label>B</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="alpha"
+                    disabled="{{inputsDisabled}}"
+                    class="ui5-color-picker-rgb-input"
+                    value="{{_alpha}}"
+                    accessible-name="{{alphaInputLabel}}"
+                    @ui5-input="{{_handleAlphaInput}}"
+                    @ui5-change="{{_handleAlphaChange}}"
+                ></ui5-input>
+                <ui5-label>A</ui5-label>
+            </div>
         </div>
-    </div>
+    {{/if}}
 </section>
diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts
@@ -22,6 +22,7 @@ import ColorPickerTemplate from "./generated/templates/ColorPickerTemplate.lit.j
 import Input from "./Input.js";
 import Slider from "./Slider.js";
 import Label from "./Label.js";
+import ColorPickerDisplayMode from "./types/ColorPickerDisplayMode.js";
 
 import {
 	COLORPICKER_ALPHA_SLIDER,
@@ -111,6 +112,15 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	@property()
 	name?: string;
 
+	/**
+	 * Defines the display mode of the component.
+	 * @default "Default"
+	 * @public
+	 * @since 2.5.0
+	 */
+	@property()
+	displayMode: `${ColorPickerDisplayMode}` = "Default";
+
 	/**
 	 * Defines the HEX code of the currently selected color
 	 *
@@ -529,6 +539,10 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 		return this._wrongHEX ? "Error" : undefined;
 	}
 
+	get _isDefaultPickerMode() {
+		return this.displayMode === ColorPickerDisplayMode.Default;
+	}
+
 	get styles() {
 		return {
 			mainColor: {

diff --git a/packages/main/src/types/ColorPickerDisplayMode.ts b/packages/main/src/types/ColorPickerDisplayMode.ts
@@ -0,0 +1,19 @@
+/**
+ * ColorPicker display modes.
+ * @public
+ */
+enum ColorPickerDisplayMode {
+	/**
+	 * Default display mode. Includes all color picker features.
+	 * @public
+	 */
+	 Default = "Default",
+
+	/**
+	 * Simplified display mode. Doesn't include alpha slider and inputs for RGB values.
+	 * @public
+	 */
+	Simplified = "Simplified",
+}
+
+export default ColorPickerDisplayMode;
diff --git a/packages/main/test/pages/ColorPicker.html b/packages/main/test/pages/ColorPicker.html
@@ -45,6 +45,14 @@
 
 	<ui5-color-picker id="cp3"></ui5-color-picker>
 
+	<br>
+	<br>
+	<br>
+
+	<ui5-title>Simplified Color Picker</ui5-title>
+	<br>
+	<ui5-color-picker id="cp-simplified" value="#dbf692" display-mode="Simplified"></ui5-color-picker>
+
 	<script>
 		var colorPicker = document.querySelector("#change-event"),
 			colorLabel = document.querySelector("#color-input"),

diff --git a/packages/website/docs/_components_pages/main/ColorPicker.mdx b/packages/website/docs/_components_pages/main/ColorPicker.mdx
@@ -3,10 +3,16 @@ slug: ../ColorPicker
 ---
 
 import Basic from "../../_samples/main/ColorPicker/Basic/Basic.md";
+import Simplified from "../../_samples/main/ColorPicker/Simplified/Simplified.md";
 
 <%COMPONENT_OVERVIEW%>
 
 ## Basic Sample
 <Basic />
 
-<%COMPONENT_METADATA%>
+<%COMPONENT_METADATA%>
+
+## More Samples
+
+### Simplified Picker
+<Simplified />
diff --git a/packages/website/docs/_samples/main/ColorPicker/Simplified/Simplified.md b/packages/website/docs/_samples/main/ColorPicker/Simplified/Simplified.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/main/ColorPicker/Simplified/main.js b/packages/website/docs/_samples/main/ColorPicker/Simplified/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/ColorPicker.js";
diff --git a/packages/website/docs/_samples/main/ColorPicker/Simplified/sample.html b/packages/website/docs/_samples/main/ColorPicker/Simplified/sample.html
@@ -0,0 +1,20 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+
+    <ui5-color-picker display-mode="Simplified" value="#F6A192">Picker</ui5-color-picker>
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import "@ui5/webcomponents/dist/ColorPicker.js";