-
Notifications
You must be signed in to change notification settings - Fork 84
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
TextField error message inheriting label styles #1219
Comments
Doing a little research here. It looks like this is the relevant bit of code: The hidden error here is only rendered when the error is being placed below the input, and it is only visible to screen readers, so I don't think it comes into play in the example scenario above. In both scenarios, some form of the error message needs to always be rendered inside the |
Checking in on this one, @pwolfert was this touched on in the latest FormLabel discovery you and @zarahzachz were doing? Would we consider this a won't do or perhaps I can help by getting a ticket in the backlog where we can track this further? |
@forrestbaer, it looks like this might actually get fixed by the changes @zarahzachz has in her branch related to that discovery. We should keep this in mind and probably link to it in that discovery ticket, but I don't think we need a separate Jira ticket just yet. Thanks for identifying the link! |
Describe the bug
On MCT, we recently found that the
TextField
component -- which is using theFormControl
component underneath, rendershiddenError
markup for the properrorMessage
, and thathiddenError
renders as aspan
inside the renderedlabel
element. Therefore, if you set alabelClassName
, the error message adopts thelabel
's styling (e.g., in our case, increased font size). You can override this by setting anerrorMessageClassName
that addresses the same property or properties aslabelClassName
, but this seems unintuitive.Would it be spec-compliant and not too difficult to render the
hiddenError
span instead between thelabel
andinput
, to avoid unintended style inheritance? On MCT, the UX team has specified label styling that they don't want carried to error messages, at least in some places, so our options are to deal with this on a case-by-case basis or create our ownTextField
component that wraps the one from the DS and always setserrorMessageClassName
to beds-u-font-size--base
, which is our UX standard.To Reproduce
Steps to reproduce the behavior:
ds-u-font-size--base
from the rendered error messagespan
label
Expected behavior
The error message's styling is handled independently of the input
label
'sScreenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered: