[EuiDatePicker] Add right padding to account for clear icon

[cee-chen]

Summary

closes #5082

Before

Currently, there's no padding/spacing set to account for the "clear" icon on EuiDatePicker (which appears when an onClear function is passed):

After

The solution I went with was mimicking the padding set for the left icon, and adding a new withClear class that sets a mirrored right padding if onClear is present and if a date has been selected):

Checklist

QA testing note: You have to manipulate the current "Clearable" DatePicker example to test this. Inspect the input, go up to the parent .euiFormControlLayout, and set an inline style of width: 200px;.

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox

- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
- [ ] Checked Code Sandbox works for the any docs 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

[cee-chen]

@cchaos I'm not sure how many scenarios we anticipate having small date pickers in, but I'm actually wondering if there's now too much padding on the right and if it's making the text harder to read 😅

I'm wondering if instead of using the @euiFormControlWithIcon mixin, I should just use a custom $euiSize based multiplier that comes out to a slightly smaller width?

If you don't see any issues with it though, then no worries!

[kibanamachine]

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

[cchaos]

I'm wondering if instead of using the @euiFormControlWithIcon mixin, I should just use a custom $euiSize based multiplier that comes out to a slightly smaller width?

Mainly it's about consistency and maintenance. I'd rather keep using the mixin and decide if, overall, we should just reduce that padding. But let's not break it from the norm in this PR.

[cchaos]

Implementation is great and fixed the problem!

My following suggestions are just some good patterns we follow.

[kibanamachine]

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

[cchaos]

LGTM! Thanks for the quick fix!

[cee-chen]

Thank you for the super easy code suggestions! 🎉

[kibanamachine]

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