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

SAP · Feb 11, 2019 · f0a90b7 · f0a90b7
1 parent ef57d41
commit f0a90b7
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 18 deletions.
diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs
@@ -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>
diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
@@ -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
@@ -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
+ * <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>