From b42f9ba2581d728c2f3a90d94b1996f657276dc5 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Mon, 15 Aug 2022 06:29:58 -0700
Subject: [PATCH] docs: add `DataTable` example "Batch selection with
 controlled toolbar" (#1447)

* docs(inline-notification): add `NotificationActionButton` to Component API

* docs(data-table): rename example "Selectable with batch actions"

* docs(data-table): add example "Batch selection with controlled toolbar"

* docs(notification): remove note on minimum Svelte version

This banner is redundant since the minimum Svelte version is displayed in the README and on the home page of the docs.
---
 docs/src/pages/components/DataTable.svx       | 12 +++-
 .../pages/components/InlineNotification.svx   |  7 +--
 .../pages/components/ToastNotification.svx    |  8 +--
 ...ableBatchSelectionToolbarControlled.svelte | 63 +++++++++++++++++++
 4 files changed, 76 insertions(+), 14 deletions(-)
 create mode 100644 docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 2c130b56..059c7e2d 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -1111,10 +1111,20 @@ Use the `selectedRowIds` prop to specify which rows should be selected.
 
 <FileSource src="/framed/DataTable/DataTableBatchSelectionInitial" />
 
-### Selectable with batch actions
+### Batch selection with batch actions toolbar
 
 <FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />
 
+### Batch selection with controlled toolbar
+
+By default, `ToolbarBatchActions` is activated if one or more rows is selected. Clicking "Cancel" will deactivate it.
+
+Use the `active` prop to control the toolbar. Note that it will still activate if one or more rows are selected.
+
+You can also prevent the default "Cancel" behavior in the dispatched `on:cancel` event.
+
+<FileSource src="/framed/DataTable/DataTableBatchSelectionToolbarControlled" />
+
 ### Selectable (radio)
 
 <FileSource src="/framed/DataTable/RadioSelectableDataTable" />
diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx
index d976ee49..3f435777 100644
--- a/docs/src/pages/components/InlineNotification.svx
+++ b/docs/src/pages/components/InlineNotification.svx
@@ -1,4 +1,5 @@
 ---
+components: ["InlineNotification", "NotificationActionButton"]
 source: Notification/InlineNotification.svelte
 ---
 
@@ -15,12 +16,6 @@ source: Notification/InlineNotification.svelte
 
 `InlineNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
 
-<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">
-    Svelte version 3.48.0 or greater is required.
-  </div>
-</InlineNotification>
-
 <InlineNotification title="Error" subtitle="An internal server error occurred." on:close={(e) => {
   e.preventDefault();
   // custom close logic (e.g., transitions)
diff --git a/docs/src/pages/components/ToastNotification.svx b/docs/src/pages/components/ToastNotification.svx
index 1eb20fa4..40b9a424 100644
--- a/docs/src/pages/components/ToastNotification.svx
+++ b/docs/src/pages/components/ToastNotification.svx
@@ -3,7 +3,7 @@ source: Notification/ToastNotification.svelte
 ---
 
 <script>
-  import { ToastNotification, InlineNotification } from "carbon-components-svelte";
+  import { ToastNotification } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -15,12 +15,6 @@ source: Notification/ToastNotification.svelte
 
 `ToastNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
 
-<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
-  <div class="body-short-01">
-    Svelte version 3.48.0 or greater is required.
-  </div>
-</InlineNotification>
-
 <ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" on:close={(e) => {
   e.preventDefault();
   // custom close logic (e.g., transitions)
diff --git a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte
new file mode 100644
index 00000000..08e5981e
--- /dev/null
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte
@@ -0,0 +1,63 @@
+<script>
+  import {
+    DataTable,
+    Toolbar,
+    ToolbarContent,
+    ToolbarBatchActions,
+    Button,
+  } from "carbon-components-svelte";
+  import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  let rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let active = false;
+  let selectedRowIds = [];
+
+  $: console.log("active", active);
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable
+  selectable
+  batchSelection="{active}"
+  bind:selectedRowIds
+  headers="{headers}"
+  rows="{rows}"
+>
+  <Toolbar>
+    <ToolbarBatchActions
+      bind:active
+      on:cancel="{(e) => {
+        e.preventDefault();
+        active = false;
+      }}"
+    >
+      <Button
+        icon="{TrashCan}"
+        disabled="{selectedRowIds.length === 0}"
+        on:click="{() => {
+          rows = rows.filter((row) => !selectedRowIds.includes(row.id));
+          selectedRowIds = [];
+        }}"
+      >
+        Delete
+      </Button>
+    </ToolbarBatchActions>
+    <ToolbarContent>
+      <Button on:click="{() => (active = true)}">Edit rows</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>