Add Condensed Display Prop for EuiTabs & EuiTabbedContent

[MichaelMarcialis]

Summary

This PR adds a new display prop to the EuiTabs and EuiTabbedContent components for the ability to use an alternative condensed style.

The hope is to use the new prop to display a slightly more compact, bolder and borderless tabbed navigation for use as top-level navigation in the SIEM app. This alternative style gives the navigation more prominence than it currently has and also differentiates itself from other usages of tabs further down the page.

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

[cchaos]

Congrats on your first PR! 🍾

@snide mentioned that you had a particular use case for this style of tabs. Could you elaborate on that?

[cchaos]

Good job! The new prop was properly added, docs look good, SASS looks good, tests were added. Still need to:

• Add the new prop to the TS definitions file: https://github.com/elastic/eui/blob/ce11e65e4483069e05f5b1e306d765e779b304e9/src/components/tabs/index.d.ts
• Add a snippet to the docs example that showcases the quickest/shortest code a consumer would need to get this into their instance. We just started adding these and you can see an example on the Loading page:

  eui/src-docs/src/views/loading/loading_example.js

  Line 51 in 7753618

  snippet: `<EuiLoadingKibana size="m" />`

---

Styling

Do we think the underline is enough to indicate focus state?

In the default tabs we add a slight background color, same with empty buttons and links:

[chandlerprall]

@cchaos would it be better to call the prop compressed to match the form element pattern?

[cchaos]

@chandlerprall compressed isn't really the same thing here. The idea of condensed just means no full bottom border and less padding on the left and right, but it's still the original height and font size. Forms reduce their height but keep their left/right padding. So they're really not the same prop.

[snide]

Yeah, I also gave him the recommendation to use a display prop instead of the boolean. In retrospect we've shot ourselves in the foot for stylistic props as booleans that really should just be "alternate displays". Gives us flexibility for the next variation without conflict.

[cchaos]

LGTM, just had a request for the snippets and then I'd like either @thompsongl or @chandlerprall to give it a once-over.

[chandlerprall]

Code and docs changes LGTM

[cchaos]

Looks like you're good to merge!