[components] Add description to booleans (#658)

sanity-io · Mar 14, 2018 · ed99ec2 · ed99ec2
1 parent e178271
commit ed99ec2
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 18 deletions.
diff --git a/packages/@sanity/components/src/toggles/Checkbox.js b/packages/@sanity/components/src/toggles/Checkbox.js
@@ -5,6 +5,7 @@ import styles from 'part:@sanity/components/toggles/checkbox-style'
 export default class Checkbox extends React.Component {
   static propTypes = {
     label: PropTypes.string,
+    description: PropTypes.string,
     markers: PropTypes.array,
     checked: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -49,7 +50,7 @@ export default class Checkbox extends React.Component {
   }
 
   render() {
-    const {disabled, markers, checked, label, children, readOnly, ...rest} = this.props
+    const {disabled, markers, checked, label, description, children, readOnly, ...rest} = this.props
     const {hasFocus} = this.state
 
     let checkedClass = checked ? styles.isChecked : styles.unChecked
@@ -80,7 +81,9 @@ export default class Checkbox extends React.Component {
           onFocus={this.handleFocus}
         />
         <div className={styles.label}>{children || label}</div>
-
+        {
+          description && <div className={styles.description}>{description}</div>
+        }
         <div className={styles.focusHelper} />
         <div className={styles.boxOutline}>
           <div className={styles.tickOutline} />

diff --git a/packages/@sanity/components/src/toggles/Switch.js b/packages/@sanity/components/src/toggles/Switch.js
@@ -5,6 +5,7 @@ import styles from 'part:@sanity/components/toggles/switch-style'
 export default class Switch extends React.Component {
   static propTypes = {
     label: PropTypes.string.isRequired,
+    description: PropTypes.string,
     markers: PropTypes.array,
     checked: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -49,7 +50,7 @@ export default class Switch extends React.Component {
   }
 
   render() {
-    const {disabled, markers, checked, label, readOnly, ...rest} = this.props
+    const {disabled, markers, checked, label, description, readOnly, ...rest} = this.props
     const {hasFocus} = this.state
 
     let thumbClass = checked ? styles.thumbChecked : styles.thumb
@@ -68,21 +69,26 @@ export default class Switch extends React.Component {
         `}
         onBlur={this.handleBlur}
       >
-        <div className={styles.track} />
-        <div className={thumbClass}>
-          <div className={styles.focusHelper} />
-        </div>
+        <div className={styles.inner}>
+          <div className={styles.track} />
+          <div className={thumbClass}>
+            <div className={styles.focusHelper} />
+          </div>
 
-        <input
-          {...rest}
-          className={styles.input}
-          type="checkbox"
-          disabled={disabled || readOnly}
-          checked={checked}
-          ref={this.setInput}
-          onFocus={this.handleFocus}
-        />
-        <div className={styles.label}>{label}</div>
+          <input
+            {...rest}
+            className={styles.input}
+            type="checkbox"
+            disabled={disabled || readOnly}
+            checked={checked}
+            ref={this.setInput}
+            onFocus={this.handleFocus}
+          />
+          <div className={styles.label}>{label}</div>
+          {
+            description && <div className={styles.description}>{description}</div>
+          }
+        </div>
       </label>
     )
   }

diff --git a/packages/@sanity/components/src/toggles/styles/Checkbox.css b/packages/@sanity/components/src/toggles/styles/Checkbox.css
@@ -135,3 +135,7 @@
   line-height: var(--checkbox-label-height);
   margin: 0;
 }
+
+.description {
+  composes: description from 'part:@sanity/base/theme/typography/text-blocks-style';
+}
diff --git a/packages/@sanity/components/src/toggles/styles/Switch.css b/packages/@sanity/components/src/toggles/styles/Switch.css
@@ -46,7 +46,8 @@
 
 .root {
   composes: root from 'part:@sanity/components/formfields/default-style';
-  display: inline-block;
+  display: inline-block !important;
+  width: auto !important;
   user-select: none;
   position: relative;
 }
@@ -182,6 +183,13 @@
   }
 }
 
+.description {
+  composes: description from 'part:@sanity/base/theme/typography/text-blocks-style';
+  position: relative;
+  display: block;
+  left: calc(var(--switch-track-length) + 0.5rem);
+}
+
 .track {
   background: var(--switch-off-track-color);
   position: absolute;

diff --git a/packages/@sanity/form-builder/src/inputs/BooleanInput.js b/packages/@sanity/form-builder/src/inputs/BooleanInput.js
@@ -43,6 +43,7 @@ export default class BooleanInput extends React.Component<Props> {
         onChange={this.handleChange}
         checked={value}
         ref={this.setInput}
+        description={type.description}
       >
         {type.title}
       </Checkbox>
@@ -53,6 +54,7 @@ export default class BooleanInput extends React.Component<Props> {
         onChange={this.handleChange}
         checked={value}
         label={type.title}
+        description={type.description}
         ref={this.setInput}
       />
     )