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

[fix] Alert component body to use a tag that allows more HTML tags #2502

Closed
vim-usds opened this issue Jul 19, 2023 · 4 comments · Fixed by #2504
Closed

[fix] Alert component body to use a tag that allows more HTML tags #2502

vim-usds opened this issue Jul 19, 2023 · 4 comments · Fixed by #2504
Labels
type: bug Something isn't working like it's supposed to

Comments

@vim-usds
Copy link

vim-usds commented Jul 19, 2023 •
edited
Loading

ReactUSWDS Version & USWDS Version:

  • "@trussworks/react-uswds": "^5.0.0",
  • "@uswds/uswds": "^3.5.0",

Describe the bug
The Alert component uses a <p> tag as the body and limiting what tags can be specified as children.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Alert component
  2. Inspect the HTML
  3. See that it's a p

Expected behavior
If the body was a <div> for instance, it would allow for more HTML tags as children (ie, bullets).
@vim-usds vim-usds added the type: bug Something isn't working like it's supposed to label Jul 19, 2023
@werdnanoslen
Copy link
Contributor

werdnanoslen commented Jul 19, 2023 •
edited
Loading

For precedent, USWDS uses an alert component with a list in the body in their Validation component: https://designsystem.digital.gov/components/validation/
image

@kleinschmidtj
Copy link
Contributor

@vim-usds It looks like if you pass in the validation prop to the <Alert> component, the <p> tag will no longer be used.

@werdnanoslen
Copy link
Contributor

oh nice, then maybe this issue could be scoped to just adding a story to the storybook covering that prop?

@kleinschmidtj
Copy link
Contributor

Yeah, that's a good idea. That would make the use of the prop more visible.

@kleinschmidtj kleinschmidtj mentioned this issue Jul 20, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug Something isn't working like it's supposed to
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Adds story using validation prop for Alert component trussworks/react-uswds
3 participants
@werdnanoslen @kleinschmidtj @vim-usds