Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-21 11:35:34 +01:00
Code Issues Projects Releases Wiki Activity

[PM-2136] Change banner button to use bitLink (#5378)

Browse Source
This commit is contained in:
Oscar Hinton 2023-05-05 17:13:54 +02:00 committed by GitHub
parent 2ae93f1fd1
commit d8b8bf5218
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
libs/components/src/banner/banner.stories.ts
View File

@ -3,6 +3,7 @@ import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { IconButtonModule } from "../icon-button";
import { LinkModule } from "../link";
import { SharedModule } from "../shared/shared.module";
import { I18nMockService } from "../utils/i18n-mock.service";
@ -13,7 +14,7 @@ export default {
component: BannerComponent,
decorators: [
moduleMetadata({
imports: [SharedModule, IconButtonModule],
imports: [SharedModule, IconButtonModule, LinkModule],
providers: [
{
provide: I18nService,
@ -45,7 +46,7 @@ const Template: Story<BannerComponent> = (args: BannerComponent) => ({
template: `
<bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">
Content Really Long Text Lorem Ipsum Ipsum Ipsum
<button>Button</button>
<button bitLink linkType="contrast">Button</button>
</bit-banner>
`,
});

18
libs/components/src/stories/banner-docs.stories.mdx
View File

@ -4,15 +4,16 @@ import { Meta, Story } from "@storybook/addon-docs";
# Banner
Banners are used for important communication with the user that needs to be seen right away, but has little effect on the experience. Banners appear at the top of the user's screen on page load and persist across all pages a user navigates to.
- They should always be dismissable and never use a timeout. If a user dismisses a banner, it should not reappear during that same active session.
- Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their effectiveness may decrease if too many are used.
Banners are used for important communication with the user that needs to be seen right away, but has little effect on
the experience. Banners appear at the top of the user's screen on page load and persist across all pages a user
navigates to.
- They should always be dismissable and never use a timeout. If a user dismisses a banner, it should not reappear
during that same active session.
- Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their effectiveness may
decrease if too many are used.
- Avoid stacking multiple banners.
- Banners support a button link (text button).
- Banners supports buttons and anchors using [bitLink](?path=/story/component-library-link--anchors).
## Types
@ -46,4 +47,5 @@ Rarely used, but may be used to alert users over critical messages or very outda
## Accessibility
Include `role="status" aria-live="polite"` attributes to ensure screen readers announce the content prior to the test of the page.
Dialogs sets the `role="status"` and `aria-live="polite"` attributes to ensure screen readers announce the content
prior to the test of the page. This behaviour can be disabled by setting `[useAlertRole]="false"`.