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

Add alert banner component #497

Merged
merged 27 commits into from
Nov 20, 2024
Merged

Conversation

mkernohanbc
Copy link
Contributor

@mkernohanbc mkernohanbc commented Nov 12, 2024

This PR adds a new Alert Banner component and docs/examples on Storybook. Alert banners provide a system-level status message. They are intended to be placed at the top of an interface (above the header), and span the full width of the viewport:

Screenshot 2024-11-12 at 10 29 37

Alert Banner renders a <div> with the ARIA status role. The user can define a different ARIA role via the role prop.

Banner content is populated via the children slot.

The component includes 6 visual themes, set via the variant prop. Each theme applies a different colourway and sets a default icon. The theme icon can be overridden by passing an icon to the customIcon slot, or hidden entirely using isIconHidden.

By default, an alert banner is dismissable, and displays a close button on the right-hand side. The user can pass a callback function using the onClose prop to configure close behaviour. Alternatively, a banner can be made uncloseable by setting isCloseable to false.

The beta theme (intended for use when a product is under development) also renders an additional text label next to the theme icon. This label can be changed via the betaLabel prop:

Screenshot 2024-11-12 at 10 35 26

@mkernohanbc mkernohanbc added the enhancement New feature or request label Nov 12, 2024
@mkernohanbc mkernohanbc added this to the Components v0.5.0 milestone Nov 12, 2024
@mkernohanbc mkernohanbc self-assigned this Nov 12, 2024
Copy link
Contributor

@Supriya-Arora Supriya-Arora left a comment

Choose a reason for hiding this comment

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

We will be addressing component test cases in another PR.

@mkernohanbc mkernohanbc marked this pull request as ready for review November 19, 2024 19:24
@mkernohanbc
Copy link
Contributor Author

Note on 542538b: I've removed the 'beta' theme from this PR for now. That was WIP that's not ready for production. I've preserved that work on another branch to circle back on later, once I've talked it through with the designers a bit more.

@mkernohanbc mkernohanbc merged commit 819799e into bcgov:main Nov 20, 2024
2 checks passed
@mkernohanbc mkernohanbc deleted the feature/alert-banner branch December 11, 2024 19:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants