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

[EC-556] refactor cl button (#3537)

Browse Source 
* [EC-556] feat: convert button into component

* [EC-556] feat: implement loading state

* [EC-556] feat: remove loading from submit button

* [EC-556] fix: add missing import

* [EC-556] fix: disabling button using regular attribute

* [EC-556] fix: missing loading input in story templates

* [EC-556] feat: remove and replace submit button

* Fix packaging on Build Web workflow (#3613)

(cherry picked from commit 67c447d54c)

* [EC-556] fix: replaced buttons should be primary

Co-authored-by: Vince Grassia <593223+vgrassia@users.noreply.github.com>
This commit is contained in:
Andreas Coroiu
2022-09-27 11:25:53 +02:00
committed by GitHub
parent b5de573497
commit cd7c9bfd9f
26 changed files with 181 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,14 @@
import { Meta, Story } from "@storybook/angular";
import { ButtonDirective } from "./button.directive";
import { ButtonComponent } from "./button.component";
export default {
title: "Component Library/Button",
component: ButtonDirective,
component: ButtonComponent,
args: {
buttonType: "primary",
disabled: false,
loading: false,
},
parameters: {
design: {
@@ -16,11 +18,11 @@ export default {
},
} as Meta;
const Template: Story<ButtonDirective> = (args: ButtonDirective) => ({
const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
props: args,
template: `
<button bitButton [buttonType]="buttonType" [block]="block">Button</button>
<a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">Link</a>
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Button</button>
<a bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">Link</a>
`,
});
@@ -39,21 +41,50 @@ Danger.args = {
buttonType: "danger",
};
const DisabledTemplate: Story = (args) => ({
const AllStylesTemplate: Story = (args) => ({
props: args,
template: `
<button bitButton disabled buttonType="primary" class="tw-mr-2">Primary</button>
<button bitButton disabled buttonType="secondary" class="tw-mr-2">Secondary</button>
<button bitButton disabled buttonType="danger" class="tw-mr-2">Danger</button>
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
`,
});
export const Disabled = DisabledTemplate.bind({});
Disabled.args = {
size: "small",
export const Loading = AllStylesTemplate.bind({});
Loading.args = {
disabled: false,
loading: true,
};
const BlockTemplate: Story<ButtonDirective> = (args: ButtonDirective) => ({
export const Disabled = AllStylesTemplate.bind({});
Disabled.args = {
disabled: true,
loading: false,
};
const DisabledWithAttributeTemplate: Story = (args) => ({
props: args,
template: `
<ng-container *ngIf="disabled">
<button bitButton disabled [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
<button bitButton disabled [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
<button bitButton disabled [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
</ng-container>
<ng-container *ngIf="!disabled">
<button bitButton [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
<button bitButton [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
<button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
</ng-container>
`,
});
export const DisabledWithAttribute = DisabledWithAttributeTemplate.bind({});
DisabledWithAttribute.args = {
disabled: true,
loading: false,
};
const BlockTemplate: Story<ButtonComponent> = (args: ButtonComponent) => ({
props: args,
template: `
<span class="tw-flex">