Skip to content

Commit d752615

Browse files
aduthaduth
committed
Upgrade USWDS to 2.12
**Why:** Avoid future maintenance overhead incurred by version drift, incorporate latest features and updates, including upstream contributions previously implemented as overrides. Changelog: - https://github.com/uswds/uswds/releases/tag/v2.12.1 - https://github.com/uswds/uswds/releases/tag/v2.12.0 Incorporated revisions: - uswds/uswds#4199 - uswds/uswds#4286
1 parent af4d3ba commit d752615

File tree

5 files changed

+88
-97
lines changed

5 files changed

+88
-97
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
- Whitespace in checkbox and radio label markup will no longer cause the label text to be misplaced.
66
- Margins surrounding an external link icon have been increased slightly.
7+
- USWDS is upgraded to the latest version, from v2.11.2 to v2.12.1.
78

89
## 6.0.0
910

‎package-lock.json‎

Lines changed: 70 additions & 78 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
},
6060
"homepage": "https://github.com/18F/identity-style-guide#readme",
6161
"dependencies": {
62-
"uswds": "^2.11.2"
62+
"uswds": "^2.12.1"
6363
},
6464
"devDependencies": {
6565
"@babel/core": "^7.14.3",

‎src/scss/components/_inputs.scss‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
$theme-input-tile-background-color: 'transparent'; // https://github.com/uswds/uswds/pull/4199
2-
$theme-input-bordered-background-color: $theme-input-tile-background-color;
1+
$theme-input-tile-background-color-selected: 'primary-lightest';
2+
$theme-input-tile-border-color: 'primary-light';
3+
$theme-input-tile-border-color-selected: 'primary-light';
34
$theme-input-bordered-background-color-selected: $theme-input-tile-background-color-selected;
45
$theme-input-bordered-border-radius: $theme-input-tile-border-radius;
56
$theme-input-bordered-border-width: $theme-input-tile-border-width;
@@ -75,27 +76,21 @@ $input-select-margin-right: 1;
7576

7677
.usa-radio__label,
7778
.usa-checkbox__label {
78-
@extend %block-input-general;
7979
display: inline-block;
8080
margin-bottom: units(1);
8181
padding-left: $checkbox-radio-size + units($input-select-margin-right);
82-
text-indent: 0;
8382

8483
&::before {
8584
background-color: color('primary-lightest');
8685
box-shadow: inset 0 0 0 units($border-width) color('primary');
87-
display: block;
8886
height: $checkbox-radio-size;
89-
left: 0;
9087
margin-left: 0;
9188
margin-right: 0;
9289
margin-top: (
9390
line-height($theme-form-font-family, $theme-input-line-height) *
9491
font-size($theme-form-font-family, $theme-body-font-size) -
9592
$checkbox-radio-size
9693
) / 2;
97-
position: absolute;
98-
white-space: normal;
9994
width: $checkbox-radio-size;
10095
}
10196
}
@@ -160,34 +155,39 @@ $input-select-margin-right: 1;
160155
.usa-radio__input--tile + .usa-radio__label {
161156
@include u-text('primary', 'bold');
162157
@include u-display('block');
163-
background-color: color($theme-input-tile-background-color); // https://github.com/uswds/uswds/pull/4178
158+
border-color: color($theme-input-tile-border-color);
164159
max-width: units($theme-input-max-width);
165160
}
166161

167162
.usa-radio__input--bordered + .usa-radio__label,
168163
.usa-checkbox__input--bordered + .usa-checkbox__label {
169164
@include u-display('table'); // Margin collapse of a "block" while retaining collapsed width.
170-
background-color: color($theme-input-bordered-background-color);
171165
border: units($theme-input-bordered-border-width) solid color($theme-input-bordered-border-color);
172166
border-radius: radius($theme-input-bordered-border-radius);
173167
margin: units(1) 0;
174168
max-width: units($theme-input-max-width);
175169
padding: units(1) units(2) units(1) #{units(2) + $checkbox-radio-size + units($input-select-margin-right)};
176170
}
177171

172+
.usa-radio__input--bordered:checked + .usa-radio__label,
173+
.usa-checkbox__input--bordered:checked + .usa-checkbox__label {
174+
background-color: color($theme-input-bordered-background-color-selected);
175+
border-color: color($theme-input-bordered-border-color-selected);
176+
}
177+
178+
.usa-checkbox__input--tile:checked + .usa-checkbox__label,
179+
.usa-radio__input--tile:checked + .usa-radio__label {
180+
background-color: color($theme-input-tile-background-color-selected);
181+
border-color: color($theme-input-tile-border-color-selected);
182+
}
183+
178184
.usa-checkbox__input--tile + .usa-checkbox__label::before,
179185
.usa-radio__input--tile + .usa-radio__label::before,
180186
.usa-radio__input--bordered + .usa-radio__label::before,
181187
.usa-checkbox__input--bordered + .usa-checkbox__label::before {
182188
left: units(2);
183189
}
184190

185-
.usa-checkbox__input--bordered:checked + .usa-checkbox__label,
186-
.usa-radio__input--bordered:checked + .usa-radio__label {
187-
background-color: color($theme-input-bordered-background-color-selected);
188-
border-color: color($theme-input-bordered-border-color-selected);
189-
}
190-
191191
.usa-checkbox__label-description,
192192
.usa-radio__label-description {
193193
@include typeset(

‎src/scss/uswds-theme/_components.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,5 @@ $theme-footer-font-family: 'body';
3737
// Form and input
3838
$theme-checkbox-border-radius: 1.5px;
3939
$theme-input-line-height: 3;
40-
$theme-input-tile-background-color-selected: 'primary-lightest';
4140
$theme-input-tile-border-radius: 'lg';
4241
$theme-input-tile-border-width: 1px;
43-
$theme-input-tile-border-color: 'primary-light';

0 commit comments

Comments
 (0)