Pass theme and classes down to HelperText for TextArea, TextInput, Co…

…mboBox, Select (dojo#937)

* Pass theme and classes down to text-area

* Add theme and classes for ComboBox, Select and TextInput

* Extend HelperTextProperties with ThemedProperties to fix type erorrs

src/combobox/index.tsx

@@ -487,7 +487,9 @@ export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase)))<Com
 			!this._open &&
 				w(HelperText, {
 					text: valid ? helperText : message,
-					valid
+					valid,
+					classes,
+					theme
 				}),
 			menu
 		];

src/combobox/tests/unit/ComboBox.spec.tsx

@@ -273,7 +273,9 @@ const getExpectedVdom = function(
 			!open &&
 				w(HelperText, {
 					text: valid ? helperText : message,
-					valid
+					valid,
+					classes: undefined,
+					theme: useTestProperties ? {} : undefined
 				}),
 			menuVdom
 		]

src/helper-text/index.tsx

@@ -1,10 +1,10 @@
 import { WidgetBase } from '@dojo/framework/core/WidgetBase';
-import { theme, ThemedMixin } from '@dojo/framework/core/mixins/Themed';
+import { theme, ThemedMixin, ThemedProperties } from '@dojo/framework/core/mixins/Themed';
 import * as css from '../theme/default/helper-text.m.css';
 import { v } from '@dojo/framework/core/vdom';
 import { VNode } from '@dojo/framework/core/interfaces';
 
-export interface HelperTextProperties {
+export interface HelperTextProperties extends ThemedProperties {
 	text?: string;
 	valid?: boolean;
 }

src/select/index.tsx

@@ -478,7 +478,7 @@ export class Select<T = any> extends ThemedMixin(FocusMixin(WidgetBase))<SelectP
 					  )
 					: null,
 				useNativeElement ? this.renderNativeSelect() : this.renderCustomSelect(),
-				w(HelperText, { theme, text: helperText })
+				w(HelperText, { classes, theme, text: helperText })
 			]
 		);
 	}

src/select/tests/unit/Select.spec.tsx

@@ -285,7 +285,7 @@ const expected = function(
 				  )
 				: null,
 			selectVdom,
-			w(HelperText, { theme: undefined, text: helperText })
+			w(HelperText, { classes: undefined, theme: undefined, text: helperText })
 		]
 	);
 };
@@ -616,7 +616,7 @@ registerSuite('Select', {
 									)
 								]
 							),
-							w(HelperText, { theme: undefined, text: undefined })
+							w(HelperText, { classes: undefined, theme: undefined, text: undefined })
 						]
 					)
 				);

src/text-area/index.tsx

@@ -256,7 +256,12 @@ export class TextArea extends ThemedMixin(FocusMixin(WidgetBase))<TextAreaProper
 						}
 					})
 				]),
-				w(HelperText, { text: computedHelperText, valid })
+				w(HelperText, {
+					text: computedHelperText,
+					valid,
+					classes,
+					theme
+				})
 			]
 		);
 	}

src/text-area/tests/unit/TextArea.spec.tsx

@@ -111,15 +111,21 @@ const expected = function(
 					...inputOverrides
 				})
 			]),
-			w(HelperText, { text: helperTextValue, valid })
+			w(HelperText, { text: helperTextValue, valid, classes: undefined, theme: undefined })
 		]
 	);
 };
 
 const baseAssertion = assertionTemplate(() => (
 	<div key="root" classes={[css.root, null, null, null, null, null, null]}>
 		{textarea()}
-		<HelperText assertion-key="helperText" text={undefined} valid={true} />
+		<HelperText
+			assertion-key="helperText"
+			text={undefined}
+			valid={true}
+			classes={undefined}
+			theme={undefined}
+		/>
 	</div>
 ));
 

src/text-input/index.tsx

@@ -335,7 +335,7 @@ export class TextInput extends ThemedMixin(FocusMixin(WidgetBase))<TextInputProp
 							])
 					]
 				),
-				w(HelperText, { text: computedHelperText, valid })
+				w(HelperText, { text: computedHelperText, valid, classes, theme })
 			]
 		);
 	}

src/text-input/tests/unit/TextInput.spec.tsx

@@ -126,7 +126,7 @@ const expected = function({
 					...inputOverrides
 				})
 			]),
-			w(HelperText, { text: helperTextValue, valid })
+			w(HelperText, { text: helperTextValue, valid, classes: undefined, theme: undefined })
 		]
 	);
 };
@@ -139,7 +139,13 @@ const baseAssertion = assertationTemplate(() => {
 			classes={[css.root, null, null, null, null, null, null, null, null]}
 		>
 			{input()}
-			<HelperText assertion-key="helperText" text={undefined} valid={undefined} />
+			<HelperText
+				assertion-key="helperText"
+				text={undefined}
+				valid={undefined}
+				classes={undefined}
+				theme={undefined}
+			/>
 		</div>
 	);
 });