@automattic/vip-design-system 0.10.2 → 0.10.3

package/build/system/Table/Table.js

@@ -11,29 +11,29 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["sx", "className"];
 
 var Table = function Table(_ref) {
   var sx = _ref.sx,
+      className = _ref.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      overflowX: 'auto'
-    },
-    children: (0, _jsxRuntime.jsx)("table", (0, _extends2["default"])({
-      sx: (0, _extends2["default"])({
-        width: '100%',
-        minWidth: 1024
-      }, sx),
-      cellPadding: 0,
-      cellSpacing: 0
-    }, props))
-  });
+  return (0, _jsxRuntime.jsx)("table", (0, _extends2["default"])({
+    sx: (0, _extends2["default"])({
+      width: '100%',
+      minWidth: 1024
+    }, sx),
+    cellPadding: 0,
+    cellSpacing: 0,
+    className: (0, _classnames["default"])('vip-table-component', className)
+  }, props));
 };
 
 exports.Table = Table;
 Table.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.10.2",
+	"version": "0.10.3",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Table/Table.js

@@ -4,20 +4,21 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Table = ( { sx, ...props } ) => (
-	<div sx={ { overflowX: 'auto' } }>
-		<table
-			sx={ { width: '100%', minWidth: 1024, ...sx } }
-			cellPadding={ 0 }
-			cellSpacing={ 0 }
-			{ ...props }
-		/>
-	</div>
+const Table = ( { sx, className, ...props } ) => (
+	<table
+		sx={{ width: '100%', minWidth: 1024, ...sx }}
+		cellPadding={0}
+		cellSpacing={0}
+		className={classNames( 'vip-table-component', className )}
+		{...props}
+	/>
 );
 
 Table.propTypes = {
 	sx: PropTypes.object,
+	className: PropTypes.any,
 };
 
 export { Table };