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.

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

va-alert: force status to be defined #932

Merged
merged 5 commits into from
Oct 31, 2023
Merged

Conversation

powellkerry
Copy link
Contributor

@powellkerry powellkerry commented Oct 30, 2023

Chromatic

https://61262-require-alert-icon--60f9b557105290003b387cd5.chromatic.com

Description

Update to ensure that there is always an icon/status for the alert and prevent the alert from rendering as text on a grey background.

  • Update Prop definition to list allowed statuses for alert
  • Add code to default to 'info' for status if the value is null or not found in the list of supported statuses
  • Add tests for this logic
  • Add story for USWDS to show "backgroundOnly" version

Closes department-of-veterans-affairs/va.gov-team#61262

Testing done

  • E2E tests
  • Local testing with Chrome, Firefox, Edge, and Safari

Screenshots

Before:
Screenshot 2023-10-30 at 11 18 43 AM

After:
Screenshot 2023-10-30 at 11 17 39 AM

Acceptance criteria

  • [ ]

Definition of done

  • Documentation has been updated, if applicable
  • A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

@powellkerry powellkerry added the minor For a minor Semantic Version change label Oct 30, 2023
@powellkerry powellkerry requested a review from a team as a code owner October 30, 2023 17:20
* */
@Prop() type?: string = 'info';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changed this prop in the banner component because it gets passed as a status to alert and there were conflicting types between the 'string' definition here and the predefined list of the alert.

* */
@Prop() type?: string = 'info';
@Prop() type?: "info" | "warning" | "error" | "success" | "continue" = 'info';
Copy link
Contributor

Choose a reason for hiding this comment

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

I like this update. Storybook handles displaying these options really nice:
Screenshot 2023-10-30 at 2 04 19 PM

it('should set status to info if null', async () => {
const page = await newE2EPage();
await page.setContent(
'<va-alert uswds><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
Copy link
Contributor

Choose a reason for hiding this comment

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

If these are tests specifically for the uswds variation, can we mention that in the test name like the others? Also, should any of these tests be added for the v1 version too?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added and updated

@powellkerry powellkerry merged commit f58ac8b into main Oct 31, 2023
6 checks passed
@powellkerry powellkerry deleted the 61262-require-alert-icon branch October 31, 2023 15:15
@jamigibbs jamigibbs added patch Patch change in semantic versioning and removed minor For a minor Semantic Version change labels Nov 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
patch Patch change in semantic versioning
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Design System Staging Review - Accessibility Feedback - Converted components: Alert and Additional info
2 participants