Skip to content

Web components : Add usa-alert component #271

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
ethangardner merged 12 commits into from
Jun 3, 2026
Merged

Web components : Add usa-alert component #271

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ac03c1c
Move sass to devDeps, fix banner toggle, spacing
ericsorenson May 14, 2026
c779e35
Merge branch 'develop' into develop
ethangardner May 15, 2026
051da3b
Merge remote-tracking branch 'upstream/develop' into develop
ericsorenson May 16, 2026
a2f2fa5
Add usa-alert component
ericsorenson May 18, 2026
5f50de2
Use updateComplete helper in usa-alert tests
ericsorenson May 19, 2026
98cdc2d
Simplify .usa-alert--slim left padding calc
ericsorenson May 19, 2026
b30cbf9
Use private #role getter and remove aria-hidden
ericsorenson May 19, 2026
be7808f
Delete add-usa-alert-component.md
ericsorenson May 21, 2026
9613a36
Remove 'private' modifier from private getter
ericsorenson Jun 3, 2026
637abff
Use CSS var for emergency text and rename field
ericsorenson Jun 3, 2026
044899a
Consolidate info status tests
ericsorenson Jun 3, 2026
e1abe06
Use usa-alert-close event for alerts
ericsorenson Jun 3, 2026
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
5 changes: 5 additions & 0 deletions .changeset/add-usa-alert-component.md
View file
Open in desktop
Comment thread
ethangardner marked this conversation as resolved.
Outdated
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@uswds/elements": minor
---

Add usa-alert component with support for info, warning, error, success, and emergency statuses. Includes slim, no-icon, and closeable variants.
5 changes: 5 additions & 0 deletions config/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ const entries: Array<Entry> = [
path: "src/components/usa-banner/index.ts",
sizeLimit: "10 kB",
},
{
name: "components/usa-alert",
path: "src/components/usa-alert/index.ts",
sizeLimit: "3 kB",
},
{
name: "components/usa-link",
path: "src/components/usa-link/index.js",
Expand Down
230 changes: 230 additions & 0 deletions custom-elements.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
"path": "src/components/index.ts",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "UsaAlert",
"declaration": {
"name": "UsaAlert",
"module": "src/components/index.ts"
}
},
{
"kind": "js",
"name": "UsaLink",
Expand All @@ -25,6 +33,228 @@
}
]
},
{
"kind": "javascript-module",
"path": "src/components/usa-alert/index.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "UsaAlert",
"cssProperties": [
{
"description": "Override background color.",
"name": "--usa-alert-background-color"
},
{
"description": "Override left border color.",
"name": "--usa-alert-border-color"
},
{
"description": "Override icon color.",
"name": "--usa-alert-icon-color"
},
{
"description": "Override icon size.",
"name": "--usa-alert-icon-size"
},
{
"description": "Override horizontal padding.",
"name": "--usa-alert-padding-x"
},
{
"description": "Override vertical padding.",
"name": "--usa-alert-padding-y"
},
{
"description": "Override font family.",
"name": "--usa-alert-font-family"
},
{
"description": "Override text color.",
"name": "--usa-alert-text-color"
}
],
"slots": [
{
"description": "The alert heading (use an h-element: h2, h3, etc.).",
"name": "headline"
},
{
"description": "Default slot for alert body content.",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "status",
"privacy": "public",
"type": {
"text": "AlertStatus"
},
"default": "\"info\"",
"attribute": "status",
"reflects": true
},
{
"kind": "field",
"name": "slim",
"privacy": "public",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "slim",
"reflects": true
},
{
"kind": "field",
"name": "noIcon",
"privacy": "public",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "no-icon",
"reflects": true
},
{
"kind": "field",
"name": "closeable",
"privacy": "public",
"type": {
"text": "boolean"
},
"default": "false",
"attribute": "closeable",
"reflects": true
},
{
"kind": "field",
"name": "closeLabel",
"privacy": "public",
"type": {
"text": "string"
},
"default": "\"Close alert\"",
"attribute": "close-label"
},
{
"kind": "field",
"name": "_visible",
"privacy": "public",
"type": {
"text": "boolean"
},
"default": "true",
"attribute": "_visible"
},
{
"kind": "field",
"name": "_role",
"type": {
"text": "string"
},
"privacy": "private",
"readonly": true
},
{
"kind": "method",
"name": "_handleClose",
"privacy": "private"
}
],
"events": [
{
"name": "close",
"type": {
"text": "CustomEvent"
},
"description": "Dispatched when the close button is clicked."
}
],
"attributes": [
{
"type": {
"text": "AlertStatus"
},
"description": "Determines the icon and border/background color.",
"name": "status",
"default": "\"info\"",
"fieldName": "status",
"propName": "status"
},
{
"type": {
"text": "boolean"
},
"description": "Displays the slim variation (smaller icon, no heading).",
"name": "slim",
"default": "false",
"fieldName": "slim",
"propName": "slim"
},
{
"type": {
"text": "boolean"
},
"description": "Hides the status icon.",
"name": "no-icon",
"default": "false",
"fieldName": "noIcon",
"propName": "noIcon"
},
{
"type": {
"text": "boolean"
},
"description": "Shows a close button.",
"name": "closeable",
"default": "false",
"fieldName": "closeable",
"propName": "closeable"
},
{
"type": {
"text": "string"
},
"description": "Aria-label for the close button. Defaults to \"Close alert\".",
"name": "close-label",
"default": "\"Close alert\"",
"fieldName": "closeLabel",
"propName": "closeLabel"
},
{
"name": "_visible",
"type": {
"text": "boolean"
},
"default": "true",
"fieldName": "_visible",
"propName": "_visible"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "usa-alert",
"customElement": true,
"summary": "Displays important messages to the user with contextual status styling."
}
],
"exports": [
{
"kind": "js",
"name": "UsaAlert",
"declaration": {
"name": "UsaAlert",
"module": "src/components/usa-alert/index.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/components/usa-banner/index.ts",
Expand Down
3 changes: 2 additions & 1 deletion src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { UsaAlert } from "./usa-alert";
import { UsaLink } from "./usa-link";
import { UsaBanner } from "./usa-banner";

export { UsaLink, UsaBanner };
export { UsaAlert, UsaLink, UsaBanner };
Loading