From 4f9b75741b60647e73f220eebf755833638ee4ad Mon Sep 17 00:00:00 2001 From: Daniel Rabe Date: Sun, 28 Oct 2018 20:11:35 +0100 Subject: [PATCH] [OutlinedInput] Improve customization --- .circleci/config.yml | 2 +- .../demos/text-fields/CustomizedInputs.js | 39 ++++++++++++-- .../material-ui/src/InputLabel/InputLabel.js | 21 +++++++- .../src/OutlinedInput/NotchedOutline.js | 52 ++++--------------- .../src/OutlinedInput/OutlinedInput.js | 13 +++-- pages/api/input-label.md | 4 ++ 6 files changed, 80 insertions(+), 51 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 69e677912a1009..3c67a6ed490bce 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -208,7 +208,7 @@ jobs: # From https://github.com/GoogleChrome/puppeteer/blob/811415bc8c47f7882375629b57b3fe186ad61ed4/docs/troubleshooting.md#chrome-headless-doesnt-launch command: | sudo apt-get update - sudo apt-get install -y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget + sudo apt-get install -y --force-yes gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget - run: name: Tests real browsers command: yarn test:karma diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.js b/docs/src/pages/demos/text-fields/CustomizedInputs.js index 17a90220fd18b3..e9f69110c348fb 100644 --- a/docs/src/pages/demos/text-fields/CustomizedInputs.js +++ b/docs/src/pages/demos/text-fields/CustomizedInputs.js @@ -28,6 +28,12 @@ const styles = theme => ({ borderBottomColor: purple[500], }, }, + cssOutlinedInput: { + '&$cssFocused $notchedOutline': { + borderColor: purple[500], + }, + }, + notchedOutline: {}, bootstrapRoot: { 'label + &': { marginTop: theme.spacing.unit * 3, @@ -77,8 +83,8 @@ function CustomizedInputs(props) {
+ + diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js index b6f43070fc1a65..7cf4231ffff609 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.js +++ b/packages/material-ui/src/InputLabel/InputLabel.js @@ -12,6 +12,14 @@ export const styles = theme => ({ root: { transformOrigin: 'top left', }, + /* Styles applied to the root element if `focused={true}`. */ + focused: {}, + /* Styles applied to the root element if `disabled={true}`. */ + disabled: {}, + /* Styles applied to the root element if `error={true}`. */ + error: {}, + /* Styles applied to the root element if `required={true}`. */ + required: {}, /* Styles applied to the root element if the component is a descendant of `FormControl`. */ formControl: { position: 'absolute', @@ -111,7 +119,18 @@ function InputLabel(props, context) { ); return ( - + {children} ); diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js index 2696a972254bee..e356879559c798 100644 --- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js +++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js @@ -12,10 +12,9 @@ export const styles = theme => { /* Styles applied to the root element. */ root: { position: 'absolute', - width: '100%', - height: '100%', - boxSizing: 'border-box', - top: 0, + bottom: 0, + right: 0, + top: -5, left: 0, margin: 0, padding: 0, @@ -34,6 +33,7 @@ export const styles = theme => { legend: { textAlign: 'left', padding: 0, + lineHeight: '10px', transition: theme.transitions.create('width', { duration: theme.transitions.duration.shorter, easing: theme.transitions.easing.easeOut, @@ -45,19 +45,6 @@ export const styles = theme => { height: 2, }, }, - /* Styles applied to the root element if the control is focused. */ - focused: { - borderColor: theme.palette.primary.main, - borderWidth: 2, - }, - /* Styles applied to the root element if `error={true}`. */ - error: { - borderColor: theme.palette.error.main, - }, - /* Styles applied to the root element if `disabled={true}`. */ - disabled: { - borderColor: theme.palette.action.disabled, - }, }; }; @@ -69,9 +56,6 @@ function NotchedOutline(props) { children, classes, className, - disabled, - error, - focused, labelWidth: labelWidthProp, notched, style, @@ -89,15 +73,7 @@ function NotchedOutline(props) { [`padding${capitalize(align)}`]: 8 + (notched ? 0 : labelWidth / 2), ...style, }} - className={classNames( - classes.root, - { - [classes.focused]: focused, - [classes.error]: error, - [classes.disabled]: disabled, - }, - className, - )} + className={classNames(classes.root, className)} {...other} > + > + {/* Use the nominal use case of the legend, avoid rendering artefacts. */} + {/* eslint-disable-next-line react/no-danger */} + + ); } @@ -123,18 +103,6 @@ NotchedOutline.propTypes = { * @ignore */ className: PropTypes.string, - /** - * If `true`, the outline should be displayed in a disabled state. - */ - disabled: PropTypes.bool, - /** - * If `true`, the outline should be displayed in an error state. - */ - error: PropTypes.bool, - /** - * If `true`, the outline should be displayed in a focused state. - */ - focused: PropTypes.bool, /** * The width of the legend. */ diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index 01bcbe8ca6c06a..bafca0e659f41a 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -15,6 +15,16 @@ export const styles = theme => { '&:hover:not($disabled):not($focused):not($error) $notchedOutline': { borderColor: theme.palette.text.primary, }, + '&$focused $notchedOutline': { + borderColor: theme.palette.primary.main, + borderWidth: 2, + }, + '&$error $notchedOutline': { + borderColor: theme.palette.error.main, + }, + '&$disabled $notchedOutline': { + borderColor: theme.palette.action.disabled, + }, }, /* Styles applied to the root element if the component is focused. */ focused: {}, @@ -69,9 +79,6 @@ function OutlinedInput(props) { renderPrefix={state => ( root | Styles applied to the root element. +| focused | Styles applied to the root element if `focused={true}`. +| disabled | Styles applied to the root element if `disabled={true}`. +| error | Styles applied to the root element if `error={true}`. +| required | Styles applied to the root element if `required={true}`. | formControl | Styles applied to the root element if the component is a descendant of `FormControl`. | marginDense | Styles applied to the root element if `margin="dense"`. | shrink | Styles applied to the `input` element if `shrink={true}`.