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

Storybook docs (#5552)

Browse Source 
* updated sort order

* Update preview.tsx

* Create avatar.mdx

Added avatar documentation based on Figma docs

* Added badge docs

* fixed typos

* added breadcrumb docs

* Added callout docs

* added color password docs

* Added dialog docs

* fixed typo

* Updated Dialogs docs

Added a dialogs.mdx page for general docs that apply to both main Dialogs and Simple Dialogs.

Updated the sub-docs pages

* Update simple-dialog.mdx

* Added documentation from Figma to Forms docs

* Create icon-button.mdx

* added link docs

* Added menu docs

* Added progress indicator docs

* Updated table docs

* Added tab docs

* Added toggle group docs

* Revert "Update preview.tsx"

This reverts commit 4671d9726a.

* added docs for appA11yTitle

* Fixed typos

* Update libs/components/src/link/link.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update libs/components/src/menu/menu.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Addressed feedback

* Addressed feedback on callout, menu, and progress

* moved stories mdx files to proper location

* Addressed feedback on dialogs.mdx

* Update libs/components/src/tabs/tabs.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Addressed feedback on Tabs

* ran prettier

* Fixed title formatting

* ran prettier

* Update libs/components/src/dialog/dialogs.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* ran prettier

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
This commit is contained in:
Danielle Flinn
2023-06-27 12:46:44 -07:00
committed by GitHub
parent 683b7fea77
commit 6ef6140b29
21 changed files with 936 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
libs/components/src/stories/forms.mdx
View File

@@ -1,51 +0,0 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
<Meta title="Component Library/Form" />
# Forms
Examples and usage guidelines for form control styles, layout options, and custom components for
creating a wide variety of forms.
## Overview
Component Library forms should always be built using [Angular Reactive Forms][reactive]. Please read
[ADR-0001][adr-0001] for a background to this decision. In practice this means that forms should
always use the native `form` element and bind a `formGroup`.
Forms consists of one or multiple sections, and ends with one or multiple buttons.
### Form Field
A form field is the most common section in a form. It consists of a label, control and a optional
hint.
<Story id="component-library-form-field--default" />
<Source id="component-library-form-field--default" />
### Radio group
A radio group is a form field that consists of a main label and multiple radio groups. Each group
consists of a label and a radio input.
#### Block
<Story id="component-library-form-radio-button--block" />
<Source id="component-library-form-radio-button--block" />
#### Inline
<Story id="component-library-form-radio-button--inline" />
<Source id="component-library-form-radio-button--inline" />
## Full Example
<Story id="component-library-form--full-example" />
<Source id="component-library-form--full-example" />
[reactive]: https://angular.io/guide/reactive-forms
[adr-0001]: https://contributing.bitwarden.com/architecture/adr/reactive-forms

49
libs/components/src/stories/input.mdx
View File

@@ -1,49 +0,0 @@
import { Meta } from "@storybook/addon-docs";
<Meta title="Component Library/Form/Input" />
# Input
`bitInput` is an Angular directive to be used on `<input>`, `<select>`, and `<textarea>` tags in
order to provide standardized TailwindCss styling, error handling, and more. It is meant to be used
within a `<bit-form-field>` custom component.
## Basic Usage Example
```html
<bit-form-field>
<bit-label>...</bit-label>
<input bitInput formControlName="..." />
<bit-hint>...</bit-hint>
</bit-form-field>
```
## Disabled `bitInput` and Error Handling
If you would like to be able to still show errors when an input is disabled for specific validation
scenarios, then set `[showErrorsWhenDisabled]="true"`
```html
<bit-form-field>
<bit-label>...</bit-label>
<input bitInput formControlName="..." [showErrorsWhenDisabled]="true" />
<bit-hint>...</bit-hint>
</bit-form-field>
```
**NOTE:** Disabling a FormControl removes validation errors so you must manually set the errors
after disabling:
```ts
get exampleFormCtrl(): FormControl {
return this.form.controls.exampleFormControl as FormControl;
}
...
this.exampleFormCtrl.setErrors({
error: {
message: this.i18nService.t("...", this.exampleFormCtrl.value),
},
});
```