fix(ui-date-time-input,ui-form-field): make DateTimeInput compatible with the new error format

Author: balzss

docs/guides/form-errors.md

@@ -135,6 +135,34 @@ const Example = () => {
           renderMessages={() => messages}
         />
 
+        <DateTimeInput
+          description={`DateTimeInput (layout="column")`}
+          datePlaceholder="Choose a date"
+          dateRenderLabel="Date"
+          timeRenderLabel="Time"
+          invalidDateTimeMessage="Invalid date!"
+          prevMonthLabel="Previous month"
+          nextMonthLabel="Next month"
+          defaultValue="2018-01-18T13:30"
+          layout="columns"
+          isRequired={isRequired}
+          messages={messages}
+        />
+
+        <DateTimeInput
+          description={`DateTimeInput (layout="stacked")`}
+          datePlaceholder="Choose a date"
+          dateRenderLabel="Date"
+          timeRenderLabel="Time"
+          invalidDateTimeMessage="Invalid date!"
+          prevMonthLabel="Previous month"
+          nextMonthLabel="Next month"
+          defaultValue="2018-01-18T13:30"
+          layout="stacked"
+          isRequired={isRequired}
+          messages={messages}
+        />
+
       </div>
     </div>
   )

packages/ui-date-time-input/src/DateTimeInput/__new-tests__/DateTimeInput.test.tsx

@@ -173,7 +173,7 @@ describe('<DateTimeInput />', () => {
         invalidDateTimeMessage={invalidDateTimeMessage}
       />
     )
-    const timeInput = screen.getByLabelText('time-input')
+    const timeInput = screen.getByLabelText('time-input *')
 
     await userEvent.type(timeInput, '1:00 PM')
     fireEvent.blur(timeInput)

packages/ui-date-time-input/src/DateTimeInput/index.tsx

@@ -165,7 +165,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
                 ? this.props.invalidDateTimeMessage(parsed.toISOString(true))
                 : this.props.invalidDateTimeMessage
           }
-          errorMsg = text ? { text, type: 'error' } : undefined
+          errorMsg = text ? { text, type: 'newError' } : undefined
           return {
             iso: parsed.clone(),
             calendarSelectedDate: parsed.clone(),
@@ -348,7 +348,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           ? this.props.invalidDateTimeMessage(dateStr ? dateStr : '')
           : this.props.invalidDateTimeMessage
       // eslint-disable-next-line no-param-reassign
-      newState.message = { text: text, type: 'error' }
+      newState.message = { text: text, type: 'newError' }
     }
     if (this.areDifferentDates(this.state.iso, newState.iso)) {
       if (typeof this.props.onChange === 'function') {
@@ -567,6 +567,17 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
       allowNonStepInput
     } = this.props
 
+    const allMessages = [
+      ...(showMessages && this.state.message ? [this.state.message] : []),
+      ...(messages || [])
+    ]
+
+    const hasError = allMessages.find((m) => m.type === 'newError')
+    // if the component is in error state, create an empty error message to pass down to the subcomponents (DateInput and TimeInput) so they get a red outline and red required asterisk
+    const subComponentMessages: FormMessage[] = hasError
+      ? [{ type: 'newError', text: '' }]
+      : []
+
     return (
       <FormFieldGroup
         description={description}
@@ -575,6 +586,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
         colSpacing={colSpacing}
         vAlign="top"
         elementRef={this.handleRef}
+        isGroup={false}
         messages={[
           ...(showMessages && this.state.message ? [this.state.message] : []),
           ...(messages || [])
@@ -601,6 +613,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           onRequestRenderNextMonth={this.handleRenderNextMonth}
           onRequestRenderPrevMonth={this.handleRenderPrevMonth}
           isRequired={isRequired}
+          messages={subComponentMessages}
           interaction={interaction}
           renderNavigationLabel={
             <span>
@@ -624,6 +637,8 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           inputRef={timeInputRef}
           interaction={interaction}
           allowNonStepInput={allowNonStepInput}
+          isRequired={isRequired}
+          messages={subComponentMessages}
         />
       </FormFieldGroup>
     )

packages/ui-form-field/src/FormFieldGroup/index.tsx

@@ -133,7 +133,7 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
   }
 
   render() {
-    const { styles, makeStyles, ...props } = this.props
+    const { styles, makeStyles, isGroup, ...props } = this.props
 
     return (
       <FormFieldLayout
@@ -145,7 +145,7 @@ class FormFieldGroup extends Component<FormFieldGroupProps> {
         aria-disabled={props.disabled ? 'true' : undefined}
         aria-invalid={this.invalid ? 'true' : undefined}
         elementRef={this.handleRef}
-        isGroup
+        isGroup={isGroup}
       >
         {this.renderFields()}
       </FormFieldLayout>

packages/ui-form-field/src/FormFieldMessage/index.tsx

@@ -81,7 +81,7 @@ class FormFieldMessage extends Component<FormFieldMessageProps> {
 
     return this.props.variant !== 'screenreader-only' ? (
       <span css={{ display: 'flex' }}>
-        {this.props.variant === 'newError' && (
+        {this.props.variant === 'newError' && this.props.children && (
           <span css={styles?.errorIcon}>
             <IconWarningSolid color="error" />
           </span>