Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-select): selection, styling and playground sample #4

Merged
merged 2 commits into from
Feb 11, 2019
Merged

fix(ui5-select): selection, styling and playground sample #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4e32b69
fix(ui5-select): selection, styling and playground sample
ilhan007 Feb 11, 2019
cb5029c
Merge branch 'master' into refactor-select-add-playground-sample
ilhan007 Feb 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/main/src/Select.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@
hide-header="true"
hide-arrow="true"
horizontal-align="Stretch">
<ui5-list>
<ui5-list separators="None">
{{#each ctr.items}}
<slot name="{{this._slot}}"></slot>
{{/each}}
</ui5-list>
</ui5-popover>
{{/if}}

<ui5-icon src="sap-icon://navigation-down-arrow" class="sapWCSelectDropDownIcon"></ui5-icon>
<ui5-icon src="sap-icon://slim-arrow-down" class="sapWCSelectDropDownIcon"></ui5-icon>
</div>
37 changes: 31 additions & 6 deletions packages/main/src/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ const metadata = {
* <br/><br/>
* <b>Note:</b> 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.
* <br/><br/>
* <b>Note:</b> Use the <code>ui5-li</code> component to define the desired options.
* @type {HTMLElement[]}
* @slot
* @public
Expand Down Expand Up @@ -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.
*
Expand All @@ -103,6 +105,22 @@ const metadata = {

/**
* @class
* <h3 class="comment-api-title"> Overview </h3>
*
* The <code>ui5-select</code> component is used to create a drop-down list
* and the items inside the <code>ui5-select</code> define the available options,
* using the <code>ui5-li</code> component.
* <h3>Keyboard handling</h3>
* The <code>ui5-select</code> provides advanced keyboard handling.
* If the <code>ui5-select</code> is focused,
* you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
* Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys
* to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys.
* <br>
* <h3>ES6 Module Import</h3>
* <code>import "@ui5/webcomponents/dist/Select";</code>
* <br>
* <code>import "@ui5/webcomponents/dist/StandardListItem";</code> (<code>ui5-li</code>)
* @constructor
* @author SAP SE
* @alias sap.ui.webcomponents.main.Select
Expand Down Expand Up @@ -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;
}

Expand Down
2 changes: 2 additions & 0 deletions packages/main/src/Suggestions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
16 changes: 6 additions & 10 deletions packages/main/src/themes/base/Select.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -51,11 +52,6 @@ ui5-select {
}
}

// Focused with state
&.sapWCSelectState:not(.sapWCSelectOpened):not(.sapWCSelectDisabled):focus {
outline-offset: -4px;
}

// Opened
&.sapWCSelectOpened .sapWCSelectDropDownIcon {
background: @sapUiToggleButtonPressedBackground;
Expand Down Expand Up @@ -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;
Expand Down
35 changes: 35 additions & 0 deletions packages/main/src/themes/sap_belize_hcb/Select.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
119 changes: 119 additions & 0 deletions packages/main/test/sap/ui/webcomponents/main/samples/Select.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html>

<head>
<title>&lt;ui5-select&gt;</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">

<link rel="stylesheet" href="../../../../../../www/home/core.css">

<script src="../../../../../../test-resources/playground/libs/google-code-prettify/prettify.js"></script>
<link href="../../../../../../test-resources/playground/libs/google-code-prettify/sunburst.css" type="text/css" rel="stylesheet">

<link href="../../../../../../test-resources/playground/css/api.css" type="text/css" rel="stylesheet">

<script data-id="sap-ui-config" type="application/json">
{
"theme": "sap_fiori_3",
"language": "EN"
}
</script>

<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
type="module"
>
</script>

<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
</script>

<style>
.select {
width:300px;
margin: 0.5rem;
}
</style>
</head>
<body class="sapUiBody example-wrapper">

<header>
<h2 class="control-header">Select</h2>
<div style="margin-bottom: 2rem; font-weight: 300; font-size: 1.1rem; color: #666666;">&lt;ui5-select&gt;</div>
</header>

<section>
<h3>Basic Input</h3>
<div class="snippet">
<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>
</div>
<pre class="prettyprint lang-html"><xmp>
<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>
</xmp></pre>
</section>

<section>
<h3>Select with Value State</h3>
<div class="snippet">
<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>
</div>
<pre class="prettyprint lang-html"><xmp>
<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>
</xmp></pre>
</section>

<script>
window.prettyPrint();
</script>

<script defer src="../../../../../../www/samples/settings.js"></script>
</body>

</html>