Merge pull request #39 from BrightspaceUILabs/add-label-and-fix-sizing

Add label and fix sizing BREAKING CHANGE: default sizing behaviour changed
BrightspaceUILabs · Feb 2, 2021 · f233b4b · f233b4b
2 parents da7549a + f84ccb1
commit f233b4b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 25 deletions.
diff --git a/autocomplete-input-text.js b/autocomplete-input-text.js
@@ -15,6 +15,7 @@ $_documentContainer.innerHTML = `<dom-module id="d2l-labs-autocomplete-input-tex
 
 		<d2l-labs-autocomplete
 			data="[[data]]"
+			dropdown-label="[[dropdownLabel]]"
 			id="[[_prefix('d2l-labs-autocomplete')]]"
 			min-length="[[minLength]]"
 			on-d2l-labs-autocomplete-suggestion-selected="_handleSuggestionSelected"
@@ -61,6 +62,10 @@ class AutocompleteInputText extends PolymerElement {
 			data: {
 				type: Array,
 			},
+			dropdownLabel: {
+				type: String,
+				value: null,
+			},
 			minLength: {
 				type: String,
 			},

diff --git a/autocomplete.js b/autocomplete.js
@@ -18,6 +18,11 @@ $_documentContainer.innerHTML = `<dom-module id="d2l-labs-autocomplete">
 				padding: 0;
 			}
 
+			#d2l-labs-autocomplete-dropdown-label {
+				font-size: 0.7rem;
+				padding: 0.4rem 0.7rem;
+			}
+
 			.d2l-labs-autocomplete-suggestion {
 				@apply --d2l-body-compact-text;
 				cursor: pointer;
@@ -45,28 +50,30 @@ $_documentContainer.innerHTML = `<dom-module id="d2l-labs-autocomplete">
 			</div>
 			<d2l-dropdown-content
 				id="d2l-labs-autocomplete-dropdown-content"
-				max-width="[[_dropdownWidth]]"
-				min-width="[[_dropdownWidth]]"
+				min-width="[[_minWidth]]"
 				no-auto-focus="[[selectFirst]]"
 				no-padding=""
 				no-pointer=""
 				vertical-offset="5"
-			><ul id="d2l-labs-autocomplete-list" role="listbox">
-				<dom-repeat items="{{_suggestions}}">
-					<template>
-					<li
-						aria-label$="[[item.value]]"
-						aria-selected="false"
-						id="d2l-labs-autocomplete-list-item-[[index]]"
-						class="d2l-labs-autocomplete-suggestion"
-						on-click="_onSuggestionSelected"
-						role="option"
-						tabindex="-1"
-					>{{_computeText(item.value, _filter, 'prefix')}}<span class="d2l-labs-autocomplete-suggestion-highlighted">{{_computeText(item.value, _filter, 'bolded')}}</span>{{_computeText(item.value, _filter, 'suffix')}}
-					</li>
-					</template>
-				</dom-repeat>
-			</ul>
+				align="start"
+			>
+				<div hidden$="[[!dropdownLabel]]" id="d2l-labs-autocomplete-dropdown-label">[[dropdownLabel]]</div>
+				<ul id="d2l-labs-autocomplete-list" role="listbox">
+					<dom-repeat items="{{_suggestions}}">
+						<template>
+						<li
+							aria-label$="[[item.value]]"
+							aria-selected="false"
+							id="d2l-labs-autocomplete-list-item-[[index]]"
+							class="d2l-labs-autocomplete-suggestion"
+							on-click="_onSuggestionSelected"
+							role="option"
+							tabindex="-1"
+						>{{_computeText(item.value, _filter, 'prefix')}}<span class="d2l-labs-autocomplete-suggestion-highlighted">{{_computeText(item.value, _filter, 'bolded')}}</span>{{_computeText(item.value, _filter, 'suffix')}}
+						</li>
+						</template>
+					</dom-repeat>
+				</ul>
 			</d2l-dropdown-content>
 		</d2l-dropdown>
 	</template>
@@ -115,12 +122,6 @@ class Autocomplete extends PolymerElement {
 				observer: '_dropdownIndexChanged'
 			},
 			/**
-			* Used to set the width of the dropdown
-			*/
-			_dropdownWidth: {
-				type: Number,
-			},
-			/**
 			* The input element associated with the autocomplete
 			*/
 			_input: {
@@ -140,6 +141,12 @@ class Autocomplete extends PolymerElement {
 				type: Object,
 				value: { UP: 38, DOWN: 40, ENTER: 13, ESCAPE: 27, HOME: 36, END: 35 }
 			},
+			/**
+			 * Used to set min width of the dropdown
+			 */
+			_minWidth: {
+				type: Number,
+			},
 			/**
 			* List of autocomplete suggestions
 			*/
@@ -155,6 +162,13 @@ class Autocomplete extends PolymerElement {
 				type: Array,
 				value: [],
 			},
+			/**
+			 * Label to display at the top of the dropdown
+			 */
+			dropdownLabel: {
+				type: String,
+				value: null,
+			},
 			/**
 			* Function used to filter `data`
 			*/
@@ -322,7 +336,8 @@ class Autocomplete extends PolymerElement {
 
 	_onFocus(event) {
 		this._inputHasFocus = true;
-		this._dropdownWidth = this._input.offsetWidth;
+		this._minWidth = this._input.offsetWidth;
+
 		if (this.showOnFocus && event.relatedTarget !== this) {
 			this._updateSuggestionsVisible();
 			this._selectDropdownIndex(this.selectFirst ? 0 : -1);