mirror of
https://github.com/bitwarden/browser
synced 2026-01-05 18:13:26 +00:00
6ef6140b29
* 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>
68 lines
1.9 KiB
Plaintext
68 lines
1.9 KiB
Plaintext
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
|
||
|
||
import * as stories from "./avatar.stories";
|
||
|
||
<Meta of={stories} />
|
||
|
||
# Avatar
|
||
|
||
Avatars display a unique color that helps a user visually recognize their logged in account.
|
||
|
||
A variance in color across the avatar component is important as it is used in Account Switching as a
|
||
visual indicator to recognize which of a personal or work account a user is logged into.
|
||
|
||
<Primary />
|
||
<Controls />
|
||
|
||
## Size
|
||
|
||
### Large: 64px
|
||
|
||
<Story of={stories.Large} />
|
||
|
||
### Default: 48px
|
||
|
||
<Story of={stories.Default} />
|
||
|
||
### Small 28px
|
||
|
||
<Story of={stories.Small} />
|
||
|
||
## Background color
|
||
|
||
The Background color can be set 3 ways. The color is generated using the following order of
|
||
priority:
|
||
|
||
- Color
|
||
- ID
|
||
- Text, usually set to the user's Name field
|
||
|
||
<Story of={stories.ColorByText} />
|
||
Use the user 'ID' field if `Name` is not defined.
|
||
<Story of={stories.ColorByID} />
|
||
|
||
## Outline
|
||
|
||
If the avatar is displayed on one of the theme's `background` color variables or is interactive,
|
||
display the avatar with a 1 pixel `secondary-500` border to meet WCAG AA graphic contrast guidelines
|
||
for interactive elements.
|
||
|
||
<Story of={stories.Border} />
|
||
|
||
## Avatar as a button
|
||
|
||
The Avatar can be used as a button.
|
||
|
||
Typically this is only in the navigation on client apps where account switching is used and in the
|
||
web app for the account menu indicator.
|
||
|
||
When the avatar is used as a button, the following states should be used:
|
||
|
||
`TODO:` [Jira add stories](https://bitwarden.atlassian.net/browse/CL-101) for button avatars.
|
||
[See Figma](https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?type=design&node-id=9730-31746&mode=design&t=IjDIHDb6FZl6bUQW-4)
|
||
|
||
## Accessibility
|
||
|
||
Avatar background color should have 3.1:1 contrast with it’s background; or include the
|
||
`secondary-500` border Avatar text should have 4.5:1 contrast with the avatar background color
|