-
Notifications
You must be signed in to change notification settings - Fork 293
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Show helper text when supplied to survey component #3925
Conversation
Size Change: +236 B (0%) Total Size: 1.11 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @tofumatt – we don't actually need to change any styles here (as these come from the component). Instead we're just missing a prop 😄
.mdc-text-field-helper-text { | ||
opacity: 1; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This fixes the problem but not quite in the right place.
It turns out the helper text is designed to be conditionally shown and likely uses opacity
to avoid a layout shift.
All we need to do is pass the persistent
prop to HelperText
to indicate that the text is to always be shown as the component is made to also support input validation.
You can also see this work on develop
by toggling the prop in React devtools.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Huh, whoops, thanks! 👍🏻
helperText={ | ||
subtitle ? ( | ||
<HelperText>{ subtitle }</HelperText> | ||
) : undefined | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
helperText={ | |
subtitle ? ( | |
<HelperText>{ subtitle }</HelperText> | |
) : undefined | |
} | |
helperText={ | |
subtitle ? ( | |
<HelperText persistent>{ subtitle }</HelperText> | |
) : undefined | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great, thanks!
Summary
Addresses issue #3762.
It turns out we had a subtitle in here but it was being hidden with an odd
opacity: 0
rule. This removes it and makes sure theHelperText
component isn't rendered if there isn't asubtitle
prop.Checklist