Skip to content

Commit ee28a57

Browse files
devongovettdannify
devongovett
and
dannify
authored
ActionBar docs updates (#4100)
* ActionBar docs updates * Fix scrolling on mobile --------- Co-authored-by: Danni <[email protected]>
1 parent 430f296 commit ee28a57

File tree

2 files changed

+62
-100
lines changed

2 files changed

+62
-100
lines changed

‎packages/@react-spectrum/actionbar/docs/ActionBar.mdx‎

Lines changed: 47 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,8 @@ import {TableView, TableHeader, TableBody, Row, Column, Cell} from '@react-spect
2727
```
2828

2929
---
30-
category: Toolbars
30+
category: Collections
3131
keywords: [actionbar, selection, actions, collections, toolbar]
32-
after_version: 3.1.0
3332
---
3433

3534
# ActionBar
@@ -38,36 +37,28 @@ after_version: 3.1.0
3837

3938
<HeaderInfo
4039
packageData={packageData}
41-
componentNames={['ActionBar, ActionBarContainer, Item']}
40+
componentNames={['ActionBar', 'ActionBarContainer']}
4241
sourceData={[
4342
{type: 'Spectrum', url: 'https://spectrum.adobe.com/page/action-bar/'}
4443
]} />
4544

4645
## Example
4746
```tsx example
4847
function Example() {
49-
let items = [
50-
{key: 0, name: 'Adobe Photoshop'},
51-
{key: 1, name: 'Adobe Illustrator'},
52-
{key: 2, name: 'Adobe XD'}
53-
];
54-
55-
let [selectedKeys, setSelectedKeys] = React.useState(new Set([0]));
48+
let [selectedKeys, setSelectedKeys] = React.useState(new Set(['photoshop']));
5649

5750
return (
5851
<ActionBarContainer height={300} maxWidth="size-6000">
59-
<ListView items={items} aria-label="ListView with action bar" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
60-
{(item) => (
61-
<Item>
62-
{item.name}
63-
</Item>
64-
)}
52+
<ListView aria-label="ListView with action bar" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
53+
<Item key="photoshop">Adobe Photoshop</Item>
54+
<Item key="illustrator">Adobe Illustrator</Item>
55+
<Item key="xd">Adobe XD</Item>
6556
</ListView>
6657
<ActionBar
6758
isEmphasized
68-
selectedItemCount={selectedKeys === 'all' ? items.length : selectedKeys.size}
69-
onAction={(key) => alert(`Performing ${key} action on ${selectedKeys.size} rows.`)}
70-
onClearSelection={() => setSelectedKeys(new Set([]))}>
59+
selectedItemCount={selectedKeys === 'all' ? 'all' : selectedKeys.size}
60+
onAction={(key) => alert(`Performing ${key} action...`)}
61+
onClearSelection={() => setSelectedKeys(new Set())}>
7162
<Item key="edit">
7263
<Edit />
7364
<Text>Edit</Text>
@@ -93,7 +84,7 @@ function Example() {
9384

9485
An ActionBar is a companion component intended to facilitate bulk actions on selected items within a collection component. It consists of an ActionGroup, a clear button, and a count of selected items. It accepts a list of <TypeLink links={docs.links} type={docs.exports.Item} />
9586
elements as children, each with a `key` prop. Alternatively, a function that returns `Item` elements is also supported as seen below. See the [collection components](../react-stately/collections.html)
96-
docs for more details about this API. These `Item` elements are used to populate the ActionBar's ActionGroup and thus follows the [same content guidelines](./ActionGroup.html#content) when it comes to customization and labeling.
87+
docs for more details about this API. These `Item` elements are used to populate the buttons in the ActionBar, and follows the [ActionGroup content guidelines](./ActionGroup.html#content) for customization and labeling.
9788

9889
```tsx example
9990
function Example() {
@@ -103,28 +94,20 @@ function Example() {
10394
{key: 'delete', label: 'Delete'}
10495
];
10596

106-
let listItems = [
107-
{key: 0, name: 'Adobe Photoshop'},
108-
{key: 1, name: 'Adobe Illustrator'},
109-
{key: 2, name: 'Adobe XD'}
110-
];
111-
112-
let [selectedKeys, setSelectedKeys] = React.useState(new Set([0]));
97+
let [selectedKeys, setSelectedKeys] = React.useState(new Set(['photoshop']));
11398

11499
return (
115100
<ActionBarContainer height={300} maxWidth="size-6000">
116-
<ListView items={listItems} aria-label="ListView with action bar, dynamic collection" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
117-
{(item) => (
118-
<Item>
119-
{item.name}
120-
</Item>
121-
)}
101+
<ListView aria-label="ListView with action bar" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
102+
<Item key="photoshop">Adobe Photoshop</Item>
103+
<Item key="illustrator">Adobe Illustrator</Item>
104+
<Item key="xd">Adobe XD</Item>
122105
</ListView>
123106
<ActionBar
124107
items={barItems}
125-
selectedItemCount={selectedKeys === 'all' ? items.length : selectedKeys.size}
126-
onAction={(key) => alert(`Performing ${key} action on ${selectedKeys.size} rows.`)}
127-
onClearSelection={() => setSelectedKeys(new Set([]))}
108+
selectedItemCount={selectedKeys === 'all' ? 'all' : selectedKeys.size}
109+
onAction={(key) => alert(`Performing ${key} action...`)}
110+
onClearSelection={() => setSelectedKeys(new Set())}
128111
isEmphasized>
129112
{item => (
130113
<Item key={item.key}>
@@ -148,43 +131,28 @@ automatically. For languages that are read right-to-left (e.g. Hebrew and Arabic
148131

149132
## Events
150133
Use the `onClearSelection` prop as a callback to handle when the clear button in the ActionBar is pressed. Additionally, the `onAction` prop can be used as a callback for when the user
151-
presses any of the buttons in the ActionBar's ActionGroup. The `key` from the pressed button will be passed into the callback.
134+
presses any of the buttons in the ActionBar. The `key` from the pressed `<Item>` will be passed to the callback.
152135

153136
The following example clears row selection within the TableView when the clear button is pressed and alerts the user as to what
154-
action is being taken on the selected rows when the ActionButtons are pressed.
137+
action is being taken on the selected rows when the buttons are pressed.
155138

156139
```tsx example
157140
function ActionBarActions(props) {
158-
// Same bar items, table columns, and table rows as example above...
159-
///- begin collapse -///
160-
let columns = [
161-
{name: 'Name', uid: 'name'},
162-
{name: 'Type', uid: 'type'},
163-
{name: 'Level', uid: 'level'}
164-
];
141+
let [selectedKeys, setSelectedKeys] = React.useState(new Set([2]));
165142
let rows = [
166143
{id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
167144
{id: 2, name: 'Blastoise', type: 'Water', level: '56'},
168145
{id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
169146
{id: 4, name: 'Pikachu', type: 'Electric', level: '100'}
170-
171147
];
172-
let barItems = [
173-
{key: 'edit', label: 'Edit'},
174-
{key: 'copy', label: 'Copy'},
175-
{key: 'delete', label: 'Delete'}
176-
];
177-
let [selectedKeys, setSelectedKeys] = React.useState(new Set([2]));
178-
///- end collapse -///
148+
179149
return (
180150
<ActionBarContainer height="size-5000">
181-
<TableView aria-label="Table with action bar and controlled selection" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys} height="size-3000">
182-
<TableHeader columns={columns}>
183-
{column => (
184-
<Column key={column.uid} align={column.uid === 'level' ? 'end' : 'start'}>
185-
{column.name}
186-
</Column>
187-
)}
151+
<TableView aria-label="Table with action bar and controlled selection" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
152+
<TableHeader>
153+
<Column key="name">Name</Column>
154+
<Column key="type">Type</Column>
155+
<Column key="level" align="end">Level</Column>
188156
</TableHeader>
189157
<TableBody items={rows}>
190158
{item => (
@@ -195,20 +163,22 @@ function ActionBarActions(props) {
195163
</TableBody>
196164
</TableView>
197165
<ActionBar
198-
items={barItems}
199166
isEmphasized
200-
selectedItemCount={selectedKeys === 'all' ? selectedKeys : selectedKeys.size}
167+
selectedItemCount={selectedKeys === 'all' ? 'all' : selectedKeys.size}
201168
/*- begin highlight -*/
202169
onClearSelection={() => {
203170
setSelectedKeys(new Set());
204171
}}
205-
onAction={key => alert(`Performing ${key} action on ${selectedKeys.size} rows.`)}
172+
onAction={key => alert(`Performing ${key} action...`)}
206173
/*- end highlight -*/>
207-
{item => (
208-
<Item key={item.key}>
209-
{item.label}
210-
</Item>
211-
)}
174+
<Item key="edit">
175+
<Edit />
176+
<Text>Edit</Text>
177+
</Item>
178+
<Item key="delete">
179+
<Delete />
180+
<Text>Delete</Text>
181+
</Item>
212182
</ActionBar>
213183
</ActionBarContainer>
214184
);
@@ -231,30 +201,22 @@ with the rest of the UI, directing a user’s focus to elsewhere in a view.
231201

232202
```tsx example
233203
function Example({isEmphasized}) {
234-
let items = [
235-
{key: 0, name: 'Adobe Photoshop'},
236-
{key: 1, name: 'Adobe Illustrator'},
237-
{key: 2, name: 'Adobe XD'}
238-
];
239-
240-
let [selectedKeys, setSelectedKeys] = React.useState(new Set([0]));
204+
let [selectedKeys, setSelectedKeys] = React.useState(new Set(['photoshop']));
241205

242206
return (
243207
<ActionBarContainer height={300} width="size-5000">
244-
<ListView items={items} aria-label={`ListView with${isEmphasized ? ' emphasized' : ''} action bar`} selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
245-
{(item) => (
246-
<Item>
247-
{item.name}
248-
</Item>
249-
)}
208+
<ListView aria-label="ListView with action bar" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
209+
<Item key="photoshop">Adobe Photoshop</Item>
210+
<Item key="illustrator">Adobe Illustrator</Item>
211+
<Item key="xd">Adobe XD</Item>
250212
</ListView>
251213
<ActionBar
252214
/*- begin highlight -*/
253215
isEmphasized={isEmphasized}
254216
/*- end highlight -*/
255-
selectedItemCount={selectedKeys === 'all' ? items.length : selectedKeys.size}
256-
onAction={(key) => alert(`Performing ${key} action on ${selectedKeys.size} rows.`)}
257-
onClearSelection={() => setSelectedKeys(new Set([]))}>
217+
selectedItemCount={selectedKeys === 'all' ? 'all' : selectedKeys.size}
218+
onAction={(key) => alert(`Performing ${key} action...`)}
219+
onClearSelection={() => setSelectedKeys(new Set())}>
258220
<Item key="edit">
259221
<Edit />
260222
<Text>Edit</Text>
@@ -272,7 +234,7 @@ function Example({isEmphasized}) {
272234
);
273235
}
274236

275-
<Flex direction="row" gap="size-200">
237+
<Flex direction="row" gap="size-200" wrap>
276238
<Example />
277239
<Example isEmphasized />
278240
</Flex>

‎packages/@react-spectrum/actionbar/docs/ActionBarAnatomy.svg‎

Lines changed: 15 additions & 15 deletions
Loading

0 commit comments

Comments
 (0)