-
Notifications
You must be signed in to change notification settings - Fork 40
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
Conversation
There was a problem hiding this 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.
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. |
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:
Alert Banner renders a
<div>
with the ARIAstatus
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 thecustomIcon
slot, or hidden entirely usingisIconHidden
.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 settingisCloseable
tofalse
.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 thebetaLabel
prop: