Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-form-search-select] Added error message for invalid example #3980

Merged
merged 8 commits into from
Dec 1, 2023

Conversation

KV106606Viswanath
Copy link
Contributor

@KV106606Viswanath KV106606Viswanath commented Nov 20, 2023

Summary

Added error message for invalid example and instruction text to test the error message. Previously there is no error message for invalid example. With this change we have added error message and made border color dynamic to check the error state is working correctly or not.

What was changed:
Added error message and instruction text to validate invalid example.

Why it was changed:

Testing

This change was tested using:

  • WDIO
  • Jest
  • Visual testing (please attach a screenshot or recording)
  • Other (please describe below)
  • No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

  • UX review
  • Accessibility review
  • Functional review

Additional Details

This PR resolves:

UXPLATFORM-9841


Thank you for contributing to Terra.
@cerner/terra

Screenshot 2023-11-21 at 2 42 46 PM

@KV106606Viswanath KV106606Viswanath requested a review from a team as a code owner November 20, 2023 12:19
@KV106606Viswanath KV106606Viswanath self-assigned this Nov 20, 2023
@@ -67,6 +67,7 @@
--terra-form-select-toggle-invalid-box-shadow: 0 0 0 1px #fb4c4c;
--terra-form-select-toggle-invalid-focus-border-color: #004c76;
--terra-form-select-toggle-invalid-focus-box-shadow: 0 0 0 1px #004c76, 0 0 0 1px #004c76;
--terra-form-select-error-text-color: #fb4c4c;
Copy link
Contributor

Choose a reason for hiding this comment

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

why do you need this variable ..?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed

};

const handleFocus = () => {
setInvalidText('Please select a color');
Copy link
Contributor

@supreethmr supreethmr Nov 22, 2023

Choose a reason for hiding this comment

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

this should be default message and you need to clear it onchange !!
isInvalid should be updated back to true when user clears the value from dropdown

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is not required since we have removed the clear selection prop

<>
<SearchSelect
placeholder="Select a color"
isInvalid={isInvalid}
Copy link
Contributor

Choose a reason for hiding this comment

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

we should also add aria-invalid attribute for search-select-input control whenever isInvalid is set to true.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It was already added in some other PR

@github-actions github-actions bot temporarily deployed to preview-pr-3980 November 30, 2023 19:00 Destroyed
@supreethmr supreethmr merged commit 115d7f2 into main Dec 1, 2023
21 checks passed
@supreethmr supreethmr deleted the KV106606-Error-message-invalid-example branch December 1, 2023 09:41
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants