feat(ui5-color-palette-item): introduce custom tooltips

Author: didip1000

packages/main/src/ColorPaletteItem.ts

@@ -58,6 +58,16 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
 	@property({ type: Boolean })
 	selected = false;
 
+	/**
+	 * Defines the tooltip of the component. If not provided, a default tooltip will be set to the color value.
+	 *
+	 * @default ""
+	 * @public
+	 * @since 2.1x.0
+	 */
+	@property()
+	tooltip = ""
+
 	/**
 	 * Defines the tab-index of the element, helper information for the ItemNavigation.
 	 * @private

packages/main/src/ColorPaletteItemTemplate.tsx

@@ -8,7 +8,7 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 			role="button"
 			aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}
 			aria-pressed={this.selected}
-			title={`${this.colorLabel} - ${this.index}: ${this.value}`}
+			title={`${this.colorLabel} - ${this.index}: ${this.tooltip ? this.tooltip : this.value}`}
 		></div>
 	);
 }

packages/main/test/pages/ColorPalette.html

@@ -23,7 +23,7 @@
 	<ui5-color-palette id="cp1SelectedTest">
 		<ui5-color-palette-item value="darkblue" selected></ui5-color-palette-item>
 		<ui5-color-palette-item value="pink" selected></ui5-color-palette-item>
-		<ui5-color-palette-item value="#444444" selected></ui5-color-palette-item>
+		<ui5-color-palette-item value="#444444" tooltip="charcoal" selected></ui5-color-palette-item>
 		<ui5-color-palette-item value="rgb(0,200,0)" selected></ui5-color-palette-item>
 		<ui5-color-palette-item value="green"></ui5-color-palette-item>
 		<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
@@ -32,7 +32,7 @@
 		<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-item value="#ff6699" tooltip="brilliant rose"></ui5-color-palette-item>
 	</ui5-color-palette>
 	<br/>
 	<br/>