bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 06:13:38 +00:00
Code Issues Releases Wiki Activity

[PM-1913] Add base styling to dialog footer component (#5254)

Browse Source
This commit is contained in:
Oscar Hinton
2023-05-01 11:11:39 +02:00
committed by GitHub
parent 9a41d5dc6f
commit 01c1bd0710
7 changed files with 61 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
libs/components/src/dialog/dialog.service.stories.ts
View File

@@ -44,10 +44,10 @@ class StoryDialogComponent {
<br /> <br />
Animal: {{ animal }} Animal: {{ animal }}
</span> </span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2"> <ng-container bitDialogFooter>
<button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button> <button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button>
<button bitButton buttonType="secondary" bitDialogClose>Cancel</button> <button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
</div> </ng-container>
</bit-dialog> </bit-dialog>
`, `,
}) })

2
libs/components/src/dialog/dialog/dialog.component.html
View File

@@ -25,7 +25,7 @@
</div> </div>
<div <div
class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-p-4" class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-p-4"
> >
<ng-content select="[bitDialogFooter]"></ng-content> <ng-content select="[bitDialogFooter]"></ng-content>
</div> </div>

50
libs/components/src/dialog/dialog/dialog.stories.ts
View File

@@ -55,7 +55,7 @@ const Template: Story<DialogComponent> = (args: DialogComponent) => ({
<bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding"> <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
<span bitDialogTitle>{{title}}</span> <span bitDialogTitle>{{title}}</span>
<span bitDialogContent>Dialog body text goes here.</span> <span bitDialogContent>Dialog body text goes here.</span>
<div bitDialogFooter class="tw-flex tw-items-center tw-flex-row tw-gap-2"> <ng-container bitDialogFooter>
<button bitButton buttonType="primary">Save</button> <button bitButton buttonType="primary">Save</button>
<button bitButton buttonType="secondary">Cancel</button> <button bitButton buttonType="secondary">Cancel</button>
<button <button
@@ -65,7 +65,7 @@ const Template: Story<DialogComponent> = (args: DialogComponent) => ({
size="default" size="default"
title="Delete" title="Delete"
aria-label="Delete"></button> aria-label="Delete"></button>
</div> </ng-container>
</bit-dialog> </bit-dialog>
`, `,
}); });
@@ -98,18 +98,18 @@ const TemplateScrolling: Story<DialogComponent> = (args: DialogComponent) => ({
props: args, props: args,
template: ` template: `
<bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding"> <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
<span bitDialogTitle>Scrolling Example</span> <span bitDialogTitle>Scrolling Example</span>
<span bitDialogContent> <span bitDialogContent>
Dialog body text goes here.<br> Dialog body text goes here.<br>
<ng-container *ngFor="let _ of [].constructor(100)"> <ng-container *ngFor="let _ of [].constructor(100)">
repeating lines of characters <br> repeating lines of characters <br>
</ng-container>
end of sequence!
</span>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary">Save</button>
<button bitButton buttonType="secondary">Cancel</button>
</ng-container> </ng-container>
end of sequence!
</span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
<button bitButton buttonType="primary">Save</button>
<button bitButton buttonType="secondary">Cancel</button>
</div>
</bit-dialog> </bit-dialog>
`, `,
}); });
@@ -123,18 +123,18 @@ const TemplateTabbed: Story<DialogComponent> = (args: DialogComponent) => ({
props: args, props: args,
template: ` template: `
<bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding"> <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
<span bitDialogTitle>Tab Content Example</span> <span bitDialogTitle>Tab Content Example</span>
<span bitDialogContent> <span bitDialogContent>
<bit-tab-group> <bit-tab-group>
<bit-tab label="First Tab">First Tab Content</bit-tab> <bit-tab label="First Tab">First Tab Content</bit-tab>
<bit-tab label="Second Tab">Second Tab Content</bit-tab> <bit-tab label="Second Tab">Second Tab Content</bit-tab>
<bit-tab label="Third Tab">Third Tab Content</bit-tab> <bit-tab label="Third Tab">Third Tab Content</bit-tab>
</bit-tab-group> </bit-tab-group>
</span> </span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2"> <ng-container bitDialogFooter>
<button bitButton buttonType="primary">Save</button> <button bitButton buttonType="primary">Save</button>
<button bitButton buttonType="secondary">Cancel</button> <button bitButton buttonType="secondary">Cancel</button>
</div> </ng-container>
</bit-dialog> </bit-dialog>
`, `,
}); });

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

@@ -5,7 +5,7 @@
<div bitDialogContent>{{ content }}</div> <div bitDialogContent>{{ content }}</div>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2"> <ng-container bitDialogFooter>
<button <button
type="button" type="button"
bitButton bitButton
@@ -24,5 +24,5 @@
> >
{{ cancelButtonText }} {{ cancelButtonText }}
</button> </button>
</div> </ng-container>
</bit-simple-dialog> </bit-simple-dialog>

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

@@ -44,10 +44,10 @@ class StoryDialogComponent {
<br /> <br />
Animal: {{ animal }} Animal: {{ animal }}
</span> </span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2"> <ng-container bitDialogFooter>
<button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button> <button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button>
<button bitButton buttonType="secondary" bitDialogClose>Cancel</button> <button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
</div> </ng-container>
</bit-simple-dialog> </bit-simple-dialog>
`, `,
}) })

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

@@ -16,7 +16,9 @@
<div class="tw-overflow-y-auto tw-px-4 tw-pt-2 tw-pb-4 tw-text-center tw-text-base"> <div class="tw-overflow-y-auto tw-px-4 tw-pt-2 tw-pb-4 tw-text-center tw-text-base">
<ng-content select="[bitDialogContent]"></ng-content> <ng-content select="[bitDialogContent]"></ng-content>
</div> </div>
<div class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-p-4"> <div
class="tw-flex tw-flex-row tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-p-4"
>
<ng-content select="[bitDialogFooter]"></ng-content> <ng-content select="[bitDialogFooter]"></ng-content>
</div> </div>
</div> </div>

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

@@ -26,12 +26,12 @@ const Template: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) =>
props: args, props: args,
template: ` template: `
<bit-simple-dialog> <bit-simple-dialog>
<span bitDialogTitle>Alert Dialog</span> <span bitDialogTitle>Alert Dialog</span>
<span bitDialogContent>Message Content</span> <span bitDialogContent>Message Content</span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2"> <ng-container bitDialogFooter>
<button bitButton buttonType="primary">Yes</button> <button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button> <button bitButton buttonType="secondary">No</button>
</div> </ng-container>
</bit-simple-dialog> </bit-simple-dialog>
`, `,
}); });
@@ -42,13 +42,13 @@ const TemplateWithIcon: Story<SimpleDialogComponent> = (args: SimpleDialogCompon
props: args, props: args,
template: ` template: `
<bit-simple-dialog> <bit-simple-dialog>
<i bitDialogIcon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i> <i bitDialogIcon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
<span bitDialogTitle>Premium Subscription Available</span> <span bitDialogTitle>Premium Subscription Available</span>
<span bitDialogContent> Message Content</span> <span bitDialogContent> Message Content</span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2"> <ng-container bitDialogFooter>
<button bitButton buttonType="primary">Yes</button> <button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button> <button bitButton buttonType="secondary">No</button>
</div> </ng-container>
</bit-simple-dialog> </bit-simple-dialog>
`, `,
}); });
@@ -59,19 +59,19 @@ const TemplateScroll: Story<SimpleDialogComponent> = (args: SimpleDialogComponen
props: args, props: args,
template: ` template: `
<bit-simple-dialog> <bit-simple-dialog>
<span bitDialogTitle>Alert Dialog</span> <span bitDialogTitle>Alert Dialog</span>
<span bitDialogContent> <span bitDialogContent>
Message Content Message Content
Message text goes here.<br> Message text goes here.<br>
<ng-container *ngFor="let _ of [].constructor(100)"> <ng-container *ngFor="let _ of [].constructor(100)">
repeating lines of characters <br> repeating lines of characters <br>
</ng-container> </ng-container>
end of sequence! end of sequence!
</span> </span>
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2"> <ng-container bitDialogFooter>
<button bitButton buttonType="primary">Yes</button> <button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button> <button bitButton buttonType="secondary">No</button>
</div> </ng-container>
</bit-simple-dialog> </bit-simple-dialog>
`, `,
}); });