Add validation support for text-input

[nicknisi]

Type: feature

The following has been addressed in the PR:

• There is a related issue
• All code matches the style guide
• Unit or Functional tests are included in the PR

Description:

This adds validation support as partially described in #616. The user can provide a validate property to the widget, which if true, will validate against the type ("email", for example) and use the browser's built-in validation.

Alternatively, validate can be a function that accepts the widget's current value as an argument and must return { valid: boolean; message: string | undefined; }. The user can also provide an onValidate(valid: boolean, message?: string) which will be called to pass the validation value back up to the parent, along with any potential message.

With the current behavior, if validate is a function, it is the primary validation, but the other validation (email, for example) is also being checked.

Example:

w(TextInput, {
	key: 't2',
	type: 'email',
	label: 'Email (required)',
	required: true,
	// validate: true,
	validate(value: string) {
		const valid = !!~value.indexOf('nicknisi');
		return {
			valid,
			message: !valid ? 'Must include nicknisi' : ''
		};
	},
	onValidate(valid: boolean, message: string | undefined) {
		const color = valid ? 'green' : 'red';
		console.log(`%c${message}`, `font-weight:bold;color:${color};`, { valid });
	},
	value: this._value2,
	onInput: (value: string) => {
		this._value2 = value;
		this.invalidate();
	}
})

Breaking changes

This PR removes the invalid property. The way to mark an input as invalid is to use custom validation. This also slightly affects combobox and enhanced text input as their invalid properties will no longer be passed down to the underlying text-input widget.

[codecov]

Codecov Report

Merging #664 into master will decrease coverage by 0.23%.
The diff coverage is 81.81%.

@@            Coverage Diff             @@
##           master     #664      +/-   ##
==========================================
- Coverage   99.05%   98.82%   -0.24%     
==========================================
  Files          43       44       +1     
  Lines        3285     3320      +35     
  Branches      901      912      +11     
==========================================
+ Hits         3254     3281      +27     
- Misses         31       39       +8

Impacted Files	Coverage Δ
src/enhanced-text-input/index.ts	100% <ø> (ø)	⬆️
src/combobox/index.ts	100% <ø> (ø)	⬆️
src/text-input/ValidityMeta.ts	45.45% <45.45%> (ø)
src/text-input/index.ts	98.58% <93.93%> (-1.42%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 52329e7...e8386f1. Read the comment docs.

[codecov]

Codecov Report

Merging #664 into master will decrease coverage by 0.02%.
The diff coverage is 97.67%.

@@            Coverage Diff             @@
##           master     #664      +/-   ##
==========================================
- Coverage   99.05%   99.03%   -0.03%     
==========================================
  Files          43       44       +1     
  Lines        3285     3319      +34     
  Branches      901      912      +11     
==========================================
+ Hits         3254     3287      +33     
- Misses         31       32       +1

Impacted Files	Coverage Δ
src/enhanced-text-input/index.ts	100% <ø> (ø)	⬆️
src/combobox/index.ts	100% <100%> (ø)	⬆️
src/text-input/index.ts	100% <100%> (ø)	⬆️
src/common/InputValidity.ts	90.9% <90.9%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 52329e7...424ba52. Read the comment docs.

[tomdye]

should this perhaps be an aside and the text itself a span ? could be wrong, but just thinking out loud.

[nicknisi]

Either is fine with me. I was just using the same markup as in the example here.

[tomdye]

fair enough then!

[nicknisi]

@tomdye I made changes to how Combobox internally uses invalid. Instead of just passing its invalid value down to the underlying TextInput, it instead sets validate to a function that passes the inverse of invalid if invalid is a boolean. It does nothing if invalid is undefined. This makes it so that there are really no changes to the Combobox API or how it works.

[tomdye]

Once you've addressed the enhanced-text-input validation this is all good.