Skip to content

Commit f0a90b7

Browse files
ilhan007ilhan007
authored
fix(ui5-select): selection, styling and playground sample (#4)
1 parent ef57d41 commit f0a90b7

File tree

6 files changed

+195
-18
lines changed

6 files changed

+195
-18
lines changed

‎packages/main/src/Select.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@
1212
hide-header="true"
1313
hide-arrow="true"
1414
horizontal-align="Stretch">
15-
<ui5-list>
15+
<ui5-list separators="None">
1616
{{#each ctr.items}}
1717
<slot name="{{this._slot}}"></slot>
1818
{{/each}}
1919
</ui5-list>
2020
</ui5-popover>
2121
{{/if}}
2222

23-
<ui5-icon src="sap-icon://navigation-down-arrow" class="sapWCSelectDropDownIcon"></ui5-icon>
23+
<ui5-icon src="sap-icon://slim-arrow-down" class="sapWCSelectDropDownIcon"></ui5-icon>
2424
</div>

‎packages/main/src/Select.js

+31-6
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ const metadata = {
3434
* <br/><br/>
3535
* <b>Note:</b> Only one selected item is allowed.
3636
* If more than one item is defined as selected, the last one would be considered as the selected one.
37+
* <br/><br/>
38+
* <b>Note:</b> Use the <code>ui5-li</code> component to define the desired options.
3739
* @type {HTMLElement[]}
3840
* @slot
3941
* @public
@@ -85,7 +87,7 @@ const metadata = {
8587
defaultValue: false,
8688
},
8789
},
88-
events: /** @lends sap.ui.webcomponents.main.Select.prototype */ {
90+
events: /** @lends sap.ui.webcomponents.main.Select.prototype */ {
8991
/**
9092
* Fired, when the selected item changes.
9193
*
@@ -103,6 +105,22 @@ const metadata = {
103105

104106
/**
105107
* @class
108+
* <h3 class="comment-api-title"> Overview </h3>
109+
*
110+
* The <code>ui5-select</code> component is used to create a drop-down list
111+
* and the items inside the <code>ui5-select</code> define the available options,
112+
* using the <code>ui5-li</code> component.
113+
* <h3>Keyboard handling</h3>
114+
* The <code>ui5-select</code> provides advanced keyboard handling.
115+
* If the <code>ui5-select</code> is focused,
116+
* you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
117+
* Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys
118+
* to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys.
119+
* <br>
120+
* <h3>ES6 Module Import</h3>
121+
* <code>import "@ui5/webcomponents/dist/Select";</code>
122+
* <br>
123+
* <code>import "@ui5/webcomponents/dist/StandardListItem";</code> (<code>ui5-li</code>)
106124
* @constructor
107125
* @author SAP SE
108126
* @alias sap.ui.webcomponents.main.Select
@@ -250,19 +268,26 @@ class Select extends WebComponent {
250268
return previewedItem && selectedItem !== previewedItem;
251269
}
252270

253-
_select(item, position = 0) {
254-
if (this._getSelectedItem()) {
255-
this._getSelectedItem().selected = false;
271+
_select(item, position) {
272+
const selectedItem = this._getSelectedItem();
273+
274+
if (selectedItem) {
275+
selectedItem.selected = false;
256276
}
257277

258-
item.selected = true;
259278
this._setSelectedItem(item);
260279
this._setPreviewedItem(null);
261280
this._setText(item.textContent);
262-
this._updateSelectedItemPos(position);
281+
282+
if (position !== undefined) {
283+
this._updateSelectedItemPos(position);
284+
}
263285
}
264286

265287
_setSelectedItem(item) {
288+
if (item) {
289+
item.selected = true;
290+
}
266291
this._selectedItem = item;
267292
}
268293

‎packages/main/src/Suggestions.js

+2
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ class Suggestions {
101101
onItemSelected(selectedItem, keyboardUsed) {
102102
const item = selectedItem || this._getItems()[this.selectedItemIndex];
103103

104+
this.selectedItemIndex = this._getItems().indexOf(item);
105+
104106
this._getComponent().onItemSelected(item, keyboardUsed);
105107
this.close();
106108
}

‎packages/main/src/themes/base/Select.less

+6-10
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,14 @@ ui5-select {
2424
outline: none;
2525

2626
// Hovered
27-
&:hover:not(.sapWCSelectState):not(.sapWCSelectOpened) {
27+
&:hover:not(.sapWCSelectDisabled):not(.sapWCSelectState):not(.sapWCSelectOpened) {
2828
background-color: @sapUiFieldHoverBackground;
2929
border: 1px solid @sapUiFieldHoverBorderColor;
30+
}
3031

31-
.sapWCSelectDropDownIcon {
32-
background: @sapUiButtonLiteHoverBackground;
33-
}
32+
// Hovered Icon
33+
&:hover:not(.sapWCSelectDisabled):not(.sapWCSelectOpened) .sapWCSelectDropDownIcon {
34+
background: @sapUiButtonLiteHoverBackground;
3435
}
3536

3637
// Focused
@@ -51,11 +52,6 @@ ui5-select {
5152
}
5253
}
5354

54-
// Focused with state
55-
&.sapWCSelectState:not(.sapWCSelectOpened):not(.sapWCSelectDisabled):focus {
56-
outline-offset: -4px;
57-
}
58-
5955
// Opened
6056
&.sapWCSelectOpened .sapWCSelectDropDownIcon {
6157
background: @sapUiToggleButtonPressedBackground;
@@ -113,7 +109,7 @@ ui5-select {
113109
}
114110

115111
// RTL
116-
:host(ui5-select) span[dir="rtl"]{
112+
:host(ui5-select) span[dir="rtl"] {
117113
.sapWCSelect {
118114
padding-left: 0;
119115
padding-right: 0.5rem;

‎packages/main/src/themes/sap_belize_hcb/Select.less

+35
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,40 @@
3131
border-color: @sapUiHcReducedForeground;
3232
color: @sapUiContentDisabledTextColor;
3333
}
34+
35+
&.sapWCSelectError:not(.sapWCSelectDisabled),
36+
&.sapWCSelectWarning:not(.sapWCSelectDisabled) {
37+
border-style: dashed;
38+
border-width: 1px;
39+
}
40+
41+
&.sapWCInputBaseContentWrapperWarning:not(.sapWCInputBaseReadonlyWrapper):not(.sapWCInputBaseDisabledWrapper) {
42+
border-style: dashed;
43+
border-width: 1px;
44+
}
45+
46+
&:hover:not(.sapWCSelectDisabled) {
47+
.sapWCSelectDropDownIcon {
48+
border-left: 0.0625rem solid @sapUiFieldHoverBorderColor;
49+
}
50+
}
3451
}
3552

53+
// RTL
54+
:host(ui5-select) span[dir="rtl"] {
55+
.sapWCSelect:hover:not(.sapWCSelectDisabled) {
56+
.sapWCSelectDropDownIcon {
57+
border-left: none;
58+
border-right: 0.0625rem solid @sapUiFieldHoverBorderColor;
59+
}
60+
}
61+
}
62+
63+
ui5-select span[dir="rtl"] {
64+
.sapWCSelect:hover:not(.sapWCSelectDisabled) {
65+
.sapWCSelectDropDownIcon {
66+
border-left: none;
67+
border-right: 0.0625rem solid @sapUiFieldHoverBorderColor;
68+
}
69+
}
70+
}

‎packages/main/test/sap/ui/webcomponents/main/samples/Select.sample.html

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>&lt;ui5-select&gt;</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta charset="utf-8">
9+
10+
<link rel="stylesheet" href="../../../../../../www/home/core.css">
11+
12+
<script src="../../../../../../test-resources/playground/libs/google-code-prettify/prettify.js"></script>
13+
<link href="../../../../../../test-resources/playground/libs/google-code-prettify/sunburst.css" type="text/css" rel="stylesheet">
14+
15+
<link href="../../../../../../test-resources/playground/css/api.css" type="text/css" rel="stylesheet">
16+
17+
<script data-id="sap-ui-config" type="application/json">
18+
{
19+
"theme": "sap_fiori_3",
20+
"language": "EN"
21+
}
22+
</script>
23+
24+
<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
25+
type="module"
26+
>
27+
</script>
28+
29+
<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
30+
</script>
31+
32+
<style>
33+
.select {
34+
width:300px;
35+
margin: 0.5rem;
36+
}
37+
</style>
38+
</head>
39+
<body class="sapUiBody example-wrapper">
40+
41+
<header>
42+
<h2 class="control-header">Select</h2>
43+
<div style="margin-bottom: 2rem; font-weight: 300; font-size: 1.1rem; color: #666666;">&lt;ui5-select&gt;</div>
44+
</header>
45+
46+
<section>
47+
<h3>Basic Input</h3>
48+
<div class="snippet">
49+
<ui5-select class="select">
50+
<ui5-li icon="sap-icon://iphone" type="Active">Phone</ui5-li>
51+
<ui5-li icon="sap-icon://ipad" type="Active">Tablet</ui5-li>
52+
<ui5-li icon="sap-icon://laptop" type="Active" selected>Desktop</ui5-li>
53+
</ui5-select>
54+
<ui5-select disabled class="select">
55+
<ui5-li icon="sap-icon://iphone" type="Active" selected>Phone</ui5-li>
56+
<ui5-li icon="sap-icon://ipad" type="Active">Tablet</ui5-li>
57+
<ui5-li icon="sap-icon://laptop" type="Active">Desktop</ui5-li>
58+
</ui5-select>
59+
</div>
60+
<pre class="prettyprint lang-html"><xmp>
61+
<ui5-select class="select">
62+
<ui5-li icon="sap-icon://iphone" type="Active">Phone</ui5-li>
63+
<ui5-li icon="sap-icon://ipad" type="Active">Tablet</ui5-li>
64+
<ui5-li icon="sap-icon://laptop" type="Active" selected>Desktop</ui5-li>
65+
</ui5-select>
66+
<ui5-select disabled class="select">
67+
<ui5-li icon="sap-icon://iphone" type="Active" selected>Phone</ui5-li>
68+
<ui5-li icon="sap-icon://ipad" type="Active">Tablet</ui5-li>
69+
<ui5-li icon="sap-icon://laptop" type="Active">Desktop</ui5-li>
70+
</ui5-select>
71+
</xmp></pre>
72+
</section>
73+
74+
<section>
75+
<h3>Select with Value State</h3>
76+
<div class="snippet">
77+
<ui5-select value-state="Success" class="select">
78+
<ui5-li icon="sap-icon://meal" type="Active" selected>Apple</ui5-li>
79+
<ui5-li icon="sap-icon://meal" type="Active">Avocado</ui5-li>
80+
<ui5-li icon="sap-icon://meal" type="Active">Mango</ui5-li>
81+
</ui5-select>
82+
<ui5-select value-state="Warning" class="select">
83+
<ui5-li icon="sap-icon://meal" type="Active">Orange</ui5-li>
84+
<ui5-li icon="sap-icon://meal" type="Active" selected>Pumpkin</ui5-li>
85+
<ui5-li icon="sap-icon://meal" type="Active">Carrot</ui5-li>
86+
</ui5-select>
87+
<ui5-select value-state="Error" class="select">
88+
<ui5-li icon="sap-icon://meal" type="Active">Strawberry</ui5-li>
89+
<ui5-li icon="sap-icon://meal" type="Active">Tomato</ui5-li>
90+
<ui5-li icon="sap-icon://meal" type="Active" selected>Red Chili Pepper</ui5-li>
91+
</ui5-select>
92+
</div>
93+
<pre class="prettyprint lang-html"><xmp>
94+
<ui5-select value-state="Success" class="select">
95+
<ui5-li icon="sap-icon://meal" type="Active" selected>Apple</ui5-li>
96+
<ui5-li icon="sap-icon://meal" type="Active">Avocado</ui5-li>
97+
<ui5-li icon="sap-icon://meal" type="Active">Mango</ui5-li>
98+
</ui5-select>
99+
<ui5-select value-state="Warning" class="select">
100+
<ui5-li icon="sap-icon://meal" type="Active">Orange</ui5-li>
101+
<ui5-li icon="sap-icon://meal" type="Active" selected>Pumpkin</ui5-li>
102+
<ui5-li icon="sap-icon://meal" type="Active">Carrot</ui5-li>
103+
</ui5-select>
104+
<ui5-select value-state="Error" class="select">
105+
<ui5-li icon="sap-icon://meal" type="Active">Strawberry</ui5-li>
106+
<ui5-li icon="sap-icon://meal" type="Active">Tomato</ui5-li>
107+
<ui5-li icon="sap-icon://meal" type="Active" selected>Red Chili Pepper</ui5-li>
108+
</ui5-select>
109+
</xmp></pre>
110+
</section>
111+
112+
<script>
113+
window.prettyPrint();
114+
</script>
115+
116+
<script defer src="../../../../../../www/samples/settings.js"></script>
117+
</body>
118+
119+
</html>

0 commit comments

Comments
 (0)