feat(data-table): hide batch actions if overflow visible

This commit is contained in:
Eric Liu 2020-10-26 08:15:31 -07:00
commit a2b375f32e
8 changed files with 104 additions and 48 deletions

View file

@ -1,9 +1,9 @@
---
components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarBatchActions"]
components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "ToolbarMenu", "ToolbarMenuItem", "ToolbarBatchActions"]
---
<script>
import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, Button, Link } from "carbon-components-svelte";
import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Preview from "../../components/Preview.svelte";
</script>
@ -316,7 +316,12 @@ The slot name for the table header cells is `"cell-header"`.
<Toolbar>
<ToolbarContent>
<ToolbarSearch />
<Button>Create</Button>
<ToolbarMenu>
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API Documentation</ToolbarMenuItem>
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent>
</Toolbar>
</DataTable>
@ -378,7 +383,12 @@ The slot name for the table header cells is `"cell-header"`.
<Toolbar size="sm">
<ToolbarContent>
<ToolbarSearch />
<Button>Create</Button>
<ToolbarMenu>
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">API Documentation</ToolbarMenuItem>
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent>
</Toolbar>
</DataTable>

View file

@ -4,6 +4,8 @@
Toolbar,
ToolbarContent,
ToolbarSearch,
ToolbarMenu,
ToolbarMenuItem,
ToolbarBatchActions,
Button,
} from "carbon-components-svelte";
@ -36,7 +38,14 @@
</ToolbarBatchActions>
<ToolbarContent>
<ToolbarSearch />
<Button>Create</Button>
<ToolbarMenu>
<ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
<ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
API Documentation
</ToolbarMenuItem>
<ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
</ToolbarMenu>
<Button>Create balancer</Button>
</ToolbarContent>
</Toolbar>
</DataTable>