Skip to content

Commit 80b9c16

Browse files
devongovettdevongovett
committed
Add SelectionIndicator support for all other selectable components
1 parent 08ba4d5 commit 80b9c16

31 files changed

+246
-87
lines changed

‎packages/dev/s2-docs/pages/react-aria/GridList.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,11 +263,11 @@ function Example() {
263263

264264
<Anatomy role="img" aria-label="Anatomy diagram of a list container, consisting of multiple list items. Each list item contains a drag button, a selection checkbox, an icon, a title, and a description." />
265265

266-
```tsx links={{GridList: '#gridlist', GridListItem: '#gridlistitem', GridListLoadMoreItem: '#gridlistloadmoreitem', Button: 'Button.html', Checkbox: 'Checkbox.html'}}
266+
```tsx links={{GridList: '#gridlist', GridListItem: '#gridlistitem', GridListLoadMoreItem: '#gridlistloadmoreitem', Button: 'Button.html', Checkbox: 'Checkbox.html', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
267267
<GridList>
268268
<GridListItem>
269269
<Button slot="drag" />
270-
<Checkbox slot="selection" />
270+
<Checkbox slot="selection" /> or <SelectionIndicator />
271271
</GridListItem>
272272
<GridListLoadMoreItem />
273273
</GridList>

‎packages/dev/s2-docs/pages/react-aria/ListBox.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -372,11 +372,12 @@ function Example() {
372372

373373
<Anatomy role="img" aria-label="Anatomy diagram of a list container, consisting of multiple list items. Each list item contains a label and description. The items are grouped into a section with a header." />
374374

375-
```tsx links={{ListBox: '#listbox', ListBoxItem: '#listboxitem', ListBoxSection: '#listboxsection', ListBoxLoadMoreItem: '#listboxloadmoreitem'}}
375+
```tsx links={{ListBox: '#listbox', ListBoxItem: '#listboxitem', ListBoxSection: '#listboxsection', ListBoxLoadMoreItem: '#listboxloadmoreitem', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
376376
<ListBox>
377377
<ListBoxItem>
378378
<Text slot="label" />
379379
<Text slot="description" />
380+
<SelectionIndicator />
380381
</ListBoxItem>
381382
<ListBoxSection>
382383
<Header />

‎packages/dev/s2-docs/pages/react-aria/Menu.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -469,7 +469,7 @@ import {MenuTrigger, Menu, MenuItem, Button, Popover} from 'react-aria-component
469469

470470
<Anatomy />
471471

472-
```tsx links={{MenuTrigger: '#menutrigger', Button: 'Button.html', Popover: 'Popover.html', Menu: '#menu', MenuItem: '#menuitem', Separator: 'Separator.html', MenuSection: '#menusection', SubmenuTrigger: '#submenutrigger'}}
472+
```tsx links={{MenuTrigger: '#menutrigger', Button: 'Button.html', Popover: 'Popover.html', Menu: '#menu', MenuItem: '#menuitem', Separator: 'Separator.html', MenuSection: '#menusection', SubmenuTrigger: '#submenutrigger', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
473473
<MenuTrigger>
474474
<Button />
475475
<Popover>
@@ -478,6 +478,7 @@ import {MenuTrigger, Menu, MenuItem, Button, Popover} from 'react-aria-component
478478
<Text slot="label" />
479479
<Text slot="description" />
480480
<Keyboard />
481+
<SelectionIndicator />
481482
</MenuItem>
482483
<Separator />
483484
<MenuSection>

‎packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,12 @@ import {Form} from 'react-aria-components';
9393

9494
<Anatomy />
9595

96-
```tsx links={{RadioGroup: '#radiogroup', Radio: '#radio'}}
96+
```tsx links={{RadioGroup: '#radiogroup', Radio: '#radio', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
9797
<RadioGroup>
9898
<Label />
99-
<Radio />
99+
<Radio>
100+
<SelectionIndicator />
101+
</Radio>
100102
<Text slot="description" />
101103
<FieldError />
102104
</RadioGroup>

‎packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.animated-GridListItem {
2+
display: flex;
3+
align-items: center;
4+
gap: 8px;
5+
min-height: 28px;
6+
padding: 4px 4px 4px 12px;
7+
border-radius: 6px;
8+
outline: none;
9+
cursor: default;
10+
color: var(--text-color);
11+
font-size: 14px;
12+
position: relative;
13+
14+
&[data-focus-visible] {
15+
outline: 2px solid var(--focus-ring-color);
16+
outline-offset: -2px;
17+
}
18+
19+
&[data-selected] {
20+
font-weight: bold;
21+
}
22+
23+
.react-aria-SelectionIndicator {
24+
position: absolute;
25+
left: 4px;
26+
width: 3px;
27+
height: 20px;
28+
border-radius: 4px;
29+
background: var(--gray-600);
30+
transition-property: translate, opacity;
31+
transition-duration: 250ms;
32+
33+
&[data-entering],
34+
&[data-exiting] {
35+
opacity: 0;
36+
translate: -20px 0;
37+
}
38+
}
39+
}

‎packages/dev/s2-docs/pages/react-aria/Table.mdx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -657,7 +657,7 @@ function ReorderableTable() {
657657

658658
<Anatomy role="img" aria-label="Anatomy diagram of a table, consisting of multiple rows and columns. The table header includes a select all checkbox, file name and size columns, and a column resizer. Each row in the table body contains a drag button, a selection checkbox, and file name and size cells." />
659659

660-
```tsx links={{ResizableTableContainer: '#resizabletablecontainer', Table: '#table', TableHeader: '#tableheader', Column: '#column', Checkbox: 'Checkbox.html', ColumnResizer: '#columnresizer', TableBody: '#tablebody', Row: '#row', Cell: '#cell', Button: 'Button.html', TableLoadMoreItem: '#tableloadmoreitem'}}
660+
```tsx links={{ResizableTableContainer: '#resizabletablecontainer', Table: '#table', TableHeader: '#tableheader', Column: '#column', Checkbox: 'Checkbox.html', ColumnResizer: '#columnresizer', TableBody: '#tablebody', Row: '#row', Cell: '#cell', Button: 'Button.html', TableLoadMoreItem: '#tableloadmoreitem', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
661661
<ResizableTableContainer>
662662
<Table>
663663
<TableHeader>
@@ -669,7 +669,9 @@ function ReorderableTable() {
669669
<TableBody>
670670
<Row>
671671
<Cell><Button slot="drag" /></Cell>
672-
<Cell><Checkbox slot="selection" /></Cell>
672+
<Cell>
673+
<Checkbox slot="selection" /> or <SelectionIndicator />
674+
</Cell>
673675
<Cell />
674676
<Cell />
675677
</Row>

‎packages/dev/s2-docs/pages/react-aria/Tabs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ function Example() {
238238

239239
<Anatomy />
240240

241-
```tsx links={{Tabs: '#tabs', TabList: '#tablist', Tab: '#tab', TabPanel: '#tabpanel'}}
241+
```tsx links={{Tabs: '#tabs', TabList: '#tablist', Tab: '#tab', TabPanel: '#tabpanel', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
242242
<Tabs>
243243
<TabList>
244244
<Tab>

‎packages/dev/s2-docs/pages/react-aria/TagGroup.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,11 +131,12 @@ function Example(props) {
131131

132132
<Anatomy />
133133

134-
```tsx links={{TagGroup: '#taggroup', TagList: '#taglist', Tag: '#tag', Button: 'Button.html'}}
134+
```tsx links={{TagGroup: '#taggroup', TagList: '#taglist', Tag: '#tag', Button: 'Button.html', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
135135
<TagGroup>
136136
<Label />
137137
<TagList>
138138
<Tag>
139+
<SelectionIndicator />
139140
<Button slot="remove" />
140141
</Tag>
141142
</TagList>

‎packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,11 @@ function SegmentedControlItem(props: ToggleButtonProps) {
114114

115115
<Anatomy />
116116

117-
```tsx links={{ToggleButtonGroup: '#togglebuttongroup', ToggleButton: 'ToggleButton.html'}}
117+
```tsx links={{ToggleButtonGroup: '#togglebuttongroup', ToggleButton: 'ToggleButton.html', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
118118
<ToggleButtonGroup>
119-
<ToggleButton />
119+
<ToggleButton>
120+
<SelectionIndicator />
121+
</ToggleButton>
120122
</ToggleButtonGroup>
121123
```
122124

‎packages/dev/s2-docs/pages/react-aria/Tree.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -355,12 +355,12 @@ function Example() {
355355

356356
<Anatomy role="img" aria-label="Anatomy diagram of a Tree, consisting of multiple items. Each item in the tree contains a selection checkbox, an expand toggle button, and the name of the item." />
357357

358-
```tsx links={{Tree: '#tree', TreeItem: '#treeitem', TreeItemContent: '#treeitemcontent', Button: 'Button.html', Checkbox: 'Checkbox.html', TreeLoadMoreItem: '#treeloadmoreitem'}}
358+
```tsx links={{Tree: '#tree', TreeItem: '#treeitem', TreeItemContent: '#treeitemcontent', Button: 'Button.html', Checkbox: 'Checkbox.html', TreeLoadMoreItem: '#treeloadmoreitem', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
359359
<Tree>
360360
<TreeItem>
361361
<TreeItemContent>
362362
<Button slot="chevron" />
363-
<Checkbox slot="selection" />
363+
<Checkbox slot="selection" /> or <SelectionIndicator />
364364
<Button slot="drag" />
365365
</TreeItemContent>
366366
<TreeItem>

0 commit comments

Comments
 (0)