From f313cf978ceaa0d994c691c10d88a4015f272243 Mon Sep 17 00:00:00 2001
From: ls-dennis-marchand
 <76014778+ls-dennis-marchand@users.noreply.github.com>
Date: Wed, 19 May 2021 10:07:26 -0700
Subject: [PATCH] Base label color on disabled prop (#139)

* Base label color on disabled prop

This commit alters the color of labels for both the Radio and Checkbox
components if the disabled prop is sent down as true.

The idea behind this is that the visual cue that indicates the
component is disabled becomes more reliable when it is applied to the
element as a whole.

* Update CHANGELOG
---
 packages/flame/CHANGELOG.md                   |  6 +++
 .../__snapshots__/Checkbox.test.tsx.snap      | 40 +++++++++----------
 packages/flame/src/Radio/Radio.tsx            |  4 +-
 .../Radio/__snapshots__/Radio.test.tsx.snap   | 34 ++++++++--------
 4 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/packages/flame/CHANGELOG.md b/packages/flame/CHANGELOG.md
index 3b47b438..577ce1a3 100644
--- a/packages/flame/CHANGELOG.md
+++ b/packages/flame/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Refer to the [CONTRIBUTING guide](https://github.com/lightspeed/flame/blob/master/.github/CONTRIBUTING.md) for more info.
 
+## [Unreleased]
+
+### Changed
+
+- Base label color on disabled prop ([#139](https://github.com/lightspeed/flame/pull/139))
+
 ## 2.1.0-alpha.1 - 2021-03-10
 
 ### Fixed
diff --git a/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index f36ab2b3..48aa08c5 100644
--- a/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`<Checkbox /> Snapshots when all props and label/description with html should render correctly 1`] = `
 .emotion-9 {
   margin: 0;
-  font-weight: 700;
   color: #0c0d0d;
+  font-weight: 700;
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-weight: 700;
@@ -151,8 +151,8 @@ exports[`<Checkbox /> Snapshots when all props and label/description with html s
 exports[`<Checkbox /> Snapshots when all props should render correctly 1`] = `
 .emotion-9 {
   margin: 0;
-  font-weight: 700;
   color: #0c0d0d;
+  font-weight: 700;
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-weight: 700;
@@ -295,8 +295,8 @@ exports[`<Checkbox /> Snapshots when all props should render correctly 1`] = `
 exports[`<Checkbox /> Snapshots when checked should render correctly 1`] = `
 .emotion-9 {
   margin: 0;
-  font-weight: 700;
   color: #0c0d0d;
+  font-weight: 700;
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-weight: 700;
@@ -422,19 +422,6 @@ exports[`<Checkbox /> Snapshots when checked should render correctly 1`] = `
 `;
 
 exports[`<Checkbox /> Snapshots when disabled should render correctly 1`] = `
-.emotion-9 {
-  margin: 0;
-  font-weight: 700;
-  color: #0c0d0d;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-weight: 700;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .emotion-7 {
   position: relative;
   line-height: 1rem;
@@ -507,12 +494,25 @@ exports[`<Checkbox /> Snapshots when disabled should render correctly 1`] = `
   fill: #fff;
 }
 
+.emotion-9 {
+  margin: 0;
+  color: #e1e4e5;
+  font-weight: 700;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  font-weight: 700;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 <div
   className="emotion-11 emotion-12"
 >
   <label
     className="emotion-9 emotion-10"
-    color="textHeading"
+    color="disabled"
     fontSize="text-s"
     fontWeight="bold"
   >
@@ -552,8 +552,8 @@ exports[`<Checkbox /> Snapshots when disabled should render correctly 1`] = `
 exports[`<Checkbox /> Snapshots when empty props should render correctly 1`] = `
 .emotion-9 {
   margin: 0;
-  font-weight: 700;
   color: #0c0d0d;
+  font-weight: 700;
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-weight: 700;
@@ -679,8 +679,8 @@ exports[`<Checkbox /> Snapshots when empty props should render correctly 1`] = `
 exports[`<Checkbox /> Snapshots when indeterminate should render correctly 1`] = `
 .emotion-11 {
   margin: 0;
-  font-weight: 700;
   color: #0c0d0d;
+  font-weight: 700;
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-weight: 700;
@@ -823,8 +823,8 @@ exports[`<Checkbox /> Snapshots when indeterminate should render correctly 1`] =
 exports[`<Checkbox /> Snapshots when not checked should render correctly 1`] = `
 .emotion-9 {
   margin: 0;
-  font-weight: 700;
   color: #0c0d0d;
+  font-weight: 700;
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-weight: 700;
diff --git a/packages/flame/src/Radio/Radio.tsx b/packages/flame/src/Radio/Radio.tsx
index 5b843763..3e60b0d6 100644
--- a/packages/flame/src/Radio/Radio.tsx
+++ b/packages/flame/src/Radio/Radio.tsx
@@ -14,7 +14,9 @@ export const RadioLabel: React.FC<RadioLabelProps> = ({
 }) => {
   return (
     <Box>
-      <BaseLabel {...restProps}>{children}</BaseLabel>
+      <BaseLabel color={disabled ? 'disabled' : undefined} {...restProps}>
+        {children}
+      </BaseLabel>
       {description && <FormHelper ml="1.75rem">{description}</FormHelper>}
     </Box>
   );
diff --git a/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap b/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap
index 8e8ef656..61040ed8 100644
--- a/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`<Radio /> Snapshots renders a Radio with a label and description correctly 1`] = `
 .emotion-8 {
   margin: 0;
-  font-weight: 700;
   color: #0c0d0d;
+  font-weight: 700;
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-weight: 700;
@@ -129,8 +129,8 @@ exports[`<Radio /> Snapshots renders a Radio with a label and description correc
 exports[`<Radio /> Snapshots renders a checked Radio correctly 1`] = `
 .emotion-8 {
   margin: 0;
-  font-weight: 700;
   color: #0c0d0d;
+  font-weight: 700;
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-weight: 700;
@@ -239,19 +239,6 @@ exports[`<Radio /> Snapshots renders a checked Radio correctly 1`] = `
 `;
 
 exports[`<Radio /> Snapshots renders a disabled Radio correctly 1`] = `
-.emotion-8 {
-  margin: 0;
-  font-weight: 700;
-  color: #0c0d0d;
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-weight: 700;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .emotion-6 {
   position: relative;
   line-height: 1rem;
@@ -316,12 +303,25 @@ exports[`<Radio /> Snapshots renders a disabled Radio correctly 1`] = `
   background: #fff linear-gradient(180deg,#fff,#f3f3f3);
 }
 
+.emotion-8 {
+  margin: 0;
+  color: #e1e4e5;
+  font-weight: 700;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  font-weight: 700;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 <div
   className="emotion-10 emotion-11"
 >
   <label
     className="emotion-8 emotion-9"
-    color="textHeading"
+    color="disabled"
     fontSize="text-s"
     fontWeight="bold"
     htmlFor="Radio"
@@ -354,8 +354,8 @@ exports[`<Radio /> Snapshots renders a disabled Radio correctly 1`] = `
 exports[`<Radio /> Snapshots renders a simple Radio correctly 1`] = `
 .emotion-8 {
   margin: 0;
-  font-weight: 700;
   color: #0c0d0d;
+  font-weight: 700;
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-weight: 700;