Fix Validated Components

[alexpaxton]

Closes #339

Turns out the bug was caused by the hexcode validator function always returning a string when it was expecting a null value to determine if is valid, hence it always returning invalid

Changes

• Change typing of FormValidationElement to expect string instead of any
  • Turns out the component is exclusively used to validate text inputs
• Remove state from ColorPicker and FormValidationElement
  • Should make these work like controlled components
• Create a type for ValidationFunction to enforce consistency across these components (and potentially more)
  • Validation functions should return a string (error) or null (valid)
• Add validationFunc prop to ColorPicker
  • Has a hexcode validator by default
  • User can pass in their own function
• Updated stories to include inputs for testing purposes

Checklist

Check all that apply

• Updated documentation to reflect changes
• Added entry to top of Changelog with link to PR (not issue)
• Tests pass
• Peer reviewed and approved
• Signed CLA (if not already signed)

[drdelambre]

i like where the code is moving, but i dont understand how the chaining of validation handles.

[drdelambre]

😲

[drdelambre]

shouldn't this be more of a validateHexCode(color) && validationFunc(color) relationship? so that validating that a color matches a palette map somewhere doesnt mean you have to rewrite validateHexCode?

[alexpaxton]

I made validationFunc to be validateHexCode by default, but in case we ever want to support rgb values or named colors a different validation function can be passed in

[drdelambre]

👍

[drdelambre]

why no more input cleaning here?

[alexpaxton]

I suppose I could trim out space characters at the very least

[alexpaxton]

@drdelambre can you clarify "Chaining of validation"?

[drdelambre]

like.. whats the difference between a text input, color hex input, and a "only shades of grey" input? is the thinking that the last input is going to be custom validation function + hex validation function + text validation function, or is it custom validation function implements (hex validation function + text validation function)? is the idea that v1.0 is a transition from the former to the later?

[drdelambre]

offlined the conversation and we're aiming for max flexibility