bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-13 14:53:33 +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

2
libs/components/src/anon-layout/anon-layout.stories.ts
View File

@@ -98,7 +98,7 @@ export default {
<div class="tw-font-bold tw-mb-2">
Secondary Projected Content (optional)
</div>
<button bitButton>Perform Action</button>
<button type="button" bitButton>Perform Action</button>
</div>
</auth-anon-layout>
`,

4
libs/components/src/async-actions/standalone.stories.ts
View File

@@ -13,10 +13,10 @@ import { AsyncActionsModule } from "./async-actions.module";
import { BitActionDirective } from "./bit-action.directive";
const template = /*html*/ `
<button bitButton buttonType="primary" [bitAction]="action" class="tw-me-2">
<button type="button" bitButton buttonType="primary" [bitAction]="action" class="tw-me-2">
Perform action {{ statusEmoji }}
</button>
<button bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;
<button type="button" bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;
@Component({
template,

58
libs/components/src/badge/badge.stories.ts
View File

@@ -47,7 +47,7 @@ export const Primary: Story = {
<span class="tw-text-main">link </span><a href="#" bitBadge ${formatArgsForCodeSnippet<BadgeComponent>(args)}>Badge</a>
</div>
<div class="tw-flex tw-items-center tw-gap-2">
<span class="tw-text-main">button </span><button bitBadge ${formatArgsForCodeSnippet<BadgeComponent>(args)}>Badge</button>
<span class="tw-text-main">button </span><button type="button" bitBadge ${formatArgsForCodeSnippet<BadgeComponent>(args)}>Badge</button>
</div>
</div>
`,
@@ -108,40 +108,40 @@ export const VariantsAndInteractionStates: Story = {
props: args,
template: /*html*/ `
<span class="tw-text-main tw-mx-1">Default</span>
<button class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
<button class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
<button class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<button type="button" class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button type="button" class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button type="button" class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
<button type="button" class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button type="button" class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button type="button" class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
<button type="button" class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Hover</span>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="success" [truncate]="truncate">Success</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="info" [truncate]="truncate">Info</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="success" [truncate]="truncate">Success</button>
<button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="info" [truncate]="truncate">Info</button>
<button type="button" class="tw-mx-1 tw-test-hover" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Focus Visible</span>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="success" [truncate]="truncate">Success</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="info" [truncate]="truncate">Info</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="success" [truncate]="truncate">Success</button>
<button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="info" [truncate]="truncate">Info</button>
<button type="button" class="tw-mx-1 tw-test-focus-visible" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Disabled</span>
<button disabled class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button disabled class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button disabled class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
<button disabled class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button disabled class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button disabled class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
<button disabled class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<button type="button" disabled class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
<button type="button" disabled class="tw-mx-1" bitBadge variant="secondary" [truncate]="truncate">Secondary</button>
<button type="button" disabled class="tw-mx-1" bitBadge variant="success" [truncate]="truncate">Success</button>
<button type="button" disabled class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button type="button" disabled class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button type="button" disabled class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
<button type="button" disabled class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
`,
}),
};

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

@@ -49,10 +49,10 @@ export const Base: Story = {
render: (args) => {
return {
props: args,
template: `
template: /*html*/ `
<bit-banner ${formatArgsForCodeSnippet<BannerComponent>(args)}>
Content Really Long Text Lorem Ipsum Ipsum Ipsum
<button bitLink linkType="secondary">Button</button>
<button type="button" bitLink linkType="secondary">Button</button>
</bit-banner>
`,
};

44
libs/components/src/button/button.stories.ts
View File

@@ -31,7 +31,7 @@ export const Default: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<button bitButton ${formatArgsForCodeSnippet<ButtonComponent>(args)}>Button</button>
<button type="button" bitButton ${formatArgsForCodeSnippet<ButtonComponent>(args)}>Button</button>
`,
}),
args: {
@@ -58,9 +58,9 @@ export const Small: Story = {
props: args,
template: /*html*/ `
<div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'primary'" [size]="size" [block]="block">Primary small</button>
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'secondary'" [size]="size" [block]="block">Secondary small</button>
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'danger'" [size]="size" [block]="block">Danger small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'primary'" [size]="size" [block]="block">Primary small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'secondary'" [size]="size" [block]="block">Secondary small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'danger'" [size]="size" [block]="block">Danger small</button>
</div>
`,
}),
@@ -86,15 +86,15 @@ export const Disabled: Story = {
export const DisabledWithAttribute: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
@if (disabled) {
<button bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
<button bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
<button bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
<button type="button" bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
<button type="button" bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
<button type="button" bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
} @else {
<button bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
<button bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
<button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
<button type="button" bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-me-2">Primary</button>
<button type="button" bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-me-2">Secondary</button>
<button type="button" bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-me-2">Danger</button>
}
`,
}),
@@ -107,12 +107,12 @@ export const DisabledWithAttribute: Story = {
export const Block: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<span class="tw-flex">
<button bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
<button type="button" bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
<a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ms-2">[block]="true" Link</a>
<button bitButton [buttonType]="buttonType" block class="tw-ms-2">block Button</button>
<button type="button" bitButton [buttonType]="buttonType" block class="tw-ms-2">block Button</button>
<a bitButton [buttonType]="buttonType" block href="#" class="tw-ms-2">block Link</a>
</span>
`,
@@ -125,16 +125,16 @@ export const Block: Story = {
export const WithIcon: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<span class="tw-flex tw-gap-8">
<div>
<button bitButton [buttonType]="buttonType" [block]="block">
<button type="button" bitButton [buttonType]="buttonType" [block]="block">
<i class="bwi bwi-plus tw-me-2"></i>
Button label
</button>
</div>
<div>
<button bitButton [buttonType]="buttonType" [block]="block">
<button type="button" bitButton [buttonType]="buttonType" [block]="block">
Button label
<i class="bwi bwi-plus tw-ms-2"></i>
</button>
@@ -149,11 +149,11 @@ export const InteractionStates: Story = {
props: args,
template: /*html*/ `
<div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Button</button>
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Button</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
</div>
<div class="tw-flex tw-gap-4 tw-items-center">
<a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Anchor</a>

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>
`,

22
libs/components/src/form-field/form-field.stories.ts
View File

@@ -346,11 +346,11 @@ export const ButtonInputGroup: Story = {
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</bit-label>
<button bitPrefix bitIconButton="bwi-star" [appA11yTitle]="'Favorite Label'"></button>
<button type="button" bitPrefix bitIconButton="bwi-star" [appA11yTitle]="'Favorite Label'"></button>
<input bitInput placeholder="Placeholder" />
<button bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
<button bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
<button bitSuffix bitIconButton="bwi-ellipsis-v" [appA11yTitle]="'Menu Label'"></button>
<button type="button" bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
<button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
<button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" [appA11yTitle]="'Menu Label'"></button>
</bit-form-field>
`,
}),
@@ -363,11 +363,11 @@ export const DisabledButtonInputGroup: Story = {
template: /*html*/ `
<bit-form-field>
<bit-label>Label</bit-label>
<button bitPrefix bitIconButton="bwi-star" disabled [appA11yTitle]="'Favorite Label'"></button>
<button type="button" bitPrefix bitIconButton="bwi-star" disabled [appA11yTitle]="'Favorite Label'"></button>
<input bitInput placeholder="Placeholder" disabled />
<button bitSuffix bitIconButton="bwi-eye" disabled [appA11yTitle]="'Hide Label'"></button>
<button bitSuffix bitIconButton="bwi-clone" disabled [appA11yTitle]="'Clone Label'"></button>
<button bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
<button type="button" bitSuffix bitIconButton="bwi-eye" disabled [appA11yTitle]="'Hide Label'"></button>
<button type="button" bitSuffix bitIconButton="bwi-clone" disabled [appA11yTitle]="'Clone Label'"></button>
<button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
</bit-form-field>
`,
@@ -382,9 +382,9 @@ export const PartiallyDisabledButtonInputGroup: Story = {
<bit-form-field>
<bit-label>Label</bit-label>
<input bitInput placeholder="Placeholder" disabled />
<button bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
<button bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
<button bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
<button type="button" bitSuffix bitIconButton="bwi-eye" [appA11yTitle]="'Hide Label'"></button>
<button type="button" bitSuffix bitIconButton="bwi-clone" [appA11yTitle]="'Clone Label'"></button>
<button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [appA11yTitle]="'Menu Label'"></button>
</bit-form-field>
`,
}),

6
libs/components/src/icon-button/icon-button.stories.ts
View File

@@ -29,7 +29,7 @@ export const Default: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<button ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
<button type="button" ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
`,
}),
};
@@ -76,7 +76,7 @@ export const NavContrast: Story = {
template: /*html*/ `
<div class="tw-bg-background-alt3 tw-p-6 tw-w-full tw-inline-block">
<!-- <div> used only to provide dark background color -->
<button ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
<button type="button" ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
</div>
`,
}),
@@ -91,7 +91,7 @@ export const Contrast: Story = {
template: /*html*/ `
<div class="tw-bg-primary-600 tw-p-6 tw-w-full tw-inline-block">
<!-- <div> used only to provide dark background color -->
<button ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
<button type="button" ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
</div>
`,
}),

22
libs/components/src/item/item.stories.ts
View File

@@ -66,7 +66,7 @@ export const Default: Story = {
props: args,
template: /*html*/ `
<bit-item>
<button bit-item-content>
<button type="button" bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
@@ -120,12 +120,12 @@ export const ContentTypes: Story = {
</a>
</bit-item>
<bit-item>
<button bit-item-content href="#">
<button type="button" bit-item-content href="#">
And I am a button.
</button>
</bit-item>
<bit-item>
<button bit-item-content disabled title="I'm a disabled button">
<button type="button" bit-item-content disabled title="I'm a disabled button">
And I am a disabled button.
</button>
</bit-item>
@@ -187,7 +187,7 @@ export const TextOverflowWrap: Story = {
const multipleActionListTemplate = /*html*/ `
<bit-item-group aria-label="Multiple Action List">
<bit-item>
<button bit-item-content>
<button type="button" bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
@@ -206,7 +206,7 @@ const multipleActionListTemplate = /*html*/ `
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<button type="button" bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
@@ -225,7 +225,7 @@ const multipleActionListTemplate = /*html*/ `
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<button type="button" bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
@@ -244,7 +244,7 @@ const multipleActionListTemplate = /*html*/ `
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<button type="button" bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
@@ -263,7 +263,7 @@ const multipleActionListTemplate = /*html*/ `
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<button type="button" bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
@@ -282,7 +282,7 @@ const multipleActionListTemplate = /*html*/ `
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<button type="button" bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
@@ -400,7 +400,7 @@ export const VirtualScrolling: Story = {
<cdk-virtual-scroll-viewport [itemSize]="54" class="tw-h-[500px]">
<bit-item-group aria-label="Virtual Scrolling">
<bit-item *cdkVirtualFor="let item of data">
<button bit-item-content>
<button type="button" bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
{{ item }}
</button>
@@ -429,7 +429,7 @@ export const WithoutBorderRadius: Story = {
template: /*html*/ `
<bit-layout>
<bit-item>
<button bit-item-content>
<button type="button" bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>

16
libs/components/src/link/link.stories.ts
View File

@@ -73,22 +73,22 @@ export const Buttons: Story = {
template: /*html*/ `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">Button</button>
<button type="button" bitLink [linkType]="linkType">Button</button>
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">
<button type="button" bitLink [linkType]="linkType">
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
Add Icon Button
</button>
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType">
<button type="button" bitLink [linkType]="linkType">
<i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
Chevron Icon Button
</button>
</div>
<div class="tw-block tw-p-2">
<button bitLink [linkType]="linkType" class="tw-text-sm">Small Button</button>
<button type="button" bitLink [linkType]="linkType" class="tw-text-sm">Small Button</button>
</div>
</div>
`,
@@ -134,7 +134,7 @@ export const Inline: Story = {
props: args,
template: /*html*/ `
<span class="tw-text-main">
On the internet paragraphs often contain <a bitLink href="#">inline links</a>, but few know that <button bitLink>buttons</button> can be used for similar purposes.
On the internet paragraphs often contain <a bitLink href="#">inline links</a>, but few know that <button type="button" bitLink>buttons</button> can be used for similar purposes.
</span>
`,
}),
@@ -147,10 +147,10 @@ export const Disabled: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<button bitLink disabled linkType="primary" class="tw-me-2">Primary</button>
<button bitLink disabled linkType="secondary" class="tw-me-2">Secondary</button>
<button type="button" bitLink disabled linkType="primary" class="tw-me-2">Primary</button>
<button type="button" bitLink disabled linkType="secondary" class="tw-me-2">Secondary</button>
<div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
<button bitLink disabled linkType="contrast">Contrast</button>
<button type="button" bitLink disabled linkType="contrast">Contrast</button>
</div>
`,
}),

2
libs/components/src/menu/menu.stories.ts
View File

@@ -57,7 +57,7 @@ export const ClosedMenu: Story = {
props: args,
template: /*html*/ `
<div class="tw-h-40">
<button bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
<button type="button" bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
</div>
<bit-menu #myMenu>

4
libs/components/src/navigation/nav-item.stories.ts
View File

@@ -86,9 +86,10 @@ export const WithoutRoute: Story = {
export const WithChildButtons: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-nav-item text="Hello World Very Cool World" [route]="['']" icon="bwi-collection-shared">
<button
type="button"
slot="end"
class="tw-ms-auto"
[bitIconButton]="'bwi-pencil-square'"
@@ -97,6 +98,7 @@ export const WithChildButtons: Story = {
aria-label="option 2"
></button>
<button
type="button"
slot="end"
class="tw-ms-auto"
[bitIconButton]="'bwi-check'"

2
libs/components/src/popover/popover.stories.ts
View File

@@ -68,7 +68,7 @@ const popoverContent = /*html*/ `
<li>Esse labore veniam tempora</li>
<li>Adipisicing elit ipsum <a href="#" bitLink>iustolaborum</a></li>
</ul>
<button bitButton class="tw-mt-4" (click)="triggerRef.closePopover()">Close</button>
<button type="button" bitButton class="tw-mt-4" (click)="triggerRef.closePopover()">Close</button>
</bit-popover>
`;

12
libs/components/src/section/section.stories.ts
View File

@@ -69,7 +69,7 @@ export const HeaderVariants: Story = {
<h2 bitTypography="h6">
Title with icon button suffix
</h2>
<button bitIconButton="bwi-refresh" size="small"></button>
<button type="button" bitIconButton="bwi-refresh" size="small"></button>
</bit-section-header>
`,
}),
@@ -88,7 +88,7 @@ export const HeaderEndSlotVariants: Story = {
<h2 bitTypography="h6">
Title with end slot icon button
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
<button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
`,
}),
@@ -103,7 +103,7 @@ export const HeaderWithPadding: Story = {
<h2 bitTypography="h6">
Card as immediate sibling
</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>
<h3 bitTypography="h3">bit-section-header has padding</h3>
@@ -114,7 +114,7 @@ export const HeaderWithPadding: Story = {
<h2 bitTypography="h6">
Card nested in immediate sibling
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
<button type="button" bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
<div>
<bit-card>
@@ -127,7 +127,7 @@ export const HeaderWithPadding: Story = {
<h2 bitTypography="h6">
Item as immediate sibling
</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-item>
<bit-item-content bitTypography="body1">bit-section-header has padding</bit-item-content>
@@ -138,7 +138,7 @@ export const HeaderWithPadding: Story = {
<h2 bitTypography="h6">
Item nested in immediate sibling
</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-item-group>
<bit-item>

4
libs/components/src/tabs/tabs.stories.ts
View File

@@ -153,7 +153,7 @@ export const PreserveContentTabs: Story = {
export const KeyboardNavigation: Story = {
render: (args) => ({
props: args,
template: `
template: /*html*/ `
<bit-tab-group label="Keyboard Navigation Tabs" class="tw-text-main">
<bit-tab label="Form Tab">
<p>
@@ -174,7 +174,7 @@ export const KeyboardNavigation: Story = {
<p>This tab has no focusable content, but the panel should still be focusable</p>
</bit-tab>
</bit-tab-group>
<button bitButton buttonType="primary" class="tw-mt-5">External Button</button>
<button type="button" bitButton buttonType="primary" class="tw-mt-5">External Button</button>
`,
}),
};