Fixing styling issues with variants

Add test
atropos-tech · Feb 27, 2019 · 7dcc844 · 7dcc844
1 parent 5ae5520
commit 7dcc844
Show file tree

Hide file tree

Showing 10 changed files with 212 additions and 17 deletions.
diff --git a/docsrc/ControlPanel.js b/docsrc/ControlPanel.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { TextField, Switch, FormControlLabel, FormGroup, FormControl, InputLabel, Select, MenuItem } from "@material-ui/core";
+import { TextField, Switch, FormControlLabel, FormGroup, FormControl, InputLabel, Select, MenuItem, Typography } from "@material-ui/core";
 import { string, bool, oneOf } from "prop-types";
 
 function getFieldElement({ propName, propType, label, helperText, options }, value, onUpdate) {
@@ -47,6 +47,7 @@ export default function ControlPanel({ fields, value, onChange }) {
     const handleUpdateValue = (propName, propValue) => onChange({ ...value, [propName]: propValue });
     return (
         <div style={ { padding: "16px", minWidth: "250px" } }>
+            <Typography variant="h6">Props</Typography>
             {
                 fields.map(field => (
                     <FormGroup key={ field.propName }>

diff --git a/docsrc/DemoSection.js b/docsrc/DemoSection.js
@@ -19,7 +19,7 @@ export default function DemoSection({ DemoComponent, title }) {
                 <FormControlLabel control={ codeSwitch } label="Show/hide source code" />
             </div>
             <Markdown source={ DemoComponent.__markdown__ } />
-            <div style={ { width: "100%" } }>
+            <div style={ { width: "100%", marginTop: "8px" } }>
                 <DemoComponent />
                 <Collapse in={ isCodeOpen }>
                     <SyntaxHighlighter language="jsx" style={ codeStyle }>{ withoutExports(DemoComponent.__source__) }</SyntaxHighlighter>

diff --git a/docsrc/Sandbox.js b/docsrc/Sandbox.js
@@ -5,7 +5,7 @@ import { atomDark as codeStyle } from "react-syntax-highlighter/dist/styles/pris
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { string, bool, oneOf } from "prop-types";
 import ControlPanel from "./ControlPanel";
-import { Paper, Divider } from "@material-ui/core";
+import { Paper, Divider, Typography } from "@material-ui/core";
 
 const CONTROL_PANEL_FIELDS = [
     { propName: "label", label: "Label", defaultValue: "Your favourite fruit", propType: string },
@@ -38,7 +38,8 @@ function generateSource(sandboxProps) {
     }).join("\n");
     return `
 function MyPicker() {
-    const [ items, setItems ] = useState([]);
+    //requires React 16.8+
+    const [ items, setItems ] = useState(ALL_FRUITS);
     return <MultiPicker
         value={ items }
         onChange={ setItems }
@@ -51,19 +52,21 @@ ${sandboxPropCode}
 }
 
 export default function Sandbox() {
-    const [ items, setItems ] = useState(ALL_FRUITS.slice(0, 2));
+    const [ items, setItems ] = useState(ALL_FRUITS);
     const [ sandboxProps, setSandboxProps ] = useState(DEFAULT_SANDBOX_PROPS);
 
     return (
         <Paper>
             <div style={ { display: "flex", alignItems: "stretch" } }>
                 <ControlPanel fields={ CONTROL_PANEL_FIELDS } value={ sandboxProps } onChange={ setSandboxProps } />
                 <div style={ { flex: "1 1 0" } }>
+                    <Typography variant="h6">Source</Typography>
                     <SyntaxHighlighter language="jsx" style={ codeStyle }>{ generateSource(sandboxProps) }</SyntaxHighlighter>
                 </div>
             </div>
             <Divider />
             <div style={ { padding: "32px" } }>
+                <Typography variant="h6">Result</Typography>
                 <MultiPicker
                     value={ items }
                     onChange={ setItems }

diff --git a/src/PickerChips.js b/src/PickerChips.js
@@ -1,11 +1,11 @@
 import React from "react";
 import ChipWithPopover from "./ChipWithPopover";
-import { array, func, object, bool } from "prop-types";
+import { array, func, object, bool, string } from "prop-types";
 import { materialColorPropType } from "./utils";
 
 const DEFAULT_AVATAR = () => undefined;
 
-function PickerChips({ selectedItems, disabled, color, onDelete, itemToString, itemToLabel, itemToPopover, itemToAvatar = DEFAULT_AVATAR, classes }) {
+function PickerChips({ selectedItems, disabled, color, onDelete, itemToString, itemToLabel, itemToPopover, itemToAvatar = DEFAULT_AVATAR, variant, classes }) {
     return (
         <>
             {
@@ -20,6 +20,7 @@ function PickerChips({ selectedItems, disabled, color, onDelete, itemToString, i
                             onDelete={ disabled ? undefined : () => onDelete(item) }
                             avatar={ itemToAvatar(item) }
                             color={ color }
+                            variant={ variant === "filled" ? "outlined" : "standard" }
                         />
                     )
                 )
@@ -37,7 +38,8 @@ PickerChips.propTypes = {
     itemToLabel: func,
     itemToAvatar: func,
     itemToPopover: func,
-    classes: object
+    classes: object,
+    variant: string
 };
 
 

diff --git a/src/PickerInput.js b/src/PickerInput.js
@@ -15,6 +15,9 @@ const styles = theme => ({
     InputLabelRoot: {
         top: theme.spacing.unit
     },
+    InputLabelFilled: {
+        top: theme.spacing.unit * 2
+    },
     InputLabelShrink: {
         top: 0
     },
@@ -26,12 +29,25 @@ const styles = theme => ({
     }
 });
 
+const isFilledOrOutlined = variant => ["filled", "outlined"].includes(variant);
+
+function getInputPaddingStyle(variant) {
+    if ( variant === "outlined" ) {
+        return { padding: "18.5px 14px" };
+    }
+    if ( variant === "filled" ) {
+        return { padding: "27px 12px 10px" };
+    }
+}
+
 function PickerInput({ value, onChange, startAdornment, classes, fullWidth, label, onBlur, onKeyDown, disabled, error, variant, helperText, required, name, ...otherProps }) {
     const InputProps = {
         inputProps: {
             ...otherProps,
-            className: classes.inputRoot
+            className: classes.inputRoot,
+            style: isFilledOrOutlined(variant) ? { padding: "6.5px 0" } : undefined,
         },
+        style: getInputPaddingStyle(variant),
         startAdornment,
         classes: { root: classes.InputRoot }
     };
@@ -42,7 +58,8 @@ function PickerInput({ value, onChange, startAdornment, classes, fullWidth, labe
         shrink: Boolean(value.length || startAdornment),
         classes: {
             root: classes.InputLabelRoot,
-            shrink: classes.InputLabelShrink
+            shrink: classes.InputLabelShrink,
+            filled: classes.InputLabelFilled
         }
     };
     return (

diff --git a/src/__snapshots__/cache.spec.js.snap b/src/__snapshots__/cache.spec.js.snap
@@ -75,6 +75,7 @@ exports[`MultiPicker component uses global cache if configured 1`] = `
               autoComplete="off"
               classes={
                 Object {
+                  "InputLabelFilled": "PickerInput-InputLabelFilled",
                   "InputLabelRoot": "PickerInput-InputLabelRoot",
                   "InputLabelShrink": "PickerInput-InputLabelShrink",
                   "InputRoot": "PickerInput-InputRoot",
@@ -94,6 +95,7 @@ exports[`MultiPicker component uses global cache if configured 1`] = `
                 InputLabelProps={
                   Object {
                     "classes": Object {
+                      "filled": "PickerInput-InputLabelFilled",
                       "root": "PickerInput-InputLabelRoot",
                       "shrink": "PickerInput-InputLabelShrink",
                     },
@@ -113,8 +115,10 @@ exports[`MultiPicker component uses global cache if configured 1`] = `
                       "autoComplete": "off",
                       "className": "PickerInput-inputRoot",
                       "id": "downshift-0-input",
+                      "style": undefined,
                     },
                     "startAdornment": false,
+                    "style": undefined,
                   }
                 }
                 fullWidth={false}
@@ -171,6 +175,7 @@ exports[`MultiPicker component uses global cache if configured 1`] = `
                             "autoComplete": "off",
                             "className": "PickerInput-inputRoot",
                             "id": "downshift-0-input",
+                            "style": undefined,
                           }
                         }
                         onBlur={[Function]}
@@ -206,6 +211,7 @@ exports[`MultiPicker component uses global cache if configured 1`] = `
                               "autoComplete": "off",
                               "className": "PickerInput-inputRoot",
                               "id": "downshift-0-input",
+                              "style": undefined,
                             }
                           }
                           onBlur={[Function]}
@@ -242,6 +248,7 @@ exports[`MultiPicker component uses global cache if configured 1`] = `
                                 "autoComplete": "off",
                                 "className": "PickerInput-inputRoot",
                                 "id": "downshift-0-input",
+                                "style": undefined,
                               }
                             }
                             multiline={false}
@@ -284,6 +291,7 @@ exports[`MultiPicker component uses global cache if configured 1`] = `
                                   "autoComplete": "off",
                                   "className": "PickerInput-inputRoot",
                                   "id": "downshift-0-input",
+                                  "style": undefined,
                                 }
                               }
                               multiline={false}
@@ -326,6 +334,7 @@ exports[`MultiPicker component uses global cache if configured 1`] = `
                                     "autoComplete": "off",
                                     "className": "PickerInput-inputRoot",
                                     "id": "downshift-0-input",
+                                    "style": undefined,
                                   }
                                 }
                                 muiFormControl={