Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement Simple Form Validation and Value Behavior using the Constraint API #1009

Merged
merged 12 commits into from
Nov 22, 2020

Conversation

mlaursen
Copy link
Owner

@mlaursen mlaursen commented Nov 22, 2020

Description

This PR adds a new useTextField hook for controlling the value for the TextField, TextArea, and Password components as well as simple error states using the validation/constraint API. However, instead of using the components above, you should use the TextFieldWithMessage, TextAreaWithMessage, and PasswordWithMessage components which will handle dynamically rendering the FormMessage component along with the "text" component.

This also added a new error icon to the IconProvider which is used internally by the useTextField hook.

Simple Example

const [value, fieldProps] = useTextField({
  id: "field-id",
  required: true,
  helpText: "mm/dd/yyyy",
  pattern: "^\\d{2}/\\d{2}/\\d{4}$",
  minLength: 10,
  maxLength: 10,
});

return (
  <TextFieldWithMessage
    {...fieldProps}
    label="Date *"
    placeholder="mm/dd/yyyy"
  />
);

Disclaimer

You probably only want to use the useTextField hook for simple form validation since some of the default browser verbiage for error states are quite verbose. I still think something like react-hook-form will be easier for complex form states, but this can be used at other times.

Disclaimer Part 2

This PR is really just because I want to implement the useNumberField hook I've started a few times and used a bit throughout the documentation site. That hook should be included in the 2.5.0 release as well since it helps with my current slider implementation.

*
* The above behavior is also configured by the {@link ChangeValidationBehavior}.
*/
export const defaultGetErrorMessage: GetErrorMessage = ({
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If someone checks this PR about this feature... This is really how you'll want to customize the error messages by providing your own getErrorMessage implementation.

@mlaursen mlaursen added this to the 2.5.0 milestone Nov 22, 2020
I like the eslint rule I have more where requires a leading underscore
for it. It also makes some of the demos more annoying to make since I
want to show variables exist even if I don't need to use them for the
demo.
@codecov-io
Copy link

codecov-io commented Nov 22, 2020

Codecov Report

Merging #1009 (9cdc807) into main (73fc88f) will increase coverage by 0.18%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #1009      +/-   ##
==========================================
+ Coverage   88.90%   89.09%   +0.18%     
==========================================
  Files         248      257       +9     
  Lines        6983     7214     +231     
  Branches     1812     1860      +48     
==========================================
+ Hits         6208     6427     +219     
- Misses        698      705       +7     
- Partials       77       82       +5     
Impacted Files Coverage Δ
packages/form/src/FormMessage.tsx 100.00% <100.00%> (ø)
packages/form/src/FormMessageContainer.tsx 100.00% <100.00%> (ø)
packages/form/src/text-field/Password.tsx 100.00% <100.00%> (ø)
...ckages/form/src/text-field/PasswordWithMessage.tsx 100.00% <100.00%> (ø)
...ckages/form/src/text-field/TextAreaWithMessage.tsx 100.00% <100.00%> (ø)
...kages/form/src/text-field/TextFieldWithMessage.tsx 100.00% <100.00%> (ø)
packages/form/src/text-field/getErrorIcon.ts 100.00% <100.00%> (ø)
packages/form/src/text-field/getErrorMessage.ts 100.00% <100.00%> (ø)
packages/form/src/text-field/isErrored.ts 100.00% <100.00%> (ø)
packages/form/src/text-field/useTextField.ts 100.00% <100.00%> (ø)
... and 11 more

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 73fc88f...9cdc807. Read the comment docs.

@mlaursen mlaursen merged commit 9cdc807 into main Nov 22, 2020
@mlaursen mlaursen deleted the feature/validation branch November 22, 2020 22:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants