From 18eecfb1d56b285a0f3532cc8d6a120ff6a16568 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 17 Jun 2020 16:07:35 -0500
Subject: [PATCH 1/5] feat(data-table): remove UNSAFE_componentWillReceiveProps

---
 .../__tests__/__snapshots__/grid-test.js.snap | 240 +++++++++---------
 .../src/components/DataTable/DataTable.js     |  19 +-
 .../DataTable/__tests__/DataTable-test.js     |  11 +-
 3 files changed, 136 insertions(+), 134 deletions(-)

diff --git a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
index 0b6d77c7b4a3..87fcf8842dbb 100644
--- a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
+++ b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap
@@ -121,8 +121,8 @@ em {
   padding-bottom: 1rem; }
 
 .bx--grid--condensed [class*='bx--col'] {
-  padding-top: 0.0625rem;
-  padding-bottom: 0.0625rem; }
+  padding-top: 0.03125rem;
+  padding-bottom: 0.03125rem; }
 
 .bx--col {
   width: 100%;
@@ -130,8 +130,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col,
   .bx--grid--condensed .bx--col {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-sm-0 {
   width: 100%;
@@ -139,8 +139,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-sm-0,
   .bx--grid--condensed .bx--col-sm-0 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-sm-1 {
   width: 100%;
@@ -148,8 +148,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-sm-1,
   .bx--grid--condensed .bx--col-sm-1 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-sm-2 {
   width: 100%;
@@ -157,8 +157,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-sm-2,
   .bx--grid--condensed .bx--col-sm-2 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-sm-3 {
   width: 100%;
@@ -166,8 +166,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-sm-3,
   .bx--grid--condensed .bx--col-sm-3 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-sm-4 {
   width: 100%;
@@ -175,8 +175,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-sm-4,
   .bx--grid--condensed .bx--col-sm-4 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-sm,
 .bx--col-sm--auto {
@@ -188,8 +188,8 @@ em {
   .bx--col-sm--auto,
   .bx--grid--condensed
   .bx--col-sm--auto {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col,
 .bx--col-sm {
@@ -244,8 +244,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-md-0,
   .bx--grid--condensed .bx--col-md-0 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-md-1 {
   width: 100%;
@@ -253,8 +253,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-md-1,
   .bx--grid--condensed .bx--col-md-1 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-md-2 {
   width: 100%;
@@ -262,8 +262,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-md-2,
   .bx--grid--condensed .bx--col-md-2 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-md-3 {
   width: 100%;
@@ -271,8 +271,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-md-3,
   .bx--grid--condensed .bx--col-md-3 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-md-4 {
   width: 100%;
@@ -280,8 +280,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-md-4,
   .bx--grid--condensed .bx--col-md-4 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-md-5 {
   width: 100%;
@@ -289,8 +289,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-md-5,
   .bx--grid--condensed .bx--col-md-5 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-md-6 {
   width: 100%;
@@ -298,8 +298,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-md-6,
   .bx--grid--condensed .bx--col-md-6 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-md-7 {
   width: 100%;
@@ -307,8 +307,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-md-7,
   .bx--grid--condensed .bx--col-md-7 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-md-8 {
   width: 100%;
@@ -316,8 +316,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-md-8,
   .bx--grid--condensed .bx--col-md-8 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-md,
 .bx--col-md--auto {
@@ -329,8 +329,8 @@ em {
   .bx--col-md--auto,
   .bx--grid--condensed
   .bx--col-md--auto {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 @media (min-width: 42rem) {
   .bx--col,
@@ -400,8 +400,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-0,
   .bx--grid--condensed .bx--col-lg-0 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-1 {
   width: 100%;
@@ -409,8 +409,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-1,
   .bx--grid--condensed .bx--col-lg-1 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-2 {
   width: 100%;
@@ -418,8 +418,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-2,
   .bx--grid--condensed .bx--col-lg-2 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-3 {
   width: 100%;
@@ -427,8 +427,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-3,
   .bx--grid--condensed .bx--col-lg-3 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-4 {
   width: 100%;
@@ -436,8 +436,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-4,
   .bx--grid--condensed .bx--col-lg-4 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-5 {
   width: 100%;
@@ -445,8 +445,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-5,
   .bx--grid--condensed .bx--col-lg-5 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-6 {
   width: 100%;
@@ -454,8 +454,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-6,
   .bx--grid--condensed .bx--col-lg-6 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-7 {
   width: 100%;
@@ -463,8 +463,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-7,
   .bx--grid--condensed .bx--col-lg-7 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-8 {
   width: 100%;
@@ -472,8 +472,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-8,
   .bx--grid--condensed .bx--col-lg-8 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-9 {
   width: 100%;
@@ -481,8 +481,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-9,
   .bx--grid--condensed .bx--col-lg-9 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-10 {
   width: 100%;
@@ -490,8 +490,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-10,
   .bx--grid--condensed .bx--col-lg-10 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-11 {
   width: 100%;
@@ -499,8 +499,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-11,
   .bx--grid--condensed .bx--col-lg-11 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg-12 {
   width: 100%;
@@ -508,8 +508,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-lg-12,
   .bx--grid--condensed .bx--col-lg-12 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-lg,
 .bx--col-lg--auto {
@@ -521,8 +521,8 @@ em {
   .bx--col-lg--auto,
   .bx--grid--condensed
   .bx--col-lg--auto {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 @media (min-width: 66rem) {
   .bx--col,
@@ -616,8 +616,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-0,
   .bx--grid--condensed .bx--col-xlg-0 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-1 {
   width: 100%;
@@ -625,8 +625,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-1,
   .bx--grid--condensed .bx--col-xlg-1 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-2 {
   width: 100%;
@@ -634,8 +634,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-2,
   .bx--grid--condensed .bx--col-xlg-2 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-3 {
   width: 100%;
@@ -643,8 +643,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-3,
   .bx--grid--condensed .bx--col-xlg-3 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-4 {
   width: 100%;
@@ -652,8 +652,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-4,
   .bx--grid--condensed .bx--col-xlg-4 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-5 {
   width: 100%;
@@ -661,8 +661,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-5,
   .bx--grid--condensed .bx--col-xlg-5 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-6 {
   width: 100%;
@@ -670,8 +670,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-6,
   .bx--grid--condensed .bx--col-xlg-6 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-7 {
   width: 100%;
@@ -679,8 +679,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-7,
   .bx--grid--condensed .bx--col-xlg-7 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-8 {
   width: 100%;
@@ -688,8 +688,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-8,
   .bx--grid--condensed .bx--col-xlg-8 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-9 {
   width: 100%;
@@ -697,8 +697,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-9,
   .bx--grid--condensed .bx--col-xlg-9 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-10 {
   width: 100%;
@@ -706,8 +706,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-10,
   .bx--grid--condensed .bx--col-xlg-10 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-11 {
   width: 100%;
@@ -715,8 +715,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-11,
   .bx--grid--condensed .bx--col-xlg-11 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg-12 {
   width: 100%;
@@ -724,8 +724,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-xlg-12,
   .bx--grid--condensed .bx--col-xlg-12 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-xlg,
 .bx--col-xlg--auto {
@@ -737,8 +737,8 @@ em {
   .bx--col-xlg--auto,
   .bx--grid--condensed
   .bx--col-xlg--auto {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 @media (min-width: 82rem) {
   .bx--col,
@@ -832,8 +832,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-0,
   .bx--grid--condensed .bx--col-max-0 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-1 {
   width: 100%;
@@ -841,8 +841,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-1,
   .bx--grid--condensed .bx--col-max-1 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-2 {
   width: 100%;
@@ -850,8 +850,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-2,
   .bx--grid--condensed .bx--col-max-2 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-3 {
   width: 100%;
@@ -859,8 +859,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-3,
   .bx--grid--condensed .bx--col-max-3 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-4 {
   width: 100%;
@@ -868,8 +868,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-4,
   .bx--grid--condensed .bx--col-max-4 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-5 {
   width: 100%;
@@ -877,8 +877,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-5,
   .bx--grid--condensed .bx--col-max-5 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-6 {
   width: 100%;
@@ -886,8 +886,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-6,
   .bx--grid--condensed .bx--col-max-6 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-7 {
   width: 100%;
@@ -895,8 +895,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-7,
   .bx--grid--condensed .bx--col-max-7 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-8 {
   width: 100%;
@@ -904,8 +904,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-8,
   .bx--grid--condensed .bx--col-max-8 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-9 {
   width: 100%;
@@ -913,8 +913,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-9,
   .bx--grid--condensed .bx--col-max-9 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-10 {
   width: 100%;
@@ -922,8 +922,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-10,
   .bx--grid--condensed .bx--col-max-10 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-11 {
   width: 100%;
@@ -931,8 +931,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-11,
   .bx--grid--condensed .bx--col-max-11 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max-12 {
   width: 100%;
@@ -940,8 +940,8 @@ em {
   padding-left: 1rem; }
   .bx--row--condensed .bx--col-max-12,
   .bx--grid--condensed .bx--col-max-12 {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 .bx--col-max,
 .bx--col-max--auto {
@@ -953,8 +953,8 @@ em {
   .bx--col-max--auto,
   .bx--grid--condensed
   .bx--col-max--auto {
-    padding-right: 0.0625rem;
-    padding-left: 0.0625rem; }
+    padding-right: 0.03125rem;
+    padding-left: 0.03125rem; }
 
 @media (min-width: 99rem) {
   .bx--col,
diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js
index 99ef5a2b7b9c..ee118580d9c8 100644
--- a/packages/react/src/components/DataTable/DataTable.js
+++ b/packages/react/src/components/DataTable/DataTable.js
@@ -152,25 +152,25 @@ export default class DataTable extends React.Component {
     this.instanceId = getInstanceId();
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
+    const prevRowIds = prevProps.rows.map((row) => row.id);
     const rowIds = this.props.rows.map((row) => row.id);
-    const nextRowIds = nextProps.rows.map((row) => row.id);
 
-    if (!isEqual(rowIds, nextRowIds)) {
-      this.setState((state) => getDerivedStateFromProps(nextProps, state));
+    if (!isEqual(prevRowIds, rowIds)) {
+      this.setState((state) => getDerivedStateFromProps(this.props, state));
       return;
     }
 
+    const prevHeaders = prevProps.headers.map((header) => header.key);
     const headers = this.props.headers.map((header) => header.key);
-    const nextHeaders = nextProps.headers.map((header) => header.key);
 
-    if (!isEqual(headers, nextHeaders)) {
-      this.setState((state) => getDerivedStateFromProps(nextProps, state));
+    if (!isEqual(prevHeaders, headers)) {
+      this.setState((state) => getDerivedStateFromProps(this.props, state));
       return;
     }
 
-    if (!isEqual(this.props.rows, nextProps.rows)) {
-      this.setState((state) => getDerivedStateFromProps(nextProps, state));
+    if (!isEqual(prevProps.rows, this.props.rows)) {
+      this.setState((state) => getDerivedStateFromProps(this.props, state));
       return;
     }
   }
@@ -331,6 +331,7 @@ export default class DataTable extends React.Component {
       checked || indeterminate
         ? translationKeys.unselectAll
         : translationKeys.selectAll;
+
     return {
       ...rest,
       ariaLabel: t(translationKey),
diff --git a/packages/react/src/components/DataTable/__tests__/DataTable-test.js b/packages/react/src/components/DataTable/__tests__/DataTable-test.js
index 743e0cb2ad1d..aabcbd2a0638 100644
--- a/packages/react/src/components/DataTable/__tests__/DataTable-test.js
+++ b/packages/react/src/components/DataTable/__tests__/DataTable-test.js
@@ -651,7 +651,7 @@ describe('DataTable', () => {
     });
   });
 
-  describe('componentWillReceiveProps', () => {
+  describe('componentDidUpdate', () => {
     let mockProps;
 
     beforeEach(() => {
@@ -756,7 +756,7 @@ describe('DataTable', () => {
 
       wrapper.setProps({ rows: nextRows });
 
-      const nextArgs = mockProps.render.mock.calls[1][0];
+      const nextArgs = getLastCallFor(mockProps.render)[0];
       expect(nextArgs.rows.length).toBe(nextRows.length);
       expect(nextArgs.rows.map((row) => row.id)).toEqual(['b', 'a', 'c', 'd']);
     });
@@ -783,7 +783,7 @@ describe('DataTable', () => {
 
       wrapper.setProps(nextProps);
 
-      const nextArgs = mockProps.render.mock.calls[1][0];
+      const nextArgs = getLastCallFor(mockProps.render)[0];
       expect(nextArgs.headers).toEqual(nextProps.headers);
     });
 
@@ -802,6 +802,7 @@ describe('DataTable', () => {
       ];
 
       wrapper.setProps({ rows: nextRows });
+      wrapper.update();
 
       expect(getSelectAll(wrapper).prop('checked')).toBe(false);
       const { getBatchActionProps, selectedRows } = getLastCallFor(
@@ -843,7 +844,7 @@ describe('DataTable', () => {
 
       wrapper.setProps({ rows: nextRows });
 
-      const nextArgs = mockProps.render.mock.calls[1][0];
+      const nextArgs = getLastCallFor(mockProps.render)[0];
       expect(nextArgs.rows.map((row) => row.id)).toEqual(['c', 'a', 'b']);
     });
 
@@ -862,7 +863,7 @@ describe('DataTable', () => {
 
       wrapper.setProps({ rows: nextRows });
 
-      const nextArgs = mockProps.render.mock.calls[1][0];
+      const nextArgs = getLastCallFor(mockProps.render)[0];
       expect(nextArgs.rows.map((row) => row.cells[0].value)).toEqual([
         'Field 2:A!',
         'Field 1:A!',

From 1ebe478a057e08f6f0024ffdb40fac9c9f17440b Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 17 Jun 2020 17:34:04 -0500
Subject: [PATCH 2/5] feat(date-picker): remove UNSAFE_componentWillUpdate

---
 .../src/components/DatePicker/DatePicker.js   | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js
index 730fa0693420..84470cb8a3eb 100644
--- a/packages/react/src/components/DatePicker/DatePicker.js
+++ b/packages/react/src/components/DatePicker/DatePicker.js
@@ -307,19 +307,6 @@ export default class DatePicker extends Component {
     locale: 'en',
   };
 
-  UNSAFE_componentWillUpdate(nextProps) {
-    if (nextProps.value !== this.props.value) {
-      if (this.cal) {
-        this.cal.setDate(nextProps.value);
-        this.updateClassNames(this.cal);
-      } else {
-        if (this.inputField) {
-          this.inputField.value = nextProps.value;
-        }
-      }
-    }
-  }
-
   componentDidMount() {
     const {
       appendTo,
@@ -392,8 +379,9 @@ export default class DatePicker extends Component {
     dateFormat: prevDateFormat,
     minDate: prevMinDate,
     maxDate: prevMaxDate,
+    value: prevValue,
   }) {
-    const { dateFormat, minDate, maxDate } = this.props;
+    const { dateFormat, minDate, maxDate, value } = this.props;
     if (this.cal) {
       if (prevDateFormat !== dateFormat) {
         this.cal.set({ dateFormat });
@@ -405,6 +393,19 @@ export default class DatePicker extends Component {
         this.cal.set('maxDate', maxDate);
       }
     }
+
+    // Coordinate when the given `value` prop changes. When this happens, we
+    // should update the calendar to the new value.
+    if (prevValue !== value) {
+      if (this.cal) {
+        this.cal.setDate(this.props.value);
+        this.updateClassNames(this.cal);
+      } else {
+        if (this.inputField) {
+          this.inputField.value = this.props.value;
+        }
+      }
+    }
   }
 
   componentWillUnmount() {

From d6ae07b2d24a22e0825e86edb3c72160f163dc9a Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 17 Jun 2020 17:49:04 -0500
Subject: [PATCH 3/5] refactor(data-table): add early exit for prop equality

---
 packages/react/src/components/DataTable/DataTable.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js
index ee118580d9c8..754b81406654 100644
--- a/packages/react/src/components/DataTable/DataTable.js
+++ b/packages/react/src/components/DataTable/DataTable.js
@@ -153,6 +153,10 @@ export default class DataTable extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
+    if (prevProps === this.props) {
+      return;
+    }
+
     const prevRowIds = prevProps.rows.map((row) => row.id);
     const rowIds = this.props.rows.map((row) => row.id);
 

From ceda5bc087edf330f645e3853b19ac5b4437358a Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Mon, 22 Jun 2020 09:43:22 -0500
Subject: [PATCH 4/5] Update
 packages/react/src/components/DatePicker/DatePicker.js

Co-authored-by: emyarod <emyarod@users.noreply.github.com>
---
 packages/react/src/components/DatePicker/DatePicker.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js
index 84470cb8a3eb..3dc122813688 100644
--- a/packages/react/src/components/DatePicker/DatePicker.js
+++ b/packages/react/src/components/DatePicker/DatePicker.js
@@ -400,8 +400,7 @@ export default class DatePicker extends Component {
       if (this.cal) {
         this.cal.setDate(this.props.value);
         this.updateClassNames(this.cal);
-      } else {
-        if (this.inputField) {
+      } else if (this.inputField) {
           this.inputField.value = this.props.value;
         }
       }

From a9f5aa44c70c18c8f00c178de65e6b7a5f38f018 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Mon, 22 Jun 2020 15:23:38 -0500
Subject: [PATCH 5/5] fix(date-picker): update syntax for if statement

---
 packages/react/src/components/DatePicker/DatePicker.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js
index 3dc122813688..6fc1f5a7b34b 100644
--- a/packages/react/src/components/DatePicker/DatePicker.js
+++ b/packages/react/src/components/DatePicker/DatePicker.js
@@ -401,8 +401,7 @@ export default class DatePicker extends Component {
         this.cal.setDate(this.props.value);
         this.updateClassNames(this.cal);
       } else if (this.inputField) {
-          this.inputField.value = this.props.value;
-        }
+        this.inputField.value = this.props.value;
       }
     }
   }