feat(FluidDatePicker): implement FluidDatePicker

[tw15egan]

Refs #12125
Closes #12403

Adds in unstable__FluidDatePicker and unstable__FluidDatePickerInput

Changelog

New

• unstable__FluidDatePicker component
• Styles for FluidDatePicker (_fluid-date-picker.scss)
• Stories for FluidDatePicker (FluidDatePicker.stories.js)
• Tests for FluidDatePicker

Changed

• Fixed some styles I noticed when adding in FluidDatePicker to the FluidForm story

Testing / Reviewing

Go to FluidDatePicker and check out the stories. For now, I've got all the different states in (they will be removed before merging). Ensure all playground controls are correct and stories render as expected.

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	5675d84
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/636a8654d670990008972994
😎 Deploy Preview	https://deploy-preview-12247--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	5675d84
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/636a8654c8beef0008660180
😎 Deploy Preview	https://deploy-preview-12247--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[tw15egan]

@aagonzales I have a lot of the base styles up, but curious how we want to handle invalid and warn styles for the range type... Currently, each DatePickerInput accepts an invalid and invalidText prop, and the error message is styled under each input respectively.

I noticed in the spec we have an error state on the entire DatePicker itself.

Would we want to allow both? i.e you could put invalid on the entire DatePicker, or only allow invalid on the DatePickerInput, which is how it is currently built. The entire FluidDatePicker would be styled as invalid, but the invalid message would just appear under the invalid input.

If we add it to the entire FluidDatePicker, should this also be added to the existing DatePicker?

[aagonzales]

@tw15egan yeah we should probably allow just triggering invalid on one side ... I'm not yet sure how that will look visually. We might have to come back to that.

Also kind of on the same thread, I forget to spec out timePicker in fluid and will have a sam joint input problem.

[tw15egan]

@aagonzales, so would the invalid outline span the entire input, but just keep invalid text to one input (as-is) for now? Since it's experimental we can come back and refine this interaction as well

[aagonzales]

@tw15egan I'm going to talk about this in design crit tomorrow and hopefully get a final answer. The bottom+left is how in forms, we originally said we would treat inline fluid inputs with one invalid state.

[aagonzales]

@tw15egan This is what we decided, is it doable?

[tw15egan]

Yeah, we should be able to do that; we'll just need to add a prop of invalid to the DatePicker in addition to the DatePickerInput. Would this also be a valid use case outside of Fluid components? i.e., the entire DatePicker is invalid? If so, we may want to add that to the normal DatePicker as well

[tw15egan]

I believe AVT tests are failing due to the duplicate ids on the stories showcasing all the different warning/error variants. Before merging, these will all be removed and set to a single story

[aagonzales]

The componet styles all look correct but there are some bugs in the Playground.

• I'm getting some weird bugs when I switch between Range and Single.
  • Switch from single back to range and I can't get the end date calendar menu to open
  • Switch from range (with a range selected) to single, the range is still showing when I open the menu.
• When invalid is turned on the width of the inputs grow. The error message should be wrapping and not effecting the width. (Same for warning)
  

[tw15egan]

@aagonzales That switcher is a bit temperamental, so I switched it to show two components. Also, I set a width on the container, so the component expands downwards now.

[tay1orjones]

Looks great to me! 🎉 Just some minor suggestions for the playground story

[aagonzales]

Looks good to go! 👍 ✅