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

[CL-372] Add required type attr to buttons in stories (#15892)

Browse Source
This commit is contained in:
Vicki League
2025-08-06 16:16:17 -04:00
committed by GitHub
parent 6ec0a61b7e
commit 8ae015f2d8
16 changed files with 132 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -78,16 +78,17 @@ type Story = StoryObj<DialogComponent & { title: string }>;
export const Default: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-dialog [dialogSize]="dialogSize" [title]="title" [subtitle]="subtitle" [loading]="loading" [disablePadding]="disablePadding">
<ng-container bitDialogTitle>
<span bitBadge variant="success">Foobar</span>
</ng-container>
<ng-container bitDialogContent>Dialog body text goes here.</ng-container>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary" [disabled]="loading">Save</button>
<button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
<button type="button" bitButton buttonType="primary" [disabled]="loading">Save</button>
<button type="button" bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
<button
type="button"
[disabled]="loading"
class="tw-ms-auto"
bitIconButton="bwi-trash"
@@ -142,7 +143,7 @@ export const Loading: Story = {
export const ScrollingContent: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-dialog title="Scrolling Example" [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
<span bitDialogContent>
Dialog body text goes here.<br />
@@ -152,8 +153,8 @@ export const ScrollingContent: Story = {
end of sequence!
</span>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary" [disabled]="loading">Save</button>
<button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
<button type="button" bitButton buttonType="primary" [disabled]="loading">Save</button>
<button type="button" bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
</ng-container>
</bit-dialog>
`,
@@ -166,7 +167,7 @@ export const ScrollingContent: Story = {
export const TabContent: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-dialog title="Tab Content Example" [dialogSize]="dialogSize" [disablePadding]="disablePadding">
<span bitDialogContent>
<bit-tab-group>
@@ -176,8 +177,8 @@ export const TabContent: Story = {
</bit-tab-group>
</span>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary" [disabled]="loading">Save</button>
<button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
<button type="button" bitButton buttonType="primary" [disabled]="loading">Save</button>
<button type="button" bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
</ng-container>
</bit-dialog>
`,
@@ -211,7 +212,7 @@ export const WithCards: Story = {
<h2 bitTypography="h6">
Foo
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
<button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
<bit-card>
<bit-form-field>
@@ -231,7 +232,7 @@ export const WithCards: Story = {
<h2 bitTypography="h6">
Bar
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
<button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
<bit-card>
<bit-form-field>
@@ -248,9 +249,10 @@ export const WithCards: Story = {
</bit-section>
</ng-container>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary" [disabled]="loading">Save</button>
<button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
<button type="button" bitButton buttonType="primary" [disabled]="loading">Save</button>
<button type="button" bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
<button
type="button"
[disabled]="loading"
class="tw-ms-auto"
bitIconButton="bwi-trash"

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

@@ -27,13 +27,13 @@ type Story = StoryObj<SimpleDialogComponent & { useDefaultIcon: boolean }>;
export const Default: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-simple-dialog>
<span bitDialogTitle>Alert Dialog</span>
<span bitDialogContent>Message Content</span>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button>
<button type="button" bitButton buttonType="primary">Yes</button>
<button type="button" bitButton buttonType="secondary">No</button>
</ng-container>
</bit-simple-dialog>
`,
@@ -43,14 +43,14 @@ export const Default: Story = {
export const CustomIcon: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-simple-dialog>
<i bitDialogIcon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
<span bitDialogTitle>Premium Subscription Available</span>
<span bitDialogContent> Message Content</span>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button>
<button type="button" bitButton buttonType="primary">Yes</button>
<button type="button" bitButton buttonType="secondary">No</button>
</ng-container>
</bit-simple-dialog>
`,
@@ -60,13 +60,13 @@ export const CustomIcon: Story = {
export const HideIcon: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-simple-dialog hideIcon>
<span bitDialogTitle>Premium Subscription Available</span>
<span bitDialogContent> Message Content</span>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button>
<button type="button" bitButton buttonType="primary">Yes</button>
<button type="button" bitButton buttonType="secondary">No</button>
</ng-container>
</bit-simple-dialog>
`,
@@ -76,7 +76,7 @@ export const HideIcon: Story = {
export const ScrollingContent: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-simple-dialog>
<span bitDialogTitle>Alert Dialog</span>
<span bitDialogContent>
@@ -87,8 +87,8 @@ export const ScrollingContent: Story = {
end of sequence!
</span>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button>
<button type="button" bitButton buttonType="primary">Yes</button>
<button type="button" bitButton buttonType="secondary">No</button>
</ng-container>
</bit-simple-dialog>
`,
@@ -101,13 +101,13 @@ export const ScrollingContent: Story = {
export const TextOverflow: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-simple-dialog>
<span bitDialogTitle>Alert Dialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialog</span>
<span bitDialogContent>Message Contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</span>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button>
<button type="button" bitButton buttonType="primary">Yes</button>
<button type="button" bitButton buttonType="secondary">No</button>
</ng-container>
</bit-simple-dialog>
`,