Label: add for and remove form

src/checkbox/Checkbox.ts

@@ -13,7 +13,6 @@ import * as css from './styles/checkbox.m.css';
  * @property checked        Checked/unchecked property of the radio
  * @property describedBy    ID of an element that provides more descriptive text
  * @property disabled       Prevents the user from interacting with the form field
- * @property formId         ID of a form element associated with the form field
  * @property invalid        Indicates the valid is invalid, or required and not filled in
  * @property label          Label settings for form label text, position, and visibility
  * @property mode           The type of user interface to show for this Checkbox
@@ -37,7 +36,6 @@ export interface CheckboxProperties extends ThemeableProperties {
 	checked?: boolean;
 	describedBy?: string;
 	disabled?: boolean;
-	formId?: string;
 	invalid?: boolean;
 	label?: string | LabelOptions;
 	mode?: Mode;
@@ -117,7 +115,6 @@ export default class Checkbox extends CheckboxBase<CheckboxProperties> {
 			checked = false,
 			describedBy,
 			disabled,
-			formId,
 			invalid,
 			label,
 			mode,
@@ -171,7 +168,6 @@ export default class Checkbox extends CheckboxBase<CheckboxProperties> {
 		if (label) {
 			checkboxWidget = w(Label, {
 				extraClasses: { root: parseLabelClasses(this.classes(css.root, ...stateClasses).get()) },
-				formId,
 				label,
 				theme: this.properties.theme
 			}, children);

src/checkbox/tests/unit/Checkbox.ts

@@ -68,7 +68,6 @@ const expected = function(widget: any, label = false, toggle = false, toggleLabe
 		return w(Label, {
 			extraClasses: { root: css.root },
 			label: 'foo',
-			formId: undefined,
 			theme: undefined
 		}, [ checkboxVdom ]);
 	}
@@ -171,7 +170,6 @@ registerSuite({
 	'state classes on label'() {
 		widget.setProperties({
 			label: 'foo',
-			formId: 'bar',
 			invalid: true,
 			disabled: true,
 			readOnly: true,
@@ -187,8 +185,7 @@ registerSuite({
 			required: true
 		});
 		assignProperties(expectedVdom, {
-			extraClasses: { root: `${css.root} ${css.disabled} ${css.invalid} ${css.readonly} ${css.required}` },
-			formId: 'bar'
+			extraClasses: { root: `${css.root} ${css.disabled} ${css.invalid} ${css.readonly} ${css.required}` }
 		});
 		widget.expectRender(expectedVdom);
 	},

src/combobox/ComboBox.ts

@@ -24,7 +24,6 @@ import * as iconCss from '../common/styles/icons.m.css';
  * @property customResultItem   Can be used to render a custom result
  * @property customResultMenu   Can be used to render a custom result menu
  * @property disabled           Prevents user interaction and styles content accordingly
- * @property formId             ID of a form element associated with the form field
  * @property getResultLabel     Can be used to get the text label of a result based on the underlying result object
  * @property inputProperties    TextInput properties to set on the underlying input
  * @property invalid            Determines if this input is valid
@@ -47,7 +46,6 @@ export interface ComboBoxProperties extends ThemeableProperties {
 	customResultItem?: any;
 	customResultMenu?: any;
 	disabled?: boolean;
-	formId?: string;
 	getResultLabel?(result: any): string;
 	inputProperties?: TextInputProperties;
 	invalid?: boolean;
@@ -348,7 +346,6 @@ export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
 		const {
 			clearable,
 			disabled,
-			formId,
 			inputProperties = {},
 			invalid,
 			label,
@@ -410,7 +407,6 @@ export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
 
 		if (label) {
 			controls = w(Label, {
-				formId,
 				label
 			}, [ controls ]);
 		}

src/combobox/createComboBoxElement.ts

@@ -42,10 +42,6 @@ export default function createComboBoxElement(): CustomElementDescriptor {
 			},
 			{
 				attributeName: 'value'
-			},
-			{
-				attributeName: 'formid',
-				propertyName: 'formId'
 			}
 		],
 		properties: [

src/label/Label.ts

@@ -30,12 +30,12 @@ const labelDefaults = {
  *
  * Properties that can be set on a Label component
  *
- * @property formId     ID of a form element associated with the form field
+ * @property forId     ID to explicitly associate the label with an input element
  * @property label      Label settings for form label text, position, and visibility
  */
 export interface LabelProperties extends ThemeableProperties {
 	registry?: WidgetRegistry;
-	formId?: string;
+	forId?: string;
 	label: string | LabelOptions;
 }
 
@@ -61,7 +61,7 @@ export default class Label extends LabelBase<LabelProperties>  {
 
 	render(): DNode {
 		const {
-			formId,
+			forId,
 			label
 		} = this.properties;
 
@@ -88,7 +88,7 @@ export default class Label extends LabelBase<LabelProperties>  {
 
 		return v('label', {
 			classes: this.classes(css.root),
-			form: formId
+			for: forId
 		}, this.children);
 	}
 }

src/label/tests/unit/Label.ts

@@ -28,7 +28,7 @@ registerSuite({
 
 		widget.expectRender(v('label', {
 			classes: widget.classes(css.root),
-			form: undefined
+			for: undefined
 		}, [
 			v('span', {
 				innerHTML: 'baz'
@@ -46,7 +46,7 @@ registerSuite({
 
 		widget.expectRender(v('label', {
 			classes: widget.classes(css.root),
-			form: undefined
+			for: undefined
 		}, [
 			v('span', {
 				classes: widget.classes(baseCss.visuallyHidden),
@@ -57,7 +57,7 @@ registerSuite({
 
 	'with children'() {
 		widget.setProperties({
-			formId: 'foo',
+			forId: 'id',
 			label: 'baz'
 		});
 		widget.setChildren([
@@ -67,7 +67,7 @@ registerSuite({
 
 		widget.expectRender(v('label', {
 			classes: widget.classes(css.root),
-			form: 'foo'
+			for: 'id'
 		}, [
 			v('span', {
 				innerHTML: 'baz'
@@ -79,7 +79,6 @@ registerSuite({
 
 	'label after'() {
 		widget.setProperties({
-			formId: 'foo',
 			label: {
 				content: 'baz',
 				before: false
@@ -91,7 +90,7 @@ registerSuite({
 
 		widget.expectRender(v('label', {
 			classes: widget.classes(css.root),
-			form: 'foo'
+			for: undefined
 		}, [
 			v('div', [ 'child' ]),
 			v('span', {

src/radio/Radio.ts

@@ -13,7 +13,6 @@ import * as css from './styles/radio.m.css';
  * @property checked          Checked/unchecked property of the radio
  * @property describedBy      ID of an element that provides more descriptive text
  * @property disabled         Prevents the user from interacting with the form field
- * @property formId           ID of a form element associated with the form field
  * @property invalid          Indicates the valid is invalid, or required and not filled in
  * @property label            Label settings for form label text, position, and visibility
  * @property name             The form widget's name
@@ -34,7 +33,6 @@ export interface RadioProperties extends ThemeableProperties {
 	checked?: boolean;
 	describedBy?: string;
 	disabled?: boolean;
-	formId?: string;
 	invalid?: boolean;
 	label?: string | LabelOptions;
 	name?: string;
@@ -81,7 +79,6 @@ export default class Radio extends RadioBase<RadioProperties> {
 			checked = false,
 			describedBy,
 			disabled,
-			formId,
 			invalid,
 			label,
 			name,
@@ -130,7 +127,6 @@ export default class Radio extends RadioBase<RadioProperties> {
 		if (label) {
 			radioWidget = w(Label, {
 				extraClasses: { root: parseLabelClasses(this.classes(css.root, ...stateClasses).get()) },
-				formId,
 				label,
 				theme: this.properties.theme
 			}, [ radio ]);

src/radio/tests/unit/Radio.ts

@@ -41,7 +41,6 @@ const expected = function(widget: any, label = false) {
 		return w(Label, {
 			extraClasses: { root: css.root },
 			label: 'foo',
-			formId: undefined,
 			theme: undefined
 		}, [ radioVdom ]);
 	}
@@ -144,7 +143,6 @@ registerSuite({
 	'state classes on label'() {
 		widget.setProperties({
 			label: 'foo',
-			formId: 'bar',
 			invalid: true,
 			disabled: true,
 			readOnly: true,
@@ -160,8 +158,7 @@ registerSuite({
 			required: true
 		});
 		assignProperties(expectedVdom, {
-			extraClasses: { root: `${css.root} ${css.disabled} ${css.invalid} ${css.readonly} ${css.required}` },
-			formId: 'bar'
+			extraClasses: { root: `${css.root} ${css.disabled} ${css.invalid} ${css.readonly} ${css.required}` }
 		});
 		widget.expectRender(expectedVdom);
 	},

src/select/Select.ts

@@ -21,7 +21,6 @@ import * as iconCss from '../common/styles/icons.m.css';
  * @property customOption   Custom widget constructor for options. Should use SelectOption as a base
  * @property describedBy    ID of an element that provides more descriptive text
  * @property disabled       Prevents the user from interacting with the form field
- * @property formId         ID of a form element associated with the form field
  * @property invalid        Indicates the value entered in the form field is invalid
  * @property label          Label settings for form label text, position, and visibility
  * @property multiple       Whether the widget supports multiple selection
@@ -41,7 +40,6 @@ export interface SelectProperties extends ThemeableProperties {
 	customOption?: any;
 	describedBy?: string;
 	disabled?: boolean;
-	formId?: string;
 	invalid?: boolean;
 	label?: string | LabelOptions;
 	multiple?: boolean;
@@ -385,7 +383,6 @@ export default class Select extends SelectBase<SelectProperties> {
 	protected render(): DNode {
 		const {
 			disabled,
-			formId,
 			invalid,
 			label,
 			multiple,
@@ -416,7 +413,6 @@ export default class Select extends SelectBase<SelectProperties> {
 		if (label) {
 			rootWidget = w(Label, {
 				extraClasses: { root: parseLabelClasses(this.classes(css.root, ...stateClasses)()) },
-				formId,
 				label,
 				registry: this._registry,
 				theme

src/select/tests/unit/Select.ts

@@ -208,7 +208,6 @@ const expected = function(widget: any, selectVdom: any, label = false) {
 		return w(Label, {
 			extraClasses: { root: css.root },
 			label: 'foo',
-			formId: undefined,
 			registry: <any> compareRegistry,
 			theme: undefined
 		}, [ selectVdom ]);
@@ -740,7 +739,6 @@ registerSuite({
 		'state classes and form id'() {
 			widget.setProperties({
 				disabled: true,
-				formId: 'bar',
 				invalid: true,
 				label: 'foo',
 				options: testOptions,
@@ -758,8 +756,7 @@ registerSuite({
 			});
 			const expectedVdom = expected(widget, selectVdom, true);
 			assignProperties(expectedVdom, {
-				extraClasses: { root: `${css.root} ${css.disabled} ${css.invalid} ${css.readonly} ${css.required}` },
-				formId: 'bar'
+				extraClasses: { root: `${css.root} ${css.disabled} ${css.invalid} ${css.readonly} ${css.required}` }
 			});
 			widget.expectRender(expectedVdom);
 		}

src/slider/Slider.ts

@@ -13,7 +13,6 @@ import * as css from './styles/slider.m.css';
  *
  * @property describedBy       ID of an element that provides more descriptive text
  * @property disabled          Prevents the user from interacting with the form field
- * @property formId            ID of a form element associated with the form field
  * @property invalid           Indicates the valid is invalid, or required and not filled in
  * @property label             Label settings for form label text, position, and visibility
  * @property max               The maximum value for the slider
@@ -43,7 +42,6 @@ import * as css from './styles/slider.m.css';
 export interface SliderProperties extends ThemeableProperties {
 	describedBy?: string;
 	disabled?: boolean;
-	formId?: string;
 	invalid?: boolean;
 	label?: string | LabelOptions;
 	max?: number;
@@ -97,7 +95,6 @@ export default class Slider extends SliderBase<SliderProperties> {
 		const {
 			describedBy,
 			disabled,
-			formId,
 			invalid,
 			label,
 			max = 100,
@@ -198,7 +195,6 @@ export default class Slider extends SliderBase<SliderProperties> {
 		if (label) {
 			sliderWidget = w(Label, {
 				extraClasses: { root: parseLabelClasses(this.classes(css.root, ...stateClasses).fixed(css.rootFixed)()) },
-				formId,
 				label,
 				theme: this.properties.theme
 			}, [ slider ]);

src/slider/tests/unit/Slider.ts

@@ -75,7 +75,6 @@ const expected = function(widget: any, label = false, tooltip = false) {
 		return w(Label, {
 			extraClasses: { root: `${css.root} ${css.rootFixed}` },
 			label: 'foo',
-			formId: undefined,
 			theme: undefined
 		}, [ sliderVdom ]);
 	}
@@ -290,7 +289,6 @@ registerSuite({
 	'state classes on label'() {
 		widget.setProperties({
 			label: 'foo',
-			formId: 'bar',
 			invalid: true,
 			disabled: true,
 			readOnly: true,
@@ -306,8 +304,7 @@ registerSuite({
 			required: true
 		});
 		assignProperties(expectedVdom, {
-			extraClasses: { root: `${css.root} ${css.disabled} ${css.invalid} ${css.readonly} ${css.required} ${css.rootFixed}` },
-			formId: 'bar'
+			extraClasses: { root: `${css.root} ${css.disabled} ${css.invalid} ${css.readonly} ${css.required} ${css.rootFixed}` }
 		});
 
 		widget.expectRender(expectedVdom);

src/textarea/Textarea.ts

@@ -13,7 +13,6 @@ import * as css from './styles/textarea.m.css';
  * @property columns         Number of columns, controls the width of the textarea
  * @property describedBy     ID of an element that provides more descriptive text
  * @property disabled        Prevents the user from interacting with the form field
- * @property formId          ID of a form element associated with the form field
  * @property invalid         Indicates the value entered in the form field is invalid
  * @property label           Label settings for form label text, position, and visibility
  * @property maxLength       Maximum number of characters allowed in the input
@@ -43,7 +42,6 @@ export interface TextareaProperties extends ThemeableProperties {
 	columns?: number;
 	describedBy?: string;
 	disabled?: boolean;
-	formId?: string;
 	invalid?: boolean;
 	label?: string | LabelOptions;
 	maxLength?: number | string;
@@ -93,7 +91,6 @@ export default class Textarea extends TextareaBase<TextareaProperties> {
 			columns,
 			describedBy,
 			disabled,
-			formId,
 			invalid,
 			label,
 			maxLength,
@@ -153,7 +150,6 @@ export default class Textarea extends TextareaBase<TextareaProperties> {
 		if (label) {
 			textareaWidget = w(Label, {
 				extraClasses: { root: parseLabelClasses(this.classes(css.root, ...stateClasses)()) },
-				formId,
 				label,
 				theme: this.properties.theme
 			}, [ textarea ]);