Skip to content

Commit 12ce9fd

Browse files
ilhan007ilhan007
authored
refactor(ui5-color-palette): change API (#3420)
As part of the #3107 we decided to introduce a new component ColorPalettePopover and to remove most of the ColorPalette API (more/recentColors features). With this change the ColorPalette basically supports only the colors slot (as the sap.m.ColorPalette control does). BREAKING_CHANGE: The showMoreColors property is removed, ColorPalettePopover component will be introduced in future and provide this functionality BREAKING_CHANGE: The showRecentColors property is removed, ColorPalettePopover component will be introduced in future and provide this functionality BREAKING_CHANGE: The value property has been removed.
1 parent e679b51 commit 12ce9fd

File tree

3 files changed

+28
-127
lines changed

3 files changed

+28
-127
lines changed

‎packages/main/src/ColorPalette.js

+21-16
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const metadata = {
3232
/**
3333
* Defines whether the user can see the last used colors in the bottom of the component
3434
* @type {boolean}
35-
* @public
35+
* @private
3636
* @since 1.0.0-rc.15
3737
*/
3838
showRecentColors: {
@@ -43,20 +43,19 @@ const metadata = {
4343
* Defines whether the user can choose a custom color from a color picker
4444
* <b>Note:</b> In order to use this property you need to import the following module: <code>"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"</code>
4545
* @type {boolean}
46-
* @public
46+
* @private
4747
* @since 1.0.0-rc.15
4848
*/
4949
showMoreColors: {
5050
type: Boolean,
5151
},
5252

5353
/**
54-
*
55-
* The selected color.
54+
* Defines the selected color.
5655
* @type {CSSColor}
57-
* @public
56+
* @private
5857
*/
59-
value: {
58+
_selectedColor: {
6059
type: CSSColor,
6160
},
6261
},
@@ -97,12 +96,11 @@ const metadata = {
9796
*
9897
* <h3 class="comment-api-title">Overview</h3>
9998
* The ColorPalette provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
100-
* You can set them by using the ColorPaletteItem items as slots.
10199
*
102100
* <h3>Usage</h3>
103-
* The Colorpalette is intended for users that needs to select a color from a predefined set of colors.
104-
* To allow users select any color from a color picker, enable the <code>show-more-colors</code> property.
105-
* And, to display the most recent color selection, enable the <code>show-recent-colors</code> property.
101+
*
102+
* The Colorpalette is meant for users that needs to select a color from a predefined set.
103+
* To define the colors, use the <code>ui5-color-palette-item</code> component inside the default slot of the <code>ui5-color-palette</code>.
106104
*
107105
* <h3>ES6 Module Import</h3>
108106
*
@@ -189,17 +187,17 @@ class ColorPalette extends UI5Element {
189187
}
190188

191189
_setColor(color) {
192-
this.value = color;
193-
if (this._recentColors[0] !== this.value) {
194-
if (this._recentColors.includes(this.value)) {
195-
this._recentColors.unshift(this._recentColors.splice(this._recentColors.indexOf(this.value), 1)[0]);
190+
this._selectedColor = color;
191+
if (this._recentColors[0] !== this._selectedColor) {
192+
if (this._recentColors.includes(this._selectedColor)) {
193+
this._recentColors.unshift(this._recentColors.splice(this._recentColors.indexOf(this._selectedColor), 1)[0]);
196194
} else {
197-
this._recentColors.unshift(this.value);
195+
this._recentColors.unshift(this._selectedColor);
198196
}
199197
}
200198

201199
this.fireEvent("change", {
202-
color: this.value,
200+
color: this._selectedColor,
203201
});
204202
}
205203

@@ -238,6 +236,13 @@ class ColorPalette extends UI5Element {
238236
dialog.open();
239237
}
240238

239+
/**
240+
* Returns the selected color.
241+
*/
242+
get selectedColor() {
243+
return this._selectedColor;
244+
}
245+
241246
get displayedColors() {
242247
return this.colors.filter(item => item.value).slice(0, 15);
243248
}

‎packages/main/test/samples/ColorPalette.sample.html

+1-105
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ <h2 class="control-header">ColorPalette</h2>
77
<div class="control-tag">&lt;ui5-color-palette&gt;</div>
88

99
<section>
10-
<h3>Basic ColorPalette</h3>
10+
<h3>Color Palette</h3>
1111
<div class="snippet">
1212
<ui5-color-palette>
1313
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
@@ -42,109 +42,5 @@ <h3>Basic ColorPalette</h3>
4242
</xmp></pre>
4343
</section>
4444

45-
<section>
46-
<h3>ColorPalette With More Colors & Recent Colours Functionality</h3>
47-
<div class="snippet">
48-
<ui5-color-palette show-more-colors show-recent-colors>
49-
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
50-
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
51-
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
52-
<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
53-
<ui5-color-palette-item value="green"></ui5-color-palette-item>
54-
<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
55-
<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
56-
<ui5-color-palette-item value="blue"></ui5-color-palette-item>
57-
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
58-
<ui5-color-palette-item value="orange"></ui5-color-palette-item>
59-
<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
60-
<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
61-
</ui5-color-palette>
62-
</div>
63-
<pre class="prettyprint lang-html"><xmp>
64-
<ui5-color-palette show-more-colors show-recent-colors>
65-
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
66-
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
67-
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
68-
<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
69-
<ui5-color-palette-item value="green"></ui5-color-palette-item>
70-
<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
71-
<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
72-
<ui5-color-palette-item value="blue"></ui5-color-palette-item>
73-
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
74-
<ui5-color-palette-item value="orange"></ui5-color-palette-item>
75-
<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
76-
<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
77-
</ui5-color-palette>
78-
</xmp></pre>
79-
</section>
80-
81-
<section>
82-
<h3>ColorPalette in Popover</h3>
83-
<div class="snippet">
84-
<section style="display:flex; align-items: center;">
85-
<ui5-button id="btnOpenPopover" icon="text-color"></ui5-button>
86-
<ui5-input id="inpSelectedColor" placeholder="Selected color..."></ui5-input>
87-
</section>
88-
89-
<ui5-popover
90-
id="palettePopover"
91-
header-text="Pick a color"
92-
placement-type="Bottom"
93-
horizontal-align="Left"
94-
hide-arrow>
95-
<ui5-color-palette id="colorPaletteInPopover" show-more-colors>
96-
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
97-
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
98-
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
99-
<ui5-color-palette-item value="rgb(0,200,0)"></ui5-color-palette-item>
100-
<ui5-color-palette-item value="green"></ui5-color-palette-item>
101-
<ui5-color-palette-item value="darkred"></ui5-color-palette-item>
102-
<ui5-color-palette-item value="yellow"></ui5-color-palette-item>
103-
<ui5-color-palette-item value="blue"></ui5-color-palette-item>
104-
<ui5-color-palette-item value="cyan"></ui5-color-palette-item>
105-
<ui5-color-palette-item value="orange"></ui5-color-palette-item>
106-
<ui5-color-palette-item value="#5480e7"></ui5-color-palette-item>
107-
<ui5-color-palette-item value="#ff6699"></ui5-color-palette-item>
108-
</ui5-color-palette>
109-
</ui5-popover>
110-
111-
<script>
112-
colorPaletteInPopover.addEventListener("change", function(event) {
113-
inpSelectedColor.value = event.detail.color;
114-
palettePopover.close();
115-
});
116-
btnOpenPopover.addEventListener("click", function(event) {
117-
palettePopover.openBy(btnOpenPopover);
118-
});
119-
</script>
120-
</div>
121-
<pre class="prettyprint lang-html"><xmp>
122-
<section>
123-
<ui5-button id="btnOpenPopover" icon="text-color"></ui5-button>
124-
<ui5-input id="inpSelectedColor" placeholder="Selected color..."></ui5-input>
125-
</section>
126-
127-
<ui5-popover id="palettePopover" header-text="Pick a color" placement-type="Bottom">
128-
<ui5-color-palette id="colorPaletteInPopover" show-more-colors>
129-
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
130-
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
131-
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
132-
...
133-
</ui5-color-palette>
134-
</ui5-popover>
135-
136-
<script>
137-
colorPaletteInPopover.addEventListener("change", event => {
138-
inpSelectedColor.value = event.detail.color;
139-
palettePopover.close();
140-
});
141-
142-
btnOpenPopover.addEventListener("click", event => {
143-
palettePopover.openBy(btnOpenPopover);
144-
});
145-
</script>
146-
</xmp></pre>
147-
</section>
148-
14945

15046
<!-- JSDoc marker -->

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ describe("ColorPalette interactions", () => {
1313

1414
colorPaletteEntries[0].click();
1515

16-
assert.strictEqual(colorPalette.getProperty("value"), "darkblue", "Check if selected value is darkblue");
16+
assert.strictEqual(colorPalette.getProperty("selectedColor"), "darkblue", "Check if selected value is darkblue");
1717
});
1818

1919
it("Test if keyboard navigation on elements works", () => {
@@ -27,7 +27,7 @@ describe("ColorPalette interactions", () => {
2727
item.keys("ArrowRight");
2828
item.keys("Space");
2929

30-
assert.strictEqual(colorPalette.getProperty("value"), "pink", "Check if selected value is pink");
30+
assert.strictEqual(colorPalette.getProperty("selectedColor"), "pink", "Check if selected value is pink");
3131
});
3232

3333
it("Test if keyboard navigation on elements works", () => {
@@ -43,7 +43,7 @@ describe("ColorPalette interactions", () => {
4343

4444
colorPalette.keys("Space");
4545

46-
assert.strictEqual(colorPalette.getProperty("value"), "#ff6699", "Check if selected value is #ff6699");
46+
assert.strictEqual(colorPalette.getProperty("selectedColor"), "#ff6699", "Check if selected value is #ff6699");
4747
});
4848

4949
it("Test if keyboard navigation on elements works", () => {
@@ -57,7 +57,7 @@ describe("ColorPalette interactions", () => {
5757
item.keys("ArrowUp");
5858
item.keys("Space");
5959

60-
assert.strictEqual(colorPalette.getProperty("value"), "orange", "Check if selected value is orange");
60+
assert.strictEqual(colorPalette.getProperty("selectedColor"), "orange", "Check if selected value is orange");
6161
});
6262

6363
it("Test if keyboard navigation on elements works", () => {
@@ -71,7 +71,7 @@ describe("ColorPalette interactions", () => {
7171
item.keys("ArrowDown");
7272
item.keys("Space");
7373

74-
assert.strictEqual(colorPalette.getProperty("value"), "darkblue", "Check if selected value is darkblue");
74+
assert.strictEqual(colorPalette.getProperty("selectedColor"), "darkblue", "Check if selected value is darkblue");
7575
});
7676

7777
it("Tests show-more-colors functionality", () => {
@@ -98,7 +98,7 @@ describe("ColorPalette interactions", () => {
9898

9999
browser.keys("Enter"); // Close the dialog & change the value of the color palette
100100

101-
assert.strictEqual(colorPalette.getProperty("value"), "#fafafa", "Custom color is selected from the color picker");
101+
assert.strictEqual(colorPalette.getProperty("selectedColor"), "#fafafa", "Custom color is selected from the color picker");
102102
})
103103

104104
it("Tests show-recent-colors functionality", () => {

0 commit comments

Comments
 (0)