fix(ui-date-time-input,ui-form-field): make DateTimeInput compatible …

…with the new error format Backport of INSTUI-4405 from the v10 branch Github PR #1826 TEST PLAN: - check the datetimeinput examples in the error forms guide - setting the isRequired prop should display two separate asterisks for each field - when required and displaying an error, the asterisks should turn red - the errors should be displayed under the input field like it was a single field and not a group
instructure · Dec 19, 2024 · 064a1a9 · 064a1a9
1 parent 5cc4692
commit 064a1a9
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 6 deletions.
diff --git a/docs/guides/form-errors.md b/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>
   )

diff --git a/packages/ui-date-time-input/src/DateTimeInput/__new-tests__/DateTimeInput.test.tsx b/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)

diff --git a/packages/ui-date-time-input/src/DateTimeInput/index.tsx b/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') {
@@ -555,6 +555,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}
@@ -563,6 +574,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 || [])
@@ -589,6 +601,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           onRequestRenderNextMonth={this.handleRenderNextMonth}
           onRequestRenderPrevMonth={this.handleRenderPrevMonth}
           isRequired={isRequired}
+          messages={subComponentMessages}
           interaction={interaction}
           renderNavigationLabel={
             <span>
@@ -612,6 +625,8 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           inputRef={timeInputRef}
           interaction={interaction}
           allowNonStepInput={allowNonStepInput}
+          isRequired={isRequired}
+          messages={subComponentMessages}
         />
       </FormFieldGroup>
     )

diff --git a/packages/ui-form-field/src/FormFieldGroup/index.tsx b/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>

diff --git a/packages/ui-form-field/src/FormFieldMessage/index.tsx b/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>