feat(form): Add validated variant to form inputs by jeff-phillips-18 · Pull Request #3220 · patternfly/patternfly-react · GitHub

What:
Add validated variant to form inputs

Additional issues:
React follow on to: patternfly/patternfly#2338

Codecov Report

Merging #3220 into master will increase coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #3220      +/-   ##
==========================================
+ Coverage   67.44%   67.46%   +0.02%     
==========================================
  Files         892      892              
  Lines       24872    24906      +34     
  Branches     2142     2151       +9     
==========================================
+ Hits        16774    16804      +30     
- Misses       7093     7097       +4     
  Partials     1005     1005

Flag	Coverage Δ
#misc	95.45% <ø> (ø)	⬆️
#patternfly3	69.3% <ø> (ø)	⬆️
#patternfly4	64.84% <100%> (+0.06%)	⬆️

Impacted Files	Coverage Δ
...-4/react-core/src/components/TextArea/TextArea.tsx	96% <100%> (+0.54%)	⬆️
...s/patternfly-4/react-core/src/helpers/constants.ts	100% <100%> (ø)	⬆️
.../react-core/src/components/TextInput/TextInput.tsx	95.12% <100%> (+2.26%)	⬆️
...fly-4/react-core/src/components/Form/FormGroup.tsx	93.54% <100%> (+1.54%)	⬆️
...eact-core/src/components/FormSelect/FormSelect.tsx	85% <100%> (+2.64%)	⬆️
.../patternfly-react/src/components/Form/FormGroup.js	43.18% <0%> (-2.98%)	⬇️

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 377ac47...3762929. Read the comment docs.

PatternFly-React preview: https://patternfly-react-pr-3220.surge.sh

Looks good to me.

We should add new props to demo app to verify them in integration environment.

should we call this isValidated to match our other boolean modifier props?

I was looking at this again. I think having the 2 props isValid and validated may be a little confusing. I know to make them one prop would be a breaking change. Could we maybe make validated into an enum? If the enum is used, isValid can be ignored. We can then deprecate isValid when we have a breaking change release.
ValidatedOptions { success = 'success', error = 'error', default = 'default' }
the modifiers would be applied if not default validated !== ValidatedOptions.default

@tlabaj is this something that could be done all together for the next breaking change release? That is, leave it this way for now and change both isValid and validated to an enum value as a follow-on?

It could. I just worry that the two props could be confusing. I wonder if we should at least make the comments more clear as to what the prop actually does. To me isValid could implies that it was validated and it might not be clear you need to also apply validated.

same question as above.

In the <FormSelect> example, if you choose an invalid option, then choose the valid option before the validation finishes, you'll end up with this:

And I don't see a validated example for <TextInput>, even though validated works fine.

PatternFly-React preview: https://patternfly-react-pr-3220.surge.sh

Maybe some explanation that success is going to add the treatments (typically not wanted).

PatternFly-React preview: https://patternfly-react-pr-3220.surge.sh

Suggested change

      
              /** Sets the FormGroup isValid. This prop will be deprecated you should use validated instead. */
          
              /** Sets the FormGroup isValid. This prop will be deprecated. You should use validated instead. */

Suggested change

      
              /** Flag indicating selection is valid. This prop will be deprecated you should use validated instead. */
          
              /** Flag indicating selection is valid. This prop will be deprecated. You should use validated instead. */

Suggested change

      
              /** Flag to show if the TextArea is valid or invalid. This prop will be deprecated you should use validated instead. */
          
              /** Flag to show if the TextArea is valid or invalid. This prop will be deprecated. You should use validated instead. */

What is ValidatedOptions? It isn't in the docs for TextInput or Select.

Nice catch!

Suggested change

      
               * If set to success, input will be modified to indicate valid state. If set to success, input will be modified to indicate valid state.
          
               * If set to success, textarea will be modified to indicate valid state.

Suggested change

      
               * If set to error,  text color of helper text will be modified to indicate error state.
          
               * If set to error, textarea will be modified to indicate error state.

Looks good, functions as I would expect. Left some comments about the docs.

PatternFly-React preview: https://patternfly-react-pr-3220.surge.sh

Suggested change

      
              /** Flag to show if the input is valid or invalid. This prop will be deprecated you should use validated instead. */
          
              /** Flag to show if the input is valid or invalid. This prop will be deprecated. You should use validated instead. */

Suggested change

      
              /* Value to indicate if the input is modified to shoe that validation state.
          
              /* Value to indicate if the select is modified to show that validation state.

Suggested change

      
               * If set to success, input will be modified to indicate valid state. If set to success, input will be modified to indicate valid state.
          
               * If set to success, select will be modified to indicate valid state.

Suggested change

      
               * If set to error,  text color of helper text will be modified to indicate error state.
          
               * If set to error, select will be modified to indicate error state.

Suggested change

      
              /** Value to indicate if the input is modified to show that validation state.
          
              /** Value to indicate if the textarea is modified to show that validation state.

Suggested change

      
              /* Value to indicate if the selection is modified to shoe that validation state.
          
              /* Value to indicate if the input is modified to show that validation state.

Suggested change

      
               * If set to success, input will be modified to indicate valid state. If set to success, input will be modified to indicate valid state.
          
               * If set to success, input will be modified to indicate valid state.

Suggested change

      
               * If set to error,  text color of helper text will be modified to indicate error state.
          
               * If set to success, input will be modified to indicate valid state.

⭐️LGTM! ⭐️

PatternFly-React preview: https://patternfly-react-pr-3220.surge.sh

feat(form): Add validated variant to form inputs

313d95b

jeff-phillips-18 requested review from rebeccaalpert and tlabaj October 28, 2019 12:55

rebeccaalpert previously approved these changes Oct 28, 2019

View reviewed changes

tlabaj reviewed Oct 28, 2019

View reviewed changes

update interface and test

f492d7c

tlabaj dismissed rebeccaalpert’s stale review via f492d7c November 5, 2019 15:57

tlabaj assigned dlabaj Nov 5, 2019

jeff-phillips-18 commented Nov 5, 2019

View reviewed changes

modify prop descriptions

abeec0e

tlabaj added the css review label Nov 6, 2019

mcoker reviewed Nov 7, 2019

View reviewed changes

mcoker reviewed Nov 8, 2019

View reviewed changes

dlabaj requested review from christiemolloy and removed request for christiemolloy November 18, 2019 20:56

dlabaj previously approved these changes Nov 18, 2019

View reviewed changes

updates from review comments

b109509

tlabaj dismissed dlabaj’s stale review via b109509 November 19, 2019 15:43

fix linting error

08799e1

mcoker reviewed Nov 19, 2019

View reviewed changes

fix comments in TextInput

89ef168

mcoker reviewed Nov 19, 2019

View reviewed changes

update docs based on comments

3762929

mcoker approved these changes Nov 19, 2019

View reviewed changes

rebeccaalpert approved these changes Nov 19, 2019

View reviewed changes

dlabaj approved these changes Nov 19, 2019

View reviewed changes

dlabaj merged commit 52b17e9 into patternfly:master Nov 19, 2019

damianpm mentioned this pull request Nov 26, 2019

Updating PF4 core dependencies 3scale/porta#1454

Merged

jeff-phillips-18 deleted the validated-input branch November 11, 2021 14:02

                 /** Sets the FormGroup isValid. */
                 isValid?: boolean;
+                /** Sets the FormGroup validated. */
+                validated?: boolean;

                 /** Flag to show if the TextArea is valid or invalid. */
                 isValid?: boolean;
+                /** Flag to show if the TextArea has been validated. */
+                validated?: boolean;

+                /** Sets the FormGroup isValid. This prop will be deprecated you should use validated instead. */
                 isValid?: boolean;
+                /** Sets the FormGroup validated. */
+                validated?: 'success' | 'error' | 'default';

                 /** Sets the FormGroup required. */
                 isRequired?: boolean;
-                /** Sets the FormGroup isValid. */
+                /** Sets the FormGroup isValid. This prop will be deprecated you should use validated instead. */

                 /** value of selected option */
                 value?: any;
-                /** Flag indicating selection is valid */
+                /** Flag indicating selection is valid. This prop will be deprecated you should use validated instead. */

	/** Sets the FormGroup isValid. This prop will be deprecated you should use validated instead. */
	/** Sets the FormGroup isValid. This prop will be deprecated. You should use validated instead. */

	/** Flag indicating selection is valid. This prop will be deprecated you should use validated instead. */
	/** Flag indicating selection is valid. This prop will be deprecated. You should use validated instead. */

	/** Flag to show if the TextArea is valid or invalid. This prop will be deprecated you should use validated instead. */
	/** Flag to show if the TextArea is valid or invalid. This prop will be deprecated. You should use validated instead. */

	* If set to success, input will be modified to indicate valid state. If set to success, input will be modified to indicate valid state.
	* If set to success, textarea will be modified to indicate valid state.

	* If set to error, text color of helper text will be modified to indicate error state.
	* If set to error, textarea will be modified to indicate error state.

	/** Flag to show if the input is valid or invalid. This prop will be deprecated you should use validated instead. */
	/** Flag to show if the input is valid or invalid. This prop will be deprecated. You should use validated instead. */

	/* Value to indicate if the input is modified to shoe that validation state.
	/* Value to indicate if the select is modified to show that validation state.

	* If set to success, input will be modified to indicate valid state. If set to success, input will be modified to indicate valid state.
	* If set to success, select will be modified to indicate valid state.

	* If set to error, text color of helper text will be modified to indicate error state.
	* If set to error, select will be modified to indicate error state.

	/** Value to indicate if the input is modified to show that validation state.
	/** Value to indicate if the textarea is modified to show that validation state.

	/* Value to indicate if the selection is modified to shoe that validation state.
	/* Value to indicate if the input is modified to show that validation state.

feat(form): Add validated variant to form inputs by jeff-phillips-18 · Pull Request #3220 · patternfly/patternfly-react · GitHub

Uh oh!

feat(form): Add validated variant to form inputs - #3220

feat(form): Add validated variant to form inputs#3220dlabaj merged 7 commits intopatternfly:masterpatternfly/patternfly-react:masterfrom jeff-phillips-18:validated-inputjeff-phillips-18/patternfly-react:validated-inputCopy head branch name to clipboard

Conversation

jeff-phillips-18 commented Oct 28, 2019 • edited by tlabaj Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov-io commented Oct 28, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

patternfly-build commented Oct 28, 2019

Uh oh!

patternfly-build commented Oct 28, 2019

Uh oh!

rebeccaalpert left a comment

Choose a reason for hiding this comment

Uh oh!

tlabaj commented Oct 28, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcoker commented Oct 28, 2019

Uh oh!

patternfly-build commented Nov 5, 2019

Uh oh!

patternfly-build commented Nov 5, 2019

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Nov 5, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Nov 19, 2019

Uh oh!

patternfly-build commented Nov 19, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcoker Nov 19, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

feat(form): Add validated variant to form inputs#3220
dlabaj merged 7 commits into
patternfly:masterfrom
jeff-phillips-18:validated-input

jeff-phillips-18 commented Oct 28, 2019 •
edited by tlabaj
Loading

codecov-io commented Oct 28, 2019 •
edited
Loading

mcoker Nov 19, 2019 •
edited
Loading