improve input components with error state (#793)

superdesk · Jul 20, 2023 · 6d85ffe · 6d85ffe
1 parent 2c8b84a
commit 6d85ffe
Show file tree

Hide file tree

Showing 18 changed files with 62 additions and 84 deletions.
diff --git a/app-typescript/components/DatePicker.tsx b/app-typescript/components/DatePicker.tsx
@@ -146,6 +146,7 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
  <InputWrapper
  label={this.props.label}
  error={this.props.error}
+ invalid={this.props.error != null}
  required={this.props.required}
  disabled={this.props.disabled}
  info={this.props.info}

diff --git a/app-typescript/components/DurationInput.tsx b/app-typescript/components/DurationInput.tsx
@@ -289,6 +289,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
  <InputWrapper
  label={this.props.label}
  error={this.props.error}
+ invalid={this.props.error != null}
  required={this.props.required}
  disabled={this.props.disabled}
  info={this.props.info}

diff --git a/app-typescript/components/Input.tsx b/app-typescript/components/Input.tsx
@@ -60,8 +60,8 @@ export class Input extends React.Component<IProps> {
  required={this.props.required}
  disabled={this.props.disabled}
  value={this.props.value}
- invalid={this.props.error != null ? true : false}
  error={this.props.error}
+ invalid={this.props.error != null}
  info={this.props.info}
  maxLength={this.props.maxLength}
  inlineLabel={this.props.inlineLabel}

diff --git a/app-typescript/components/MultiSelect.tsx b/app-typescript/components/MultiSelect.tsx
@@ -65,6 +65,7 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
  <InputWrapper
  label={this.props.label}
  error={this.props.error}
+ invalid={this.props.error != null}
  required={this.props.required}
  disabled={this.props.disabled}
  info={this.props.info}

diff --git a/app-typescript/components/Select.tsx b/app-typescript/components/Select.tsx
@@ -33,6 +33,7 @@ class Select extends React.Component<ISelect> {
  <InputWrapper
  label={this.props.label}
  error={this.props.error}
+ invalid={this.props.error != null}
  required={this.props.required}
  disabled={this.props.disabled}
  readonly={this.props.readonly}

diff --git a/app-typescript/components/TagInput.tsx b/app-typescript/components/TagInput.tsx
@@ -31,6 +31,7 @@ export class TagInput extends React.Component<IProps> {
  <InputWrapper
  label={this.props.label}
  error={this.props.error}
+ invalid={this.props.error != null}
  required={this.props.required}
  disabled={this.props.disabled}
  info={this.props.info}

diff --git a/app-typescript/components/TimePicker.tsx b/app-typescript/components/TimePicker.tsx
@@ -25,6 +25,7 @@ export class TimePicker extends React.PureComponent<IProps> {
  <InputWrapper
  label={this.props.label}
  error={this.props.error}
+ invalid={this.props.error != null}
  required={this.props.required}
  disabled={this.props.disabled}
  info={this.props.info}

diff --git a/app-typescript/components/TreeSelect/TreeSelect.tsx b/app-typescript/components/TreeSelect/TreeSelect.tsx
@@ -613,6 +613,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
  <InputWrapper
  label={this.props.label}
  error={this.props.error}
+ invalid={this.props.error != null}
  required={this.props.required}
  disabled={this.props.disabled}
  info={this.props.info}

diff --git a/app/styles/form-elements/_inputs.scss b/app/styles/form-elements/_inputs.scss
@@ -918,45 +918,29 @@
 }
 
 .sd-input--invalid {
- input,
- textarea {
- &.sd-input__input {
- background-color: hsla(357, 79%, 50%, 0.075);
- border-color: $red;
-
- &:hover {
- background-color: hsla(357, 79%, 50%, 0.12);
- border-color: $red;
- }
+ .sd-input__input,
+ .sd-input__select,
+ .sd-input__duration-input,
+ .p-multiselect,
+ .p-calendar {
+ background-color: hsla(357, 79%, 50%, 0.075);
+ border-color: $red;
 
- &:focus {
- background-color: hsla(357, 79%, 50%, 0.16);
- border-color: $red;
- box-shadow: 0 1px 0 0 $red;
- }
+ &:hover {
+ background-color: hsla(357, 79%, 50%, 0.12);
+ border-color: $red;
  }
- }
 
- select {
- &.sd-input__select {
- background-color: hsla(357, 79%, 50%, 0.075);
+ &:focus {
+ background-color: hsla(357, 79%, 50%, 0.16);
  border-color: $red;
-
- &:hover {
- background-color: hsla(357, 79%, 50%, 0.12);
- border-color: $red;
- }
-
- &:focus {
- background-color: hsla(357, 79%, 50%, 0.16);
- border-color: $red;
- box-shadow: 0 1px 0 0 $red;
- }
+ box-shadow: 0 1px 0 0 $red;
  }
  }
 
  .sd-input__label,
- .sd-input__message {
+ .sd-input__message,
+ .sd-input__message-box {
  color: $red;
  }
 }

diff --git a/examples/pages/react/DatePicker.tsx b/examples/pages/react/DatePicker.tsx
@@ -10,6 +10,7 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
  date: new Date(),
  };
  }
+
  render() {
  return (
  <DatePicker
@@ -18,9 +19,8 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
  onChange={(date) => {
  this.setState({date});
  }}
- label={'This is Label'}
- info={'This is info'}
- error={'This is error'}
+ label='This is Label'
+ info='This is info'
  />
  );
  }
@@ -40,6 +40,7 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
  date: new Date(),
  };
  }
+
  render() {
  return (
  <section className="docs-page__container">
@@ -67,9 +68,8 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
  onChange={(date) => {
  this.setState({today: date});
  }}
- label={'This is Label'}
- info={'This is info'}
- error={'This is error'}
+ label='This is Label'
+ info='This is info'
  />
  </div>
  </Markup.ReactMarkupPreview>
@@ -123,9 +123,8 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
  onChange={(date) => {
  this.setState({date});
  }}
- label={'This is Label'}
- info={'This is info'}
- error={'This is error'}
+ label='This is Label'
+ info='This is info'
  headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
  />
  </div>
@@ -137,9 +136,8 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
  onChange={(date) => {
  this.setState({date});
  }}
- label={'This is Label'}
- info={'This is info'}
- error={'This is error'}
+ label='This is Label'
+ info='This is info'
  headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
  />
  `}</Markup.ReactMarkupCode>

diff --git a/examples/pages/react/DurationInput.tsx b/examples/pages/react/DurationInput.tsx
@@ -70,8 +70,8 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
  disabled={this.state.disabled}
  required={this.state.required}
  inlineLabel={this.state.inlineLabel}
- onChange={(e) => {
- this.setState({value: e})
+ onChange={(value) => {
+ this.setState({value})
  }}
  />
  `}</Markup.ReactMarkupCode>

diff --git a/examples/pages/react/MultiSelect.tsx b/examples/pages/react/MultiSelect.tsx
@@ -63,7 +63,6 @@ export class MultiselectDocs extends React.Component<{}, IState> {
  <div className='docs-page__content-row docs-page__content-row--no-margin'>
  <div className='form__row'>
  <MultiSelect
- preview
  value={this.state.value}
  options={ItemArr}
  optionLabel={(option) => option.name}

diff --git a/examples/pages/react/Selects.tsx b/examples/pages/react/Selects.tsx
@@ -55,7 +55,6 @@ export default class InputsDoc extends React.Component<{}, IState> {
  <Select
  value={this.state.value}
  label='Select label'
- error='This is error message'
  info='This is some hint message'
  required={this.state.required}
  disabled={this.state.disabled}
@@ -77,7 +76,6 @@ export default class InputsDoc extends React.Component<{}, IState> {
  <Select
  value={this.state.value}
  label='Select label'
- error='This is error message'
  info='This is some hint message'
  required={this.state.required}
  disabled={this.state.disabled}

diff --git a/examples/pages/react/TagInputDocs.tsx b/examples/pages/react/TagInputDocs.tsx
@@ -30,9 +30,8 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
  <TagInput
  value={this.state.value}
  placeholder="Type Here"
- label={'Tag-input Label'}
- info={'Info Message'}
- error={'Error Message'}
+ label='Tag-input Label'
+ info='Info Message'
  onChange={(value) => {
  this.setState({
  value: value,
@@ -45,9 +44,8 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
  <TagInput
  value={this.state.value}
  placeholder="Type Here"
- label={'Tag-input Label'}
- info={'Info Message'}
- error={'Error Message'}
+ label='Tag-input Label'
+ info='Info Message'
  onChange={(value) => {
  this.setState({
  value: value,

diff --git a/examples/pages/react/TimePicker.tsx b/examples/pages/react/TimePicker.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
 import {PropsList, Prop} from '../../../app-typescript';
 import {TimePicker} from '../../../app-typescript/components/TimePicker';
@@ -12,6 +11,7 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
  time: '',
  };
  }
+
  render() {
  return (
  <TimePicker
@@ -20,9 +20,8 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
  this.setState({time});
  }}
  allowSeconds
- label={'This is Label'}
- info={'This is info'}
- error={'This is error'}
+ label='This is Label'
+ info='This is info'
  />
  );
  }
@@ -54,9 +53,8 @@ export default class TimePickerDoc extends React.Component {
  this.setState({time});
  }}
  allowSeconds
- label={'This is Label'}
- info={'This is info'}
- error={'This is error'}
+ label='This is Label'
+ info='This is info'
  />
  `}</Markup.ReactMarkupCode>
  </Markup.ReactMarkup>