Repository: laboratoriobridge/bold
Pull request #465 (2019-09-13 20:29:13)

Fix components styles


Patch:
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 1f99a35ee..3734f8528 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -99,11 +99,12 @@ export const createInputStyles = (theme: Theme, classes: ClassNames<'check' | 'l
       boxShadow: focusBoxShadow(theme),
     },
     [`&:disabled + .${classes.check}`]: {
-      backgroundColor: theme.pallete.surface.background,
-      borderColor: theme.pallete.gray.c90,
+      opacity: 0.4,
+      cursor: 'not-allowed',
     },
     [`&:disabled + .${classes.check} + .${classes.label}`]: {
       color: theme.pallete.gray.c70,
+      cursor: 'not-allowed',
     },
   },
 })
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index c6e7c7950..179f6b482 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -76,11 +76,12 @@ export const createInputStyles = (theme: Theme, classes: ClassNames<'radio' | 'l
       boxShadow: focusBoxShadow(theme),
     },
     [`&:disabled + .${classes.radio}`]: {
-      backgroundColor: theme.pallete.surface.background,
-      borderColor: theme.pallete.gray.c90,
+      opacity: 0.4,
+      cursor: 'not-allowed',
     },
     [`&:disabled + .${classes.radio} + .${classes.label}`]: {
       color: theme.pallete.gray.c70,
+      cursor: 'not-allowed',
     },
   },
 })
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index bc115911a..583c51284 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -64,6 +64,7 @@ export const createStyles = (theme: Theme) => ({
     width: '1rem',
     height: '1rem',
     transition: 'all .2s',
+    border: `1px solid ${theme.pallete.gray.c60}`,
     boxShadow: theme.shadows.outer['20'],
   } as CSSProperties,
   text: {
@@ -71,7 +72,7 @@ export const createStyles = (theme: Theme) => ({
   } as CSSProperties,
 })
 
-export const createInputStyles = (theme: Theme, classes: ClassNames<'switch' | 'knob'>) => ({
+export const createInputStyles = (theme: Theme, classes: ClassNames<'switch' | 'knob' | 'text'>) => ({
   wrapper: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -103,5 +104,9 @@ export const createInputStyles = (theme: Theme, classes: ClassNames<'switch' | '
       opacity: 0.4,
       cursor: 'not-allowed',
     },
+    [`&:disabled + .${classes.switch} + .${classes.text}`]: {
+      color: theme.pallete.gray.c70,
+      cursor: 'not-allowed',
+    },
   } as CSSProperties,
 })
diff --git a/src/components/Tooltip/TooltipPopper.tsx b/src/components/Tooltip/TooltipPopper.tsx
index c7f3050e9..9fca6bb0d 100644
--- a/src/components/Tooltip/TooltipPopper.tsx
+++ b/src/components/Tooltip/TooltipPopper.tsx
@@ -23,6 +23,7 @@ export const styles = (theme: Theme) => ({
     maxWidth: theme.breakpoints.size.lg,
     background: theme.pallete.gray.c20,
     color: theme.pallete.gray.c100,
+    fontSize: '0.875rem',
     fontWeight: 'bold',
     lineHeight: 1.5,
   } as React.CSSProperties,


Test patch:
diff --git a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 204e9ff15..910c05fbe 100644
--- a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -85,12 +85,13 @@ exports[`Checkbox should render correctly 1`] = `
 }
 
 .emotion-0:disabled + .emotion-1 {
-  background-color: #F0F0F5;
-  border-color: #F0F0F5;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
   color: #AAAAB9;
+  cursor: not-allowed;
 }
 
 <div>
@@ -186,12 +187,13 @@ exports[`Checkbox should render correctly when disabled 1`] = `
 }
 
 .emotion-0:disabled + .emotion-1 {
-  background-color: #F0F0F5;
-  border-color: #F0F0F5;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
   color: #AAAAB9;
+  cursor: not-allowed;
 }
 
 .emotion-3 {
@@ -313,12 +315,13 @@ exports[`Checkbox should render correctly when indeterminate 1`] = `
 }
 
 .emotion-0:disabled + .emotion-1 {
-  background-color: #F0F0F5;
-  border-color: #F0F0F5;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
   color: #AAAAB9;
+  cursor: not-allowed;
 }
 
 <div>
diff --git a/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/src/components/Radio/__snapshots__/Radio.test.tsx.snap
index 861411cdc..5f28e9aaa 100644
--- a/src/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -70,12 +70,13 @@ exports[`should render correctly 1`] = `
 }
 
 .emotion-0:disabled + .emotion-1 {
-  background-color: #F0F0F5;
-  border-color: #F0F0F5;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 .emotion-0:disabled + .emotion-1 + .emotion-2 {
   color: #AAAAB9;
+  cursor: not-allowed;
 }
 
 <div>
diff --git a/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap b/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
index 4cd948a8d..773c18f45 100644
--- a/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
+++ b/src/components/Select/SelectMulti/__snapshots__/SelectMulti.test.tsx.snap
@@ -656,12 +656,13 @@ exports[`should render correctly when opened 1`] = `
 }
 
 .emotion-2:disabled + .emotion-3 {
-  background-color: #F0F0F5;
-  border-color: #F0F0F5;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 .emotion-2:disabled + .emotion-3 + .css-tue92x {
   color: #AAAAB9;
+  cursor: not-allowed;
 }
 
 <div>
diff --git a/src/components/Switch/__snapshots__/Switch.test.tsx.snap b/src/components/Switch/__snapshots__/Switch.test.tsx.snap
index 47f953b8a..018780c4d 100644
--- a/src/components/Switch/__snapshots__/Switch.test.tsx.snap
+++ b/src/components/Switch/__snapshots__/Switch.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`should render correctly 1`] = `
   height: 1rem;
   -webkit-transition: all .2s;
   transition: all .2s;
+  border: 1px solid #8F8FA2;
   box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
 }
 
@@ -73,6 +74,11 @@ exports[`should render correctly 1`] = `
   cursor: not-allowed;
 }
 
+.emotion-0:disabled + .emotion-2 + .css-1f2k2gl {
+  color: #AAAAB9;
+  cursor: not-allowed;
+}
+
 <div>
   <label
     class="emotion-3"
@@ -115,6 +121,7 @@ exports[`should render correctly when disabled 1`] = `
   height: 1rem;
   -webkit-transition: all .2s;
   transition: all .2s;
+  border: 1px solid #8F8FA2;
   box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
 }
 
@@ -170,6 +177,11 @@ exports[`should render correctly when disabled 1`] = `
   cursor: not-allowed;
 }
 
+.emotion-0:disabled + .emotion-2 + .emotion-3 {
+  color: #AAAAB9;
+  cursor: not-allowed;
+}
+
 <div>
   <label
     class="emotion-4"
@@ -218,6 +230,7 @@ exports[`should render correctly with label 1`] = `
   height: 1rem;
   -webkit-transition: all .2s;
   transition: all .2s;
+  border: 1px solid #8F8FA2;
   box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 3px 1px -2px rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.14);
 }
 
@@ -273,6 +286,11 @@ exports[`should render correctly with label 1`] = `
   cursor: not-allowed;
 }
 
+.emotion-0:disabled + .emotion-2 + .emotion-3 {
+  color: #AAAAB9;
+  cursor: not-allowed;
+}
+
 <div>
   <label
     class="emotion-4"
diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 09278c7cc..a4875a72f 100644
--- a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`should render correctly 2`] = `
   max-width: 1280px;
   background: #3A3A47;
   color: #FFFFFF;
+  font-size: 0.875rem;
   font-weight: bold;
   line-height: 1.5;
   text-align: center;
diff --git a/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap b/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap
index 274032224..7099d12d1 100644
--- a/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap
+++ b/src/components/Tooltip/__snapshots__/TooltipPopper.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`should accept style prop 1`] = `
   max-width: 1280px;
   background: #3A3A47;
   color: #FFFFFF;
+  font-size: 0.875rem;
   font-weight: bold;
   line-height: 1.5;
   text-align: center;
@@ -28,6 +29,7 @@ exports[`should render the big version when text length is > 60 1`] = `
   max-width: 1280px;
   background: #3A3A47;
   color: #FFFFFF;
+  font-size: 0.875rem;
   font-weight: bold;
   line-height: 1.5;
   text-align: left;
@@ -50,6 +52,7 @@ exports[`should render the small version when text length is <= 60 1`] = `
   max-width: 1280px;
   background: #3A3A47;
   color: #FFFFFF;
+  font-size: 0.875rem;
   font-weight: bold;
   line-height: 1.5;
   text-align: center;