Skip to content

Commit b59b007

Browse files
owjs3901owjs3901
committed
Update docs
1 parent f7c0ca2 commit b59b007

File tree

8 files changed

+1241
-61
lines changed

8 files changed

+1241
-61
lines changed

‎apps/landing/src/app/(detail)/docs/LeftMenu.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export function LeftMenu() {
66
return (
77
<VStack gap="6px">
88
<MenuItem to="/docs/overview">Overview</MenuItem>
9+
<MenuItem to="/docs/quick-start">Quick Start</MenuItem>
910
<MenuItem to="/docs/installation">Installation</MenuItem>
1011
<MenuItem
1112
subMenu={[

‎apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx‎

Lines changed: 194 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,205 @@ export const metadata = {
33
alternates: {
44
canonical: '/docs/api/group-selector'
55
}
6-
76
}
87

98
# Group Selector
109

11-
The `group` selector is used to apply styles to a group of elements. It is used to apply styles to a group of elements that are siblings of each other.
10+
Group selectors allow child elements to respond to interactions on a parent element. This is useful for creating interactive cards, list items, and other composite components.
11+
12+
## Basic Usage
13+
14+
Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, or `_groupActive` on children:
15+
16+
```tsx
17+
<Box role="group" p={4} bg="$background" borderRadius="8px">
18+
<Text _groupHover={{ color: '$primary' }}>
19+
This text changes color when parent is hovered
20+
</Text>
21+
<Box _groupHover={{ bg: '$primaryAlpha10' }} p={2}>
22+
This box changes background on parent hover
23+
</Box>
24+
</Box>
25+
```
26+
27+
## Available Group Selectors
28+
29+
| Selector | Triggered when |
30+
|----------|----------------|
31+
| `_groupHover` | Parent with `role="group"` is hovered |
32+
| `_groupFocus` | Parent with `role="group"` is focused |
33+
| `_groupActive` | Parent with `role="group"` is active (pressed) |
34+
| `_groupFocusWithin` | Any element inside the group receives focus |
35+
36+
## Interactive Card Example
37+
38+
```tsx
39+
<Box
40+
role="group"
41+
p={4}
42+
bg="white"
43+
borderRadius="8px"
44+
boxShadow="0 1px 3px rgba(0,0,0,0.1)"
45+
cursor="pointer"
46+
_hover={{ boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}
47+
>
48+
<Box
49+
w="100%"
50+
h="200px"
51+
bg="$backgroundMuted"
52+
borderRadius="4px"
53+
overflow="hidden"
54+
>
55+
<Image
56+
src="/image.jpg"
57+
_groupHover={{ transform: 'scale(1.05)' }}
58+
transition="transform 0.2s"
59+
/>
60+
</Box>
61+
62+
<Text
63+
mt={3}
64+
fontWeight={600}
65+
_groupHover={{ color: '$primary' }}
66+
>
67+
Card Title
68+
</Text>
69+
70+
<Text
71+
color="$textMuted"
72+
fontSize="14px"
73+
>
74+
Card description goes here
75+
</Text>
76+
77+
<Box
78+
mt={3}
79+
opacity={0}
80+
_groupHover={{ opacity: 1 }}
81+
transition="opacity 0.2s"
82+
>
83+
<Button>View Details</Button>
84+
</Box>
85+
</Box>
86+
```
87+
88+
## List Item Example
89+
90+
```tsx
91+
<Box as="ul" listStyle="none" p={0} m={0}>
92+
{items.map((item) => (
93+
<Box
94+
as="li"
95+
key={item.id}
96+
role="group"
97+
p={3}
98+
borderBottom="1px solid $border"
99+
_hover={{ bg: '$backgroundMuted' }}
100+
>
101+
<Flex justify="space-between" align="center">
102+
<Text _groupHover={{ color: '$primary' }}>
103+
{item.title}
104+
</Text>
105+
<Box
106+
opacity={0}
107+
_groupHover={{ opacity: 1 }}
108+
>
109+
<Button size="sm">Edit</Button>
110+
</Box>
111+
</Flex>
112+
</Box>
113+
))}
114+
</Box>
115+
```
116+
117+
## Navigation Menu Example
12118

13-
## How to use
119+
```tsx
120+
<Box as="nav">
121+
<Box
122+
role="group"
123+
p={2}
124+
borderRadius="4px"
125+
_hover={{ bg: '$backgroundMuted' }}
126+
>
127+
<Flex align="center" gap={2}>
128+
<Box
129+
w="8px"
130+
h="8px"
131+
borderRadius="50%"
132+
bg="$textMuted"
133+
_groupHover={{ bg: '$primary' }}
134+
/>
135+
<Text _groupHover={{ color: '$primary' }}>
136+
Menu Item
137+
</Text>
138+
<Box
139+
ml="auto"
140+
opacity={0}
141+
_groupHover={{ opacity: 1 }}
142+
>
143+
→
144+
</Box>
145+
</Flex>
146+
</Box>
147+
</Box>
148+
```
149+
150+
## Combining with Responsive Styles
151+
152+
Group selectors can be combined with responsive arrays:
153+
154+
```tsx
155+
<Box role="group" p={[2, null, 4]}>
156+
<Text
157+
_groupHover={{
158+
color: ['$primary', null, '$secondary'],
159+
fontSize: ['16px', null, '18px']
160+
}}
161+
>
162+
Responsive group hover
163+
</Text>
164+
</Box>
165+
```
166+
167+
## Nested Groups
168+
169+
For nested groups, the selector applies to the nearest parent with `role="group"`:
170+
171+
```tsx
172+
<Box role="group" p={4} bg="white">
173+
<Text _groupHover={{ color: 'blue' }}>
174+
Responds to outer group
175+
</Text>
176+
177+
<Box role="group" p={2} mt={2} bg="$backgroundMuted">
178+
<Text _groupHover={{ color: 'red' }}>
179+
Responds to inner group
180+
</Text>
181+
</Box>
182+
</Box>
183+
```
184+
185+
## CSS Output
14186

15187
```tsx
16-
const group = (
17-
<div role="group">
18-
<Box _groupHover={{ bg: 'red' }} />
19-
<Box _groupHover={{ bg: 'red' }} />
20-
<Box _groupHover={{ bg: 'red' }} />
21-
</div>
22-
)
188+
<Box role="group">
189+
<Box _groupHover={{ bg: 'red' }} />
190+
</Box>
191+
```
192+
193+
Generates CSS like:
194+
195+
```css
196+
[role="group"]:hover .a {
197+
background-color: red;
198+
}
23199
```
200+
201+
## Best Practices
202+
203+
1. **Use semantic HTML**: Add `role="group"` to semantically appropriate elements
204+
2. **Keep interactions discoverable**: Don't hide critical content behind group hover
205+
3. **Consider touch devices**: Group hover doesn't work on touch - provide alternative interactions
206+
4. **Use transitions**: Add `transition` prop for smooth state changes
207+
5. **Accessibility**: Ensure interactive elements are keyboard accessible

0 commit comments

Comments
 (0)