[DOCS] Add guidance for EuiTabs around higher-order navigation

[1Copenut]

Summary

We made some decisions about the EuiBreadcrumbs component in a design discussion in before UX Summit. One of the recommended actions was to document best practices for using tabs, based on my comment about tabs updating breadcrumb links.

This PR adds a Guidelines tab to EuiTabs and cross-links the new guidance from our EuiBreadcrumbs page. Screenshots attached below QA criteria. PR closes #7367.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
• Docs site QA
  • Added documentation

[JasonStoltz]

Screenshots attached

👀 ❓

[1Copenut]

Screenshots attached

👀 ❓

Screenshots added this time. Got distracted and forgot to attach them.

[JasonStoltz]

I'm slightly confused about the guidance here. Is this correct? Does it make the guidance clearer?

Do
For tabs showing primary page content, use the href prop to change the current page URL hash to ensure tab selections are persisted in a user's navigation history and work with the browser's back button.

Do
Ensure that when a page is loaded with a URL hash representing a selected tab (as applied by the href prop), that the corresponding tab is shown using the selectedTab prop.

Don't
Apply the href prop to change the current page URL hash on more than one set of tabs per page, or non-primary content.

Don't
Apply the href prop in a way that would visually keep a user on the current page, but logically change the navigation, breadcrumbs, or URL path. Tabs should keep users at the same location within an application's navigation. The URL hash is the only thing that should change.

[1Copenut]

Thanks @JasonStoltz. I took another pass using your feedback and adding a couple of insights.

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7410/
• Storybook: https://eui.elastic.co/pr_7410/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 28314ad

History

• 💚 Build #1155 succeeded 15cb350

cc @1Copenut