From 6d9299013d55843553e673e18cb0f19fad569a2d Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Tue, 23 Dec 2025 12:45:12 +0200 Subject: [PATCH 1/5] feat(ui5-color-palette-item): introduce custom tooltips --- packages/main/src/ColorPaletteItem.ts | 10 ++++++++++ packages/main/src/ColorPaletteItemTemplate.tsx | 2 +- packages/main/test/pages/ColorPalette.html | 4 ++-- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index b502757508ba..ee323f549c2d 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/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 diff --git a/packages/main/src/ColorPaletteItemTemplate.tsx b/packages/main/src/ColorPaletteItemTemplate.tsx index 6df6879e012c..f9ca9e55cc27 100644 --- a/packages/main/src/ColorPaletteItemTemplate.tsx +++ b/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}`} > ); } diff --git a/packages/main/test/pages/ColorPalette.html b/packages/main/test/pages/ColorPalette.html index 1d6c83cd4a36..f6ed8f07aeef 100644 --- a/packages/main/test/pages/ColorPalette.html +++ b/packages/main/test/pages/ColorPalette.html @@ -23,7 +23,7 @@ - + @@ -32,7 +32,7 @@ - +

From 1bab9794f58ebab985c9b43e1258ea5174f8229b Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Tue, 7 Apr 2026 17:40:20 +0300 Subject: [PATCH 2/5] chore: update documentation and add test --- .../main/cypress/specs/ColorPalette.cy.tsx | 31 +++++++++++++++++++ packages/main/src/ColorPaletteItem.ts | 7 ++--- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/packages/main/cypress/specs/ColorPalette.cy.tsx b/packages/main/cypress/specs/ColorPalette.cy.tsx index 95c59f6f831c..aacd8c6e1c4b 100644 --- a/packages/main/cypress/specs/ColorPalette.cy.tsx +++ b/packages/main/cypress/specs/ColorPalette.cy.tsx @@ -281,3 +281,34 @@ describe("Color Palette - getFocusDomRef", () => { }); }); }); + +describe("Color Palette Item - tooltip", () => { + it("should display the color value as tooltip when no custom tooltip is set", () => { + cy.mount( + + + + ); + + cy.get("#no-tooltip") + .shadow() + .find(".ui5-cp-item") + .should("have.attr", "title") + .and("contain", "darkblue"); + }); + + it("should display the custom tooltip when tooltip property is set", () => { + cy.mount( + + + + ); + + cy.get("#custom-tooltip") + .shadow() + .find(".ui5-cp-item") + .should("have.attr", "title") + .and("contain", "Raspberry") + .and("not.contain", "#d60d5a"); + }); +}); diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index ee323f549c2d..8405645e7a46 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -59,14 +59,13 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem { selected = false; /** - * Defines the tooltip of the component. If not provided, a default tooltip will be set to the color value. + * Defines the tooltip of the component. When not set, the color value is used as the tooltip. * - * @default "" * @public - * @since 2.1x.0 + * @since 2.22.0 */ @property() - tooltip = "" + tooltip?: string; /** * Defines the tab-index of the element, helper information for the ItemNavigation. From 2d790df1ed2b183ee443bdbb368977e343ce2a22 Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Wed, 8 Apr 2026 16:57:24 +0300 Subject: [PATCH 3/5] chore: update aria-label to match tooltip --- packages/main/src/ColorPaletteItem.ts | 4 ++++ packages/main/src/ColorPaletteItemTemplate.tsx | 4 ++-- packages/main/test/pages/ColorPalette.html | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index 23225ace1b6e..ec4679d728f0 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -116,6 +116,10 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem { return ColorPaletteItem.i18nBundle.getText(COLORPALETTE_COLOR_LABEL); } + get getLabelText(): string { + return `${this.colorLabel} - ${this.index}: ${this.tooltip || this.value}`; + } + get classes() { // Remove after deleting the hbs template, it's added in the jsx template return { diff --git a/packages/main/src/ColorPaletteItemTemplate.tsx b/packages/main/src/ColorPaletteItemTemplate.tsx index f9ca9e55cc27..f8dae34c0604 100644 --- a/packages/main/src/ColorPaletteItemTemplate.tsx +++ b/packages/main/src/ColorPaletteItemTemplate.tsx @@ -6,9 +6,9 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) { class="ui5-cp-item" tabindex={parseInt(this.forcedTabIndex)} role="button" - aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`} + aria-label={this.getLabelText} aria-pressed={this.selected} - title={`${this.colorLabel} - ${this.index}: ${this.tooltip ? this.tooltip : this.value}`} + title={this.getLabelText} > ); } diff --git a/packages/main/test/pages/ColorPalette.html b/packages/main/test/pages/ColorPalette.html index f6ed8f07aeef..b213b8a72546 100644 --- a/packages/main/test/pages/ColorPalette.html +++ b/packages/main/test/pages/ColorPalette.html @@ -24,7 +24,7 @@ - + From 9861e8f6f62e2db089d8ad0a4722718fa7148b2d Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Thu, 9 Apr 2026 15:52:23 +0300 Subject: [PATCH 4/5] chore: fix build errors and add sample --- packages/main/src/ColorPaletteItem.ts | 3 ++- packages/main/test/pages/ColorPalette.html | 2 +- .../docs/_samples/main/ColorPalette/Basic/sample.html | 8 ++++---- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index ec4679d728f0..486b727adf3b 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -50,8 +50,8 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem { * **Note:** Only one item must be selected per ui5-color-palette. * If more than one item is defined as selected, the last one would be considered as the selected one. * - * @public * @default false + * @public * @since 2.0.0 */ @property({ type: Boolean }) @@ -60,6 +60,7 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem { /** * Defines the tooltip of the component. When not set, the color value is used as the tooltip. * + * @default undefined * @public * @since 2.22.0 */ diff --git a/packages/main/test/pages/ColorPalette.html b/packages/main/test/pages/ColorPalette.html index b213b8a72546..b961217011f9 100644 --- a/packages/main/test/pages/ColorPalette.html +++ b/packages/main/test/pages/ColorPalette.html @@ -24,7 +24,7 @@ - + diff --git a/packages/website/docs/_samples/main/ColorPalette/Basic/sample.html b/packages/website/docs/_samples/main/ColorPalette/Basic/sample.html index 963c177d84ad..2a8310ac37f9 100644 --- a/packages/website/docs/_samples/main/ColorPalette/Basic/sample.html +++ b/packages/website/docs/_samples/main/ColorPalette/Basic/sample.html @@ -14,16 +14,16 @@ - - + + - - + + From 78fafd9d0c6eec75c784c8c715c602e73c569e83 Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Thu, 9 Apr 2026 16:00:23 +0300 Subject: [PATCH 5/5] chore: add react samples --- .../docs/_samples/main/ColorPalette/Basic/sample.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/website/docs/_samples/main/ColorPalette/Basic/sample.tsx b/packages/website/docs/_samples/main/ColorPalette/Basic/sample.tsx index 921ea3aba3d3..2b28110acaa6 100644 --- a/packages/website/docs/_samples/main/ColorPalette/Basic/sample.tsx +++ b/packages/website/docs/_samples/main/ColorPalette/Basic/sample.tsx @@ -11,16 +11,16 @@ function App() { - - + + - - + + );