Releases · openlawteam/openlaw-elements

Introduces contextual error messages to every field (with the option to change or hide the message), validation which propagates to parent components, and other tweaks, styles, and stability improvements to our fields.

Visible error messages

When an OpenLaw input fails to validate as per the rules in OpenLaw Core (e.g. data type, format, etc.) we now let the user know.
A simple error message is displayed beneath the field.
Validation generally happens on blur or change with some exceptions in types such as Address and Image for example where the events aren't as cut-and-dry.
By default our internal error messages are shown beneath the field on the blur event, so as not to pelt the user with errors on every keystroke.
When an error message can provide more info as to why it failed it does so. For example, async operations within the Address type.
Errors will continue to improve as OpenLaw Core eventually may move toward standardized error objects delivered to OpenLaw Client then onto OpenLaw Elements!

The `onValidate` Callback

The onValidate prop is a callback that allows a user to "hook into" the validation process of our fields.
It's up to the user how they want to organize their custom validation within the function (e.g. smaller functions, switch/case, if/else, etc.).
The parameter provdied to onValidate is an object of validation data which tells you the current status of the field you're editing or moving away from.
Custom validation data can be returned from the function which currently has the ability to customize or hide an error message (empty string) via { errorMessage: String }.
Error message timing can be altered within onValidate by detecting the eventType, and returning a message accordingly. For example, showing a special error on the change event of the Image type.

Below is a representation of the onValidate callback parameter. As necessary, we will iterate in future releases on this object to improve error handling for parent components.

FieldError {
	elementName: string,
	elementType: <All Valid OpenLaw Field Types>,
	errorMessage: string,
	eventType: 'blur' | 'change',
	isError: boolean,
	value: string | { file: File | void, value: string },
}

CSS

The Elements classNames are revamped to use the BEM style, with a base namespace (absolutely no style collisions on import), and are generally now very comprehensible.
The default styles have now changed and are possibly more generic for other MVP or startup apps who want to use our forms without the headache of re-styling.
In terms of UI, the styles are visually clearer and make the fields slightly more comprehensible.
UX imrovements were taken to improve the keyboard navigation of the fields from start to finish.
Internally, CSS classnames are Flowtyped so you can't just willy-nilly add your own. Helps us to think about classes more critically and hopefully avoid bloat. Works well especially since the lib is small.

Changes to `onChangeFunction`

The required onChangeFunction prop is now called each time the field changes, regardless of error. This improves the predicatbility of usage (before it was only called if things were OK) for the onChangeFunction callback and allows us to proactively respond to errors within the callback if needed (e.g. exit early, call error logging, etc.).
Validation data is now passed into the onChangeFunction(key: string, value: string, validationResult: FieldError) as the final argument.
The former force: boolean argument has been removed, as it is not necessary. This is/was specific to our OpenLaw app to do with YesNo type and our async updates to templates.

Tests

Coverage is now approximately 85%! I'd call that green.
jest-canvas-mock added for Image

Address

Slightly refactors how Address shows, creates and deletes addresses to play nice with our shiny error propagation.
Async operations now report if things go haywire
A new "Searching addresses..." now shows on search within the results box. This was not as easy as it should have been, Autosuggest (yeah, looking at you!).

Date

Date is now cleaner in the way it instantiates and destroys the flatpickr instance.
Bug fix: Dates in a Collection used to be mutated every time the Collection changed. No more! Via openlawteam/openlaw-core#176

Period

Bug fix: All-plural periods of time no more! Via openlawteam/openlaw-core#175

ARIA-Compatibility & Accessibility

Still embarrassing, but that's another release. Sorry!
Bonus: Keyboard-ing through the fields is much better tho! Especially for Address, Image and Date.

Package updates across the board

Except react-image-crop as it needs a migration path.

Example app

I got a little tired of scrolling up to check the rendered preview, so I changed the UI and UX of the example app (hopefully for the better - gosh!)
App was getting big; refactored the components of the example app into separate files. Sanity now in check.
Now you can toggle a feature called "Auto Run" to get constant updates to the rendered preview.
Removes bloated Collapsible Stackoverflow Special component - good riddance!

Eslint

New globals were added to stop nagging the test files using Node methods
Added a rule for flat ternary expressions, since the code makes use of nested ternaries for cleaner value evaluation logic. Flat ternaries make logic much more readable.

Types

New types added to increase our static typing "coverage". Catch those compilation errors!

v1.0.0-beta.28...v1.0.0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Visible error messages

The `onValidate` Callback

CSS

Changes to `onChangeFunction`

Tests

Address

Date

Period

ARIA-Compatibility & Accessibility

Package updates across the board

Example app

Eslint

Types

Releases: openlawteam/openlaw-elements

v1.1.2

v1.1.1

v1.1.0

v1.0.2

v1.0.1

v1.0.0

Visible error messages

The onValidate Callback

CSS

Changes to onChangeFunction

Tests

Address

Date

Period

ARIA-Compatibility & Accessibility

Package updates across the board

Example app

Eslint

Types

v1.0.0-beta.28

v1.0.0-beta.27

v1.0.0-beta.26

v1.0.0-beta.25

The `onValidate` Callback

Changes to `onChangeFunction`