From 7b3d7ced46665addf21c2f5616d4af27c52999cc Mon Sep 17 00:00:00 2001
From: XuTheBunny <xzhu.fg@gmail.com>
Date: Sun, 31 Mar 2019 13:07:21 -0400
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20badge=20by=20ad?=
 =?UTF-8?q?ding=20loading=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Badge/Badge.js          | 24 ++++++++++++++----------
 src/components/Badge/badge.css         | 13 ++++++++++++-
 src/components/FileList/FileElement.js |  8 ++++++--
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/Badge/Badge.js b/src/components/Badge/Badge.js
index 014bd53bd..05ae892dd 100644
--- a/src/components/Badge/Badge.js
+++ b/src/components/Badge/Badge.js
@@ -11,22 +11,26 @@ const badgeState = {
   changesRequired: {name: 'Changes Required', color: 'bg-red'},
 };
 
-const Badge = ({className, state}) => {
-  if (badgeState[state]) {
-    const color = badgeState[state].color;
-    const name = badgeState[state].name;
-    const validBadgeClass = classes('Badge', className, color);
-    return <div className={validBadgeClass}>{name}</div>;
-  } else {
-    return <div className="Badge sm:min-w-full bg-darkGrey">Invalid State</div>;
-  }
+const Badge = ({className, state, loading}) => {
+  const color = state in badgeState ? badgeState[state].color : null;
+  const name = state in badgeState ? badgeState[state].name : 'invalid';
+  const badgeClass = classes(className, 'Badge', {
+    [color]: !loading,
+    'Badge--loading': loading,
+    'Badge--invalid': !(state in badgeState),
+  });
+  return (
+    <div className={badgeClass}>
+      <span className={loading && 'invisible'}>{name}</span>
+    </div>
+  );
 };
 
 Badge.propTypes = {
   /** Any additional classes to be applied to the nav bar button*/
   className: PropTypes.string,
   /** Badge state. */
-  state: PropTypes.string.isRequired,
+  state: PropTypes.string,
 };
 
 Badge.defaultProps = {
diff --git a/src/components/Badge/badge.css b/src/components/Badge/badge.css
index 6b80819f4..0dae65174 100644
--- a/src/components/Badge/badge.css
+++ b/src/components/Badge/badge.css
@@ -1,5 +1,16 @@
 .Badge {
-  @inherit: .bg-teal, .max-w-full, .self-center, .m-1, .px-4, .py-1,
+  @inherit: .max-w-full, .self-center, .m-1, .px-4, .py-1, .rounded-full,
+    .text-center, .text-xs, .text-white, .leading-tight, .whitespace-no-wrap;
+}
+
+.Badge--loading {
+  @inherit: .bg-lightGrey, .max-w-full, .self-center, .m-1, .px-4, .py-1,
+    .rounded-full, .text-center, .text-xs, .text-white, .leading-tight,
+    .whitespace-no-wrap;
+}
+
+.Badge--invalid {
+  @inherit: .bg-darkGrey, .max-w-full, .self-center, .m-1, .px-4, .py-1,
     .rounded-full, .text-center, .text-xs, .text-white, .leading-tight,
     .whitespace-no-wrap;
 }
diff --git a/src/components/FileList/FileElement.js b/src/components/FileList/FileElement.js
index b314e087b..344485aba 100644
--- a/src/components/FileList/FileElement.js
+++ b/src/components/FileList/FileElement.js
@@ -72,8 +72,12 @@ const FileElement = ({
         <Icon kind="reset" width={24} className="float-right mt-5 mr-5 spin" />
       )}
       <div className="FileList--ElementBadge sm:w-48">
-        <Badge state="new" className="sm:min-w-full" />
-        <Badge state="pendingApproval" className="sm:min-w-full" />
+        <Badge state="new" loading={loading} className="sm:min-w-full" />
+        <Badge
+          state="pendingApproval"
+          loading={loading}
+          className="sm:min-w-full"
+        />
       </div>
       <div className="flex-initial">
         <p className="mt-1 font-bold text-sm" title={fileNode.description}>