bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 15:23:33 +00:00
Code Issues Releases Wiki Activity

[SM-154] Add labelledby to dialogs (#3439)

Browse Source
This commit is contained in:
Oscar Hinton
2022-09-08 10:37:23 +02:00
committed by GitHub
parent 05ebca2c4c
commit cb31a71e8d
13 changed files with 239 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
libs/components/src/dialog/simple-dialog/simple-dialog.component.html
View File

@@ -6,14 +6,14 @@
<ng-template #elseBlock>
<i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
</ng-template>
<h2 class="tw-mb-0 tw-text-base tw-font-semibold">
<ng-content select="[bit-dialog-title]"></ng-content>
</h2>
<h1 bitDialogTitleContainer class="tw-mb-0 tw-text-base tw-font-semibold">
<ng-content select="[bitDialogTitle]"></ng-content>
</h1>
</div>
<div class="tw-overflow-y-auto tw-px-4 tw-pt-2 tw-pb-4 tw-text-center tw-text-base">
<ng-content select="[bit-dialog-content]"></ng-content>
<ng-content select="[bitDialogContent]"></ng-content>
</div>
<div class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-p-4">
<ng-content select="[bit-dialog-footer]"></ng-content>
<ng-content select="[bitDialogFooter]"></ng-content>
</div>
</div>

21
libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
View File

@@ -1,6 +1,7 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { ButtonModule } from "../../button";
import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
import { IconDirective, SimpleDialogComponent } from "./simple-dialog.component";
@@ -10,7 +11,7 @@ export default {
decorators: [
moduleMetadata({
imports: [ButtonModule],
declarations: [IconDirective],
declarations: [IconDirective, DialogTitleContainerDirective],
}),
],
parameters: {
@@ -25,9 +26,9 @@ const Template: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) =>
props: args,
template: `
<bit-simple-dialog>
<span bit-dialog-title>Alert Dialog</span>
<span bit-dialog-content>Message Content</span>
<div bit-dialog-footer class="tw-flex tw-flex-row tw-gap-2">
<span bitDialogTitle>Alert Dialog</span>
<span bitDialogContent>Message Content</span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button>
</div>
@@ -42,9 +43,9 @@ const TemplateWithIcon: Story<SimpleDialogComponent> = (args: SimpleDialogCompon
template: `
<bit-simple-dialog>
<i bit-dialog-icon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
<span bit-dialog-title>Premium Subscription Available</span>
<span bit-dialog-content> Message Content</span>
<div bit-dialog-footer class="tw-flex tw-flex-row tw-gap-2">
<span bitDialogTitle>Premium Subscription Available</span>
<span bitDialogContent> Message Content</span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button>
</div>
@@ -58,8 +59,8 @@ const TemplateScroll: Story<SimpleDialogComponent> = (args: SimpleDialogComponen
props: args,
template: `
<bit-simple-dialog>
<span bit-dialog-title>Alert Dialog</span>
<span bit-dialog-content>
<span bitDialogTitle>Alert Dialog</span>
<span bitDialogContent>
Message Content
Message text goes here.<br>
<ng-container *ngFor="let _ of [].constructor(100)">
@@ -67,7 +68,7 @@ const TemplateScroll: Story<SimpleDialogComponent> = (args: SimpleDialogComponen
</ng-container>
end of sequence!
</span>
<div bit-dialog-footer class="tw-flex tw-flex-row tw-gap-2">
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button>
</div>