diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js index 190a9d130b..1c0c2c52b7 100644 --- a/src/components/Table/Table.js +++ b/src/components/Table/Table.js @@ -13,10 +13,12 @@ * limitations under the License. */ -import React, { Component } from 'react'; +/** @jsx jsx */ + +import { Component } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; -import { css } from '@emotion/core'; +import { jsx, css } from '@emotion/core'; import TableHead from './components/TableHead'; import TableBody from './components/TableBody'; @@ -91,7 +93,7 @@ const noShadowStyles = ({ noShadow }) => `; const ScrollContainer = styled.div(containerStyles); -const Container = styled.div` +const ShadowContainer = styled.div` ${shadowSingle}; ${noShadowStyles}; `; @@ -158,31 +160,41 @@ class Table extends Component { } = this.props; const { sortDirection, sortHover, sortedRow } = this.state; + /** + * The position: relative; container is necessary because ShadowContainer + * is a position: absolute; element + */ return ( - - - - - + + + - - - + borderCollapsed={borderCollapsed} + > + + + + + + ); } } diff --git a/src/components/Table/__snapshots__/Table.spec.js.snap b/src/components/Table/__snapshots__/Table.spec.js.snap index 15703ec740..32489cc7a5 100644 --- a/src/components/Table/__snapshots__/Table.spec.js.snap +++ b/src/components/Table/__snapshots__/Table.spec.js.snap @@ -1,6 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Table Style tests should render a collapsed table 1`] = ` +.circuit-49 { + position: relative; +} + .circuit-47 { box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); } @@ -218,163 +222,171 @@ tbody .circuit-11:last-child td { }
- - - - - - + + + + + + + + + - Bar - - + + + + + - Baz - - - - - - - - - - - - - - - - - - - - - + + + + - 3 - - - -
- - Foo - +
+ + Foo + + Bar + + Baz +
+ 1 + + 2 + + 3 +
- 1 - - 2 - - 3 -
- 1 - - 2 - - 3 -
- 1 - - 2 - + 1 + + + 2 + + 3 +
+ + 1 + + + 1 + + + 2 + + + 3 + + + + +
`; exports[`Table Style tests should render with default styles 1`] = ` +.circuit-49 { + position: relative; +} + .circuit-47 { box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); } @@ -591,163 +603,171 @@ tbody .circuit-11:last-child td { }
- - - - - - + + + + + + + + + - Bar - - + + + + + - Baz - - - - - - - - - - - - - - - - - - - - - + + + + - 3 - - - -
- - Foo - +
+ + Foo + + Bar + + Baz +
+ 1 + + 2 + + 3 +
- 1 - - 2 - - 3 -
- 1 - - 2 - - 3 -
- 1 - - 2 - + 1 + + + 2 + + 3 +
+ + 1 + + + 1 + + + 2 + + + 3 + + + + +
`; exports[`Table Style tests should render with rowHeader styles 1`] = ` +.circuit-49 { + position: relative; +} + .circuit-47 { box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); } @@ -964,163 +984,171 @@ tbody .circuit-11:last-child td { }
- - - - - - + + + + + + + + + - Bar - - + + + + + - Baz - - - - - - - - - - - - - - - - - - - - - + + + + - 3 - - - -
- - Foo - +
+ + Foo + + Bar + + Baz +
+ 1 + + 2 + + 3 +
- 1 - - 2 - - 3 -
- 1 - - 2 - - 3 -
- 1 - - 2 - + 1 + + + 2 + + 3 +
+ + 1 + + + 1 + + + 2 + + + 3 + + + + +
`; exports[`Table Style tests should render without the table shadow 1`] = ` +.circuit-49 { + position: relative; +} + .circuit-45 { border-radius: 4px; } @@ -1338,158 +1366,162 @@ tbody .circuit-11:last-child td { }
- - - - - - + + + + + + + + + - Bar - - + + + + + - Baz - - - - - - - - - - - - - - - - - - - - - + + + + - 3 - - - -
- - Foo - +
+ + Foo + + Bar + + Baz +
+ 1 + + 2 + + 3 +
- 1 - - 2 - - 3 -
- 1 - - 2 - - 3 -
- 1 - - 2 - + 1 + + + 2 + + 3 +
+ + 1 + + + 1 + + + 2 + + + 3 + + + + +
`;