fix(data-table): fix theme tokens, reduce overrides (#252)

* fix(data-table): fix theme tokens, reduce overrides * fix(data-table): add correct props for overflow example
carbon-design-system · Dec 5, 2019 · ccec2d6 · ccec2d6
1 parent a8b4ae0
commit ccec2d6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 60 deletions.
diff --git a/src/components/DataTable/_index.scss b/src/components/DataTable/_index.scss
@@ -4,54 +4,25 @@
 /// @copyright IBM Security 2019
 ////
 
-@import 'carbon-components/scss/globals/scss/layout';
+@import '@carbon/themes/scss/tokens';
+
+@import 'carbon-components/scss/globals/scss/vars';
 @import 'carbon-components/scss/components/data-table-v2/data-table-v2';
 
 @import '../Search/index';
 
-@include export-namespace($name: data-table) {
-  .#{$prefix}--data-table-container {
-    /// TODO - V2: waiting for Carbon reset fix: https://github.com/carbon-design-system/carbon-components/issues/2373
-    .#{$prefix}--toolbar-search-container-expandable
-      .#{$prefix}--search
-      .#{$prefix}--search-magnifier {
-      height: unset;
-      width: unset;
-    }
-
-    /// TODO - V2: waiting for Carbon reset fix: https://github.com/carbon-design-system/carbon-components/issues/2373
-    .#{$prefix}--data-table--sort th,
-    .#{$prefix}--data-table--sort
-      th:first-of-type:not(.#{$prefix}--table-column-checkbox) {
-      height: unset;
-    }
-
-    /// Need to override because the overflow cell does not have a thead td.
-    tbody tr:hover td.#{$namespace}data-table__overflow-cell:hover {
-      border-top: 1px solid transparent;
-    }
-
-    td.#{$namespace}data-table__overflow-cell {
-      width: 0;
-      border-top: 1px solid transparent;
+@import '../Component/mixins';
 
-      .#{$prefix}--overflow-menu {
-        z-index: z($layer: overlay);
-        margin-left: auto;
-      }
-    }
+@include security--component($name: data-table) {
+  &__overflow-cell .#{$prefix}--overflow-menu {
+    z-index: z($layer: overlay);
+  }
 
-    /// Prevents appearance of "empty" thead space when an overflow cell is added.
-    .#{$prefix}--data-table {
-      background-color: $ui-02;
-    }
+  .#{$prefix}--data-table {
+    background-color: $ui-03;
 
-    .#{$prefix}--batch-actions {
-      padding: 0;
+    &.#{$prefix}--skeleton th {
+      border-bottom-width: 0;
     }
   }
-
-  .#{$prefix}--data-table.#{$prefix}--skeleton th {
-    border-bottom: 0;
-  }
 }
diff --git a/src/components/DataTable/stories/with-overflow-menu.js b/src/components/DataTable/stories/with-overflow-menu.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { action } from '@storybook/addon-actions';
+
 import {
   DataTable,
   OverflowMenu,
@@ -18,6 +18,7 @@ import {
   TableOverflowCell,
   TableRow,
 } from '../../..';
+
 import { headers, missingDataCharacter, rows } from '../_mocks_';
 
 const overflowStory = props => (
@@ -47,24 +48,18 @@ const overflowStory = props => (
                 ))}
 
                 <TableOverflowCell>
-                  <OverflowMenu
-                    flipped
-                    floatingMenu
-                    ariaLabel="Actions"
-                    menuOffsetFlip={menu => ({ left: 61 - menu.clientWidth })}
-                  >
-                    <OverflowMenuItem
-                      itemText="Action 1"
-                      onClick={action('Overflow action clicked')}
-                    />
-                    <OverflowMenuItem
-                      itemText="Action 2"
-                      onClick={action('Overflow action clicked')}
-                    />
-                    <OverflowMenuItem
-                      itemText="Action 3"
-                      onClick={action('Overflow action clicked')}
-                    />
+                  <OverflowMenu flipped>
+                    {new Array(3).fill().map((itemText = 'Action', index) => {
+                      const key = `overflowMenuItem__index`;
+
+                      return (
+                        <OverflowMenuItem
+                          key={key}
+                          itemText={`${itemText} ${index + 1}`}
+                          primaryFocus={index === 0}
+                        />
+                      );
+                    })}
                   </OverflowMenu>
                 </TableOverflowCell>
               </TableRow>