Date input error message behavior for Events filter #18197

[cmmerrill]

Bug Report

• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

What I expected to happen

Reproducing

• Formation version:
• Device: (e.g. iPhone 8, Macbook) Macbook
• Browser: (e.g. Firefox, IE 11) Chrome

Steps to reproduce:

1. Go to https://www.va.gov/outreach-and-events/events/
2. Click on Filter by: Choose specific date
3. Submit filter on empty form
4. Filter shows red error bars, but does not show an error message (and should)
5. Repeat with Custom Date Range

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• [ ] This bug is blocking work currently in progress
• [ ] This bug is affecting work currently in progress but we have a workaround
• [ ] This bug is blocking work planned within the next few sprints
• [x] This bug is not blocking any work
• [ ] Other

Details

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rmessina1010 @rsmithadhoc

[jamigibbs]

@cmmerrill I think this might be an implementation issue. Do you have a link to where this is located in the vets-website codebase?

The va-date component requires the error prop to be set in order to display an error message. When I inspect the page, I don't see the error prop active:

Here is an example of how the error prop should be set:

reference: https://design.va.gov/storybook/?path=/docs/components-va-date--docs#error

[aklausmeier]

@jamigibbs Carissa is no longer on our team. I'm going to loop @laflannery in to assist with your questions.

[aklausmeier]

I actually was searching the DST backlog to see if a bug existed for a layout issue I was seeing with this component. @jamigibbs let me know if this is a separate issue.

[laflannery]

@jamigibbs I found it in the file here (lines 17-25) and it doesn't have the error prop you mentioned so this makes sense.

However I do have one other question - I do see an error message when I focus out of these fields - click out instead of using the filter button - is that a separate thing that doesn't come from the error prop?

[jamigibbs]

I actually was searching the DST backlog to see if a bug existed for a layout issue I was seeing with this component. @jamigibbs let me know if this is a separate issue.

@aklausmeier hmmm... that looks like a separate issue. 🤔 I didn't see anything in the backlog for that either. It would be great if you could create an issue for it with your screenshot. Thank you!

[aklausmeier]

@jamigibbs going to have our engineers inspect as a first pass, will spin up a DST bug ticket if needed, TY!

[randimays]

@jamigibbs @aklausmeier The alignment issue in error state happens in Storybook also. I created a bug ticket for it here: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/3113