Skip to content

Commit 506e4e8

Browse files
didip1000didip1000
authored
feat(ui5-color-palette-item): introduce custom tooltips (#12828)
This change introduces a new tooltip property for the `ui5-color-palette-item`, allowing users to assign their own custom tooltips for palette items. Usage: `<ui5-color-palette-item value="#444444" tooltip="charcoal" selected></ui5-color-palette-item>`
1 parent 8b8cd84 commit 506e4e8

6 files changed

Lines changed: 59 additions & 14 deletions

File tree

‎packages/main/cypress/specs/ColorPalette.cy.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,3 +281,34 @@ describe("Color Palette - getFocusDomRef", () => {
281281
});
282282
});
283283
});
284+
285+
describe("Color Palette Item - tooltip", () => {
286+
it("should display the color value as tooltip when no custom tooltip is set", () => {
287+
cy.mount(
288+
<ColorPalette>
289+
<ColorPaletteItem id="no-tooltip" value="darkblue"></ColorPaletteItem>
290+
</ColorPalette>
291+
);
292+
293+
cy.get("#no-tooltip")
294+
.shadow()
295+
.find(".ui5-cp-item")
296+
.should("have.attr", "title")
297+
.and("contain", "darkblue");
298+
});
299+
300+
it("should display the custom tooltip when tooltip property is set", () => {
301+
cy.mount(
302+
<ColorPalette>
303+
<ColorPaletteItem id="custom-tooltip" value="#d60d5a" tooltip="Raspberry"></ColorPaletteItem>
304+
</ColorPalette>
305+
);
306+
307+
cy.get("#custom-tooltip")
308+
.shadow()
309+
.find(".ui5-cp-item")
310+
.should("have.attr", "title")
311+
.and("contain", "Raspberry")
312+
.and("not.contain", "#d60d5a");
313+
});
314+
});

‎packages/main/src/ColorPaletteItem.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,23 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
5050
* **Note:** Only one item must be selected per <code>ui5-color-palette</code>.
5151
* If more than one item is defined as selected, the last one would be considered as the selected one.
5252
*
53-
* @public
5453
* @default false
54+
* @public
5555
* @since 2.0.0
5656
*/
5757
@property({ type: Boolean })
5858
selected = false;
5959

60+
/**
61+
* Defines the tooltip of the component. When not set, the color value is used as the tooltip.
62+
*
63+
* @default undefined
64+
* @public
65+
* @since 2.22.0
66+
*/
67+
@property()
68+
tooltip?: string;
69+
6070
/**
6171
* Defines the tab-index of the element, helper information for the ItemNavigation.
6272
* @private
@@ -107,6 +117,10 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
107117
return ColorPaletteItem.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
108118
}
109119

120+
get getLabelText(): string {
121+
return `${this.colorLabel} - ${this.index}: ${this.tooltip || this.value}`;
122+
}
123+
110124
get classes() {
111125
// Remove after deleting the hbs template, it's added in the jsx template
112126
return {

‎packages/main/src/ColorPaletteItemTemplate.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
66
class="ui5-cp-item"
77
tabindex={parseInt(this.forcedTabIndex)}
88
role="button"
9-
aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}
9+
aria-label={this.getLabelText}
1010
aria-pressed={this.selected}
11-
title={`${this.colorLabel} - ${this.index}: ${this.value}`}
11+
title={this.getLabelText}
1212
></div>
1313
);
1414
}

‎packages/main/test/pages/ColorPalette.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@
2323
<ui5-color-palette id="cp1SelectedTest">
2424
<ui5-color-palette-item value="darkblue" selected></ui5-color-palette-item>
2525
<ui5-color-palette-item value="pink" selected></ui5-color-palette-item>
26-
<ui5-color-palette-item value="#444444" selected></ui5-color-palette-item>
27-
<ui5-color-palette-item value="rgb(0,200,0)" selected></ui5-color-palette-item>
26+
<ui5-color-palette-item value="#444444" tooltip="charcoal" selected></ui5-color-palette-item>
27+
<ui5-color-palette-item value="rgb(0,200,0)" tooltip="bright green" selected></ui5-color-palette-item>
2828
<ui5-color-palette-item value="green"></ui5-color-palette-item>
2929
<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
3030
<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
3131
<ui5-color-palette-item value="blue"></ui5-color-palette-item>
3232
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
3333
<ui5-color-palette-item value="orange"></ui5-color-palette-item>
3434
<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
35-
<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
35+
<ui5-color-palette-item value="#ff6699" tooltip="brilliant rose"></ui5-color-palette-item>
3636
</ui5-color-palette>
3737
<br/>
3838
<br/>

‎packages/website/docs/_samples/main/ColorPalette/Basic/sample.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
<ui5-color-palette>
1515
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
1616
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
17-
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
18-
<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
17+
<ui5-color-palette-item value="#444444" tooltip="charcoal"></ui5-color-palette-item>
18+
<ui5-color-palette-item value="rgb(0,200,0)" tooltip="bright green"></ui5-color-palette-item>
1919
<ui5-color-palette-item value="green"></ui5-color-palette-item>
2020
<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
2121
<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
2222
<ui5-color-palette-item value="blue"></ui5-color-palette-item>
2323
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
2424
<ui5-color-palette-item value="orange"></ui5-color-palette-item>
25-
<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
26-
<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
25+
<ui5-color-palette-item value="#5480e7" tooltip="periwinkle"></ui5-color-palette-item>
26+
<ui5-color-palette-item value="#ff6699" tooltip="brilliant rose"></ui5-color-palette-item>
2727
</ui5-color-palette>
2828
<!-- playground-fold -->
2929
<script type="module" src="main.js"></script>

‎packages/website/docs/_samples/main/ColorPalette/Basic/sample.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ function App() {
1111
<ColorPalette>
1212
<ColorPaletteItem value="darkblue" />
1313
<ColorPaletteItem value="pink" />
14-
<ColorPaletteItem value="#444444" />
15-
<ColorPaletteItem value="rgb(0,200,0)" />
14+
<ColorPaletteItem value="#444444" tooltip="charcoal" />
15+
<ColorPaletteItem value="rgb(0,200,0)" tooltip="bright green" />
1616
<ColorPaletteItem value="green" />
1717
<ColorPaletteItem value="darkred" />
1818
<ColorPaletteItem value="yellow" />
1919
<ColorPaletteItem value="blue" />
2020
<ColorPaletteItem value="cyan" />
2121
<ColorPaletteItem value="orange" />
22-
<ColorPaletteItem value="#5480e7" />
23-
<ColorPaletteItem value="#ff6699" />
22+
<ColorPaletteItem value="#5480e7" tooltip="periwinkle" />
23+
<ColorPaletteItem value="#ff6699" tooltip="brilliant rose" />
2424
</ColorPalette>
2525
</>
2626
);

0 commit comments

Comments
 (0)