From 4f324d65f41666e1863525a186bd66e8a81c658f Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 12 Mar 2021 12:39:34 -0600
Subject: [PATCH 1/6] feat: add size variation expandable tables

---
 .../stories/DataTable-batch-actions-story.js  |   2 +-
 .../stories/dynamic-content/story.scss        |   4 +-
 .../expansion/DataTable-expansion-story.js    | 172 ++++++++++++++++++
 .../expansion/DataTable-expansion-story.scss  |   4 +-
 4 files changed, 177 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js
index 4c773012dd9e..631e69a2f69b 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js
@@ -104,7 +104,7 @@ export const Usage = () => (
           </TableBatchActions>
           <TableToolbarContent>
             <TableToolbarSearch
-              defaultExpanded
+              persistent="true"
               tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
               onChange={onInputChange}
             />
diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/story.scss b/packages/react/src/components/DataTable/stories/dynamic-content/story.scss
index 39309b50e817..24990c195018 100644
--- a/packages/react/src/components/DataTable/stories/dynamic-content/story.scss
+++ b/packages/react/src/components/DataTable/stories/dynamic-content/story.scss
@@ -1,5 +1,5 @@
 .demo-expanded-td td {
   padding-left: 4rem;
-  padding-bottom: 1.5rem;
-  padding-top: 1rem;
+  // padding-bottom: 1.5rem;
+  // padding-top: 1rem;
 }
diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
index 6c2603b17690..b1faa8eaf372 100644
--- a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
+++ b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
@@ -6,8 +6,10 @@
  */
 
 import './DataTable-expansion-story.scss';
+import { action } from '@storybook/addon-actions';
 
 import React from 'react';
+import Button from '../../../Button';
 import DataTable, {
   Table,
   TableBody,
@@ -19,6 +21,11 @@ import DataTable, {
   TableHead,
   TableHeader,
   TableRow,
+  TableToolbar,
+  TableToolbarAction,
+  TableToolbarContent,
+  TableToolbarSearch,
+  TableToolbarMenu,
 } from '../../../DataTable';
 import { rows, headers } from '../shared';
 import mdx from '../../DataTable.mdx';
@@ -93,6 +100,171 @@ export const Usage = () => (
   </DataTable>
 );
 
+export const CompactExpansion = () => (
+  <DataTable rows={rows} headers={headers}>
+    {({
+      rows,
+      headers,
+      getHeaderProps,
+      getRowProps,
+      getTableProps,
+      onInputChange,
+      getToolbarProps,
+      getTableContainerProps,
+    }) => (
+      <TableContainer
+        title="DataTable"
+        description="With expansion"
+        {...getTableContainerProps()}>
+        <TableToolbar {...getToolbarProps()} size="small">
+          <TableToolbarContent>
+            <TableToolbarSearch persistent="true" onChange={onInputChange} />
+            <TableToolbarMenu>
+              <TableToolbarAction onClick={() => alert('Alert 1')}>
+                Action 1
+              </TableToolbarAction>
+              <TableToolbarAction onClick={() => alert('Alert 2')}>
+                Action 2
+              </TableToolbarAction>
+              <TableToolbarAction onClick={() => alert('Alert 3')}>
+                Action 3
+              </TableToolbarAction>
+            </TableToolbarMenu>
+            <Button onClick={action('Add new row')} size="small" kind="primary">
+              Add new
+            </Button>
+          </TableToolbarContent>
+        </TableToolbar>
+        <Table {...getTableProps()} size="compact">
+          <TableHead>
+            <TableRow>
+              <TableExpandHeader />
+              {headers.map((header, i) => (
+                <TableHeader key={i} {...getHeaderProps({ header })}>
+                  {header.header}
+                </TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <React.Fragment key={row.id}>
+                <TableExpandRow {...getRowProps({ row })}>
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id}>{cell.value}</TableCell>
+                  ))}
+                </TableExpandRow>
+                <TableExpandedRow
+                  colSpan={headers.length + 1}
+                  className="demo-expanded-td">
+                  <h6>Expandable row content</h6>
+                  <div>Description here</div>
+                </TableExpandedRow>
+              </React.Fragment>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    )}
+  </DataTable>
+);
+
+export const ShortExpansion = () => (
+  <DataTable rows={rows} headers={headers}>
+    {({
+      rows,
+      headers,
+      getHeaderProps,
+      getRowProps,
+      getTableProps,
+      getTableContainerProps,
+    }) => (
+      <TableContainer
+        title="DataTable"
+        description="With expansion"
+        {...getTableContainerProps()}>
+        <Table {...getTableProps()} size="short">
+          <TableHead>
+            <TableRow>
+              <TableExpandHeader />
+              {headers.map((header, i) => (
+                <TableHeader key={i} {...getHeaderProps({ header })}>
+                  {header.header}
+                </TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <React.Fragment key={row.id}>
+                <TableExpandRow {...getRowProps({ row })}>
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id}>{cell.value}</TableCell>
+                  ))}
+                </TableExpandRow>
+                <TableExpandedRow
+                  colSpan={headers.length + 1}
+                  className="demo-expanded-td">
+                  <h6>Expandable row content</h6>
+                  <div>Description here</div>
+                </TableExpandedRow>
+              </React.Fragment>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    )}
+  </DataTable>
+);
+
+export const TallExpansion = () => (
+  <DataTable rows={rows} headers={headers}>
+    {({
+      rows,
+      headers,
+      getHeaderProps,
+      getRowProps,
+      getTableProps,
+      getTableContainerProps,
+    }) => (
+      <TableContainer
+        title="DataTable"
+        description="With expansion"
+        {...getTableContainerProps()}>
+        <Table {...getTableProps()} size="tall">
+          <TableHead>
+            <TableRow>
+              <TableExpandHeader />
+              {headers.map((header, i) => (
+                <TableHeader key={i} {...getHeaderProps({ header })}>
+                  {header.header}
+                </TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <React.Fragment key={row.id}>
+                <TableExpandRow {...getRowProps({ row })}>
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id}>{cell.value}</TableCell>
+                  ))}
+                </TableExpandRow>
+                <TableExpandedRow
+                  colSpan={headers.length + 1}
+                  className="demo-expanded-td">
+                  <h6>Expandable row content</h6>
+                  <div>Description here</div>
+                </TableExpandedRow>
+              </React.Fragment>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    )}
+  </DataTable>
+);
+
 export const BatchExpansion = () => (
   <DataTable
     rows={rows}
diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss
index 9cb26f79cc4a..a5a33d0ab52d 100644
--- a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss
+++ b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss
@@ -3,8 +3,8 @@
 
 .demo-expanded-td td {
   padding-left: 4rem;
-  padding-bottom: 1.5rem;
-  padding-top: 1rem;
+  // padding-bottom: 1.5rem;
+  // padding-top: 1rem;
 }
 
 .demo-inner-container-header {

From 1c618431fbc0cfe3f9da2707807f33345d71a99f Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 12 Mar 2021 12:40:02 -0600
Subject: [PATCH 2/6] fix: small persistent search width

---
 .../src/components/data-table/_data-table-action.scss         | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
index 2bc60927df1e..a34fd41125c1 100644
--- a/packages/components/src/components/data-table/_data-table-action.scss
+++ b/packages/components/src/components/data-table/_data-table-action.scss
@@ -544,6 +544,10 @@
       padding: $spacing-03;
     }
 
+    .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-persistent {
+      width: 100%;
+    }
+
     //hidden
     .#{$prefix}--toolbar-search-container-expandable {
       width: rem(32px);

From d2154674ad694b64ba698d9db17cee389becc2c3 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 12 Mar 2021 12:40:24 -0600
Subject: [PATCH 3/6] fix: size variation expandable content padding

---
 .../data-table/_data-table-core.scss          |  5 ----
 .../data-table/_data-table-expandable.scss    | 24 +++++++++++++++++++
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index b5d90a4f2132..44e270887b91 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -532,7 +532,6 @@
 
   .#{$prefix}--data-table--sticky-header {
     display: block;
-    // max-height: rem(300px);
     overflow-y: scroll;
 
     thead,
@@ -587,10 +586,6 @@
       min-height: 3rem;
     }
 
-    // .#{$prefix}--parent-row td {
-    //   padding: 1rem;
-    // }
-
     &:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--short)
       td:not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-column-checkbox) {
       padding-top: rem(14px);
diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
index b1d49729da5d..d2ea43b4c4bc 100644
--- a/packages/components/src/components/data-table/_data-table-expandable.scss
+++ b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -70,6 +70,30 @@
       background-color $duration--fast-02 motion(standard, productive);
   }
 
+  //compact child row padding
+  .#{$prefix}--data-table--compact
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
+    + tr[data-child-row]
+    td {
+    padding-left: 2.5rem;
+  }
+
+  //short child row padding
+  .#{$prefix}--data-table--short
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
+    + tr[data-child-row]
+    td {
+    padding-left: 3rem;
+  }
+
+  //tall child row padding
+  .#{$prefix}--data-table--tall
+    tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
+    + tr[data-child-row]
+    td {
+    padding-left: 5rem;
+  }
+
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
     + tr[data-child-row]
     td

From 86647025fec4e0242f258ca3c1280a29b661e3d7 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 12 Mar 2021 12:50:29 -0600
Subject: [PATCH 4/6] fix: remove commented code

---
 .../src/components/DataTable/stories/dynamic-content/story.scss | 2 --
 .../DataTable/stories/expansion/DataTable-expansion-story.scss  | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/story.scss b/packages/react/src/components/DataTable/stories/dynamic-content/story.scss
index 24990c195018..7f42f72aec10 100644
--- a/packages/react/src/components/DataTable/stories/dynamic-content/story.scss
+++ b/packages/react/src/components/DataTable/stories/dynamic-content/story.scss
@@ -1,5 +1,3 @@
 .demo-expanded-td td {
   padding-left: 4rem;
-  // padding-bottom: 1.5rem;
-  // padding-top: 1rem;
 }
diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss
index a5a33d0ab52d..a0662f08ba42 100644
--- a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss
+++ b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.scss
@@ -3,8 +3,6 @@
 
 .demo-expanded-td td {
   padding-left: 4rem;
-  // padding-bottom: 1.5rem;
-  // padding-top: 1rem;
 }
 
 .demo-inner-container-header {

From fced290ead0a26c8f488027706736f3d4d2b5d8b Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 25 Mar 2021 11:57:15 -0500
Subject: [PATCH 5/6] fix: add 16px padding expand btn

---
 .../src/components/data-table/_data-table-expandable.scss        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
index d2ea43b4c4bc..155bbddb2d52 100644
--- a/packages/components/src/components/data-table/_data-table-expandable.scss
+++ b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -222,6 +222,7 @@
     width: 100%;
     // Account for the border in `.bx--table-expand`
     height: calc(100% + 1px);
+    padding: 0 1rem;
     vertical-align: inherit;
   }
 

From dffaa274afa181c2a4e563586be1ff14090b8bf4 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 25 Mar 2021 11:57:34 -0500
Subject: [PATCH 6/6] fix: tall expand btn width

---
 .../components/src/components/data-table/_data-table-core.scss   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index 44e270887b91..1635a9ab84e2 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -319,7 +319,6 @@
 
   .#{$prefix}--data-table--tall thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--tall tbody td.#{$prefix}--table-expand {
-    width: rem(64px);
     height: rem(64px);
   }