Start date popover for date picker range starts at the calendar icon

[winnllam]

Summary

Fixes #3374
Icon has been changed to be a part of the start date, so the picker aligns with the front,

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[elizabetdev]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3383/

[elizabetdev]

@winnllam, thanks for creating this PR.

The way you fixed this issue introduces a new issue. If we pass, for instance, iconType="cheer" to the EuiDatePickerRange this is what happen. Two icons are displayed:

As you can see, just changing the startControl showIcon: true enables the calendar icon.

But if you <EuiDatePickerRange iconType={false} /> it doesn't remove the icon:

And if you <EuiDatePickerRange iconType={true} /> two icons are displayed:

[cchaos]

Hey @winnllam, jumping in here...

This is a great, easy solution. The nice thing is that flex is still sizing the inputs correctly too. It actually looks much better, spacing-wise, than the previous solution.

Before

After

---

I pushed a commit to your fork directly. The logic was just a little off and I wanted to align the prop name with our typical icon prop naming convention iconType instead of optionalIcon. Now consumers can also customize this icon via the iconType prop directly on the EuiDatePickerRange or EuiDatePicker itself.

The icon can also be removed entirely.

The extra logic you added in EuiDatePickerRange for deciding which icon to display was duplicative of the EuiDatePicker handling it itself, so I deleted that bit and just passed down the show/don't show prop.

Overall, great solution! Thanks so much.

One more screenshot showing the actual popover:

[elizabetdev]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3383/

[elizabetdev]

LGTM! 🎉

I looked at the code and tested locally.

Thanks @winnllam for helping us out with this issue and thanks @cchaos for jumping in!