diff --git a/src/components/DataTable/_index.scss b/src/components/DataTable/_index.scss index afcd09afc..10fb6d7a4 100644 --- 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 index 5e8be9e84..3b2fe9a4e 100644 --- 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 => ( ))} - ({ left: 61 - menu.clientWidth })} - > - - - + + {new Array(3).fill().map((itemText = 'Action', index) => { + const key = `overflowMenuItem__index`; + + return ( + + ); + })}