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
lightspeed · May 19, 2021 · f313cf9 · f313cf9
1 parent 4c65cb0
commit f313cf9
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;