fix(textarea, textbox): ensure inputHint and labelHelp props do not render two seperate DOM elements #6363
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 0df5be9:
|
edleeks87
reviewed
Oct 11, 2023
| @@ -84,7 +80,7 @@ export interface TextareaProps | |||
| label?: string; | |||
| /** Inline label alignment */ | |||
| labelAlign?: "left" | "right"; | |||
| /** Text applied to label help tooltip */ | |||
| /** [Legacy] Text applied to label help tooltip */ | |||
There was a problem hiding this comment.
suggestion: might be worth adding that if you have the redesign flag set and no inputHint prop this will be used etc
| {...{ [validationType]: "Message" }} | ||
| m={4} | ||
| /> | ||
| <Textarea | ||
| label={`readOnly - ${validationType}`} | ||
| inputHint="Hint text (optional)" |
There was a problem hiding this comment.
Suggested change
| inputHint="Hint text (optional)" | |
| inputHint="Hint text (optional)." |
😆
edleeks87
reviewed
Oct 11, 2023
There was a problem hiding this comment.
Good stuff @tomdavies73, I think it would also be worth adding some tests that confirm the behaviour we're wanting when both props are set
edleeks87
reviewed
Oct 12, 2023
Parsium
reviewed
Oct 12, 2023
Parsium
previously approved these changes
Oct 16, 2023
edleeks87
previously approved these changes
Oct 16, 2023
…ender two seperate DOM elements currently when consumers are opted into the new validation designs two seperate DOM elements are rendered which both act as hints for the input. This has been addressed by only rendering either the `inputHint` or `labelHelp` props in the same element, with `inputHint` taking priority
divyajindel
approved these changes
Oct 26, 2023
Parsium
approved these changes
Oct 27, 2023
edleeks87
approved these changes
Oct 27, 2023
|
🎉 This PR is included in version 123.0.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proposed behaviour
Currently, when consumers are opted into the new validation designs two separate DOM elements are rendered which both act as hints for the input. This has been addressed by only rendering either the
inputHintorlabelHelpprops in the same element, withinputHinttaking priority.Current behaviour
Currently, when consumers are opted into the new validation designs two separate DOM elements are rendered which both act as hints for the input.
Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions
The following CodeSandbox is an example of the broken behaviour.
You can see the new behaviour by looking at the version in the comment by
codesandbox[bot].