Skip to content
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

Jump to bottom

Update to USWDS v3.9.0 #1397

Merged
merged 8 commits into from
Nov 14, 2024
+17 −32
Merged

Update to USWDS v3.9.0 #1397

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a70a8c3
update uswds to v3.9.0
jamigibbs Nov 11, 2024
4ecb49f
toggle onlyChanged flag
jamigibbs Nov 11, 2024
915ab8d
Wrap slot content in an element
jamigibbs Nov 12, 2024
13eb8b5
update test
jamigibbs Nov 12, 2024
9d3b349
Merge branch 'main' into 3401-uswds-390
jamigibbs Nov 13, 2024
c431694
Merge branch 'main' into 3401-uswds-390
jamigibbs Nov 13, 2024
0e99fdc
revert onlyChanged setting
jamigibbs Nov 14, 2024
447b3b2
Merge branch 'main' into 3401-uswds-390
jamigibbs Nov 14, 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
2 changes: 1 addition & 1 deletion .github/workflows/chromatic.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,6 @@ jobs:
token: ${{ secrets.GITHUB_TOKEN }}
# 👇 Chromatic projectToken, refer to the manage page to obtain it.
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
onlyChanged: true
onlyChanged: false
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will revert before merging.

workingDir: packages/storybook
skip: 'dependabot/**'
2 changes: 1 addition & 1 deletion packages/web-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"@types/react-dom": "18.3.0",
"@typescript-eslint/eslint-plugin": "^5.30.5",
"@typescript-eslint/parser": "^5.30.5",
"@uswds/uswds": "^3.8.1",
"@uswds/uswds": "^3.9.0",
"animate.css": "^4.1.1",
"babel-loader": "^8.2.2",
"eslint": "^8.19.0",
Expand Down
6 changes: 4 additions & 2 deletions packages/web-components/src/components/va-alert/test/va-alert.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ describe('va-alert', () => {
<mock:shadow-root>
<div class="usa-alert usa-alert--info">
<div class="usa-alert__body">
<slot name="headline"></slot>
<slot></slot>
<div>
<slot name="headline"></slot>
<slot></slot>
</div>
</div>
</div>
</mock:shadow-root>
Expand Down
20 changes: 11 additions & 9 deletions packages/web-components/src/components/va-alert/va-alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,15 +181,17 @@ export class VaAlert {
class="usa-alert__body"
onClick={this.handleAlertBodyClick.bind(this)}
>
{status === 'continue' && (
<va-icon
class="va-alert__lock-icon"
icon="lock"
size={slim ? 3 : 4}
></va-icon>
)}
{!slim && <slot name="headline"></slot>}
<slot></slot>
<div>
{status === 'continue' && (
<va-icon
class="va-alert__lock-icon"
icon="lock"
size={slim ? 3 : 4}
></va-icon>
)}
{!slim && <slot name="headline"></slot>}
<slot></slot>
</div>
Copy link
Contributor Author

@jamigibbs jamigibbs Nov 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have added a wrapping div around the slot content because the USWDS alert module styles the alert content with the following CSS:

.usa-alert--info .usa-alert__body > * {
    margin-left: 2.5rem;
}

The selector > * will not work on a placeholder element like <slot> when it's the direct descendent.

The alert content is displaying like this without that div:

Screenshot 2024-11-12 at 1 11 12 PM

Copy link
Contributor Author

@jamigibbs jamigibbs Nov 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is happening now because this update was made:

Fixed a bug that caused $theme-site-margins-width to unexpectedly adjust the alignment inside the alert and site alert components. Alignment on the alert and site alert components will likely shift from this change. Confirm that your implementation of the component aligns as expected.

</div>
</div>

Expand Down
21 changes: 1 addition & 20 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3456,7 +3456,7 @@ __metadata:
"@types/react-dom": "npm:18.3.0"
"@typescript-eslint/eslint-plugin": "npm:^5.30.5"
"@typescript-eslint/parser": "npm:^5.30.5"
"@uswds/uswds": "npm:^3.8.1"
"@uswds/uswds": "npm:^3.9.0"
animate.css: "npm:^4.1.1"
aria-hidden: "npm:^1.1.3"
babel-loader: "npm:^8.2.2"
Expand Down Expand Up @@ -7450,18 +7450,6 @@ __metadata:
languageName: node
linkType: hard

"@uswds/uswds@npm:^3.8.1":
version: 3.8.1
resolution: "@uswds/uswds@npm:3.8.1"
dependencies:
classlist-polyfill: "npm:1.2.0"
object-assign: "npm:4.1.1"
receptor: "npm:1.0.0"
resolve-id-refs: "npm:0.1.0"
checksum: 10/69859ff4c2da126a425b21fc7346023c793ba0fc517a3c52ff23f9466e8c45e4a0b8a534997f15a9611ee525b639000213b045242cf577e3e31a9f131810a47e
languageName: node
linkType: hard

"@uswds/uswds@npm:^3.9.0":
version: 3.9.0
resolution: "@uswds/uswds@npm:3.9.0"
Expand Down Expand Up @@ -9390,13 +9378,6 @@ __metadata:
languageName: node
linkType: hard

"classlist-polyfill@npm:1.2.0":
version: 1.2.0
resolution: "classlist-polyfill@npm:1.2.0"
checksum: 10/dd7211ca016eaa1fa1ae3f7c65680fce8815b1e5b7541b524c3762ab98ce73e1a782cf71819a07e1e2614385f082bbd0285b1a34f389daf16bed23a11efe06a1
languageName: node
linkType: hard

"classnames@npm:^2.2.6, classnames@npm:^2.3.1":
version: 2.3.1
resolution: "classnames@npm:2.3.1"
Expand Down
Loading