Adding EuiTabs guidance cross-link to EuiBreadcrumbs.

elastic · Dec 7, 2023 · 15cb350 · 15cb350
1 parent 738a054
commit 15cb350
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js
@@ -57,6 +57,13 @@ export const BreadcrumbsExample = {
         </Link>{' '}
         should be used for application-wide navigation.
       </p>
+      <p>
+        See{' '}
+        <Link to="/navigation/tabs/guidelines">
+          <strong>EuiTabs guidelines</strong>
+        </Link>{' '}
+        if your application requires breadcrumbs and tabs on the same view.
+      </p>
     </EuiText>
   ),
   sections: [

diff --git a/src-docs/src/views/tabs/tabs_guidance.js b/src-docs/src/views/tabs/tabs_guidance.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import {
   EuiCode,
@@ -42,8 +43,13 @@ export default () => (
       <h3>Tabs must not update higher-level navigation</h3>
       <p>
         Do not update navigation such as{' '}
-        <EuiLink href="/#/navigation/breadcrumbs">breadcrumbs</EuiLink> or{' '}
-        <EuiLink href="/#/navigation/collapsible-nav">navigation menus</EuiLink>{' '}
+        <Link to="/navigation/breadcrumbs">
+          <strong>breadcrumbs</strong>
+        </Link>{' '}
+        or{' '}
+        <Link to="/navigation/collapsible-nav">
+          <strong>navigation menus</strong>
+        </Link>{' '}
         when users click on tabs. Tabs show localized information and it is not
         always clear what changed if tabs are below the fold or navigation does
         not match the route.