Add table shadow element to tables (https://github.com/woocommerce/woocommerce-admin/pull/546)

* Add table shadow element to tables

* Update table shadow bg color

* Remove redundant styles

* Remove unused ref

* Update shadow relative to container table body

Use the container body so we don't have to update the transform on scroll for the table shadow.  Prevents jankiness on low-end devices

* Move table shadow to pseudo element

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

@@ -3,7 +3,7 @@
 .woocommerce-table {
 	.woocommerce-card__body {
 		padding: 0;
-		padding-bottom: $gap;
+		position: relative;
 	}
 
 	.woocommerce-card__action,
@@ -28,6 +28,14 @@
 			height: auto;
 		}
 	}
+
+	.woocommerce-pagination {
+		padding-top: $gap;
+		padding-bottom: $gap;
+		z-index: 1;
+		background: white;
+		position: relative;
+	}
 }
 
 .woocommerce-table__caption {
@@ -37,7 +45,21 @@
 
 .woocommerce-table__table {
 	overflow-x: auto;
-	margin-bottom: $gap;
+
+	&:after {
+		content: '';
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 41px;
+		height: 100%;
+		background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
+		visibility: hidden;
+	}
+
+	&.is-scrollable:after {
+		visibility: visible;
+	}
 
 	table {
 		border-collapse: collapse;

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

@@ -55,6 +55,7 @@ class Table extends Component {
 		super( props );
 		this.state = {
 			tabIndex: null,
+			isScrollable: false,
 		};
 		this.container = createRef();
 		this.sortBy = this.sortBy.bind( this );
@@ -68,6 +69,12 @@ class Table extends Component {
 			tabIndex: scrollable ? '0' : null,
 		} );
 		/* eslint-enable react/no-did-mount-set-state */
+		this.updateTableShadow();
+		window.addEventListener( 'resize', this.updateTableShadow );
+	}
+
+	componentDidUnmount() {
+		window.removeEventListener( 'resize', this.updateTableShadow );
 	}
 
 	sortBy( key ) {
@@ -84,6 +91,14 @@ class Table extends Component {
 		};
 	}
 
+	updateTableShadow = () => {
+		const table = this.container.current;
+		const scrolledToEnd = table.scrollWidth - table.scrollLeft <= table.offsetWidth;
+		this.setState( {
+			isScrollable: scrolledToEnd ? false : true,
+		} );
+	};
+
 	render() {
 		const {
 			ariaHidden,
@@ -96,7 +111,9 @@ class Table extends Component {
 			rows,
 		} = this.props;
 		const { tabIndex } = this.state;
-		const classes = classnames( 'woocommerce-table__table', classNames );
+		const classes = classnames( 'woocommerce-table__table', classNames, {
+			'is-scrollable': this.state.isScrollable,
+		} );
 		const sortedBy = query.orderby || get( find( headers, { defaultSort: true } ), 'key', false );
 		const sortDir = query.order || DESC;
 
@@ -108,6 +125,7 @@ class Table extends Component {
 				aria-hidden={ ariaHidden }
 				aria-labelledby={ `caption-${ instanceId }` }
 				role="group"
+				onScroll={ this.updateTableShadow }
 			>
 				<table>
 					<caption