Skip to content

Revert Actionbar docs release #3931

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 18, 2023
Merged

Revert Actionbar docs release #3931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f67bb84
Revert "Add ActionBar examples to TableView and ListView docs (#3777)"
LFDanLu Jan 18, 2023
32508a2
Revert "release actionbar docs (#3927)"
LFDanLu Jan 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/@react-spectrum/actionbar/docs/ActionBar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {TableView, TableHeader, TableBody, Row, Column, Cell} from '@react-spect
---
category: Toolbars
keywords: [actionbar, selection, actions, collections, toolbar]
after_version: 3.1.0
---

# ActionBar
Expand Down
52 changes: 0 additions & 52 deletions packages/@react-spectrum/list/docs/ListView.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,6 @@ import {Image} from '@react-spectrum/image';
import Info from '@spectrum-icons/workflow/Info';
import {Item, ListView} from '@react-spectrum/list';
import {Link} from '@react-spectrum/link';
import Copy from '@spectrum-icons/workflow/Copy';
import Edit from '@spectrum-icons/workflow/Edit';
import Delete from '@spectrum-icons/workflow/Delete';
```

---
Expand Down Expand Up @@ -366,55 +363,6 @@ This behavior is slightly different in the highlight selection style, where sing
</Flex>
```


### Action bar <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

An [Action bar](ActionBar.html) can be used when a user needs to perform actions on one or more items at the same time.

```tsx example keepIndividualImports
import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar';

function Example() {
let items = [
{key: 0, name: 'Adobe Photoshop'},
{key: 1, name: 'Adobe Illustrator'},
{key: 2, name: 'Adobe XD'}
];

let [selectedKeys, setSelectedKeys] = React.useState(new Set([0]));

return (
<ActionBarContainer height={300} maxWidth="size-6000">
<ListView items={items} aria-label="ListView with action bar" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
{(item) => (
<Item>
{item.name}
</Item>
)}
</ListView>
<ActionBar
isEmphasized
selectedItemCount={selectedKeys === 'all' ? items.length : selectedKeys.size}
onAction={(key) => alert(`Action: ${key}`)}
onClearSelection={() => setSelectedKeys(new Set([]))}>
<Item key="edit">
<Edit />
<Text>Edit</Text>
</Item>
<Item key="copy">
<Copy />
<Text>Copy</Text>
</Item>
<Item key="delete">
<Delete />
<Text>Delete</Text>
</Item>
</ActionBar>
</ActionBarContainer>
);
}
```

## Drag and drop

To enable drag and drop in a ListView, you must provide the drag and drop hooks sourced from <TypeLink links={dndDocs.links} type={dndDocs.exports.useDragAndDrop} /> to the ListView's `dragAndDropHooks` prop.
Expand Down
69 changes: 0 additions & 69 deletions packages/@react-spectrum/table/docs/TableView.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@ import {ActionButton} from '@react-spectrum/button';
import Add from '@spectrum-icons/workflow/Add';
import {Cell, Column, Row, TableView, TableBody, TableHeader} from '@react-spectrum/table';
import {Flex} from '@react-spectrum/layout';
import Copy from '@spectrum-icons/workflow/Copy';
import Edit from '@spectrum-icons/workflow/Edit';
import Delete from '@spectrum-icons/workflow/Delete';
import {Text} from '@react-spectrum/text';
```

---
Expand Down Expand Up @@ -504,71 +500,6 @@ This behavior is slightly different in the highlight selection style, where sing
</Flex>
```

### Action bar <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

An [Action bar](ActionBar.html) can be used when a user needs to perform actions on one or more rows at the same time.

```tsx example keepIndividualImports
import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar';

function Example() {
let columns = [
{name: 'Name', uid: 'name'},
{name: 'Type', uid: 'type'},
{name: 'Level', uid: 'level'}
];

let rows = [
{id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
{id: 2, name: 'Blastoise', type: 'Water', level: '56'},
{id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
{id: 4, name: 'Pikachu', type: 'Electric', level: '100'}
];

let [selectedKeys, setSelectedKeys] = React.useState(new Set([1]));

return (
<ActionBarContainer height="size-5000">
<TableView
aria-label="TableView with ActionBar"
selectedKeys={selectedKeys}
selectionMode="multiple"
onSelectionChange={setSelectedKeys}
height="size-3000">
<TableHeader columns={columns}>
{column => <Column key={column.uid}>{column.name}</Column>}
</TableHeader>
<TableBody items={rows}>
{item => (
<Row>
{key => <Cell>{item[key]}</Cell>}
</Row>
)}
</TableBody>
</TableView>
<ActionBar
isEmphasized
selectedItemCount={selectedKeys === 'all' ? selectedKeys : selectedKeys.size}
onClearSelection={() => setSelectedKeys(new Set())}
onAction={(key) => alert(`Action: ${key}`)}>
<Item key="edit" textValue="Edit">
<Edit />
<Text>Edit</Text>
</Item>
<Item key="copy" textValue="Copy">
<Copy />
<Text>Copy</Text>
</Item>
<Item key="delete" textValue="Delete">
<Delete />
<Text>Delete</Text>
</Item>
</ActionBar>
</ActionBarContainer>
);
}
```

## Sorting

TableView supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
Expand Down