From 7dcc8449ce8cdf884464b35ce4cb0494e7449356 Mon Sep 17 00:00:00 2001 From: Duncan Thacker Date: Wed, 27 Feb 2019 21:11:25 +0000 Subject: [PATCH] Fixing styling issues with variants Add test --- docsrc/ControlPanel.js | 3 +- docsrc/DemoSection.js | 2 +- docsrc/Sandbox.js | 9 +- src/PickerChips.js | 8 +- src/PickerInput.js | 21 +++- src/__snapshots__/cache.spec.js.snap | 9 ++ src/__snapshots__/customisation.spec.js.snap | 57 ++++++++++- src/__snapshots__/index.spec.js.snap | 102 ++++++++++++++++++- src/customisation.spec.js | 15 +++ src/index.js | 3 +- 10 files changed, 212 insertions(+), 17 deletions(-) diff --git a/docsrc/ControlPanel.js b/docsrc/ControlPanel.js index 5489e82..d8084ce 100644 --- 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 (
+ Props { fields.map(field => ( diff --git a/docsrc/DemoSection.js b/docsrc/DemoSection.js index fc26d0c..37a2562 100644 --- a/docsrc/DemoSection.js +++ b/docsrc/DemoSection.js @@ -19,7 +19,7 @@ export default function DemoSection({ DemoComponent, title }) {
-
+
{ withoutExports(DemoComponent.__source__) } diff --git a/docsrc/Sandbox.js b/docsrc/Sandbox.js index 53eb2c3..0b1ebfd 100644 --- 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
+ Source { generateSource(sandboxProps) }
+ Result 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 index e5f0377..5ed6f1a 100644 --- 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 index 97ea872..6c21d7d 100644 --- 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={ diff --git a/src/__snapshots__/customisation.spec.js.snap b/src/__snapshots__/customisation.spec.js.snap index ec39473..f4821cb 100644 --- a/src/__snapshots__/customisation.spec.js.snap +++ b/src/__snapshots__/customisation.spec.js.snap @@ -126,6 +126,7 @@ exports[`MultiPicker component renders custom chip avatars 1`] = ` autoComplete="off" classes={ Object { + "InputLabelFilled": "PickerInput-InputLabelFilled", "InputLabelRoot": "PickerInput-InputLabelRoot", "InputLabelShrink": "PickerInput-InputLabelShrink", "InputRoot": "PickerInput-InputRoot", @@ -170,6 +171,7 @@ exports[`MultiPicker component renders custom chip avatars 1`] = ` InputLabelProps={ Object { "classes": Object { + "filled": "PickerInput-InputLabelFilled", "root": "PickerInput-InputLabelRoot", "shrink": "PickerInput-InputLabelShrink", }, @@ -189,6 +191,7 @@ exports[`MultiPicker component renders custom chip avatars 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, }, "startAdornment": , + "style": undefined, } } fullWidth={false} @@ -270,6 +274,7 @@ exports[`MultiPicker component renders custom chip avatars 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -330,6 +335,7 @@ exports[`MultiPicker component renders custom chip avatars 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -391,6 +397,7 @@ exports[`MultiPicker component renders custom chip avatars 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -458,6 +465,7 @@ exports[`MultiPicker component renders custom chip avatars 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -525,6 +533,7 @@ exports[`MultiPicker component renders custom chip avatars 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } muiFormControl={ @@ -615,6 +624,7 @@ exports[`MultiPicker component renders custom chip avatars 1`] = ` label="some-item" onDelete={[Function]} tabIndex={-1} + variant="standard" >
, + "style": undefined, } } fullWidth={false} @@ -1078,6 +1093,7 @@ exports[`MultiPicker component renders custom chip colors 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -1129,6 +1145,7 @@ exports[`MultiPicker component renders custom chip colors 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -1181,6 +1198,7 @@ exports[`MultiPicker component renders custom chip colors 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -1239,6 +1257,7 @@ exports[`MultiPicker component renders custom chip colors 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -1297,6 +1316,7 @@ exports[`MultiPicker component renders custom chip colors 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } muiFormControl={ @@ -1365,6 +1385,7 @@ exports[`MultiPicker component renders custom chip colors 1`] = ` label="some-item" onDelete={[Function]} tabIndex={-1} + variant="standard" >
, + "style": undefined, } } fullWidth={false} @@ -1836,6 +1862,7 @@ exports[`MultiPicker component renders custom chip labels 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -1896,6 +1923,7 @@ exports[`MultiPicker component renders custom chip labels 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -1957,6 +1985,7 @@ exports[`MultiPicker component renders custom chip labels 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -2024,6 +2053,7 @@ exports[`MultiPicker component renders custom chip labels 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -2091,6 +2121,7 @@ exports[`MultiPicker component renders custom chip labels 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } muiFormControl={ @@ -2176,12 +2207,14 @@ exports[`MultiPicker component renders custom chip labels 1`] = ` label="some label" onDelete={[Function]} tabIndex={-1} + variant="standard" >
, + "style": undefined, } } error={true} @@ -226,6 +230,7 @@ exports[`MultiPicker component can show in error state 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -276,6 +281,7 @@ exports[`MultiPicker component can show in error state 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -327,6 +333,7 @@ exports[`MultiPicker component can show in error state 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -384,6 +391,7 @@ exports[`MultiPicker component can show in error state 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -441,6 +449,7 @@ exports[`MultiPicker component can show in error state 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } muiFormControl={ @@ -506,12 +515,14 @@ exports[`MultiPicker component can show in error state 1`] = ` label="some item" onDelete={[Function]} tabIndex={-1} + variant="standard" >
, + "style": undefined, } } fullWidth={false} @@ -926,6 +941,7 @@ exports[`MultiPicker component does not show suggestion items that have already "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -976,6 +992,7 @@ exports[`MultiPicker component does not show suggestion items that have already "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -1027,6 +1044,7 @@ exports[`MultiPicker component does not show suggestion items that have already "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -1084,6 +1102,7 @@ exports[`MultiPicker component does not show suggestion items that have already "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -1141,6 +1160,7 @@ exports[`MultiPicker component does not show suggestion items that have already "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } muiFormControl={ @@ -1206,12 +1226,14 @@ exports[`MultiPicker component does not show suggestion items that have already label="some picked suggestion" onDelete={[Function]} tabIndex={-1} + variant="standard" >
, + "style": undefined, } } fullWidth={false} @@ -4172,6 +4216,7 @@ exports[`MultiPicker component renders single chip 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -4222,6 +4267,7 @@ exports[`MultiPicker component renders single chip 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } onBlur={[Function]} @@ -4273,6 +4319,7 @@ exports[`MultiPicker component renders single chip 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -4330,6 +4377,7 @@ exports[`MultiPicker component renders single chip 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } multiline={false} @@ -4387,6 +4435,7 @@ exports[`MultiPicker component renders single chip 1`] = ` "autoComplete": "off", "className": "PickerInput-inputRoot", "id": "downshift-0-input", + "style": undefined, } } muiFormControl={ @@ -4452,12 +4501,14 @@ exports[`MultiPicker component renders single chip 1`] = ` label="some item" onDelete={[Function]} tabIndex={-1} + variant="standard" >
{ expect(wrapper.find(TextField)).toHaveProp(propsToPropagate); }); + it("uses 'outlined' style for the chips when the 'filled' variant is used", () => { + expect.assertions(1); + + const baseProps = { + itemToString: item => item, + value: ["some item"], + onChange: NOOP, + getSuggestedItems: () => [], + variant: "filled" + }; + const wrapper = mountStable(); + + expect(wrapper.find(Chip)).toHaveProp("variant", "outlined"); + }); + }); diff --git a/src/index.js b/src/index.js index 0036a8d..81ac7b5 100644 --- a/src/index.js +++ b/src/index.js @@ -132,7 +132,7 @@ const MultiPicker = createReactClass({ return suggestions; }, renderInputAdornment() { - const { disabled, value, itemToLabel, itemToAvatar, itemToPopover, chipColor, classes } = this.props; + const { disabled, value, itemToLabel, itemToAvatar, itemToPopover, chipColor, variant, classes } = this.props; return value.length ? : false; },