You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: libs/components/src/async-actions/in-forms.stories.mdx
+28-21
Original file line number
Diff line number
Diff line change
@@ -4,28 +4,32 @@ import { Meta } from "@storybook/addon-docs";
4
4
5
5
# Async Actions In Forms
6
6
7
-
These directives should be used when building forms with buttons that trigger long running tasks in the background,
8
-
eg. Submit or Delete buttons. For buttons that are not associated with a form see [Standalone Async Actions](?path=/story/component-library-async-actions-standalone-documentation--page).
7
+
These directives should be used when building forms with buttons that trigger long running tasks in
8
+
the background, eg. Submit or Delete buttons. For buttons that are not associated with a form see
Copy file name to clipboardexpand all lines: libs/components/src/async-actions/standalone.stories.mdx
+12-10
Original file line number
Diff line number
Diff line change
@@ -4,23 +4,25 @@ import { Meta } from "@storybook/addon-docs";
4
4
5
5
# Standalone Async Actions
6
6
7
-
These directives should be used when building a standalone button that triggers a long running task in the background,
8
-
eg. Refresh buttons. For non-submit buttons that are associated with forms see [Async Actions In Forms](?path=/story/component-library-async-actions-in-forms-documentation--page).
7
+
These directives should be used when building a standalone button that triggers a long running task
8
+
in the background, eg. Refresh buttons. For non-submit buttons that are associated with forms see
9
+
[Async Actions In Forms](?path=/story/component-library-async-actions-in-forms-documentation--page).
9
10
10
11
## Usage
11
12
12
13
Adding async actions to standalone buttons requires the following 2 steps
13
14
14
15
### 1. Add a handler to your `Component`
15
16
16
-
A handler is a function that returns a promise or an observable. Functions that return `void` are also supported which is
17
-
useful because `return;` can be used to abort an action.
17
+
A handler is a function that returns a promise or an observable. Functions that return `void` are
18
+
also supported which is useful because `return;` can be used to abort an action.
18
19
19
-
**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler needs access to the parent
20
-
component using the variable `this`.
20
+
**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler
21
+
needs access to the parent component using the variable `this`.
21
22
22
-
**NOTE:** Handlers do not need to check if any previous requests have finished because the directives have built in protection against
23
-
users attempting to trigger new actions before the previous ones have finished.
23
+
**NOTE:** Handlers do not need to check if any previous requests have finished because the
24
+
directives have built in protection against users attempting to trigger new actions before the
25
+
previous ones have finished.
24
26
25
27
#### Example using promises
26
28
@@ -48,8 +50,8 @@ class Component {
48
50
49
51
Add the `bitAction` directive and supply the handler defined in step 1.
50
52
51
-
**NOTE:** The `directive` is defined using the input syntax: `[input]="handler"`.
52
-
This is different from how click handlers are usually defined with the output syntax `(click)="handler()"`.
53
+
**NOTE:** The `directive` is defined using the input syntax: `[input]="handler"`. This is different
54
+
from how click handlers are usually defined with the output syntax `(click)="handler()"`.
53
55
54
56
**NOTE:**`[bitAction]` is used instead of `(click)`. Using both is not supported.
Copy file name to clipboardexpand all lines: libs/components/src/stories/button-docs.stories.mdx
+45-26
Original file line number
Diff line number
Diff line change
@@ -4,29 +4,53 @@ import { Meta, Story } from "@storybook/addon-docs";
4
4
5
5
# Button
6
6
7
-
Use buttons for actions in forms, dialogs, and more with support for style, block, icon, and state.
7
+
Buttons are interactive elements that can be triggered using a mouse, keyboard, or touch. They are
8
+
used to indicate actions that can be performed by a user such as submitting a form.
8
9
9
-
For pairings in the bottom left corner of a page or component, the `primary` call to action will go on the left side of a button group with the `secondary` call to action option on the left.
10
+
## Guidelines
10
11
11
-
Pairings in the top right corner of a page, should have the `primary` call to action on the right.
12
+
### Choosing the `<a>` or `<button>`
12
13
13
-
Groups of buttons should have 1rem of spacing between them.
14
-
15
-
## Choosing the `<a>` or `<button>`
16
-
17
-
Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action the button takes:
14
+
Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action the button
15
+
takes:
18
16
19
17
- If navigating to a new page, use `<a>`
20
18
- If taking an action on the current page use `<button>`
21
19
- If the button launches a dialog, use `<button>`
22
20
23
-
##Submit and async actions
21
+
### Groups
24
22
25
-
Both submit and async action buttons use a loading button state while an action is taken.
23
+
Groups of buttons should be seperated by a `0.5` rem gap. Usually acomplished by using the
24
+
`tw-gap-2` class in the button group container.
26
25
27
-
<Storyid="component-library-button--loading" />
26
+
Groups within page content, dialog footers or forms should have the `primary` call to action placed
27
+
to left. Groups in headers and navigational areas should have the `primary` call to action on the
28
+
right.
29
+
30
+
## Accessibility
31
+
32
+
Please follow these guidelines to ensure that buttons are accessible to all users.
33
+
34
+
### Color contrast
35
+
36
+
All button styles are WCAG compliant when displayed on `background` and `background-alt` colors. To
37
+
use a button on a different background, double check that the color contrast is sufficient in both
38
+
the light and dark themes.
39
+
40
+
### Loading Buttons
41
+
42
+
Include an `aria-label` attribute that defaults to “loading” but can be configurable per
43
+
implementation. On click, the screen reader should announce the `aria-label`. Once the action is
44
+
compelted, use another messaging pattern to alert the user that the action is complete (example:
45
+
success toast).
28
46
29
-
If your button is preforming a long running task in the background like a server API call, be sure to review the [Async Actions Directive](https://components.bitwarden.com/?path=/story/component-library-async-actions-overview--page).
47
+
### Submit and async actions
48
+
49
+
Both submit and async action buttons use a loading button state while an action is taken. If your
50
+
button is preforming a long running task in the background like a server API call, be sure to review
51
+
the [Async Actions Directive](?path=/story/component-library-async-actions-overview--page).
52
+
53
+
<Storyid="component-library-button--loading" />
30
54
31
55
## Styles
32
56
@@ -36,13 +60,16 @@ There are 3 main styles for the button: Primary, Secondary, and Danger.
36
60
37
61
<Storyid="component-library-button--primary" />
38
62
39
-
Use the primary button styling for all Primary call to actions. An action is "primary" if it relates to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
63
+
Use the primary button styling for all Primary call to actions. An action is "primary" if it relates
64
+
to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
40
65
41
66
### Secondary
42
67
43
68
<Storyid="component-library-button--secondary" />
44
69
45
-
The secondary styling should be used for secondary calls to action. An action is "secondary" if it relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each other; however, generally there should only be 1 or 2 calls to action per page.
70
+
The secondary styling should be used for secondary calls to action. An action is "secondary" if it
71
+
relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each
72
+
other; however, generally there should only be 1 or 2 calls to action per page.
46
73
47
74
### Danger
48
75
@@ -52,22 +79,14 @@ Use the danger styling only in settings when the user may preform a permanent ac
52
79
53
80
## Disabled UI
54
81
55
-
Both the disabled and loading states use the default state’s color with a 60% opacity or `tw-opacity-60`.
82
+
Both the disabled and loading states use the default state’s color with a 60% opacity or
83
+
`tw-opacity-60`.
56
84
57
85
<Storyid="component-library-button--disabled" />
58
86
59
87
## Block
60
88
61
-
Typically button widths expand with their text. In some causes though buttons may need to be block where the width is fixed and the text wraps to 2 lines if exceeding the button’s width.
89
+
Typically button widths expand with their text. In some causes though buttons may need to be block
90
+
where the width is fixed and the text wraps to 2 lines if exceeding the button’s width.
62
91
63
92
<Storyid="component-library-button--block" />
64
-
65
-
## Accessibility
66
-
67
-
### Color contrast
68
-
69
-
All button styles are WCAG compliant when displayed on `background` and `background-alt` colors. To use a button on a different background, double check that the color contrast is sufficient in both the light and dark themes.
70
-
71
-
### Loading Buttons
72
-
73
-
Include an `aria-label` attribute that defaults to “loading” but can be configurable per implementation. On click, the screen reader should announce the `aria-label`. Once the action is compelted, use another messaging pattern to alert the user that the action is complete (example: success toast).
Copy file name to clipboardexpand all lines: libs/components/src/stories/icons.stories.mdx
+5-1
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,11 @@ import { Meta } from "@storybook/addon-docs/";
6
6
7
7
# Iconography
8
8
9
-
Avoid using icons to convey information unless paired with meaningful, clear text. If an icon must be used and text cannot be displayed visually along with the icon, use an `aria-label` to provide the text to screen readers, and a `title` attribute to provide the text visually through a tool tip. Note: this pattern should only be followed for very common iconography such as, a settings cog icon or an options menu icon.
9
+
Avoid using icons to convey information unless paired with meaningful, clear text. If an icon must
10
+
be used and text cannot be displayed visually along with the icon, use an `aria-label` to provide
11
+
the text to screen readers, and a `title` attribute to provide the text visually through a tool tip.
12
+
Note: this pattern should only be followed for very common iconography such as, a settings cog icon
0 commit comments