USWDS - Text Input: Include width variant styles in usa-input package#5935
USWDS - Text Input: Include width variant styles in usa-input package#5935aduth wants to merge 2 commits into
Conversation
As a real-world use-case, we don't include Writing out this use-case also has me thinking that there's room to improve |
amyleadem
left a comment
There was a problem hiding this comment.
Thanks for this submission, @aduth. This is generally looking good, but I noticed one issue where these width classes no longer work when used inside a .usa-form parent. I've added details in the comment below.
I checked the following items:
- Confirm that the approach to move
.usa-input--[width]classes to theusa-inputpackage makes sense - Confirm the
usa-input--[width]classes work as expected onusa-inputandusa-textareaelements when theusa-formpackage is not present - Confirm that this change to
usa-input--[width]classes does not negatively impact other components whenusa-formpackage is not present- Note: I tested adding
usa-input—[width]classes to the form input components indevelop. Below I have listed the components that did successfully receive theusa-input--[width]classes indevelopand confirmed that they still work in this branch when theusa-formpackage is absent:- Character count
- Input mask
- Input prefix/suffix
- Input
- Textarea
- Note: I tested adding
- Confirm no regressions when using
.usa-input--[width]classes on.usa-inputand.usa-textareaelements placed inside a.usa-formparent- See details in the comment below
- Confirm that the sizes for the
usa-input--[width]classes match the sizes inusa-form.scss
Please let me know if you have any questions.
|
|
||
| .usa-input--2xs { | ||
| max-width: 5ex; | ||
| } | ||
|
|
||
| .usa-input--xs { | ||
| max-width: 9ex; | ||
| } | ||
|
|
||
| .usa-input--sm, | ||
| .usa-input--small { | ||
| max-width: 13ex; | ||
| } | ||
|
|
||
| .usa-input--md, | ||
| .usa-input--medium { | ||
| max-width: 20ex; | ||
| } | ||
|
|
||
| .usa-input--lg { | ||
| max-width: 30ex; | ||
| } | ||
|
|
||
| .usa-input--xl { | ||
| max-width: 40ex; | ||
| } | ||
|
|
||
| .usa-input--2xl { | ||
| max-width: 50ex; | ||
| } |
There was a problem hiding this comment.
issue: I noticed that these rules are not specific enough to work when added to an element inside of usa-form. Here is an example of markup that does not successfully accept the width classes:
<div class="usa-form">
<label class="usa-label" for="input-type-text">Text input label</label>
<input class="usa-input usa-input--sm" id="input-type-text" name="input-type-text" type="text">
<label class="usa-label" for="input-type-textarea">Text area label</label>
<textarea class="usa-textarea usa-input--sm" id="input-type-textarea" name="input-type-textarea"></textarea>
</div>This is because there is a more specific max-width rule for .usa-input that overrides it.
|
That's a good catch @amyleadem ! I'll plan to patch that up. |
|
Maybe it's a matter of keeping the current styling (reverting the changes to |
Summary
Add missing styles for Text Input component when using optimized installation. Width variants for the Text Input component were previously not included when using the
usa-inputSass package.Breaking change
This would only theoretically be a breaking change if someone was importing
usa-formand notusa-input, yet expected to be able to useusa-input--[width]classes. This seems exceedingly unlikely, since if someone is usingusa-input--[width]classes, presumably they're also usingusa-inputclasses.Related issue
Fixes #5312
Problem statement
As a developer, I expect that if I include the package listed on a component's documentation (e.g. Text Input), all of the usage options documented for that component are available, so that I'm not confused by styles not existing despite being documented, or be forced to include more packages than I'd otherwise need for my optimized installation.
Solution
Moves
usa-input--[width]styles fromusa-formtousa-inputpackage.