diff --git a/packages/matchbox/src/components/Table/Table.js b/packages/matchbox/src/components/Table/Table.js index abc2f8d05..04e2d15a9 100644 --- a/packages/matchbox/src/components/Table/Table.js +++ b/packages/matchbox/src/components/Table/Table.js @@ -46,7 +46,11 @@ function Table(props) { const marginProps = pick(rest, margin.propNames); return ( - + {title && ( diff --git a/packages/matchbox/src/components/Table/TableElements.js b/packages/matchbox/src/components/Table/TableElements.js index 5a344f42e..63b359546 100644 --- a/packages/matchbox/src/components/Table/TableElements.js +++ b/packages/matchbox/src/components/Table/TableElements.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { cell, row, headerCell } from './styles'; +import { cell, row, headerCell, verticalAlignment } from './styles'; import { TablePaddingContext } from './context'; import { padding } from 'styled-system'; import { createPropTypes } from '@styled-system/prop-types'; @@ -19,6 +19,9 @@ const StyledHeaderCell = styled('th')` const StyledRow = styled('tr')` ${row} ${padding} + td, th { + ${verticalAlignment} + } `; const Cell = ({ value, children, className, ...rest }) => { @@ -54,19 +57,23 @@ HeaderCell.propTypes = { }; HeaderCell.displayName = 'Table.HeaderCell'; -const Row = ({ rowData, children, className, ...rest }) => { +const Row = ({ alignY, rowData, children, className, ...rest }) => { return ( - + {rowData ? rowData.map((value, i) => ) : children} ); }; Row.propTypes = { + alignY: PropTypes.oneOf(['top', 'bottom', 'center']), rowData: PropTypes.array, className: PropTypes.string, children: PropTypes.node, }; +Row.defaultProps = { + alignY: 'center', +}; Row.displayName = 'Table.Row'; export { Cell, HeaderCell, Row }; diff --git a/packages/matchbox/src/components/Table/styles.js b/packages/matchbox/src/components/Table/styles.js index bd48b6cc3..47e51b80a 100644 --- a/packages/matchbox/src/components/Table/styles.js +++ b/packages/matchbox/src/components/Table/styles.js @@ -1,4 +1,5 @@ import { tokens } from '@sparkpost/design-tokens'; +import { system } from 'styled-system'; export const table = () => ` position: relative; @@ -12,7 +13,6 @@ export const headerCell = () => ` font-size: ${tokens.fontSize_200}; line-height: ${tokens.lineHeight_300}; font-weight: ${tokens.fontWeight_semibold}; - vertical-align: top; `; export const sticky = ({ isScrolled, freezeFirstColumn }) => { @@ -35,7 +35,6 @@ export const sticky = ({ isScrolled, freezeFirstColumn }) => { export const cell = () => ` word-break: break-all; - vertical-align: top; `; export const row = () => ` @@ -51,6 +50,17 @@ export const row = () => ` } `; -export const wrapper = () => ` - overflow: auto; +export const verticalAlignment = system({ + alignY: { + property: 'verticalAlign', + defaultScale: { + center: 'middle', + top: 'top', + bottom: 'bottom', + }, + }, +}); + +export const wrapper = ({ freezeFirstColumn }) => ` + ${freezeFirstColumn ? 'overflow: auto;' : ''} `; diff --git a/stories/layout/Table.stories.js b/stories/layout/Table.stories.js index bd3c3fbe4..ae5c418b0 100644 --- a/stories/layout/Table.stories.js +++ b/stories/layout/Table.stories.js @@ -1,6 +1,6 @@ import React from 'react'; import { withInfo } from '@storybook/addon-info'; -import { Table, Panel, Box } from '@sparkpost/matchbox'; +import { Table, Panel, Box, Popover, Button } from '@sparkpost/matchbox'; export default { title: 'Layout|Table', @@ -10,10 +10,16 @@ const Node = ({ children = 'A react component' }) => {childr const NodeLong = ({ children = 'A really longgggggggggggggggggggggggggggggggggggggggg react component', }) => {children}; +const PopoverNode = () => ( + Click}> + Content + +); const data = [ ['Foo', 'Bar', 'Baz', 'Foo'], [, , , ], [1, 2, 3, 4], + [, , , ], ]; export const TableComponents = withInfo({ propTablesExclude: [Panel] })(() => ( @@ -86,3 +92,42 @@ export const SystemProps = withInfo()(() => ( )); + +export const WithOverflowingElement = () => ( + + + +); + +export const VerticalAligntment = withInfo()(() => ( + +
+ + + Lorem ipsum + + Lorem ipsum A really longgggggggggggggggggggggggggggggg + + Lorem ipsum + + + + + Top Aligned + Top Aligned + Top Aligned + + + Center Aligned + Center Aligned + Center Aligned + + + Bottom Aligned + Bottom Aligned + Bottom Aligned + + +
+
+));