Skip to content

Commit 772424e

Browse files
tsanislavgatevtsanislavgatev
authored
feat(ui5-color-palette): initial implementation (#2731)
Implementation of new component called color palette. The control presents a set of colors that you define, from which the user can select.
1 parent b4cbc43 commit 772424e

23 files changed

+693
-0
lines changed

‎docs/Public Module Imports.md

+2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
3030
| Card | `ui5-card` | `import "@ui5/webcomponents/dist/Card.js";` |
3131
| Carousel | `ui5-carousel` | `import "@ui5/webcomponents/dist/Carousel.js";` |
3232
| Checkbox | `ui5-checkbox` | `import "@ui5/webcomponents/dist/CheckBox.js";` |
33+
| Color Palette | `ui5-color-palette` | `import "@ui5/webcomponents/dist/ColorPalette.js";` |
34+
| Color Palette Item | `ui5-color-palette-item` | comes with `ui5-color-palette` |
3335
| ComboBox | `ui5-combobox` | `import "@ui5/webcomponents/dist/ComboBox.js";` |
3436
| ComboBox Item | `ui5-cb-item` | comes with `ui5-combobox` |
3537
| Date Picker | `ui5-date-picker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |

‎packages/base/src/types/CSSColor.js

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/main/bundle.esm.js

+2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ import Button from "./dist/Button.js";
4747
import Card from "./dist/Card.js";
4848
import Carousel from "./dist/Carousel.js";
4949
import CheckBox from "./dist/CheckBox.js";
50+
import ColorPalette from "./dist/ColorPalette.js";
51+
import ColorPaletteItem from "./dist/ColorPaletteItem.js";
5052
import ComboBox from "./dist/ComboBox.js";
5153
import DatePicker from "./dist/DatePicker.js";
5254
import DateRangePicker from "./dist/DateRangePicker.js";

‎packages/main/src/ColorPalette.hbs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="ui5-cp-item-container"
2+
role="region"
3+
aria-label="{{colorContainerLabel}}"
4+
@click={{_onclick}}
5+
@keyup={{_onkeyup}}
6+
@keydown={{_onkeydown}}>
7+
{{#each this.displayedColors}}
8+
<slot
9+
name="{{this._individualSlot}}"
10+
>
11+
</slot>
12+
{{/each}}
13+
</div>

‎packages/main/src/ColorPalette.js

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2+
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3+
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
4+
import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
5+
import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
6+
import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
7+
import {
8+
isSpace,
9+
isEnter,
10+
} from "@ui5/webcomponents-base/dist/Keys.js";
11+
import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
12+
import ColorPaletteItem from "./ColorPaletteItem.js";
13+
import {
14+
COLORPALETTE_CONTAINER_LABEL,
15+
} from "./generated/i18n/i18n-defaults.js";
16+
17+
// Styles
18+
import ColorPaletteCss from "./generated/themes/ColorPalette.css.js";
19+
20+
/**
21+
* @public
22+
*/
23+
const metadata = {
24+
tag: "ui5-color-palette",
25+
managedSlots: true,
26+
properties: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
27+
/**
28+
*
29+
* The selected color.
30+
* @type {CSSColor}
31+
* @public
32+
*/
33+
value: {
34+
type: CSSColor,
35+
},
36+
},
37+
slots: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
38+
/**
39+
* Defines the <code>ui5-color-palette-item</code> items.
40+
* @type {HTMLElement[]}
41+
* @slot
42+
* @public
43+
*/
44+
"default": {
45+
propertyName: "colors",
46+
type: HTMLElement,
47+
invalidateOnChildChange: true,
48+
individualSlots: true,
49+
},
50+
},
51+
events: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
52+
/**
53+
* Fired when the user selects a color.
54+
*
55+
* @event
56+
* @public
57+
* @param {String} color the selected color
58+
*/
59+
change: {
60+
details: {
61+
color: {
62+
type: "String",
63+
},
64+
},
65+
},
66+
},
67+
};
68+
69+
/**
70+
* @class
71+
*
72+
* <h3 class="comment-api-title">Overview</h3>
73+
* The ColorPalette provides the users with a range of predefined colors.
74+
* You can set them by using the ColorPaletteItem items as slots.
75+
*
76+
* <h3>Usage</h3>
77+
* The palette is intended for users, who don't want to check and remember the different values of the colors .
78+
*
79+
* For the <code>ui5-color-palette</code>
80+
* <h3>ES6 Module Import</h3>
81+
*
82+
* <code>import @ui5/webcomponents/dist/ColorPalette.js";</code>
83+
*
84+
* @constructor
85+
* @author SAP SE
86+
* @alias sap.ui.webcomponents.main.ColorPalette
87+
* @extends UI5Element
88+
* @tagname ui5-color-palette
89+
* @since 1.0.0-rc.12
90+
* @appenddocs ColorPaletteItem
91+
* @public
92+
*/
93+
class ColorPalette extends UI5Element {
94+
static get metadata() {
95+
return metadata;
96+
}
97+
98+
static get render() {
99+
return litRender;
100+
}
101+
102+
static get styles() {
103+
return ColorPaletteCss;
104+
}
105+
106+
static get template() {
107+
return ColorPaletteTemplate;
108+
}
109+
110+
static get dependencies() {
111+
return [ColorPaletteItem];
112+
}
113+
114+
static async onDefine() {
115+
await fetchI18nBundle("@ui5/webcomponents");
116+
}
117+
118+
constructor() {
119+
super();
120+
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
121+
this._itemNavigation = new ItemNavigation(this, {
122+
getItemsCallback: () => this.displayedColors,
123+
rowSize: 5,
124+
behavior: ItemNavigationBehavior.Cyclic,
125+
});
126+
}
127+
128+
onBeforeRendering() {
129+
this.displayedColors.forEach((item, index) => {
130+
item.index = index + 1;
131+
});
132+
}
133+
134+
selectColor(item) {
135+
item.focus();
136+
this._itemNavigation.update(item);
137+
138+
this.value = item.value;
139+
140+
this.fireEvent("change", {
141+
color: this.value,
142+
});
143+
}
144+
145+
_onclick(event) {
146+
if (event.target.localName === "ui5-color-palette-item") {
147+
this.selectColor(event.target);
148+
}
149+
}
150+
151+
_onkeyup(event) {
152+
if (isSpace(event)) {
153+
event.preventDefault();
154+
this.selectColor(event.target);
155+
}
156+
}
157+
158+
_onkeydown(event) {
159+
if (isEnter(event)) {
160+
this.selectColor(event.target);
161+
}
162+
}
163+
164+
get displayedColors() {
165+
return this.colors.filter(item => item.value).slice(0, 15);
166+
}
167+
168+
get colorContainerLabel() {
169+
return this.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
170+
}
171+
}
172+
173+
ColorPalette.define();
174+
175+
export default ColorPalette;

‎packages/main/src/ColorPaletteItem.hbs

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div
2+
class="ui5-cp-item"
3+
style="background-color: {{value}}"
4+
value="{{value}}"
5+
tabindex="{{_tabIndex}}"
6+
role="button"
7+
aria-label="{{colorLabel}} - {{index}}: {{this.value}}"
8+
title="{{colorLabel}} - {{index}}: {{this.value}}"
9+
>
10+
</div>

‎packages/main/src/ColorPaletteItem.js

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2+
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3+
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
4+
import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
5+
import ColorPaletteItemTemplate from "./generated/templates/ColorPaletteItemTemplate.lit.js";
6+
import {
7+
COLORPALETTE_COLOR_LABEL,
8+
} from "./generated/i18n/i18n-defaults.js";
9+
10+
// Styles
11+
import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js";
12+
13+
/**
14+
* @public
15+
*/
16+
const metadata = {
17+
tag: "ui5-color-palette-item",
18+
managedSlots: true,
19+
properties: /** @lends sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
20+
/**
21+
* Defines the value of the <code>ui5-color-palette-item</code> color.
22+
* <br><br>
23+
* <b>Note:</b> The value should be a valid CSS color.
24+
*
25+
* @type {CSSColor}
26+
* @public
27+
*/
28+
value: {
29+
type: CSSColor,
30+
},
31+
32+
/**
33+
* Defines the stable selector that you can use via getStableDomRef method.
34+
* @public
35+
*/
36+
stableDomRef: {
37+
type: String,
38+
},
39+
/**
40+
* Defines the tab-index of the element, helper information for the ItemNavigation.
41+
* @private
42+
*/
43+
_tabIndex: {
44+
type: String,
45+
defaultValue: "-1",
46+
noAttribute: true,
47+
},
48+
/**
49+
* Defines the index of the item inside of the ColorPalette.
50+
* @private
51+
* @type {String}
52+
*/
53+
index: {
54+
type: String,
55+
},
56+
},
57+
slots: {
58+
},
59+
events: /** @lends sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {},
60+
};
61+
62+
/**
63+
* @class
64+
*
65+
* <h3 class="comment-api-title">Overview</h3>
66+
*
67+
* The <code>ui5-color-palette-item</code> component represents a color in the the <code>ui5-color-palette</code>.
68+
*
69+
* @constructor
70+
* @author SAP SE
71+
* @alias sap.ui.webcomponents.main.ColorPaletteItem
72+
* @extends sap.ui.webcomponents.base.UI5Element
73+
* @tagname ui5-color-palette-item
74+
* @since 1.0.0-rc.12
75+
* @public
76+
*/
77+
class ColorPaletteItem extends UI5Element {
78+
static get metadata() {
79+
return metadata;
80+
}
81+
82+
static get render() {
83+
return litRender;
84+
}
85+
86+
static get styles() {
87+
return ColorPaletteItemCss;
88+
}
89+
90+
static get template() {
91+
return ColorPaletteItemTemplate;
92+
}
93+
94+
static async onDefine() {
95+
await fetchI18nBundle("@ui5/webcomponents");
96+
}
97+
98+
constructor() {
99+
super();
100+
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
101+
}
102+
103+
get colorLabel() {
104+
return this.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
105+
}
106+
}
107+
108+
ColorPaletteItem.define();
109+
110+
export default ColorPaletteItem;

‎packages/main/src/i18n/messagebundle.properties

+6
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Previous Page
4343
# Carousel Next Page text
4444
CAROUSEL_NEXT_ARROW_TEXT=Next Page
4545

46+
#XFLD: Label of the container holding the colors
47+
COLORPALETTE_CONTAINER_LABEL=Color palette - Predefined colors
48+
49+
#XFLD: Label of the color box
50+
COLORPALETTE_COLOR_LABEL=Color
51+
4652
#XACT: DatePicker 'Open Picker' icon title
4753
DATEPICKER_OPEN_ICON_TITLE=Open Picker
4854

‎packages/main/src/themes/ColorPalette.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:host(:not([hidden])) {
2+
display: inline-block;
3+
}
4+
5+
.ui5-cp-item-container {
6+
display: flex;
7+
max-width: var(--_ui5_color-palette-row-width);
8+
flex-flow: wrap;
9+
max-height: var(--_ui5_color-palette-row-height);
10+
overflow: hidden;
11+
}

‎packages/main/src/themes/ColorPaletteItem.css

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.ui5-cp-item {
2+
height: var(--_ui5_color-palette-item-height);
3+
width: var(--_ui5_color-palette-item-height);
4+
border: 1px solid var(--sapContent_ForegroundBorderColor);
5+
border-radius: 0.25rem;
6+
display: inline-block;
7+
margin: var(--_ui5_color-palette-item-margin);
8+
}
9+
10+
.ui5-cp-item:focus:before {
11+
content: "";
12+
width: var(--_ui5_color-palette-item-focus-height);
13+
height: var(--_ui5_color-palette-item-focus-height);
14+
margin: 2px;
15+
position: absolute;
16+
outline: rgb(0, 0, 0) dotted 0.0625rem;
17+
}
18+
19+
.ui5-cp-item:focus {
20+
pointer-events: none;
21+
outline: white solid 0.0625rem;
22+
outline-offset: -3px;
23+
}
24+
25+
.ui5-cp-item:hover {
26+
height: var(--_ui5_color-palette-item-hover-height);
27+
width: var(--_ui5_color-palette-item-hover-height);
28+
margin: var(--_ui5_color-palette-item-hover-margin);
29+
}

0 commit comments

Comments
 (0)