bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-30 16:23:53 +00:00
Code Issues Releases Wiki Activity

updated size stories

Browse Source
This commit is contained in:
Bryan Cunningham
2026-01-09 14:45:00 -05:00
parent 1b45fdc192
commit 5ef8842e07
2 changed files with 46 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -160,22 +160,60 @@ export const SuccessGhost: Story = {
},
};
const sizeTemplate = /*html*/ `
<div class="tw-flex tw-flex-col tw-gap-8">
<div class="tw-flex tw-gap-4 tw-items-center">
<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="primaryOutline" [size]="size" [block]="block">Primary outline small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="primaryGhost" [size]="size" [block]="block">Primary ghost small</button>
</div>
<div class="tw-flex tw-gap-4 tw-items-center">
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block">Secondary small</button>
</div>
<div class="tw-flex tw-gap-4 tw-items-center">
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block">subtle small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block">subtle outline small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block">subtle ghost small</button>
</div>
<div class="tw-flex tw-gap-4 tw-items-center">
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block">Danger small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block">Danger outline small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block">Danger ghost small</button>
</div>
<div class="tw-flex tw-gap-4 tw-items-center">
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block">warning small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block">warning outline small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block">warning ghost small</button>
</div>
<div class="tw-flex tw-gap-4 tw-items-center">
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block">success small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block">success outline small</button>
<button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block">success ghost small</button>
</div>
</div>
`;
export const Small: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
<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>
`,
template: sizeTemplate,
}),
args: {
size: "small",
},
};
export const Large: Story = {
render: (args) => ({
props: args,
template: sizeTemplate,
}),
args: {
size: "large",
},
};
export const Loading: Story = {
...Default,
args: {

2
libs/components/tailwind.config.base.js
View File

@@ -72,7 +72,7 @@ module.exports = {
code: rgba("--color-text-code"),
},
background: {
DEFAULT: "var(--color-bg-primary)",
DEFAULT: rgba("--color-background"),
alt: rgba("--color-background-alt"),
alt2: rgba("--color-background-alt2"),
alt3: rgba("--color-background-alt3"),