From f0a90b7efc7bb71e57af6f2790e66251c44f7e23 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Mon, 11 Feb 2019 20:17:04 +0200 Subject: [PATCH] fix(ui5-select): selection, styling and playground sample (#4) --- packages/main/src/Select.hbs | 4 +- packages/main/src/Select.js | 37 +++++- packages/main/src/Suggestions.js | 2 + packages/main/src/themes/base/Select.less | 16 +-- .../src/themes/sap_belize_hcb/Select.less | 35 ++++++ .../main/samples/Select.sample.html | 119 ++++++++++++++++++ 6 files changed, 195 insertions(+), 18 deletions(-) create mode 100644 packages/main/test/sap/ui/webcomponents/main/samples/Select.sample.html diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs index afe3c4552086..20136b774245 100644 --- a/packages/main/src/Select.hbs +++ b/packages/main/src/Select.hbs @@ -12,7 +12,7 @@ hide-header="true" hide-arrow="true" horizontal-align="Stretch"> - + {{#each ctr.items}} {{/each}} @@ -20,5 +20,5 @@ {{/if}} - + \ No newline at end of file diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js index 05f0d72eed74..66820143fe02 100644 --- a/packages/main/src/Select.js +++ b/packages/main/src/Select.js @@ -34,6 +34,8 @@ const metadata = { *

* Note: Only one selected item is allowed. * If more than one item is defined as selected, the last one would be considered as the selected one. + *

+ * Note: Use the ui5-li component to define the desired options. * @type {HTMLElement[]} * @slot * @public @@ -85,7 +87,7 @@ const metadata = { defaultValue: false, }, }, - events: /** @lends sap.ui.webcomponents.main.Select.prototype */ { + events: /** @lends sap.ui.webcomponents.main.Select.prototype */ { /** * Fired, when the selected item changes. * @@ -103,6 +105,22 @@ const metadata = { /** * @class + *

Overview

+ * + * The ui5-select component is used to create a drop-down list + * and the items inside the ui5-select define the available options, + * using the ui5-li component. + *

Keyboard handling

+ * The ui5-select provides advanced keyboard handling. + * If the ui5-select is focused, + * you can open or close the drop-down by pressing F4, ALT+UP or ALT+DOWN keys. + * Once the drop-down is opened, you can use the UP and DOWN arrow keys + * to navigate through the available options and select one by pressing the Space or Enter keys. + *
+ *

ES6 Module Import

+ * import "@ui5/webcomponents/dist/Select"; + *
+ * import "@ui5/webcomponents/dist/StandardListItem"; (ui5-li) * @constructor * @author SAP SE * @alias sap.ui.webcomponents.main.Select @@ -250,19 +268,26 @@ class Select extends WebComponent { return previewedItem && selectedItem !== previewedItem; } - _select(item, position = 0) { - if (this._getSelectedItem()) { - this._getSelectedItem().selected = false; + _select(item, position) { + const selectedItem = this._getSelectedItem(); + + if (selectedItem) { + selectedItem.selected = false; } - item.selected = true; this._setSelectedItem(item); this._setPreviewedItem(null); this._setText(item.textContent); - this._updateSelectedItemPos(position); + + if (position !== undefined) { + this._updateSelectedItemPos(position); + } } _setSelectedItem(item) { + if (item) { + item.selected = true; + } this._selectedItem = item; } diff --git a/packages/main/src/Suggestions.js b/packages/main/src/Suggestions.js index 4911ed36c9e8..5d9b17eff2bf 100644 --- a/packages/main/src/Suggestions.js +++ b/packages/main/src/Suggestions.js @@ -101,6 +101,8 @@ class Suggestions { onItemSelected(selectedItem, keyboardUsed) { const item = selectedItem || this._getItems()[this.selectedItemIndex]; + this.selectedItemIndex = this._getItems().indexOf(item); + this._getComponent().onItemSelected(item, keyboardUsed); this.close(); } diff --git a/packages/main/src/themes/base/Select.less b/packages/main/src/themes/base/Select.less index 1e10bc8f12d2..1ffef3db3e60 100644 --- a/packages/main/src/themes/base/Select.less +++ b/packages/main/src/themes/base/Select.less @@ -24,13 +24,14 @@ ui5-select { outline: none; // Hovered - &:hover:not(.sapWCSelectState):not(.sapWCSelectOpened) { + &:hover:not(.sapWCSelectDisabled):not(.sapWCSelectState):not(.sapWCSelectOpened) { background-color: @sapUiFieldHoverBackground; border: 1px solid @sapUiFieldHoverBorderColor; + } - .sapWCSelectDropDownIcon { - background: @sapUiButtonLiteHoverBackground; - } + // Hovered Icon + &:hover:not(.sapWCSelectDisabled):not(.sapWCSelectOpened) .sapWCSelectDropDownIcon { + background: @sapUiButtonLiteHoverBackground; } // Focused @@ -51,11 +52,6 @@ ui5-select { } } - // Focused with state - &.sapWCSelectState:not(.sapWCSelectOpened):not(.sapWCSelectDisabled):focus { - outline-offset: -4px; - } - // Opened &.sapWCSelectOpened .sapWCSelectDropDownIcon { background: @sapUiToggleButtonPressedBackground; @@ -113,7 +109,7 @@ ui5-select { } // RTL -:host(ui5-select) span[dir="rtl"]{ +:host(ui5-select) span[dir="rtl"] { .sapWCSelect { padding-left: 0; padding-right: 0.5rem; diff --git a/packages/main/src/themes/sap_belize_hcb/Select.less b/packages/main/src/themes/sap_belize_hcb/Select.less index a37296b164b1..94248821a570 100644 --- a/packages/main/src/themes/sap_belize_hcb/Select.less +++ b/packages/main/src/themes/sap_belize_hcb/Select.less @@ -31,5 +31,40 @@ border-color: @sapUiHcReducedForeground; color: @sapUiContentDisabledTextColor; } + + &.sapWCSelectError:not(.sapWCSelectDisabled), + &.sapWCSelectWarning:not(.sapWCSelectDisabled) { + border-style: dashed; + border-width: 1px; + } + + &.sapWCInputBaseContentWrapperWarning:not(.sapWCInputBaseReadonlyWrapper):not(.sapWCInputBaseDisabledWrapper) { + border-style: dashed; + border-width: 1px; + } + + &:hover:not(.sapWCSelectDisabled) { + .sapWCSelectDropDownIcon { + border-left: 0.0625rem solid @sapUiFieldHoverBorderColor; + } + } } +// RTL +:host(ui5-select) span[dir="rtl"] { + .sapWCSelect:hover:not(.sapWCSelectDisabled) { + .sapWCSelectDropDownIcon { + border-left: none; + border-right: 0.0625rem solid @sapUiFieldHoverBorderColor; + } + } +} + +ui5-select span[dir="rtl"] { + .sapWCSelect:hover:not(.sapWCSelectDisabled) { + .sapWCSelectDropDownIcon { + border-left: none; + border-right: 0.0625rem solid @sapUiFieldHoverBorderColor; + } + } +} diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/Select.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/Select.sample.html new file mode 100644 index 000000000000..3d47bfc9e11e --- /dev/null +++ b/packages/main/test/sap/ui/webcomponents/main/samples/Select.sample.html @@ -0,0 +1,119 @@ + + + + + <ui5-select> + + + + + + + + + + + + + + + + + + + + + +
+

Select

+
<ui5-select>
+
+ +
+

Basic Input

+
+ + Phone + Tablet + Desktop + + + Phone + Tablet + Desktop + +
+ 

+<ui5-select class="select">
+	<ui5-li icon="sap-icon://iphone" type="Active">Phone</ui5-li>
+	<ui5-li icon="sap-icon://ipad" type="Active">Tablet</ui5-li>
+	<ui5-li icon="sap-icon://laptop" type="Active" selected>Desktop</ui5-li>
+</ui5-select>
+<ui5-select disabled class="select">
+	<ui5-li icon="sap-icon://iphone" type="Active" selected>Phone</ui5-li>
+	<ui5-li icon="sap-icon://ipad" type="Active">Tablet</ui5-li>
+	<ui5-li icon="sap-icon://laptop" type="Active">Desktop</ui5-li>
+</ui5-select>
+
+
+ +
+

Select with Value State

+
+ + Apple + Avocado + Mango + + + Orange + Pumpkin + Carrot + + + Strawberry + Tomato + Red Chili Pepper + +
+ 

+<ui5-select value-state="Success" class="select">
+	<ui5-li icon="sap-icon://meal" type="Active" selected>Apple</ui5-li>
+	<ui5-li icon="sap-icon://meal" type="Active">Avocado</ui5-li>
+	<ui5-li icon="sap-icon://meal" type="Active">Mango</ui5-li>
+</ui5-select>
+<ui5-select value-state="Warning" class="select">
+	<ui5-li icon="sap-icon://meal" type="Active">Orange</ui5-li>
+	<ui5-li icon="sap-icon://meal" type="Active" selected>Pumpkin</ui5-li>
+	<ui5-li icon="sap-icon://meal" type="Active">Carrot</ui5-li>
+</ui5-select>
+<ui5-select value-state="Error" class="select">
+	<ui5-li icon="sap-icon://meal" type="Active">Strawberry</ui5-li>
+	<ui5-li icon="sap-icon://meal" type="Active">Tomato</ui5-li>
+	<ui5-li icon="sap-icon://meal" type="Active" selected>Red Chili Pepper</ui5-li>
+</ui5-select>
+
+
+ + + + + + +