From 9ab46f23302ba3fb0bcbe1fcc64016a04920a8ac Mon Sep 17 00:00:00 2001
From: Tom Dye <github@tomdye.co.uk>
Date: Fri, 22 Mar 2019 17:35:48 +0000
Subject: [PATCH 1/2] add helpertext to select

---
 src/select/example/index.ts     | 27 +++++++++++++++
 src/select/index.ts             | 58 ++++++++++++++-------------------
 src/select/tests/unit/Select.ts | 24 ++++++++++++--
 3 files changed, 73 insertions(+), 36 deletions(-)

diff --git a/src/select/example/index.ts b/src/select/example/index.ts
index 496a4d325b..4c156cb83c 100644
--- a/src/select/example/index.ts
+++ b/src/select/example/index.ts
@@ -103,6 +103,33 @@ export default class App extends WidgetBase {
 					this._value3 = option;
 					this.invalidate();
 				}
+			}),
+			v('br'),
+			w(Select, {
+				key: 'select4',
+				...this.getOptionSettings(),
+				getOptionSelected: (option: any) => !!this._value1 && option.value === this._value1,
+				label: 'Native select with helper text',
+				options: this._selectOptions,
+				useNativeElement: true,
+				value: this._value1,
+				onChange: (option: any) => {
+					this._value1 = option.value;
+					this.invalidate();
+				},
+				helperText: 'pick a value'
+			}),
+			w(Select, {
+				key: 'select5',
+				...this.getOptionSettings(),
+				label: 'Custom select box with helper text',
+				options: this._moreSelectOptions,
+				value: this._value2,
+				onChange: (option: any) => {
+					this._value2 = option.value;
+					this.invalidate();
+				},
+				helperText: 'pick a value'
 			})
 		]);
 	}
diff --git a/src/select/index.ts b/src/select/index.ts
index 1fd2f66d81..3678b00d68 100644
--- a/src/select/index.ts
+++ b/src/select/index.ts
@@ -9,12 +9,14 @@ import { v, w } from '@dojo/framework/widget-core/d';
 import { uuid } from '@dojo/framework/core/util';
 import { find } from '@dojo/framework/shim/array';
 import { formatAriaProperties, Keys } from '../common/util';
-import { CustomAriaProperties, LabeledProperties, InputProperties } from '../common/interfaces';
+import { CustomAriaProperties, InputProperties } from '../common/interfaces';
 import Icon from '../icon/index';
 import Label from '../label/index';
 import Listbox from '../listbox/index';
+import HelperText from '../helper-text/index';
 import * as css from '../theme/select.m.css';
 import { customElement } from '@dojo/framework/widget-core/decorators/customElement';
+import { helperText } from '../theme/text-input.m.css';
 
 /**
  * @type SelectProperties
@@ -32,13 +34,14 @@ import { customElement } from '@dojo/framework/widget-core/decorators/customElem
  * @property useNativeElement  Use the native <select> element if true
  * @property value           The current value
  */
-export interface SelectProperties extends ThemedProperties, InputProperties, FocusProperties, LabeledProperties, CustomAriaProperties {
+export interface SelectProperties extends ThemedProperties, InputProperties, FocusProperties, CustomAriaProperties {
 	getOptionDisabled?(option: any, index: number): boolean;
 	getOptionId?(option: any, index: number): string;
 	getOptionLabel?(option: any): DNode;
 	getOptionText?(option: any): string;
 	getOptionSelected?(option: any, index: number): boolean;
 	getOptionValue?(option: any, index: number): string;
+	helperText?: string;
 	options?: any[];
 	placeholder?: string;
 	useNativeElement?: boolean;
@@ -46,6 +49,8 @@ export interface SelectProperties extends ThemedProperties, InputProperties, Foc
 	onChange?(option: any, key?: string | number): void;
 	onFocus?(key?: string | number): void;
 	value?: string;
+	labelHidden?: boolean;
+	label?: string;
 }
 
 @theme(css)
@@ -69,10 +74,9 @@ export interface SelectProperties extends ThemedProperties, InputProperties, Foc
 		'required',
 		'invalid',
 		'disabled',
-		'labelAfter',
 		'labelHidden'
 	],
-	attributes: [ 'widgetId', 'placeholder', 'label', 'value' ],
+	attributes: [ 'widgetId', 'placeholder', 'label', 'value', 'helperText' ],
 	events: [
 		'onBlur',
 		'onChange',
@@ -210,26 +214,6 @@ export class Select extends ThemedMixin(FocusMixin(WidgetBase))<SelectProperties
 		this._closeSelect();
 	}
 
-	protected getRootClasses() {
-		const {
-			disabled,
-			invalid,
-			readOnly,
-			required
-		} = this.properties;
-		const focus = this.meta(Focus).get('root');
-
-		return [
-			css.root,
-			disabled ? css.disabled : null,
-			focus.containsFocus ? css.focused : null,
-			invalid === true ? css.invalid : null,
-			invalid === false ? css.valid : null,
-			readOnly ? css.readonly : null,
-			required ? css.required : null
-		];
-	}
-
 	protected renderExpandIcon(): DNode {
 		const { theme, classes } = this.properties;
 		return v('span', { classes: this.theme(css.arrow) }, [
@@ -410,8 +394,8 @@ export class Select extends ThemedMixin(FocusMixin(WidgetBase))<SelectProperties
 		const {
 			label,
 			labelHidden,
-			labelAfter,
 			disabled,
+			helperText,
 			widgetId = this._baseId,
 			invalid,
 			readOnly,
@@ -420,9 +404,21 @@ export class Select extends ThemedMixin(FocusMixin(WidgetBase))<SelectProperties
 			theme,
 			classes
 		} = this.properties;
+
 		const focus = this.meta(Focus).get('root');
 
-		const children = [
+		return v('div', {
+			key: 'root',
+			classes: this.theme([
+				css.root,
+				disabled ? css.disabled : null,
+				focus.containsFocus ? css.focused : null,
+				invalid === true ? css.invalid : null,
+				invalid === false ? css.valid : null,
+				readOnly ? css.readonly : null,
+				required ? css.required : null
+			])
+		}, [
 			label ? w(Label, {
 				theme,
 				classes,
@@ -434,13 +430,9 @@ export class Select extends ThemedMixin(FocusMixin(WidgetBase))<SelectProperties
 				hidden: labelHidden,
 				forId: widgetId
 			}, [ label ]) : null,
-			useNativeElement ? this.renderNativeSelect() : this.renderCustomSelect()
-		];
-
-		return v('div', {
-			key: 'root',
-			classes: this.theme(this.getRootClasses())
-		}, labelAfter ? children.reverse() : children);
+			useNativeElement ? this.renderNativeSelect() : this.renderCustomSelect(),
+			w(HelperText, { theme, text: helperText })
+		]);
 	}
 }
 
diff --git a/src/select/tests/unit/Select.ts b/src/select/tests/unit/Select.ts
index e4e074b007..f0aefa4a74 100644
--- a/src/select/tests/unit/Select.ts
+++ b/src/select/tests/unit/Select.ts
@@ -22,6 +22,7 @@ import {
 	compareAriaControls,
 	stubEvent
 } from '../../../common/tests/support/test-helpers';
+import HelperText from '../../../helper-text/index';
 
 const harness = createHarness([ compareId, compareWidgetId, compareAriaControls ]);
 
@@ -55,6 +56,7 @@ interface ExpectedOptions {
 	classes?: any[];
 	overrides?: any;
 	focus?: boolean;
+	helperText?: string;
 }
 
 const testOptions: any[] = [
@@ -208,7 +210,7 @@ const expectedSingle = function(useTestProperties = false, withStates = false, o
 	return vdom;
 };
 
-const expected = function(selectVdom: any, { classes = [ css.root, null, null, null, null, null, null ], label = false, states, focus = false }: ExpectedOptions = {}) {
+const expected = function(selectVdom: any, { classes = [ css.root, null, null, null, null, null, null ], label = false, states, focus = false, helperText }: ExpectedOptions = {}) {
 	return v('div', {
 		key: 'root',
 		classes
@@ -223,7 +225,8 @@ const expected = function(selectVdom: any, { classes = [ css.root, null, null, n
 			required: undefined,
 			forId: ''
 		}, [ 'foo' ]) : null,
-		selectVdom
+		selectVdom,
+		w(HelperText, { theme: undefined, text: helperText })
 	]);
 };
 
@@ -240,6 +243,15 @@ registerSuite('Select', {
 				h.expect(() => expected(expectedNative()));
 			},
 
+			'helperText'() {
+				const h = harness(() => w(Select, {
+					options: testOptions,
+					useNativeElement: true,
+					helperText: 'foo'
+				}));
+				h.expect(() => expected(expectedNative(), { helperText: 'foo' }));
+			},
+
 			'custom properties'() {
 				const h = harness(() => w(Select, {
 					...testStateProperties,
@@ -325,6 +337,11 @@ registerSuite('Select', {
 				h.expect(() => expected(expectedSingle()));
 			},
 
+			'helperText'() {
+				const h = harness(() => w(Select, { helperText: 'foo' }));
+				h.expect(() => expected(expectedSingle(), { helperText: 'foo' }));
+			},
+
 			'custom properties'() {
 				const h = harness(() => w(Select, testStateProperties));
 				h.expect(() => expected(expectedSingle(true, true), {
@@ -469,7 +486,8 @@ registerSuite('Select', {
 								onOptionSelect: noop
 							})
 						])
-					])
+					]),
+					w(HelperText, { theme: undefined, text: undefined})
 				]));
 			},
 

From f7a447ea60596a04189e3767f98933d7272fd1fb Mon Sep 17 00:00:00 2001
From: Tom Dye <github@tomdye.co.uk>
Date: Tue, 9 Apr 2019 17:03:31 +0100
Subject: [PATCH 2/2] remove extra helperText css import

---
 src/select/index.ts             | 1 -
 src/text-area/example/index.ts  | 1 -
 src/theme/text-input.m.css      | 9 ---------
 src/theme/text-input.m.css.d.ts | 2 --
 4 files changed, 13 deletions(-)

diff --git a/src/select/index.ts b/src/select/index.ts
index 3678b00d68..d86b771201 100644
--- a/src/select/index.ts
+++ b/src/select/index.ts
@@ -16,7 +16,6 @@ import Listbox from '../listbox/index';
 import HelperText from '../helper-text/index';
 import * as css from '../theme/select.m.css';
 import { customElement } from '@dojo/framework/widget-core/decorators/customElement';
-import { helperText } from '../theme/text-input.m.css';
 
 /**
  * @type SelectProperties
diff --git a/src/text-area/example/index.ts b/src/text-area/example/index.ts
index fd06dbf763..c00616b181 100644
--- a/src/text-area/example/index.ts
+++ b/src/text-area/example/index.ts
@@ -1,7 +1,6 @@
 import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
 import { v, w } from '@dojo/framework/widget-core/d';
 import Textarea from '../../text-area/index';
-import { helperText } from '../../theme/text-input.m.css';
 
 export default class App extends WidgetBase {
 	private _value1: string | undefined;
diff --git a/src/theme/text-input.m.css b/src/theme/text-input.m.css
index 873500b261..6ec7160286 100644
--- a/src/theme/text-input.m.css
+++ b/src/theme/text-input.m.css
@@ -13,15 +13,6 @@
 .hasLeading {}
 .hasTrailing {}
 
-.helperTextWrapper {
-}
-
-.helperText {
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
 .invalid .helperText {
 	color: var(--error-color);
 }
diff --git a/src/theme/text-input.m.css.d.ts b/src/theme/text-input.m.css.d.ts
index d96a38058d..8853d4ea59 100644
--- a/src/theme/text-input.m.css.d.ts
+++ b/src/theme/text-input.m.css.d.ts
@@ -10,6 +10,4 @@ export const leading: string;
 export const trailing: string;
 export const hasLeading: string;
 export const hasTrailing: string;
-export const helperTextWrapper: string;
-export const helperText: string;
 export const valid: string;