SuperDatePicker tweaks to make it selection more obvious

[cchaos]

This PR addresses no. 1 on the todo list from GAH:

Added "Start date" and "End date" titles to the popover

... as a tab because using the EuiPopoverTitle with tabs was not pretty

Using bottom border to indicate which time period is selected

Similar to those used on the normal controls but I don't change the background to white so that hopefully indicated it's not editable in the button.

And for "needs update" state:

And for invalid state:

Added the title to tab aria-labels

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• [ ] Any props added have proper autodocs
• [ ] Documentation examples were added
• A changelog entry exists and is marked appropriately
• [ ] This was checked for breaking changes and labeled appropriately
• [ ] Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• [ ] This required updates to Framer X components

[andreadelrio]

LGTM. Only one minor thing, I'm not sure we need the colon next to START DATE and END DATE. Things already look a bit tight for the START DATE case.

[ryankeairns]

I personally prefer the title separate from (on top of) the tabs 😬

As Andrea noted, it's pretty tight with the title in there and it sets a precedent of having the tab area share other content, which I don't think we've done elsewhere.

[thompsongl]

I'll wait for design agreement here before doing my review

[cchaos]

@ryankeairns The problems I have with using the default popover title are:

1. It adds more visual height before you actually get to the contents of the popover
2. The double borders from the title and tabs
3. There's a lot of empty white space to the right of the title

Do you have any other suggestions besides either using the popover title or putting the title inline with the tabs?

[ryankeairns]

@cchaos Maybe place the 'Start date' text in the tab panel and style it similar to an input label? To keep it looking a little more tidy (i.e. not floating in space), a little background color might pull it together while also making it a little more subtle:

(these colors are not EUI-y, I just approximated quickly in the Inspector)

[cchaos]

I'm wondering if the title needs to be as prominent now that there are also thick bottom borders to indicate which one is selected. Therefore, what if we just appended the "Start date" and "End date" to the inputs that live inside the tabbed content as well as in the now button like so:

[ryankeairns]

The prepend solution looks good too!

[cchaos]

Alrighty, I updated the PR to use the prepend for the inputs:

You'll notice, however, that the readonly state of under the Relative tab doesn't look readonly. We hadn't yet accounted for this readonly input group. I have another PR that I'm about to put up that will fix this.

[andreadelrio]

The prepend option looks much cleaner!

[ryankeairns]

👍 yasss

[cchaos]

jenkins test this

[cchaos]

@thompsongl Would love to get this in before EOD Friday, if you've got the time.

[thompsongl]

Code changes look good. Updated design looks great.

Thinking we need to add i18n to all these labels, right?

[cchaos]

Yeah we do, but that's for another PR since this whole date picker is not internationalized