fix: Error UI improvements for nested lists/objects (#3726)

This commit is contained in:
Kevin Young
2020-05-25 01:42:54 -05:00
committed by GitHub
parent 2ecafd3354
commit 397857855b
11 changed files with 402 additions and 34 deletions

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { ClassNames } from '@emotion/core';
import { Map, List } from 'immutable';
import { ObjectWidgetTopBar, lengths } from 'netlify-cms-ui-default';
import { ObjectWidgetTopBar, lengths, colors } from 'netlify-cms-ui-default';
const styleStrings = {
nestedObjectControl: `
@ -36,6 +36,7 @@ export default class ObjectControl extends React.Component {
resolveWidget: PropTypes.func.isRequired,
clearFieldErrors: PropTypes.func.isRequired,
fieldsErrors: ImmutablePropTypes.map.isRequired,
hasError: PropTypes.bool,
};
static defaultProps = {
@ -79,6 +80,7 @@ export default class ObjectControl extends React.Component {
fieldsErrors,
editorControl: EditorControl,
controlRef,
parentIds,
} = this.props;
if (field.get('widget') === 'hidden') {
@ -99,6 +101,7 @@ export default class ObjectControl extends React.Component {
onValidate={onValidateObject}
processControlRef={controlRef && controlRef.bind(this)}
controlRef={controlRef}
parentIds={parentIds}
/>
);
}
@ -115,7 +118,7 @@ export default class ObjectControl extends React.Component {
};
render() {
const { field, forID, classNameWrapper, forList } = this.props;
const { field, forID, classNameWrapper, forList, hasError } = this.props;
const collapsed = forList ? this.props.collapsed : this.state.collapsed;
const multiFields = field.get('fields');
const singleField = field.get('field');
@ -136,6 +139,11 @@ export default class ObjectControl extends React.Component {
${styleStrings.nestedObjectControl}
`]: forList,
},
{
[css`
border-color: ${colors.textFieldBorder};
`]: forList ? !hasError : false,
},
)}
>
{forList ? null : (