UNPKG

@n8d/htwoo-patterns

Version:

hTWOo Patterns to setup custom style guide

lab.n8d.studio/htwoo/

n8design/htwoo

57 lines (41 loc) • 1.97 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
--- title: Person Select Dropdown order: 31.2 --- # Person Select Dropdown A specialized dropdown component designed specifically for selecting people, featuring avatars and user information. ## Overview The person select dropdown extends the custom select dropdown with visual elements tailored for person selection. It includes avatars, names, and potentially additional user information like roles or departments. ## Usage Person select dropdowns should be used when: * Users need to select a person from a list * Visual identification through avatars is helpful * Additional person information assists in selection * The dropdown is part of assignment, mention, or people-focused functionality ## States * **Default** - Normal closed state * **Open** - When the dropdown menu is expanded * **Focus** - When the component has keyboard focus * **Disabled** - When the dropdown cannot be interacted with ## SCSS **Component Import** **SCSS Partial Location** ## CSS Classes * `.hoo-select-dropdown` - Base container for the dropdown * `.hoo-select-dropdown-person` - Modifier for person selection styling * `.hoo-select-dropdown-button` - The button that triggers the dropdown * `.hoo-select-dropdown-text` - The selected option text * `.hoo-select-dropdown-icon` - The dropdown indicator icon * `.hoo-select-dropdown-menu` - The dropdown menu container * `.hoo-select-dropdown-option` - Individual option in the dropdown * `.hoo-avatar` - Avatar component within the option * `.hoo-person-info` - Container for person text information * `.hoo-person-name` - Person's name * `.hoo-person-details` - Additional person details ## Accessibility * Use appropriate ARIA roles and attributes * Ensure keyboard navigation works for all options * Implement proper focus management * Support screen readers with appropriate person information * When disabled, include `aria-disabled="true"` * Ensure avatars have appropriate alt text or are marked as decorative