Thanks to visit codestin.com
Credit goes to github.com

Skip to content

USWDS - Input: Move input width classes out of usa-form package #6232

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.

Sign up for GitHub

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

Merged
merged 13 commits into from
Dec 16, 2024
+54 −44
Merged

USWDS - Input: Move input width classes out of usa-form package #6232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c336522
Include usa-input width variants in usa-input package
aduth May 21, 2024
7107844
Merge branch 'develop' of https://github.com/uswds/uswds into aduth-i…
Nov 21, 2024
a744483
Remove usa-form maxw:none; move usa-input-group widths
Nov 29, 2024
0eeb861
Restore max-width: none for usa-range and usa-select
Nov 29, 2024
a8a5c1f
Create $system-input-widths map; generate width classes from map
Nov 29, 2024
7db0bf4
Reduce specificity on max-width:none
Dec 2, 2024
eb51128
Add comment to explain use of :where()
Dec 3, 2024
6d3483d
Add utility class controls
Dec 3, 2024
1b98b49
Run prettier
Dec 3, 2024
ccd9bf4
Format code
Dec 3, 2024
d9e1740
Add usa-form parent to input width classes
Dec 10, 2024
d6d2eb4
Revert where() for max-width on child elements
Dec 10, 2024
03640e8
Revert "Revert where() for max-width on child elements"
Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 4 additions & 32 deletions packages/usa-form/src/styles/_usa-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,41 +17,13 @@
text-decoration: none;
}

.usa-input,
.usa-range,
.usa-select,
.usa-textarea {
// max width not needed since .usa-form has one of its own
// Clear max-width in children since .usa-form has one of its own.
// Used :where() to reduce specificity and
// prevent usa-form styles from overriding `usa-input--[width] and `usa-input-group--[width]` classes.
:where(.usa-input, .usa-textarea, .usa-select, .usa-range) {
max-width: none;
}

.usa-input,
.usa-input-group {
&--2xs {
max-width: 5ex;
}
&--xs {
max-width: 9ex;
}
&--sm,
&--small {
max-width: 13ex;
}
&--md,
&--medium {
max-width: 20ex;
}
&--lg {
max-width: 30ex;
}
&--xl {
max-width: 40ex;
}
&--2xl {
max-width: 50ex;
}
}

.usa-button {
margin-top: units(1);

Expand Down
8 changes: 8 additions & 0 deletions packages/usa-input-prefix-suffix/src/styles/_usa-input-prefix-suffix.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,14 @@ $icon-offset: $icon-width + ($input-padding * 2);
}
}

// Create input group max width utility classes
@each $name, $width in $system-input-widths {
.usa-input-group--#{$name},
.usa-form .usa-input-group--#{$name} {
max-width: #{$width};
}
}

.usa-input-prefix:has(+ input:disabled),
.usa-input-prefix:has(+ input[aria-disabled="true"]) {
@include u-disabled;
Expand Down
4 changes: 4 additions & 0 deletions packages/usa-input-prefix-suffix/src/usa-input-prefix-suffix.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ export default {
control: "radio",
options: ["none", "disabled", "aria-disabled"],
},
utilities: {
name: "Input group utility classes",
control: { type: "text" },
},
},
args: {
disabled_state: "none",
Expand Down
4 changes: 2 additions & 2 deletions packages/usa-input-prefix-suffix/src/usa-input-prefix.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<form class="usa-form">
<label class="usa-label" for="example-input-prefix">Credit card number</label>
<div class="usa-input-group">
<div class="usa-input-group{% if utilities %} {{ utilities }}{% endif %}">
<div class="usa-input-prefix" aria-hidden="true">
<svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
<use xlink:href="./img/sprite.svg#credit_card"></use>
Expand All @@ -19,7 +19,7 @@
{# Error state #}
{% if not (disabled_state == "disabled" or disabled_state == "aria-disabled") %}
<label class="usa-label" for="example-input-prefix-error">Credit card number (Error)</label>
<div class="usa-input-group usa-input-group--error">
<div class="usa-input-group usa-input-group--error{% if utilities %} {{ utilities }}{% endif %}">
<div class="usa-input-prefix" aria-hidden="true">
<svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./img/sprite.svg#credit_card"></use>
Expand Down
2 changes: 1 addition & 1 deletion packages/usa-input-prefix-suffix/src/usa-input-suffix.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<form class="usa-form">
<label class="usa-label" for="example-input-suffix">Weight, in pounds</label>
<div class="usa-input-group usa-input-group--sm">
<div class="usa-input-group {{ utilities | default('usa-input-group--sm') }}">
<input type="text" id="example-input-suffix" class="usa-input" pattern="[0-9]*" inputmode="numeric"
{% if disabled_state == "disabled"%} disabled{%- endif %}
{% if disabled_state == "aria-disabled"%} aria-disabled="true"{%- endif %}
Expand Down
8 changes: 8 additions & 0 deletions packages/usa-input/src/styles/_usa-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@
}
}

// Create input max width utility classes
@each $name, $width in $system-input-widths {
.usa-input--#{$name},
.usa-form .usa-input--#{$name} {
max-width: #{$width};
}
}

.usa-input--error {
@include u-border($theme-input-state-border-width, "error-dark");
padding-top: calc(#{units(1)} - #{units($theme-input-state-border-width)});
Expand Down
18 changes: 9 additions & 9 deletions packages/usa-input/src/usa-input--showcase.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
<label class="usa-label" for="input-type-text">Text input label</label>
<input class="usa-input" id="input-type-text" name="input-type-text" type="text">
<input class="usa-input{% if utilities %} {{ utilities }}{% endif %}" id="input-type-text" name="input-type-text" type="text">

<label class="usa-label" for="input-focus">Text input focused</label>
<input class="usa-input usa-focus" id="input-focus" name="input-focus" type="text">
<input class="usa-input usa-focus{% if utilities %} {{ utilities }}{% endif %}" id="input-focus" name="input-focus" type="text">

<div class="usa-form-group usa-form-group--error">
<label class="usa-label usa-label--error" for="input-error">Text input error</label>
<span class="usa-error-message" id="input-error-message" role="alert">Helpful error message</span>
<input class="usa-input usa-input--error" id="input-error" name="input-error" type="text" aria-describedby="input-error-message">
<input class="usa-input usa-input--error{% if utilities %} {{ utilities }}{% endif %}" id="input-error" name="input-error" type="text" aria-describedby="input-error-message">
</div>

<label class="usa-label" for="input-success">Text input success</label>
<input class="usa-input usa-input--success" id="input-success" name="input-success" type="text">
<input class="usa-input usa-input--success{% if utilities %} {{ utilities }}{% endif %}" id="input-success" name="input-success" type="text">

<label class="usa-label" for="input-type-textarea">Text area label</label>
<textarea class="usa-textarea" id="input-type-textarea" name="input-type-textarea"></textarea>
<textarea class="usa-textarea{% if utilities %} {{ utilities }}{% endif %}" id="input-type-textarea" name="input-type-textarea"></textarea>

<label class="usa-label" for="input-disabled">Text input disabled</label>
<input class="usa-input" id="input-disabled" name="input-disabled" type="text" disabled>
<input class="usa-input{% if utilities %} {{ utilities }}{% endif %}" id="input-disabled" name="input-disabled" type="text" disabled>

<label class="usa-label" for="input-type-textarea-disabled">Text area disabled</label>
<textarea class="usa-textarea" id="input-type-textarea-disabled" name="input-type-textarea-disabled" disabled></textarea>
<textarea class="usa-textarea{% if utilities %} {{ utilities }}{% endif %}" id="input-type-textarea-disabled" name="input-type-textarea-disabled" disabled></textarea>

<label class="usa-label" for="input-aria-disabled">Text input aria-disabled</label>
<input class="usa-input" id="input-aria-disabled" name="input-aria-disabled" type="text" aria-disabled="true">
<input class="usa-input{% if utilities %} {{ utilities }}{% endif %}" id="input-aria-disabled" name="input-aria-disabled" type="text" aria-disabled="true">

<label class="usa-label" for="input-type-textarea-aria-disabled">Text area aria-disabled</label>
<textarea class="usa-textarea" id="input-type-textarea-aria-disabled" name="input-type-textarea-aria-disabled" aria-disabled="true"></textarea>
<textarea class="usa-textarea{% if utilities %} {{ utilities }}{% endif %}" id="input-type-textarea-aria-disabled" name="input-type-textarea-aria-disabled" aria-disabled="true"></textarea>
4 changes: 4 additions & 0 deletions packages/usa-input/src/usa-input.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export default {
],
defaultValue: "default",
},
utilities: {
name: "Input/textarea utility classes",
control: { type: "text" },
},
},
};

Expand Down
2 changes: 2 additions & 0 deletions packages/usa-input/src/usa-input.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<label class="usa-label{% if state == "error" %} usa-label--error{%- endif %}" for="input-type-text">Text input label</label>
{% if state == "error" %} <span class="usa-error-message" id="input-error-message" role="alert">Helpful error message</span>{%- endif %}
<input class="usa-input
{% if utilities %} {{ utilities }}{% endif %}
{% if state == "focus" %} usa-focus{%- endif%}
{% if state == "error" %} usa-input--error" aria-describedby="input-error-message{%- endif%}
{% if state == "success" %} usa-input--success{%- endif%}"
Expand All @@ -15,6 +16,7 @@
<span class="usa-error-message" id="textarea-error-message" role="alert">Helpful error message</span>
{%- endif %}
<textarea class="usa-textarea
{% if utilities %} {{ utilities }}{% endif %}
{% if state == "focus" %} usa-focus{%- endif%}
{% if state == "error" %} usa-input--error" aria-describedby="textarea-error-message{%- endif%}
{% if state == "success" %} usa-input--success{%- endif%}"
Expand Down
1 change: 1 addition & 0 deletions packages/uswds-core/src/styles/tokens/units/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@forward "breakpoints";
@forward "column-gaps";
@forward "grid-base";
@forward "input-widths";
@forward "layout-grid-widths";
@forward "neg-prefix";
@forward "spacing";
Expand Down
11 changes: 11 additions & 0 deletions packages/uswds-core/src/styles/tokens/units/input-widths.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
$system-input-widths: (
"2xs": 5ex,
"xs": 9ex,
"sm": 13ex,
"small": 13ex,
"md": 20ex,
"medium": 20ex,
"lg": 30ex,
"xl": 40ex,
"2xl": 50ex,
);
Loading