Create EmptyTable component (https://github.com/woocommerce/woocommerce-admin/pull/605)

* Create EmptyTable component

* Update failing test

* Make EmptyTable a functional component

* Add EmptyTable to example.md

plugins/woocommerce-admin/client/components/index.js

@@ -43,6 +43,7 @@ export { default as SummaryListPlaceholder } from './summary/placeholder';
 export { default as SummaryNumber } from './summary/item';
 export { default as Table } from './table/table';
 export { default as TableCard } from './table';
+export { default as EmptyTable } from './table/empty';
 export { default as TablePlaceholder } from './table/placeholder';
 export { default as TableSummary } from './table/summary';
 export { default as Tag } from './tag';

plugins/woocommerce-admin/client/components/table/empty.js

@@ -0,0 +1,33 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * `EmptyTable` displays a blank space with an optional message passed as a children node
+ * with the purpose of replacing a table with no rows.
+ * It mimics the same height a table would have according to the `numberOfRows` prop.
+ *
+ * @return { object } -
+ */
+const EmptyTable = ( { children, numberOfRows } ) => {
+	return (
+		<div className="woocommerce-table is-empty" style={ { '--number-of-rows': numberOfRows } }>
+			{ children }
+		</div>
+	);
+};
+
+EmptyTable.propTypes = {
+	/**
+	 * An integer with the number of rows the box should occupy.
+	 */
+	numberOfRows: PropTypes.number,
+};
+
+EmptyTable.defaultProps = {
+	numberOfRows: 5,
+};
+
+export default EmptyTable;

plugins/woocommerce-admin/client/components/table/example.md

@@ -63,6 +63,13 @@ const MyTable = () => (
 				headers={ headers }
 			/>
 		</Section>
+
+		<H>Empty Table</H>
+		<Section component={ false }>
+			<EmptyTable>
+				There are no entries.
+			</EmptyTable>
+		</Section>
 	</div>
 );
 ```

plugins/woocommerce-admin/client/components/table/style.scss

@@ -28,6 +28,22 @@
 		}
 	}
 
+	$row-text-height: 1.1375rem;
+	$row-height: #{$gap * 2} + #{$row-text-height} + 1px;
+	$header-row-height: #{$gap-smaller * 2} + #{$row-text-height} + 1px;
+	&.is-empty {
+		align-items: center;
+		background: $core-grey-light-100;
+		color: $core-grey-dark-500;
+		display: flex;
+		// Default to 5 rows for browsers not supporting custom properties (IE11)
+		height: calc(#{$header-row-height} + (#{$row-height}) * 5);
+		height: calc(#{$header-row-height} + (#{$row-height}) * var(--number-of-rows));
+		justify-content: center;
+		padding: $gap;
+		text-align: center;
+	}
+
 	button.woocommerce-table__download-button.is-link {
 		padding: 6px $gap-small;
 		color: #000;

plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js

@@ -11,7 +11,7 @@ import { withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { Card, Table, TablePlaceholder } from '@woocommerce/components';
+import { Card, EmptyTable, Table, TablePlaceholder } from '@woocommerce/components';
 import { getAdminLink } from 'lib/nav-utils';
 import { numberFormat } from 'lib/number';
 import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency';
@@ -96,9 +96,9 @@ export class TopSellingProducts extends Component {
 
 		if ( rows.length === 0 ) {
 			return (
-				<div className="woocommerce-top-selling-products__empty-message">
+				<EmptyTable>
 					{ __( 'When new orders arrive, popular products will be listed here.', 'wc-admin' ) }
-				</div>
+				</EmptyTable>
 			);
 		}
 

plugins/woocommerce-admin/client/dashboard/top-selling-products/style.scss

@@ -4,20 +4,6 @@
 		padding: 0;
 	}
 
-	$row-text-height: 1.1375rem;
-	$row-height: #{$gap * 2} + #{$row-text-height} + 1px;
-	$header-row-height: #{$gap-smaller * 2} + #{$row-text-height} + 1px;
-	.woocommerce-top-selling-products__empty-message {
-		align-items: center;
-		background: $core-grey-light-100;
-		color: $core-grey-dark-500;
-		display: flex;
-		height: calc((#{$row-height}) * 5 + #{$header-row-height});
-		justify-content: center;
-		padding: $gap;
-		text-align: center;
-	}
-
 	.woocommerce-table__table {
 		margin-bottom: 0;
 

plugins/woocommerce-admin/client/dashboard/top-selling-products/test/index.js

@@ -33,9 +33,7 @@ describe( 'TopSellingProducts', () => {
 	test( 'should render empty message when there are no rows', () => {
 		const topSellingProducts = shallow( <TopSellingProducts data={ {} } /> );
 
-		expect(
-			topSellingProducts.find( '.woocommerce-top-selling-products__empty-message' ).length
-		).toBe( 1 );
+		expect( topSellingProducts.find( 'EmptyTable' ).length ).toBe( 1 );
 	} );
 
 	test( 'should render correct data in the table', () => {