Make Overflow menu example more similar to react one

carbon-design-system · Aug 12, 2024 · 2921502 · 2921502
1 parent a5a1d27
commit 2921502
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
@@ -9,7 +9,7 @@
     { key: "name", value: "Name" },
     { key: "port", value: "Port" },
     { key: "rule", value: "Rule" },
-    { key: "overflow", empty: true },
+    { key: "overflow", empty: true, columnMenu: true },
   ];
 
   const rows = [
@@ -25,7 +25,7 @@
 <DataTable sortable headers="{headers}" rows="{rows}">
   <svelte:fragment slot="cell" let:cell>
     {#if cell.key === "overflow"}
-      <OverflowMenu flipped>
+      <OverflowMenu size="sm" flipped>
         <OverflowMenuItem text="Restart" />
         <OverflowMenuItem
           href="https://cloud.ibm.com/docs/loadbalancer-service"

diff --git a/src/DataTable/Table.svelte b/src/DataTable/Table.svelte
@@ -37,6 +37,7 @@
       class:bx--data-table--zebra="{zebra}"
       class:bx--data-table--static="{useStaticWidth}"
       class:bx--data-table--sticky-header="{stickyHeader}"
+      class:bx--data-table--visible-overflow-menu="{true}"
       style="{tableStyle}"
     >
       <slot />
@@ -54,6 +55,7 @@
     class:bx--data-table--zebra="{zebra}"
     class:bx--data-table--static="{useStaticWidth}"
     class:bx--data-table--sticky-header="{stickyHeader}"
+    class:bx--data-table--visible-overflow-menu="{true}"
     {...$$restProps}
     style="{tableStyle}"
   >