From c9b2d6834df2d0749688c1158f19abec55eb5a0e Mon Sep 17 00:00:00 2001 From: "Agrawal,Nikhil" Date: Thu, 30 Mar 2017 16:48:53 -0500 Subject: [PATCH] Updating as per comments on PR --- .../src/examples/table/NoStripedTable.jsx | 24 +- .../table/SingleRowSelectableTable.jsx | 24 +- .../src/examples/table/StripedTable.jsx | 24 +- .../table/TableWithHighlightedRows.jsx | 36 +-- .../src/examples/table/TableWithMaxHeight.jsx | 24 +- .../table/TableWithNonSelectableRow.jsx | 24 +- .../table/TableWithSortingIndicator.jsx | 24 +- .../terra-table/docs/themeable-variables.md | 40 ++++ .../terra-table/lib/SingleSelectableRows.js | 5 + packages/terra-table/lib/Table.scss | 221 +++++++++++++++--- .../terra-table/lib/TableHeaderContent.js | 18 +- packages/terra-table/lib/TableRow.js | 3 +- packages/terra-table/lib/TableRowContent.js | 21 +- packages/terra-table/lib/_mixins.scss | 0 packages/terra-table/lib/_variables.scss | 25 +- packages/terra-table/lib/terra-table.scss | 145 ------------ .../terra-table/src/SingleSelectableRows.jsx | 5 + packages/terra-table/src/Table.scss | 221 +++++++++++++++--- .../terra-table/src/TableHeaderContent.jsx | 14 +- packages/terra-table/src/TableRow.jsx | 1 - packages/terra-table/src/TableRowContent.jsx | 18 +- packages/terra-table/src/_mixins.scss | 0 packages/terra-table/src/_variables.scss | 25 +- packages/terra-table/src/terra-table.scss | 145 ------------ .../tests/jest/SingleSelectableRows.test.jsx | 6 +- .../terra-table/tests/jest/Table.test.jsx | 12 +- .../tests/jest/TableHeader.test.jsx | 6 +- .../tests/jest/TableHeaderContent.test.jsx | 12 +- .../terra-table/tests/jest/TableRow.test.jsx | 6 +- .../tests/jest/TableRowContent.test.jsx | 4 +- .../terra-table/tests/jest/TableRows.test.jsx | 6 +- .../SingleSelectableRows.test.jsx.snap | 36 +-- .../jest/__snapshots__/Table.test.jsx.snap | 36 +-- .../__snapshots__/TableHeader.test.jsx.snap | 6 +- .../TableHeaderContent.test.jsx.snap | 18 +- .../jest/__snapshots__/TableRow.test.jsx.snap | 18 +- .../TableRowContent.test.jsx.snap | 5 +- .../__snapshots__/TableRows.test.jsx.snap | 12 +- .../nightwatch/components/NoStripedTable.jsx | 24 +- .../components/SingleRowSelectableTable.jsx | 24 +- .../nightwatch/components/StripedTable.jsx | 24 +- .../components/TableWithHighlightedRows.jsx | 36 +-- .../components/TableWithSortIndicator.jsx | 24 +- .../tests/nightwatch/table-spec.js | 13 +- 44 files changed, 762 insertions(+), 653 deletions(-) delete mode 100644 packages/terra-table/lib/_mixins.scss delete mode 100644 packages/terra-table/lib/terra-table.scss delete mode 100644 packages/terra-table/src/_mixins.scss delete mode 100644 packages/terra-table/src/terra-table.scss diff --git a/packages/terra-site/src/examples/table/NoStripedTable.jsx b/packages/terra-site/src/examples/table/NoStripedTable.jsx index ba2b7a200e5..11ce7604d13 100644 --- a/packages/terra-site/src/examples/table/NoStripedTable.jsx +++ b/packages/terra-site/src/examples/table/NoStripedTable.jsx @@ -5,25 +5,25 @@ import Table from 'terra-table'; const NoStripedTable = () => ( - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-site/src/examples/table/SingleRowSelectableTable.jsx b/packages/terra-site/src/examples/table/SingleRowSelectableTable.jsx index 4e7597d0df4..c80397faff7 100644 --- a/packages/terra-site/src/examples/table/SingleRowSelectableTable.jsx +++ b/packages/terra-site/src/examples/table/SingleRowSelectableTable.jsx @@ -5,25 +5,25 @@ import Table from 'terra-table'; const SingleRowSelectableTable = () => ( - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-site/src/examples/table/StripedTable.jsx b/packages/terra-site/src/examples/table/StripedTable.jsx index 8c150db2269..d778ef7f1fc 100644 --- a/packages/terra-site/src/examples/table/StripedTable.jsx +++ b/packages/terra-site/src/examples/table/StripedTable.jsx @@ -5,25 +5,25 @@ import Table from 'terra-table'; const StripedTable = () => ( - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-site/src/examples/table/TableWithHighlightedRows.jsx b/packages/terra-site/src/examples/table/TableWithHighlightedRows.jsx index 6fff2076a8a..9c2d5b628ea 100644 --- a/packages/terra-site/src/examples/table/TableWithHighlightedRows.jsx +++ b/packages/terra-site/src/examples/table/TableWithHighlightedRows.jsx @@ -5,35 +5,35 @@ import Table from 'terra-table'; const TableWithHighlightedRows = () => ( - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-site/src/examples/table/TableWithMaxHeight.jsx b/packages/terra-site/src/examples/table/TableWithMaxHeight.jsx index 30228d5463b..d7696d004ba 100644 --- a/packages/terra-site/src/examples/table/TableWithMaxHeight.jsx +++ b/packages/terra-site/src/examples/table/TableWithMaxHeight.jsx @@ -5,25 +5,25 @@ import Table from 'terra-table'; const TableWithMaxHeight = () => ( - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-site/src/examples/table/TableWithNonSelectableRow.jsx b/packages/terra-site/src/examples/table/TableWithNonSelectableRow.jsx index 58b7e635397..b4412f6d64c 100644 --- a/packages/terra-site/src/examples/table/TableWithNonSelectableRow.jsx +++ b/packages/terra-site/src/examples/table/TableWithNonSelectableRow.jsx @@ -5,25 +5,25 @@ import Table from 'terra-table'; const TableWithNonSelectableRow = () => ( - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-site/src/examples/table/TableWithSortingIndicator.jsx b/packages/terra-site/src/examples/table/TableWithSortingIndicator.jsx index 42fef4bb06c..3adf065b8a1 100644 --- a/packages/terra-site/src/examples/table/TableWithSortingIndicator.jsx +++ b/packages/terra-site/src/examples/table/TableWithSortingIndicator.jsx @@ -5,25 +5,25 @@ import Table from 'terra-table'; const TableWithSortingIndicator = () => ( - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-table/docs/themeable-variables.md b/packages/terra-table/docs/themeable-variables.md index 8b91bb61d1f..cbdc27dcb1f 100644 --- a/packages/terra-table/docs/themeable-variables.md +++ b/packages/terra-table/docs/themeable-variables.md @@ -1,3 +1,43 @@ # Themeable Variables Variables to `theme` the terra-table component. + +| Variable Name | Default Value | Usage | +|---|---|---| +| $terra-table-background-color | $terra-white | Set the table background color| +| $terra-table-cell-background-color | $terra-white | Set the table-cell background color| +| $terra-table-cell-border-color | $terra-grey-30 | Set the table-cell border color| +| $terra-table-cell-border-width | 1px | Set the table cell border width| +| $terra-table-cell-padding-top | 0.5em | Set the table-cell padding top| +| $terra-table-cell-padding-right | 0.75em | Set the table-cell padding right| +| $terra-table-cell-padding-bottom | 0.5em | Set the table-cell padding bottom| +| $terra-table-cell-padding-left | 0.75em | Set the table-cell padding left| +| $terra-table-cell-small-padding-top | 0.25em | Set the table-cell padding top| +| $terra-table-cell-small-padding-right | 0.75em | Set the table-cell padding right| +| $terra-table-cell-small-padding-bottom | 0.25em | Set the table-cell padding bottom| +| $terra-table-cell-small-padding-left | 0.75em | Set the table-cell padding left| +| $terra-table-row-th-background-color | $terra-grey-10 | Set the table-row table-heading background color| +| $terra-table-row-striped-th-background-color | $terra-grey-20 | Set the table-row table-heading background color for the striped modifier| +| $terra-table-row-striped-background-color | $terra-grey-10 | Set the table-row background color for the striped modifier| +| $terra-table-tfoot-border-color | $terra-grey-30 | Set the tfoot border color| +| $terra-table-tfoot-border-width | 1px | Set the tfoot border width| +| $terra-table-thead-background-color | $terra-grey-20 | Set the thead background color| +| $terra-table-thead-border-color | $terra-grey-30 | Set the thead border color| +| $terra-table-thead-border-width | 1px | Set the thead border width| +| $terra-table-tr-border-color | $terra-grey-30 | Set the tr border color| +| $terra-table-tr-border-width | 1px | Set the tr border width| +| $terra-table-row-max-height-tiny | 1.75rem | Set the maximum height for the content in row| +| $terra-table-row-max-height-small | 3.25rem | Set the maximum height for the content in row| +| $terra-table-row-max-height-medium | 4.75rem | Set the maximum height for the content in row| +| $terra-table-row-max-height-large | 6.25rem | Set the maximum height for the content in row| +| $terra-table-row-max-height-huge | 7.75rem | Set the maximum height for the content in row| +| $terra-table-header-max-height-tiny | 1.75rem | Set the maximum height for the content in header| +| $terra-table-header-max-height-small | 3rem | Set the maximum height for the content in header| +| $terra-table-header-max-height-medium | 4rem | Set the maximum height for the content in header| +| $terra-table-header-max-height-large | 5rem | Set the maximum height for the content in header| +| $terra-table-header-max-height-huge | 6.25rem | Set the maximum height for the content in header| +| $terra-table-cell-min-width-tiny | 3rem | Set the minimum width for the column| +| $terra-table-cell-min-width-small | 4.25rem | Set the minimum width for the column| +| $terra-table-cell-min-width-medium | 5.75rem | Set the minimum width for the column| +| $terra-table-cell-min-width-large | 8.5rem | Set the minimum width for the column| +| $terra-table-cell-min-width-huge | 10.5rem | Set the minimum width for the column| diff --git a/packages/terra-table/lib/SingleSelectableRows.js b/packages/terra-table/lib/SingleSelectableRows.js index cfe9c926976..00fdaab81af 100644 --- a/packages/terra-table/lib/SingleSelectableRows.js +++ b/packages/terra-table/lib/SingleSelectableRows.js @@ -120,6 +120,11 @@ var SingleSelectableRows = function (_React$Component) { newProps.isSelectable = true; } + // Add tabIndex on rows to navigate through keyboard tab key for selectable row + if (newProps.isSelectable || isSelectable) { + newProps.tabIndex = '0'; + } + return newProps; } }, { diff --git a/packages/terra-table/lib/Table.scss b/packages/terra-table/lib/Table.scss index 6fe20ddce3a..496d157d76d 100644 --- a/packages/terra-table/lib/Table.scss +++ b/packages/terra-table/lib/Table.scss @@ -1,61 +1,218 @@ @import '~terra-mixins'; @import './variables'; -@import './mixins'; -@import './terra-table'; -[data-column-min-width='tiny'] { +.terra-Table { + background-color: $terra-table-background-color; + border-collapse: collapse; + border-spacing: 0; + max-width: 100%; + width: 100%; + + caption { + padding-bottom: 0.5em; + } + + tr { + display: block; + } + + th, + td { + @include terra-padding-horizontal($terra-table-cell-padding-left, $terra-table-cell-padding-right); + @include terra-text-align-start; + + border: $terra-table-cell-border-width solid $terra-table-cell-border-color; + border-bottom: 0; + display: block; + padding-bottom: $terra-table-cell-padding-bottom; + padding-top: $terra-table-cell-padding-top; + + &::before { + content: attr(data-heading); + display: block; + font-weight: bold; + } + + // Clears floated :before + &::after { + @include terra-clear-both; + + content: ' '; + display: table; + } + + &:last-child { + border-bottom: $terra-table-cell-border-width solid $terra-table-cell-border-color; + margin-bottom: 1em; + } + } + + // Full behavior + @media screen and (min-width: $terra-small-breakpoint) { + border: $terra-table-cell-border-width solid $terra-table-cell-border-color; + + tr { + border-bottom: $terra-table-tr-border-width solid $terra-table-tr-border-color; + display: table-row; + margin-bottom: 0; + } + + th, + td { + @include terra-text-align-start; + + border: 0; // Remove border from compact "card" view + display: table-cell; + vertical-align: top; + } + + th::before, + td::before, + th::after, + td::after { + display: none; + } + + th:last-child, + td:last-child { + border: 0; // Remove border from compact "card" view + } + + thead { + background-color: $terra-table-thead-background-color; + border-bottom: $terra-table-thead-border-width solid $terra-table-thead-border-color; + display: table-header-group; + } + + thead th { + vertical-align: bottom; + } + + tbody th { + @include terra-text-align-end; + + background-color: $terra-table-row-th-background-color; + } + + tfoot tr { + @include terra-text-align-start; + + border-top: $terra-table-tfoot-border-width solid $terra-table-tfoot-border-color; + } + } +} + +.terra-Table--small { + th, + td { + @include terra-padding-horizontal($terra-table-cell-padding-left, $terra-table-cell-padding-right); + + padding-bottom: $terra-table-cell-small-padding-bottom; + padding-top: $terra-table-cell-small-padding-top; + } +} + +.terra-Table--striped { + tbody td:nth-of-type(even) { + background-color: $terra-table-row-striped-background-color; + + @media screen and (min-width: $terra-small-breakpoint) { + background-color: transparent; + } + } + + @media screen and (min-width: $terra-small-breakpoint) { + tbody tr:nth-of-type(even) { + background-color: $terra-table-row-striped-background-color; + } + + /* Compound selector depth required for specificity */ + /* stylelint-disable-next-line selector-max-compound-selectors */ + tbody tr:nth-of-type(even) th { + background-color: $terra-table-row-striped-th-background-color; + } + } +} + +// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css +@media print { + .terra-Table thead { + display: table-header-group; + } + + .terra-Table tr { + page-break-inside: avoid; + } +} + +.terra-Table-min-width--tiny { min-width: $terra-table-cell-min-width-tiny; } -[data-column-min-width='small'] { +.terra-Table-min-width--small { min-width: $terra-table-cell-min-width-small; } -[data-column-min-width='medium'] { +.terra-Table-min-width--medium { min-width: $terra-table-cell-min-width-medium; } -[data-column-min-width='large'] { +.terra-Table-min-width--large { min-width: $terra-table-cell-min-width-large; } -[data-column-min-width='huge'] { +.terra-Table-min-width--huge { min-width: $terra-table-cell-min-width-huge; } -[data-max-height='tiny'] { - > div { - max-height: $terra-table-cell-max-height-tiny; - overflow: auto; - } +.terra-Table-header-max-height--tiny > div { + max-height: $terra-table-header-max-height-tiny; + overflow: auto; } -[data-max-height='small'] { - > div { - max-height: $terra-table-cell-max-height-small; - overflow: auto; - } +.terra-Table-header-max-height--small > div { + max-height: $terra-table-header-max-height-small; + overflow: auto; } -[data-max-height='medium'] { - > div { - max-height: $terra-table-cell-max-height-medium; - overflow: auto; - } +.terra-Table-header-max-height--medium > div { + max-height: $terra-table-header-max-height-medium; + overflow: auto; } -[data-max-height='large'] { - > div { - max-height: $terra-table-cell-max-height-large; - overflow: auto; - } +.terra-Table-header-max-height--large > div { + max-height: $terra-table-header-max-height-large; + overflow: auto; } -[data-max-height='huge'] { - > div { - max-height: $terra-table-cell-max-height-huge; - overflow: auto; - } +.terra-Table-header-max-height--huge > div { + max-height: $terra-table-header-max-height-huge; + overflow: auto; +} + +.terra-Table-row-max-height--tiny > div { + max-height: $terra-table-row-max-height-tiny; + overflow: auto; +} + +.terra-Table-row-max-height--small > div { + max-height: $terra-table-row-max-height-small; + overflow: auto; +} + +.terra-Table-row-max-height--medium > div { + max-height: $terra-table-row-max-height-medium; + overflow: auto; +} + +.terra-Table-row-max-height--large > div { + max-height: $terra-table-row-max-height-large; + overflow: auto; +} + +.terra-Table-row-max-height--huge > div { + max-height: $terra-table-row-max-height-huge; + overflow: auto; } .terra-Table--isSelected { diff --git a/packages/terra-table/lib/TableHeaderContent.js b/packages/terra-table/lib/TableHeaderContent.js index 6437352f9f2..e6e26b14222 100644 --- a/packages/terra-table/lib/TableHeaderContent.js +++ b/packages/terra-table/lib/TableHeaderContent.js @@ -24,13 +24,15 @@ var _classnames2 = _interopRequireDefault(_classnames); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } var propTypes = { /** * Content to be displayed for the column header */ - display: _react.PropTypes.node.isRequired, + content: _react.PropTypes.node.isRequired, /** * The minimum width for the column */ @@ -53,17 +55,13 @@ var iconDown = _react2.default.createElement(_IconCaretDown2.default, null); var iconUp = _react2.default.createElement(_IconCaretUp2.default, null); var TableHeaderContent = function TableHeaderContent(_ref) { - var display = _ref.display, + var content = _ref.content, height = _ref.height, minWidth = _ref.minWidth, sort = _ref.sort, - customProps = _objectWithoutProperties(_ref, ['display', 'height', 'minWidth', 'sort']); - - var contentClassName = (0, _classnames2.default)(['terra-Table-header', customProps.className]); + customProps = _objectWithoutProperties(_ref, ['content', 'height', 'minWidth', 'sort']); - var heightProperty = { - 'data-max-height': height - }; + var contentClassName = (0, _classnames2.default)([_defineProperty({}, 'terra-Table-min-width--' + minWidth, minWidth), _defineProperty({}, 'terra-Table-header-max-height--' + height, height), 'terra-Table-header', customProps.className]); var dataSort = { 'data-sort': sort @@ -86,11 +84,11 @@ var TableHeaderContent = function TableHeaderContent(_ref) { return _react2.default.createElement( 'th', - _extends({}, customProps, { className: contentClassName, 'data-column-min-width': minWidth }, heightProperty, dataSort), + _extends({}, customProps, { className: contentClassName }, dataSort), _react2.default.createElement( 'div', null, - display, + content, sortIndicator ) ); diff --git a/packages/terra-table/lib/TableRow.js b/packages/terra-table/lib/TableRow.js index 1115fff0b76..3e6bd35f57d 100644 --- a/packages/terra-table/lib/TableRow.js +++ b/packages/terra-table/lib/TableRow.js @@ -42,8 +42,7 @@ var propTypes = { }; var defaultProps = { - isSelected: false, - isSelectable: undefined + isSelected: false }; function cloneChildItems(children, height) { diff --git a/packages/terra-table/lib/TableRowContent.js b/packages/terra-table/lib/TableRowContent.js index 37be769c1d0..6e8b5378843 100644 --- a/packages/terra-table/lib/TableRowContent.js +++ b/packages/terra-table/lib/TableRowContent.js @@ -10,15 +10,21 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react); +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } var propTypes = { /** * Content to be displayed for the row cell */ - display: _react.PropTypes.any.isRequired, + content: _react.PropTypes.any.isRequired, /** * The maximum height for the cell content in a table */ @@ -26,20 +32,19 @@ var propTypes = { }; var TableRowContent = function TableRowContent(_ref) { - var display = _ref.display, + var content = _ref.content, height = _ref.height, - customProps = _objectWithoutProperties(_ref, ['display', 'height']); + customProps = _objectWithoutProperties(_ref, ['content', 'height']); + + var contentClassName = (0, _classnames2.default)([_defineProperty({}, 'terra-Table-row-max-height--' + height, height), 'terra-Table-cell', customProps.className]); - var heightProperty = { - 'data-max-height': height - }; return _react2.default.createElement( 'td', - _extends({}, heightProperty, customProps), + _extends({}, customProps, { className: contentClassName }), _react2.default.createElement( 'div', null, - display + content ) ); }; diff --git a/packages/terra-table/lib/_mixins.scss b/packages/terra-table/lib/_mixins.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/terra-table/lib/_variables.scss b/packages/terra-table/lib/_variables.scss index cb8613fd499..8493372d159 100644 --- a/packages/terra-table/lib/_variables.scss +++ b/packages/terra-table/lib/_variables.scss @@ -23,13 +23,18 @@ $terra-table-thead-border-color: $terra-grey-30 !default; $terra-table-thead-border-width: 1px !default; $terra-table-tr-border-color: $terra-grey-30 !default; $terra-table-tr-border-width: 1px !default; -$terra-table-cell-max-height-tiny: 26px; -$terra-table-cell-max-height-small: 46px; -$terra-table-cell-max-height-medium: 66px; -$terra-table-cell-max-height-large: 86px; -$terra-table-cell-max-height-huge: 106px; -$terra-table-cell-min-width-tiny: 40px; -$terra-table-cell-min-width-small: 60px; -$terra-table-cell-min-width-medium: 80px; -$terra-table-cell-min-width-large: 120px; -$terra-table-cell-min-width-huge: 150px; +$terra-table-header-max-height-tiny: 1.75rem; +$terra-table-header-max-height-small: 3rem; +$terra-table-header-max-height-medium: 4rem; +$terra-table-header-max-height-large: 5rem; +$terra-table-header-max-height-huge: 6.25rem; +$terra-table-row-max-height-tiny: 1.75rem; +$terra-table-row-max-height-small: 3.25rem; +$terra-table-row-max-height-medium: 4.75rem; +$terra-table-row-max-height-large: 6.25rem; +$terra-table-row-max-height-huge: 7.75rem; +$terra-table-cell-min-width-tiny: 3rem; +$terra-table-cell-min-width-small: 4.25rem; +$terra-table-cell-min-width-medium: 5.75rem; +$terra-table-cell-min-width-large: 8.5rem; +$terra-table-cell-min-width-huge: 10.5rem; diff --git a/packages/terra-table/lib/terra-table.scss b/packages/terra-table/lib/terra-table.scss deleted file mode 100644 index f71b4850416..00000000000 --- a/packages/terra-table/lib/terra-table.scss +++ /dev/null @@ -1,145 +0,0 @@ -@import './variables'; - -.terra-Table { - background-color: $terra-table-background-color; - border-collapse: collapse; - border-spacing: 0; - max-width: 100%; - width: 100%; - - caption { - padding-bottom: 0.5em; - } - - tr { - display: block; - } - - th, - td { - @include terra-padding-horizontal($terra-table-cell-padding-left, $terra-table-cell-padding-right); - @include terra-text-align-start; - - border: $terra-table-cell-border-width solid $terra-table-cell-border-color; - border-bottom: 0; - display: block; - padding-bottom: $terra-table-cell-padding-bottom; - padding-top: $terra-table-cell-padding-top; - - &::before { - content: attr(data-heading); - display: block; - font-weight: bold; - } - - // Clears floated :before - &::after { - @include terra-clear-both; - - content: ' '; - display: table; - } - - &:last-child { - border-bottom: $terra-table-cell-border-width solid $terra-table-cell-border-color; - margin-bottom: 1em; - } - } - - // Full behavior - @media screen and (min-width: $terra-small-breakpoint) { - border: $terra-table-cell-border-width solid $terra-table-cell-border-color; - - tr { - border-bottom: $terra-table-tr-border-width solid $terra-table-tr-border-color; - display: table-row; - margin-bottom: 0; - } - - th, - td { - @include terra-text-align-start; - - border: 0; // Remove border from compact "card" view - display: table-cell; - vertical-align: top; - } - - th::before, - td::before, - th::after, - td::after { - display: none; - } - - th:last-child, - td:last-child { - border: 0; // Remove border from compact "card" view - } - - thead { - background-color: $terra-table-thead-background-color; - border-bottom: $terra-table-thead-border-width solid $terra-table-thead-border-color; - display: table-header-group; - } - - thead th { - vertical-align: bottom; - } - - tbody th { - @include terra-text-align-end; - - background-color: $terra-table-row-th-background-color; - } - - tfoot tr { - @include terra-text-align-start; - - border-top: $terra-table-tfoot-border-width solid $terra-table-tfoot-border-color; - } - } -} - -.terra-Table--small { - th, - td { - @include terra-padding-horizontal($terra-table-cell-padding-left, $terra-table-cell-padding-right); - - padding-bottom: $terra-table-cell-small-padding-bottom; - padding-top: $terra-table-cell-small-padding-top; - } -} - -.terra-Table--striped { - tbody td:nth-of-type(even) { - background-color: $terra-table-row-striped-background-color; - - @media screen and (min-width: $terra-small-breakpoint) { - background-color: transparent; - } - } - - @media screen and (min-width: $terra-small-breakpoint) { - tbody tr:nth-of-type(even) { - background-color: $terra-table-row-striped-background-color; - } - - /* Compound selector depth required for specificity */ - /* stylelint-disable-next-line selector-max-compound-selectors */ - tbody tr:nth-of-type(even) th { - background-color: $terra-table-row-striped-th-background-color; - } - } -} - -// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css -@media print { - .terra-Table thead { - display: table-header-group; - } - - .terra-Table tr { - page-break-inside: avoid; - } -} diff --git a/packages/terra-table/src/SingleSelectableRows.jsx b/packages/terra-table/src/SingleSelectableRows.jsx index ce4ee1cbd58..7e31096941e 100644 --- a/packages/terra-table/src/SingleSelectableRows.jsx +++ b/packages/terra-table/src/SingleSelectableRows.jsx @@ -79,6 +79,11 @@ class SingleSelectableRows extends React.Component { newProps.isSelectable = true; } + // Add tabIndex on rows to navigate through keyboard tab key for selectable row + if (newProps.isSelectable || isSelectable) { + newProps.tabIndex = '0'; + } + return newProps; } diff --git a/packages/terra-table/src/Table.scss b/packages/terra-table/src/Table.scss index 6fe20ddce3a..496d157d76d 100644 --- a/packages/terra-table/src/Table.scss +++ b/packages/terra-table/src/Table.scss @@ -1,61 +1,218 @@ @import '~terra-mixins'; @import './variables'; -@import './mixins'; -@import './terra-table'; -[data-column-min-width='tiny'] { +.terra-Table { + background-color: $terra-table-background-color; + border-collapse: collapse; + border-spacing: 0; + max-width: 100%; + width: 100%; + + caption { + padding-bottom: 0.5em; + } + + tr { + display: block; + } + + th, + td { + @include terra-padding-horizontal($terra-table-cell-padding-left, $terra-table-cell-padding-right); + @include terra-text-align-start; + + border: $terra-table-cell-border-width solid $terra-table-cell-border-color; + border-bottom: 0; + display: block; + padding-bottom: $terra-table-cell-padding-bottom; + padding-top: $terra-table-cell-padding-top; + + &::before { + content: attr(data-heading); + display: block; + font-weight: bold; + } + + // Clears floated :before + &::after { + @include terra-clear-both; + + content: ' '; + display: table; + } + + &:last-child { + border-bottom: $terra-table-cell-border-width solid $terra-table-cell-border-color; + margin-bottom: 1em; + } + } + + // Full behavior + @media screen and (min-width: $terra-small-breakpoint) { + border: $terra-table-cell-border-width solid $terra-table-cell-border-color; + + tr { + border-bottom: $terra-table-tr-border-width solid $terra-table-tr-border-color; + display: table-row; + margin-bottom: 0; + } + + th, + td { + @include terra-text-align-start; + + border: 0; // Remove border from compact "card" view + display: table-cell; + vertical-align: top; + } + + th::before, + td::before, + th::after, + td::after { + display: none; + } + + th:last-child, + td:last-child { + border: 0; // Remove border from compact "card" view + } + + thead { + background-color: $terra-table-thead-background-color; + border-bottom: $terra-table-thead-border-width solid $terra-table-thead-border-color; + display: table-header-group; + } + + thead th { + vertical-align: bottom; + } + + tbody th { + @include terra-text-align-end; + + background-color: $terra-table-row-th-background-color; + } + + tfoot tr { + @include terra-text-align-start; + + border-top: $terra-table-tfoot-border-width solid $terra-table-tfoot-border-color; + } + } +} + +.terra-Table--small { + th, + td { + @include terra-padding-horizontal($terra-table-cell-padding-left, $terra-table-cell-padding-right); + + padding-bottom: $terra-table-cell-small-padding-bottom; + padding-top: $terra-table-cell-small-padding-top; + } +} + +.terra-Table--striped { + tbody td:nth-of-type(even) { + background-color: $terra-table-row-striped-background-color; + + @media screen and (min-width: $terra-small-breakpoint) { + background-color: transparent; + } + } + + @media screen and (min-width: $terra-small-breakpoint) { + tbody tr:nth-of-type(even) { + background-color: $terra-table-row-striped-background-color; + } + + /* Compound selector depth required for specificity */ + /* stylelint-disable-next-line selector-max-compound-selectors */ + tbody tr:nth-of-type(even) th { + background-color: $terra-table-row-striped-th-background-color; + } + } +} + +// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css +@media print { + .terra-Table thead { + display: table-header-group; + } + + .terra-Table tr { + page-break-inside: avoid; + } +} + +.terra-Table-min-width--tiny { min-width: $terra-table-cell-min-width-tiny; } -[data-column-min-width='small'] { +.terra-Table-min-width--small { min-width: $terra-table-cell-min-width-small; } -[data-column-min-width='medium'] { +.terra-Table-min-width--medium { min-width: $terra-table-cell-min-width-medium; } -[data-column-min-width='large'] { +.terra-Table-min-width--large { min-width: $terra-table-cell-min-width-large; } -[data-column-min-width='huge'] { +.terra-Table-min-width--huge { min-width: $terra-table-cell-min-width-huge; } -[data-max-height='tiny'] { - > div { - max-height: $terra-table-cell-max-height-tiny; - overflow: auto; - } +.terra-Table-header-max-height--tiny > div { + max-height: $terra-table-header-max-height-tiny; + overflow: auto; } -[data-max-height='small'] { - > div { - max-height: $terra-table-cell-max-height-small; - overflow: auto; - } +.terra-Table-header-max-height--small > div { + max-height: $terra-table-header-max-height-small; + overflow: auto; } -[data-max-height='medium'] { - > div { - max-height: $terra-table-cell-max-height-medium; - overflow: auto; - } +.terra-Table-header-max-height--medium > div { + max-height: $terra-table-header-max-height-medium; + overflow: auto; } -[data-max-height='large'] { - > div { - max-height: $terra-table-cell-max-height-large; - overflow: auto; - } +.terra-Table-header-max-height--large > div { + max-height: $terra-table-header-max-height-large; + overflow: auto; } -[data-max-height='huge'] { - > div { - max-height: $terra-table-cell-max-height-huge; - overflow: auto; - } +.terra-Table-header-max-height--huge > div { + max-height: $terra-table-header-max-height-huge; + overflow: auto; +} + +.terra-Table-row-max-height--tiny > div { + max-height: $terra-table-row-max-height-tiny; + overflow: auto; +} + +.terra-Table-row-max-height--small > div { + max-height: $terra-table-row-max-height-small; + overflow: auto; +} + +.terra-Table-row-max-height--medium > div { + max-height: $terra-table-row-max-height-medium; + overflow: auto; +} + +.terra-Table-row-max-height--large > div { + max-height: $terra-table-row-max-height-large; + overflow: auto; +} + +.terra-Table-row-max-height--huge > div { + max-height: $terra-table-row-max-height-huge; + overflow: auto; } .terra-Table--isSelected { diff --git a/packages/terra-table/src/TableHeaderContent.jsx b/packages/terra-table/src/TableHeaderContent.jsx index 306ff7f961f..f5c8c03013a 100644 --- a/packages/terra-table/src/TableHeaderContent.jsx +++ b/packages/terra-table/src/TableHeaderContent.jsx @@ -7,7 +7,7 @@ const propTypes = { /** * Content to be displayed for the column header */ - display: PropTypes.node.isRequired, + content: PropTypes.node.isRequired, /** * The minimum width for the column */ @@ -30,21 +30,19 @@ const iconDown = ; const iconUp = ; const TableHeaderContent = ({ - display, + content, height, minWidth, sort, ...customProps }) => { const contentClassName = classNames([ + { [`terra-Table-min-width--${minWidth}`]: minWidth }, + { [`terra-Table-header-max-height--${height}`]: height }, 'terra-Table-header', customProps.className, ]); - const heightProperty = { - 'data-max-height': height, - }; - const dataSort = { 'data-sort': sort, }; @@ -57,9 +55,9 @@ const TableHeaderContent = ({ } return ( - +
- {display} + {content} {sortIndicator}
diff --git a/packages/terra-table/src/TableRow.jsx b/packages/terra-table/src/TableRow.jsx index 8e47e37c8e1..0a320a5e2ee 100644 --- a/packages/terra-table/src/TableRow.jsx +++ b/packages/terra-table/src/TableRow.jsx @@ -23,7 +23,6 @@ const propTypes = { const defaultProps = { isSelected: false, - isSelectable: undefined, }; function cloneChildItems(children, height) { diff --git a/packages/terra-table/src/TableRowContent.jsx b/packages/terra-table/src/TableRowContent.jsx index 3863a3e4310..7b8a7465d22 100644 --- a/packages/terra-table/src/TableRowContent.jsx +++ b/packages/terra-table/src/TableRowContent.jsx @@ -1,10 +1,11 @@ import React, { PropTypes } from 'react'; +import classNames from 'classnames'; const propTypes = { /** * Content to be displayed for the row cell */ - display: PropTypes.any.isRequired, + content: PropTypes.any.isRequired, /** * The maximum height for the cell content in a table */ @@ -12,16 +13,19 @@ const propTypes = { }; const TableRowContent = ({ - display, + content, height, ...customProps }) => { - const heightProperty = { - 'data-max-height': height, - }; + const contentClassName = classNames([ + { [`terra-Table-row-max-height--${height}`]: height }, + 'terra-Table-cell', + customProps.className, + ]); + return ( - -
{display}
+ +
{content}
); }; diff --git a/packages/terra-table/src/_mixins.scss b/packages/terra-table/src/_mixins.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/terra-table/src/_variables.scss b/packages/terra-table/src/_variables.scss index cb8613fd499..8493372d159 100644 --- a/packages/terra-table/src/_variables.scss +++ b/packages/terra-table/src/_variables.scss @@ -23,13 +23,18 @@ $terra-table-thead-border-color: $terra-grey-30 !default; $terra-table-thead-border-width: 1px !default; $terra-table-tr-border-color: $terra-grey-30 !default; $terra-table-tr-border-width: 1px !default; -$terra-table-cell-max-height-tiny: 26px; -$terra-table-cell-max-height-small: 46px; -$terra-table-cell-max-height-medium: 66px; -$terra-table-cell-max-height-large: 86px; -$terra-table-cell-max-height-huge: 106px; -$terra-table-cell-min-width-tiny: 40px; -$terra-table-cell-min-width-small: 60px; -$terra-table-cell-min-width-medium: 80px; -$terra-table-cell-min-width-large: 120px; -$terra-table-cell-min-width-huge: 150px; +$terra-table-header-max-height-tiny: 1.75rem; +$terra-table-header-max-height-small: 3rem; +$terra-table-header-max-height-medium: 4rem; +$terra-table-header-max-height-large: 5rem; +$terra-table-header-max-height-huge: 6.25rem; +$terra-table-row-max-height-tiny: 1.75rem; +$terra-table-row-max-height-small: 3.25rem; +$terra-table-row-max-height-medium: 4.75rem; +$terra-table-row-max-height-large: 6.25rem; +$terra-table-row-max-height-huge: 7.75rem; +$terra-table-cell-min-width-tiny: 3rem; +$terra-table-cell-min-width-small: 4.25rem; +$terra-table-cell-min-width-medium: 5.75rem; +$terra-table-cell-min-width-large: 8.5rem; +$terra-table-cell-min-width-huge: 10.5rem; diff --git a/packages/terra-table/src/terra-table.scss b/packages/terra-table/src/terra-table.scss deleted file mode 100644 index f71b4850416..00000000000 --- a/packages/terra-table/src/terra-table.scss +++ /dev/null @@ -1,145 +0,0 @@ -@import './variables'; - -.terra-Table { - background-color: $terra-table-background-color; - border-collapse: collapse; - border-spacing: 0; - max-width: 100%; - width: 100%; - - caption { - padding-bottom: 0.5em; - } - - tr { - display: block; - } - - th, - td { - @include terra-padding-horizontal($terra-table-cell-padding-left, $terra-table-cell-padding-right); - @include terra-text-align-start; - - border: $terra-table-cell-border-width solid $terra-table-cell-border-color; - border-bottom: 0; - display: block; - padding-bottom: $terra-table-cell-padding-bottom; - padding-top: $terra-table-cell-padding-top; - - &::before { - content: attr(data-heading); - display: block; - font-weight: bold; - } - - // Clears floated :before - &::after { - @include terra-clear-both; - - content: ' '; - display: table; - } - - &:last-child { - border-bottom: $terra-table-cell-border-width solid $terra-table-cell-border-color; - margin-bottom: 1em; - } - } - - // Full behavior - @media screen and (min-width: $terra-small-breakpoint) { - border: $terra-table-cell-border-width solid $terra-table-cell-border-color; - - tr { - border-bottom: $terra-table-tr-border-width solid $terra-table-tr-border-color; - display: table-row; - margin-bottom: 0; - } - - th, - td { - @include terra-text-align-start; - - border: 0; // Remove border from compact "card" view - display: table-cell; - vertical-align: top; - } - - th::before, - td::before, - th::after, - td::after { - display: none; - } - - th:last-child, - td:last-child { - border: 0; // Remove border from compact "card" view - } - - thead { - background-color: $terra-table-thead-background-color; - border-bottom: $terra-table-thead-border-width solid $terra-table-thead-border-color; - display: table-header-group; - } - - thead th { - vertical-align: bottom; - } - - tbody th { - @include terra-text-align-end; - - background-color: $terra-table-row-th-background-color; - } - - tfoot tr { - @include terra-text-align-start; - - border-top: $terra-table-tfoot-border-width solid $terra-table-tfoot-border-color; - } - } -} - -.terra-Table--small { - th, - td { - @include terra-padding-horizontal($terra-table-cell-padding-left, $terra-table-cell-padding-right); - - padding-bottom: $terra-table-cell-small-padding-bottom; - padding-top: $terra-table-cell-small-padding-top; - } -} - -.terra-Table--striped { - tbody td:nth-of-type(even) { - background-color: $terra-table-row-striped-background-color; - - @media screen and (min-width: $terra-small-breakpoint) { - background-color: transparent; - } - } - - @media screen and (min-width: $terra-small-breakpoint) { - tbody tr:nth-of-type(even) { - background-color: $terra-table-row-striped-background-color; - } - - /* Compound selector depth required for specificity */ - /* stylelint-disable-next-line selector-max-compound-selectors */ - tbody tr:nth-of-type(even) th { - background-color: $terra-table-row-striped-th-background-color; - } - } -} - -// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css -@media print { - .terra-Table thead { - display: table-header-group; - } - - .terra-Table tr { - page-break-inside: avoid; - } -} diff --git a/packages/terra-table/tests/jest/SingleSelectableRows.test.jsx b/packages/terra-table/tests/jest/SingleSelectableRows.test.jsx index a010844ae57..207d75220a3 100644 --- a/packages/terra-table/tests/jest/SingleSelectableRows.test.jsx +++ b/packages/terra-table/tests/jest/SingleSelectableRows.test.jsx @@ -2,9 +2,9 @@ import React from 'react'; import Table from '../../src/Table'; // Constants -const cellData1 = ; -const cellData2 = ; -const cellData3 = ; +const cellData1 = ; +const cellData2 = ; +const cellData3 = ; const rowData = [cellData1, cellData2, cellData3]; const row1 = {rowData}; const row2 = {rowData}; diff --git a/packages/terra-table/tests/jest/Table.test.jsx b/packages/terra-table/tests/jest/Table.test.jsx index 146e6733061..1e2565c87c8 100644 --- a/packages/terra-table/tests/jest/Table.test.jsx +++ b/packages/terra-table/tests/jest/Table.test.jsx @@ -2,16 +2,16 @@ import React from 'react'; import Table from '../../src/Table'; // Constants -const cellData1 = ; -const cellData2 = ; -const cellData3 = ; +const cellData1 = ; +const cellData2 = ; +const cellData3 = ; const rowData = [cellData1, cellData2, cellData3]; const row1 = {rowData}; const row2 = {rowData}; const rows = [row1, row2]; -const headerData1 = ; -const headerData2 = ; -const headerData3 = ; +const headerData1 = ; +const headerData2 = ; +const headerData3 = ; const header = [headerData1, headerData2, headerData3]; // Snapshot test diff --git a/packages/terra-table/tests/jest/TableHeader.test.jsx b/packages/terra-table/tests/jest/TableHeader.test.jsx index dc7c0ad93cc..19f74f9ef8e 100644 --- a/packages/terra-table/tests/jest/TableHeader.test.jsx +++ b/packages/terra-table/tests/jest/TableHeader.test.jsx @@ -2,9 +2,9 @@ import React from 'react'; import Table from '../../src/Table'; // Constants -const headerData1 = ; -const headerData2 = ; -const headerData3 = ; +const headerData1 = ; +const headerData2 = ; +const headerData3 = ; const header = [headerData1, headerData2, headerData3]; // Snapshot test diff --git a/packages/terra-table/tests/jest/TableHeaderContent.test.jsx b/packages/terra-table/tests/jest/TableHeaderContent.test.jsx index 0e1594d67e4..9d144a12d7c 100644 --- a/packages/terra-table/tests/jest/TableHeaderContent.test.jsx +++ b/packages/terra-table/tests/jest/TableHeaderContent.test.jsx @@ -3,19 +3,25 @@ import Table from '../../src/Table'; // Snapshot test it('should render default table header content tag', () => { - const defaultTableHeaderContent = ; + const defaultTableHeaderContent = ; const tableHeaderContent = shallow(defaultTableHeaderContent); expect(tableHeaderContent).toMatchSnapshot(); }); it('should render table header content tag with ascending sort indicator', () => { - const tableHeaderContentTag = ; + const tableHeaderContentTag = ; const tableHeaderContent = shallow(tableHeaderContentTag); expect(tableHeaderContent).toMatchSnapshot(); }); it('should render table header content tag with descending sort indicator', () => { - const tableHeaderContentTag = ; + const tableHeaderContentTag = ; const tableHeaderContent = shallow(tableHeaderContentTag); expect(tableHeaderContent).toMatchSnapshot(); }); + +it('should render table header content tag with maximum height fixed', () => { + const defaultTableHeaderContent = ; + const tableHeaderContent = shallow(defaultTableHeaderContent); + expect(tableHeaderContent).toMatchSnapshot(); +}); diff --git a/packages/terra-table/tests/jest/TableRow.test.jsx b/packages/terra-table/tests/jest/TableRow.test.jsx index d5f8fee8ea5..d664770412d 100644 --- a/packages/terra-table/tests/jest/TableRow.test.jsx +++ b/packages/terra-table/tests/jest/TableRow.test.jsx @@ -2,9 +2,9 @@ import React from 'react'; import Table from '../../src/Table'; // Constants -const cellData1 = ; -const cellData2 = ; -const cellData3 = ; +const cellData1 = ; +const cellData2 = ; +const cellData3 = ; const rowData = [cellData1, cellData2, cellData3]; // Snapshot test diff --git a/packages/terra-table/tests/jest/TableRowContent.test.jsx b/packages/terra-table/tests/jest/TableRowContent.test.jsx index 7a7e34728c0..4ee2ca7c4d7 100644 --- a/packages/terra-table/tests/jest/TableRowContent.test.jsx +++ b/packages/terra-table/tests/jest/TableRowContent.test.jsx @@ -3,13 +3,13 @@ import Table from '../../src/Table'; // Snapshot test it('should render a default table row content', () => { - const defaultTableRowContent = ; + const defaultTableRowContent = ; const tableRowContent = shallow(defaultTableRowContent); expect(tableRowContent).toMatchSnapshot(); }); it('should render a table row content with maximum height', () => { - const tableRowContentTag = ; + const tableRowContentTag = ; const tableRowContent = shallow(tableRowContentTag); expect(tableRowContent).toMatchSnapshot(); }); diff --git a/packages/terra-table/tests/jest/TableRows.test.jsx b/packages/terra-table/tests/jest/TableRows.test.jsx index 8619d118f1f..98e775a3d38 100644 --- a/packages/terra-table/tests/jest/TableRows.test.jsx +++ b/packages/terra-table/tests/jest/TableRows.test.jsx @@ -2,9 +2,9 @@ import React from 'react'; import Table from '../../src/Table'; // Constants -const cellData1 = ; -const cellData2 = ; -const cellData3 = ; +const cellData1 = ; +const cellData2 = ; +const cellData3 = ; const rowData = [cellData1, cellData2, cellData3]; const row1 = {rowData}; const row2 = {rowData}; diff --git a/packages/terra-table/tests/jest/__snapshots__/SingleSelectableRows.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/SingleSelectableRows.test.jsx.snap index ecf456d5464..e9f29ad2db3 100644 --- a/packages/terra-table/tests/jest/__snapshots__/SingleSelectableRows.test.jsx.snap +++ b/packages/terra-table/tests/jest/__snapshots__/SingleSelectableRows.test.jsx.snap @@ -3,24 +3,26 @@ exports[`test should render SingleSelectableRows tag 1`] = ` + onClick={[Function]} + tabIndex="0"> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + onClick={[Function]} + tabIndex="0"> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> `; @@ -31,24 +33,26 @@ exports[`test should render SingleSelectableRows with maximum height set 1`] = ` + onClick={[Function]} + tabIndex="0"> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + onClick={[Function]} + tabIndex="0"> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> `; diff --git a/packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap index 1ed3a8da7f0..e0c1029434b 100644 --- a/packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap +++ b/packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap @@ -3,33 +3,33 @@ exports[`test should render a default table 1`] = ` className="terra-Table terra-Table--striped"> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> @@ -40,33 +40,33 @@ exports[`test should render a table without zebra stripes 1`] = ` className="terra-Table"> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> diff --git a/packages/terra-table/tests/jest/__snapshots__/TableHeader.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/TableHeader.test.jsx.snap index 018cd24969d..437965617ab 100644 --- a/packages/terra-table/tests/jest/__snapshots__/TableHeader.test.jsx.snap +++ b/packages/terra-table/tests/jest/__snapshots__/TableHeader.test.jsx.snap @@ -2,13 +2,13 @@ exports[`test should render table header tag 1`] = ` diff --git a/packages/terra-table/tests/jest/__snapshots__/TableHeaderContent.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/TableHeaderContent.test.jsx.snap index bfa83c94d27..cfc05d08f3e 100644 --- a/packages/terra-table/tests/jest/__snapshots__/TableHeaderContent.test.jsx.snap +++ b/packages/terra-table/tests/jest/__snapshots__/TableHeaderContent.test.jsx.snap @@ -1,7 +1,6 @@ exports[`test should render default table header content tag 1`] = ` + className="terra-Table-min-width--small terra-Table-header">
Column Heading
@@ -10,8 +9,7 @@ exports[`test should render default table header content tag 1`] = ` exports[`test should render table header content tag with ascending sort indicator 1`] = `
Column Heading @@ -29,8 +27,7 @@ exports[`test should render table header content tag with ascending sort indicat exports[`test should render table header content tag with descending sort indicator 1`] = `
Column Heading @@ -45,3 +42,12 @@ exports[`test should render table header content tag with descending sort indica
`; + +exports[`test should render table header content tag with maximum height fixed 1`] = ` + +
+ Column Heading +
+ +`; diff --git a/packages/terra-table/tests/jest/__snapshots__/TableRow.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/TableRow.test.jsx.snap index 19931242ecf..37c4073f9d0 100644 --- a/packages/terra-table/tests/jest/__snapshots__/TableRow.test.jsx.snap +++ b/packages/terra-table/tests/jest/__snapshots__/TableRow.test.jsx.snap @@ -2,11 +2,11 @@ exports[`test should render a default table row 1`] = ` + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> `; @@ -14,11 +14,11 @@ exports[`test should render a selectable table row 1`] = ` + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> `; @@ -26,10 +26,10 @@ exports[`test should render a selected table row 1`] = ` + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> `; diff --git a/packages/terra-table/tests/jest/__snapshots__/TableRowContent.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/TableRowContent.test.jsx.snap index 19c4d1e0ce3..b0abd6e5214 100644 --- a/packages/terra-table/tests/jest/__snapshots__/TableRowContent.test.jsx.snap +++ b/packages/terra-table/tests/jest/__snapshots__/TableRowContent.test.jsx.snap @@ -1,5 +1,6 @@ exports[`test should render a default table row content 1`] = ` - +
Table Data
@@ -8,7 +9,7 @@ exports[`test should render a default table row content 1`] = ` exports[`test should render a table row content with maximum height 1`] = ` + className="terra-Table-row-max-height--small terra-Table-cell">
Table Data
diff --git a/packages/terra-table/tests/jest/__snapshots__/TableRows.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/TableRows.test.jsx.snap index 1e886f9bebe..baf8704def3 100644 --- a/packages/terra-table/tests/jest/__snapshots__/TableRows.test.jsx.snap +++ b/packages/terra-table/tests/jest/__snapshots__/TableRows.test.jsx.snap @@ -3,20 +3,20 @@ exports[`test should render TableRows tag 1`] = ` + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> + content="Table Data" /> `; diff --git a/packages/terra-table/tests/nightwatch/components/NoStripedTable.jsx b/packages/terra-table/tests/nightwatch/components/NoStripedTable.jsx index 37c90ae753c..6595b91b614 100644 --- a/packages/terra-table/tests/nightwatch/components/NoStripedTable.jsx +++ b/packages/terra-table/tests/nightwatch/components/NoStripedTable.jsx @@ -4,25 +4,25 @@ import Table from '../../../lib/Table'; const NoStripedTable = () => ( - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-table/tests/nightwatch/components/SingleRowSelectableTable.jsx b/packages/terra-table/tests/nightwatch/components/SingleRowSelectableTable.jsx index d4a8d33e4d2..b780dacc714 100644 --- a/packages/terra-table/tests/nightwatch/components/SingleRowSelectableTable.jsx +++ b/packages/terra-table/tests/nightwatch/components/SingleRowSelectableTable.jsx @@ -4,25 +4,25 @@ import Table from '../../../lib/Table'; const SingleRowSelectableTable = () => ( - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-table/tests/nightwatch/components/StripedTable.jsx b/packages/terra-table/tests/nightwatch/components/StripedTable.jsx index cbefde6e1f3..14f60b63e74 100644 --- a/packages/terra-table/tests/nightwatch/components/StripedTable.jsx +++ b/packages/terra-table/tests/nightwatch/components/StripedTable.jsx @@ -4,25 +4,25 @@ import Table from '../../../lib/Table'; const StripedTable = () => ( - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-table/tests/nightwatch/components/TableWithHighlightedRows.jsx b/packages/terra-table/tests/nightwatch/components/TableWithHighlightedRows.jsx index 711d01f9ed0..69808255487 100644 --- a/packages/terra-table/tests/nightwatch/components/TableWithHighlightedRows.jsx +++ b/packages/terra-table/tests/nightwatch/components/TableWithHighlightedRows.jsx @@ -4,35 +4,35 @@ import Table from '../../../lib/Table'; const TableWithHighlightedRows = () => ( - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-table/tests/nightwatch/components/TableWithSortIndicator.jsx b/packages/terra-table/tests/nightwatch/components/TableWithSortIndicator.jsx index 9d496cbff91..d50e0c1832e 100644 --- a/packages/terra-table/tests/nightwatch/components/TableWithSortIndicator.jsx +++ b/packages/terra-table/tests/nightwatch/components/TableWithSortIndicator.jsx @@ -5,25 +5,25 @@ import Table from '../../../lib/Table'; const TableWithSortingIndicator = () => ( - - - + + + - - - + + + - - - + + + - - - + + +
diff --git a/packages/terra-table/tests/nightwatch/table-spec.js b/packages/terra-table/tests/nightwatch/table-spec.js index c01a9a1c275..16e6348f1fa 100644 --- a/packages/terra-table/tests/nightwatch/table-spec.js +++ b/packages/terra-table/tests/nightwatch/table-spec.js @@ -3,9 +3,14 @@ const screenshot = require('terra-toolkit').screenshot; module.exports = { + before: (browser, done) => { + browser.resizeWindow(browser.globals.width, browser.globals.height, done); + }, + afterEach: (browser, done) => { - screenshot(browser, done); + screenshot(browser, 'terra-table', done); }, + 'Displays a default table with the provided text': (browser) => { browser .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/table-tests/default`) @@ -17,11 +22,11 @@ module.exports = { browser .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/table-tests/default`) .assert.containsText('.terra-Table-header:nth-child(1)', 'Column Heading 1') - .assert.attributeContains('.terra-Table-header:nth-child(1)', 'data-column-min-width', 'small') + .assert.cssClassPresent('.terra-Table-header:nth-child(1)', 'terra-Table-min-width--small') .assert.containsText('.terra-Table-header:nth-child(2)', 'Column Heading 2') - .assert.attributeContains('.terra-Table-header:nth-child(2)', 'data-column-min-width', 'medium') + .assert.cssClassPresent('.terra-Table-header:nth-child(2)', 'terra-Table-min-width--medium') .assert.containsText('.terra-Table-header:nth-child(3)', 'Column Heading 3') - .assert.attributeContains('.terra-Table-header:nth-child(3)', 'data-column-min-width', 'large') + .assert.cssClassPresent('.terra-Table-header:nth-child(3)', 'terra-Table-min-width--large') .assert.containsText('tr:nth-child(1) td:nth-child(1)', 'Row 1 Cell 1') .assert.containsText('tr:nth-child(1) td:nth-child(2)', 'Row 1 Cell 2') .assert.containsText('tr:nth-child(1) td:nth-child(3)', 'Row 1 Cell 3')