docs(data-table): add storybook book expandable demo styles (#5034)

carbon-design-system · Jan 28, 2020 · 8009cd3 · 8009cd3
1 parent 8faf1f7
commit 8009cd3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -63,8 +63,6 @@
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
-    padding-bottom: rem(23px);
-    transition: padding $duration--moderate-01 motion(standard, productive);
     border-bottom: 1px solid $ui-03;
   }
 

diff --git a/packages/react/src/components/DataTable/stories/datatable-story.scss b/packages/react/src/components/DataTable/stories/datatable-story.scss
@@ -0,0 +1,18 @@
+@import '~@carbon/type/scss/type';
+@import '~@carbon/themes/scss/themes';
+
+.demo-expanded-td td {
+  padding-left: 3.25rem !important;
+  padding-bottom: 1.5rem;
+  padding-top: 1rem;
+}
+
+.demo-inner-container-header {
+  @include carbon--type-style('productive-heading-01');
+  color: $text-01;
+}
+
+.demo-inner-container-content {
+  @include carbon--type-style('body-long-01');
+  color: $text-02;
+}
diff --git a/packages/react/src/components/DataTable/stories/with-expansion.js b/packages/react/src/components/DataTable/stories/with-expansion.js
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import './datatable-story.scss';
+
 import React from 'react';
 import DataTable, {
   Table,
@@ -56,9 +58,15 @@ export default props => (
                     <TableCell key={cell.id}>{cell.value}</TableCell>
                   ))}
                 </TableExpandRow>
-                <TableExpandedRow colSpan={headers.length + 1}>
-                  <h1>Expandable row content</h1>
-                  <p>Description here</p>
+                <TableExpandedRow
+                  colSpan={headers.length + 1}
+                  className="demo-expanded-td">
+                  <h1 className="demo-inner-container-header">
+                    Expandable row content
+                  </h1>
+                  <p className="demo-inner-container-content">
+                    Description here
+                  </p>
                 </TableExpandedRow>
               </React.Fragment>
             ))}