From 53fdbdf99129ef342df06399f95723fe310b4ecb Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Wed, 23 Mar 2022 08:04:08 -0700
Subject: [PATCH] fix(data-table): expandable rows should work with zebra
 styles (#1200)

Fixes #1199
---
 docs/src/pages/components/DataTable.svx       |  4 ++
 .../DataTable/DataTableExpandableZebra.svelte | 65 +++++++++++++++++++
 src/DataTable/DataTable.svelte                |  5 +-
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index fe68f893..0df89167 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -1139,6 +1139,10 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
 
 <FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
 
+### Expandable (zebra styles)
+
+<FileSource src="/framed/DataTable/DataTableExpandableZebra" />
+
 ### Expandable (compact size)
 
 <DataTable size="compact" expandable
diff --git a/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte b/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
new file mode 100644
index 00000000..ed18370d
--- /dev/null
+++ b/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  zebra
+  expandable
+  nonExpandableRowIds="{['a', 'd']}"
+  headers="{[
+    { key: 'name', value: 'Name' },
+    { key: 'protocol', value: 'Protocol' },
+    { key: 'port', value: 'Port' },
+    { key: 'rule', value: 'Rule' },
+  ]}"
+  rows="{[
+    {
+      id: 'a',
+      name: 'Load Balancer 3',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+    },
+    {
+      id: 'b',
+      name: 'Load Balancer 1',
+      protocol: 'HTTP',
+      port: 443,
+      rule: 'Round robin',
+    },
+    {
+      id: 'c',
+      name: 'Load Balancer 2',
+      protocol: 'HTTP',
+      port: 80,
+      rule: 'DNS delegation',
+    },
+    {
+      id: 'd',
+      name: 'Load Balancer 6',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+    },
+    {
+      id: 'e',
+      name: 'Load Balancer 4',
+      protocol: 'HTTP',
+      port: 443,
+      rule: 'Round robin',
+    },
+    {
+      id: 'f',
+      name: 'Load Balancer 5',
+      protocol: 'HTTP',
+      port: 80,
+      rule: 'DNS delegation',
+    },
+  ]}"
+>
+  <svelte:fragment slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </svelte:fragment>
+</DataTable>
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 6f9ff031..dc180328 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -356,6 +356,7 @@
       {#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
         <TableRow
           id="row-{row.id}"
+          data-parent-row="{expandable ? true : undefined}"
           class="{selectedRowIds.includes(row.id)
             ? 'bx--data-table--selected'
             : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
@@ -483,14 +484,16 @@
           {/each}
         </TableRow>
 
-        {#if expandable && expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
+        {#if expandable}
           <tr
             data-child-row
             class:bx--expandable-row="{true}"
             on:mouseenter="{() => {
+              if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = row.id;
             }}"
             on:mouseleave="{() => {
+              if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = null;
             }}"
           >