UX-283 & UX-285 Add new alignY prop to Table.Row & Fix element overfl…

…ow on Table (#561) * UX-283 Fix overflowing elements inside tables * UX-285 Add new alignY prop to Table.Row
SparkPost · Jul 23, 2020 · f32ceee · f32ceee
1 parent 90be555
commit f32ceee
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 9 deletions.
diff --git 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 (
-    <Wrapper onScroll={freezeFirstColumn ? handleScroll : null} {...marginProps}>
+    <Wrapper
+      freezeFirstColumn={freezeFirstColumn}
+      onScroll={freezeFirstColumn ? handleScroll : null}
+      {...marginProps}
+    >
       <StyledTable freezeFirstColumn={freezeFirstColumn} isScrolled={isScrolled} {...rest}>
         <TablePaddingContext.Provider value={{ px, py, ...paddingProps }}>
           {title && (

diff --git 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 (
-    <StyledRow className={className} {...rest}>
+    <StyledRow alignY={alignY} className={className} {...rest}>
       {rowData ? rowData.map((value, i) => <Cell value={value} key={`Cell-${i}`} />) : children}
     </StyledRow>
   );
 };
 
 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
@@ -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
@@ -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' }) => <Box minWidth="900">{childr
 const NodeLong = ({
   children = 'A really longgggggggggggggggggggggggggggggggggggggggg react component',
 }) => <Box minWidth="900">{children}</Box>;
+const PopoverNode = () => (
+  <Popover sectioned trigger={<Button>Click</Button>}>
+    Content
+  </Popover>
+);
 const data = [
   ['Foo', 'Bar', 'Baz', 'Foo'],
   [<Node />, <Node />, <NodeLong />, <Node />],
   [1, 2, 3, 4],
+  [<PopoverNode />, <PopoverNode />, <PopoverNode />, <PopoverNode />],
 ];
 
 export const TableComponents = withInfo({ propTablesExclude: [Panel] })(() => (
@@ -86,3 +92,42 @@ export const SystemProps = withInfo()(() => (
     </Table>
   </Panel>
 ));
+
+export const WithOverflowingElement = () => (
+  <Panel>
+    <Table p="200" data={data} />
+  </Panel>
+);
+
+export const VerticalAligntment = withInfo()(() => (
+  <Panel>
+    <Table>
+      <thead>
+        <Table.Row header alignY="bottom">
+          <Table.HeaderCell>Lorem ipsum</Table.HeaderCell>
+          <Table.HeaderCell>
+            Lorem ipsum A really longgggggggggggggggggggggggggggggg
+          </Table.HeaderCell>
+          <Table.HeaderCell>Lorem ipsum</Table.HeaderCell>
+        </Table.Row>
+      </thead>
+      <tbody>
+        <Table.Row alignY="top">
+          <Table.Cell>Top Aligned</Table.Cell>
+          <Table.Cell>Top Aligned</Table.Cell>
+          <Table.Cell>Top Aligned</Table.Cell>
+        </Table.Row>
+        <Table.Row alignY="center">
+          <Table.Cell>Center Aligned</Table.Cell>
+          <Table.Cell>Center Aligned</Table.Cell>
+          <Table.Cell>Center Aligned</Table.Cell>
+        </Table.Row>
+        <Table.Row alignY="bottom">
+          <Table.Cell>Bottom Aligned</Table.Cell>
+          <Table.Cell>Bottom Aligned</Table.Cell>
+          <Table.Cell>Bottom Aligned</Table.Cell>
+        </Table.Row>
+      </tbody>
+    </Table>
+  </Panel>
+));