Repository navigation
USWDS - Feature Request: Limited spacing of the InputPrefix results in overlapped text #5558
Closed as not planned
Description
Describe the bug
Stylings introduced in #5063 have broken the visual behavior of the input-prefixes
Steps to reproduce the bug
I have made a small demo that replicates this bug at https://codesandbox.io/s/funny-artem-s4q8v2?file=/src/App.js
Expected Behavior
The prefix spacing should not be limited in size to allow for larger words as prefixes, and should apply the same effect to spans or other non-input fields.
This was the previous functionality in https://github.com/uswds/uswds/tree/v3.1.0, which looked like this:
Related code
No response
Screenshots
An example from gcn.nasa.gov. This screenshot shows the overlapping text:
In this screenshot, I have disabled the position: absolute styling to show the text that was covered. ('From' and 'Subject')
System setup
USWDS version 3.6.0
Additional context
No response
Code of Conduct
- I agree to follow this project's Code of Conduct.
- I checked the current issues for duplicate bug reports.
Activity
lpsinger commentedon Nov 3, 2023
I wonder if there is a workaround that we can apply to our custom SCSS so that we can keep using the latest version of USWDS until this is fixed.
mahoneycm commentedon Nov 3, 2023
Confirming I'm able to reproduce the bug.Update for added clarity: Confirming that replacing an icon with text can cause text overlap due to the method we use to add margin to the input prefix. This example was made in USWDS Storybook:
Looks like it's coming from the way we're setting the padding to be equal to the icon width:
uswds/packages/usa-input-prefix-suffix/src/styles/_usa-input-prefix-suffix.scss
Lines 80 to 83 in 8f92ea7
We may want to reconsider how this padding is measured while testing for disabled and focus styles.
32 remaining items
dakota002 commentedon Nov 14, 2024
Thanks @mahoneycm, we ended up going the utility class route. Appreciate you all looking into this
annepetersen commentedon May 2, 2026
Hi there: this is one of many submitted PRs/issues that have languished here. USWDS is currently understaffed, so I'm closing items that aren’t as high on the priority list right now, including this one, unfortunately.