From 5bde16ccbb0ea6c99c74e9c3f276c8aaa1b87afe Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 9 Nov 2020 01:07:15 +0000 Subject: [PATCH 1/5] hide some validation tooltips if fields are valid. fixes https://github.com/vector-im/element-web/issues/9683 --- src/components/views/auth/RegistrationForm.js | 3 +++ src/components/views/elements/Validation.tsx | 7 +++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/views/auth/RegistrationForm.js b/src/components/views/auth/RegistrationForm.js index db7d1df994..419443984a 100644 --- a/src/components/views/auth/RegistrationForm.js +++ b/src/components/views/auth/RegistrationForm.js @@ -250,6 +250,7 @@ export default class RegistrationForm extends React.Component { validateEmailRules = withValidation({ description: () => _t("Use an email address to recover your account"), + hideDescriptionIfValid: true, rules: [ { key: "required", @@ -326,6 +327,7 @@ export default class RegistrationForm extends React.Component { validatePhoneNumberRules = withValidation({ description: () => _t("Other users can invite you to rooms using your contact details"), + hideDescriptionIfValid: true, rules: [ { key: "required", @@ -356,6 +358,7 @@ export default class RegistrationForm extends React.Component { validateUsernameRules = withValidation({ description: () => _t("Use lowercase letters, numbers, dashes and underscores only"), + hideDescriptionIfValid: true, rules: [ { key: "required", diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx index 55e5714719..667b8e99aa 100644 --- a/src/components/views/elements/Validation.tsx +++ b/src/components/views/elements/Validation.tsx @@ -33,6 +33,7 @@ interface IRule { interface IArgs { rules: IRule[]; description(this: T, derivedData: D): React.ReactChild; + hideDescriptionIfValid: Boolean; deriveData?(data: Data): Promise; } @@ -54,6 +55,8 @@ export interface IValidationResult { * @param {Function} description * Function that returns a string summary of the kind of value that will * meet the validation rules. Shown at the top of the validation feedback. + * @param {Boolean} hideDescriptionIfValid + * If true, don't show the description if the validation passes validation. * @param {Function} deriveData * Optional function that returns a Promise to an object of generic type D. * The result of this Promise is passed to rule methods `skip`, `test`, `valid`, and `invalid`. @@ -71,7 +74,7 @@ export interface IValidationResult { * A validation function that takes in the current input value and returns * the overall validity and a feedback UI that can be rendered for more detail. */ -export default function withValidation({ description, deriveData, rules }: IArgs) { +export default function withValidation({ description, hideDescriptionIfValid, deriveData, rules }: IArgs) { return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise { if (!value && allowEmpty) { return { @@ -156,7 +159,7 @@ export default function withValidation({ description, d } let summary; - if (description) { + if (description && (details || !hideDescriptionIfValid)) { // We're setting `this` to whichever component holds the validation // function. That allows rules to access the state of the component. const content = description.call(this, derivedData); From 2cac5f05a1c56ce1a18c4f1fe6e6a789f3696e24 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 9 Nov 2020 01:16:38 +0000 Subject: [PATCH 2/5] lint --- src/components/views/elements/Validation.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx index 667b8e99aa..7a8e47dfb6 100644 --- a/src/components/views/elements/Validation.tsx +++ b/src/components/views/elements/Validation.tsx @@ -74,7 +74,9 @@ export interface IValidationResult { * A validation function that takes in the current input value and returns * the overall validity and a feedback UI that can be rendered for more detail. */ -export default function withValidation({ description, hideDescriptionIfValid, deriveData, rules }: IArgs) { +export default function withValidation({ + description, hideDescriptionIfValid, deriveData, rules +}: IArgs) { return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise { if (!value && allowEmpty) { return { From ef09ff661593aa52e0b151cf0e7af87142bc8b8e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 9 Nov 2020 01:16:58 +0000 Subject: [PATCH 3/5] lint again --- src/components/views/elements/Validation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx index 7a8e47dfb6..35bf3a0456 100644 --- a/src/components/views/elements/Validation.tsx +++ b/src/components/views/elements/Validation.tsx @@ -75,7 +75,7 @@ export interface IValidationResult { * the overall validity and a feedback UI that can be rendered for more detail. */ export default function withValidation({ - description, hideDescriptionIfValid, deriveData, rules + description, hideDescriptionIfValid, deriveData, rules, }: IArgs) { return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise { if (!value && allowEmpty) { From 99fb62cc681e4c006a26d6831ee0f75cab8ce7a5 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 9 Nov 2020 01:37:17 +0000 Subject: [PATCH 4/5] fix lint yet again --- src/components/views/elements/Validation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx index 35bf3a0456..c45a745918 100644 --- a/src/components/views/elements/Validation.tsx +++ b/src/components/views/elements/Validation.tsx @@ -33,7 +33,7 @@ interface IRule { interface IArgs { rules: IRule[]; description(this: T, derivedData: D): React.ReactChild; - hideDescriptionIfValid: Boolean; + hideDescriptionIfValid?: Boolean; deriveData?(data: Data): Promise; } From 36aa80fb64ce8b281fcffae98d2eba282da03798 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 10 Nov 2020 18:29:28 +0000 Subject: [PATCH 5/5] Update src/components/views/elements/Validation.tsx Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/elements/Validation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/Validation.tsx b/src/components/views/elements/Validation.tsx index c45a745918..31f7c866b1 100644 --- a/src/components/views/elements/Validation.tsx +++ b/src/components/views/elements/Validation.tsx @@ -33,7 +33,7 @@ interface IRule { interface IArgs { rules: IRule[]; description(this: T, derivedData: D): React.ReactChild; - hideDescriptionIfValid?: Boolean; + hideDescriptionIfValid?: boolean; deriveData?(data: Data): Promise; }