feat(playground): add description for options (#4785)

* feat(playground): add description for options

* fix: support opposite description

* refactor

website/playground/sidebar/inputs.js

@@ -1,8 +1,8 @@
 import React from "react";
 
-export function Checkbox({ label: _label, checked, onChange }) {
+export function Checkbox({ label: _label, title, checked, onChange }) {
   return (
-    <label>
+    <label title={title}>
       <input
         type="checkbox"
         checked={checked}
@@ -13,9 +13,9 @@ export function Checkbox({ label: _label, checked, onChange }) {
   );
 }
 
-export function Select({ label: _label, values, selected, onChange }) {
+export function Select({ label: _label, title, values, selected, onChange }) {
   return (
-    <label>
+    <label title={title}>
       {_label}{" "}
       <select value={selected} onChange={ev => onChange(ev.target.value)}>
         {values.map(val => (
@@ -30,6 +30,7 @@ export function Select({ label: _label, values, selected, onChange }) {
 
 export function NumberInput({
   label: _label,
+  title,
   value,
   min,
   max,
@@ -37,7 +38,7 @@ export function NumberInput({
   onChange
 }) {
   return (
-    <label>
+    <label title={title}>
       {_label}{" "}
       <input
         type="number"

website/playground/sidebar/options.js

@@ -9,6 +9,7 @@ export function BooleanOption({ option, value, onChange }) {
   return (
     <Checkbox
       label={option.cliName}
+      title={getDescription(option)}
       checked={maybeInvert(value)}
       onChange={checked => onChange(option, maybeInvert(checked))}
     />
@@ -19,6 +20,7 @@ export function ChoiceOption({ option, value, onChange }) {
   return (
     <Select
       label={option.cliName}
+      title={getDescription(option)}
       values={option.choices.map(choice => choice.value)}
       selected={value}
       onChange={val => onChange(option, val)}
@@ -30,6 +32,7 @@ export function NumberOption({ option, value, onChange }) {
   return (
     <NumberInput
       label={option.cliName}
+      title={getDescription(option)}
       min={option.range.start}
       max={option.range.end}
       step={option.range.step}
@@ -51,3 +54,10 @@ export default function(props) {
       throw new Error("unsupported type");
   }
 }
+
+function getDescription(option) {
+  const description = option.inverted
+    ? option.oppositeDescription
+    : option.description;
+  return description && description.replace(/\n/g, " ");
+}