[Table] Introduce padding property

package.json

@@ -71,6 +71,7 @@
     "keycode": "^2.1.9",
     "lodash": "^4.17.4",
     "prop-types": "^15.5.10",
+    "prop-types-extra": "^1.0.1",
     "react-event-listener": "^0.5.0",
     "react-jss": "^7.1.0",
     "react-popper": "^0.7.2",

src/Table/TableCell.js

@@ -4,24 +4,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import type { ElementType, Node } from 'react';
 import classNames from 'classnames';
+import deprecated from 'prop-types-extra/lib/deprecated';
 import withStyles from '../styles/withStyles';
-import requirePropFalseFactory from '../utils/requirePropFalseFactory';
 
 export type Context = {
   table: Object,
 };
 
 type Default = {
-  checkbox: boolean,
-  compact: boolean,
+  padding: 'default' | 'checkbox' | 'compact' | 'none',
   numeric: boolean,
-  disablePadding: boolean,
   component: ElementType,
 };
 
 export type Props = {
   /**
-   * If `true`, the cell padding will be adjusted to accommodate a checkbox.
+   * @ignore
    */
   checkbox?: boolean,
   /**
@@ -37,7 +35,7 @@ export type Props = {
    */
   className?: string,
   /**
-   * If `true`, compact cell padding will be used to accommodate more content.
+   * @ignore
    */
   compact?: boolean,
   /**
@@ -46,14 +44,17 @@ export type Props = {
    */
   component?: ElementType,
   /**
-   * If `true`, left/right cell padding will be disabled.
-   * If `compact` is also `true` then `disablePadding` will have no effect.
+   * @ignore
    */
   disablePadding?: boolean,
   /**
    * If `true`, content will align to the right.
    */
   numeric?: boolean,
+  /**
+   * Sets the padding applied to the cell.
+   */
+  padding?: 'default' | 'checkbox' | 'compact' | 'none',
 };
 
 export const styles = (theme: Object) => ({
@@ -99,6 +100,7 @@ function TableCell(props: Default & Props, context: Context) {
     checkbox,
     numeric,
     disablePadding,
+    padding,
     component,
     ...other
   } = props;
@@ -114,9 +116,9 @@ function TableCell(props: Default & Props, context: Context) {
     classes.root,
     {
       [classes.numeric]: numeric,
-      [classes.compact]: compact,
-      [classes.checkbox]: checkbox,
-      [classes.padding]: !disablePadding,
+      [classes.compact]: padding === 'compact' || compact,
+      [classes.checkbox]: padding === 'checkbox' || checkbox,
+      [classes.padding]: padding !== 'none' && !disablePadding,
       [classes.head]: table && table.head,
       [classes.footer]: table && table.footer,
     },
@@ -131,28 +133,25 @@ function TableCell(props: Default & Props, context: Context) {
 }
 
 TableCell.defaultProps = {
-  checkbox: false,
-  compact: false,
-  numeric: false,
-  disablePadding: false,
   component: null,
+  numeric: false,
+  padding: 'default',
 };
 
 TableCell.contextTypes = {
   table: PropTypes.object.isRequired,
 };
 
-// Add a wrapper component to generate some helper messages in the development
-// environment.
-let TableCellWrapper = TableCell; // eslint-disable-line import/no-mutable-exports
+let TableCellWrapper = TableCell;
 
 if (process.env.NODE_ENV !== 'production') {
-  const requirePropFalse = requirePropFalseFactory('TableCell');
   TableCellWrapper = (props: any) => <TableCell {...props} />;
 
+  TableCellWrapper.displayName = 'TableCell';
   TableCellWrapper.propTypes = {
-    compact: requirePropFalse('checkbox'),
-    disablePadding: requirePropFalse(['compact', 'checkbox']),
+    checbox: deprecated(PropTypes.bool, "Use padding='checkbox'"),
+    compact: deprecated(PropTypes.bool, "Use padding='compact'"),
+    disablePadding: deprecated(PropTypes.bool, "Use padding='none'"),
   };
 }
 

src/Table/TableCell.spec.js

@@ -11,7 +11,7 @@ describe('<TableCell />', () => {
 
   before(() => {
     shallow = createShallow({
-      untilSelector: 'TableCell',
+      untilSelector: TableCell,
       context: {
         table: { footer: true },
       },
@@ -40,8 +40,8 @@ describe('<TableCell />', () => {
     assert.strictEqual(wrapper.hasClass(classes.padding), true, 'should have the padding class');
   });
 
-  it('should render with the user, root and padding classes', () => {
-    const wrapper = shallow(<TableCell className="woofTableCell" disablePadding />);
+  it('should render with the user, root and without the padding classes', () => {
+    const wrapper = shallow(<TableCell className="woofTableCell" padding="none" />);
     assert.strictEqual(wrapper.hasClass('woofTableCell'), true);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
     assert.strictEqual(
@@ -51,6 +51,22 @@ describe('<TableCell />', () => {
     );
   });
 
+  it('should render with the user, root, padding, and checkbox classes', () => {
+    const wrapper = shallow(<TableCell className="woofTableCell" padding="checkbox" />);
+    assert.strictEqual(wrapper.hasClass('woofTableCell'), true);
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.padding), true);
+    assert.strictEqual(wrapper.hasClass(classes.checkbox), true);
+  });
+
+  it('should render with the user, root, padding, and compact classes', () => {
+    const wrapper = shallow(<TableCell className="woofTableCell" padding="compact" />);
+    assert.strictEqual(wrapper.hasClass('woofTableCell'), true);
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.padding), true);
+    assert.strictEqual(wrapper.hasClass(classes.compact), true);
+  });
+
   it('should render children', () => {
     const children = <p className="test">Hello</p>;
     const wrapper = shallow(<TableCell>{children}</TableCell>);

yarn.lock

@@ -6463,6 +6463,12 @@ prop-types-exact@^1.1.1:
     has "^1.0.1"
     object.assign "^4.0.4"
 
+prop-types-extra@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.0.1.tgz#a57bd4810e82d27a3ff4317ecc1b4ad005f79a82"
+  dependencies:
+    warning "^3.0.0"
+
 [email protected], prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"