[components] Checkbox font size fix (#1336)

* [components] Story to debug font size * [components] Using transform for position in checkbox * [components] Removing unused css
sanity-io · Jun 5, 2019 · a201c96 · a201c96
1 parent 11c1985
commit a201c96
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 25 deletions.
diff --git a/packages/@sanity/components/src/toggles/Checkbox.js b/packages/@sanity/components/src/toggles/Checkbox.js
@@ -86,8 +86,6 @@ export default class Checkbox extends React.Component {
         <div className={styles.boxOutline}>
           <div className={styles.tickOutline} />
         </div>
-        <div className={styles.tickHelper} />
-        <div className={styles.rippleContainer} />
       </label>
     )
   }

diff --git a/packages/@sanity/components/src/toggles/story.js b/packages/@sanity/components/src/toggles/story.js
@@ -37,19 +37,26 @@ storiesOf('Toggles')
     )
   })
   .add('Checkbox', () => {
+    const fontSize = number('fontSize', 1, {range: true, min: 0.5, max: 3, step: 0.1}, 'test')
     return (
       <div style={centerStyle}>
         <Sanity part="part:@sanity/components/toggles/checkbox" propTables={[Checkbox]}>
-          <Checkbox
-            label={text('label', 'This is the label', 'props')}
-            checked={boolean('undefined', false) ? undefined : boolean('checked', false, 'props')}
-            disabled={boolean('disabled', false, 'props')}
-            onChange={action('onChange')}
-            onBlur={action('onBlur')}
-            onFocus={action('onFocus')}
+          <div
+            style={{
+              fontSize: `${fontSize}em`
+            }}
           >
-            {boolean('Children', false, 'test') ? <h1 style={{color: 'red'}}>Test</h1> : false}
-          </Checkbox>
+            <Checkbox
+              label={text('label', `This is the label (${fontSize}em)`, 'props')}
+              checked={boolean('undefined', false) ? undefined : boolean('checked', false, 'props')}
+              disabled={boolean('disabled', false, 'props')}
+              onChange={action('onChange')}
+              onBlur={action('onBlur')}
+              onFocus={action('onFocus')}
+            >
+              {boolean('Children', false, 'test') ? <h1 style={{color: 'red'}}>Test</h1> : false}
+            </Checkbox>
+          </div>
         </Sanity>
       </div>
     )

diff --git a/packages/@sanity/components/src/toggles/styles/Checkbox.css b/packages/@sanity/components/src/toggles/styles/Checkbox.css
@@ -17,7 +17,6 @@
   z-index: 1;
   display: inline-block;
   box-sizing: border-box;
-  height: var(--checkbox-label-height);
   margin: 0;
   padding: 0;
   padding-left: calc(var(--checkbox-button-size) + var(--checkbox-padding));
@@ -63,7 +62,7 @@
   position: absolute;
   top: var(--checkbox-top-offset);
   left: 0;
-  display: inline-block;
+  display: block;
   box-sizing: border-box;
   width: var(--checkbox-button-size);
   height: var(--checkbox-button-size);
@@ -74,10 +73,6 @@
   border-radius: 10%;
   z-index: 2;
   background-color: var(--component-bg);
-
-  @nest .isChecked & {
-    border: 2px solid var(--checkbox-color);
-  }
 }
 
 .focusHelper {
@@ -106,21 +101,28 @@
 
 .tickOutline {
   position: absolute;
-  top: calc(var(--checkbox-button-size) * 0.12);
-  left: calc(var(--checkbox-button-size) * 0.12);
-  height: calc(var(--checkbox-button-size) * 0.5);
-  width: calc(var(--checkbox-button-size) * 0.5);
-  background: transparent;
-  transition-property: background;
+  top: 50%;
+  left: 50%;
+  height: var(--checkbox-button-size);
+  width: var(--checkbox-button-size);
+  border-radius: 10%;
+  background-color: var(--checkbox-color);
+  opacity: 0;
+  transform: translate3d(-50%, -50%, 1px) scale(0);
+  transition: background, transform 100ms linear;
 
   @nest .isChecked & {
     background-color: var(--checkbox-color);
+    opacity: 1;
+    transform: translate3d(-50%, -50%, 1px) scale(0.55);
+    transition: background, transform 100ms linear;
   }
 
   @nest .indeterminate & {
-    top: calc(var(--checkbox-button-size) * 0.29);
-    height: calc(var(--checkbox-button-size) * 0.2);
+    opacity: 1;
     background-color: var(--checkbox-color);
+    transform: translate3d(-50%, -50%, 1px) scale(0.5, 0.2);
+    transition: background, transform 100ms linear;
   }
 }