Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Dec 11, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
738a054
[DOCS] Adding guidance to EuiTabs for improved UX
1Copenut Dec 6, 2023
15cb350
Adding EuiTabs guidance cross-link to EuiBreadcrumbs.
1Copenut Dec 7, 2023
28314ad
Updated docs based on team feedback.
1Copenut Dec 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src-docs/src/views/breadcrumbs/breadcrumbs_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
13 changes: 5 additions & 8 deletions src-docs/src/views/tabs/tabs_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import {
EuiTab,
EuiTabbedContent,
EuiText,
EuiLink,
} from '../../../../src/components';

import TabsGuidance from './tabs_guidance';
import { tabsConfig } from './playground';

import Tabs from './tabs';
Expand All @@ -31,16 +31,13 @@ const controlledSource = require('!!raw-loader!./controlled');

export const TabsExample = {
title: 'Tabs',
guidelines: <TabsGuidance />,
intro: (
<EuiText>
<p>
Use tabs to organize <strong>in-page</strong> navigation, segmenting
mutually-exclusive content under a single organizational principle. For
more guideline usage see{' '}
<EuiLink href="https://www.nngroup.com/articles/tabs-used-right/">
NNG&apos;s article &quot;Tabs, Used Right&quot;
</EuiLink>
.
Use tabs to organize related but unique content for a single idea or
subject. Tabs show and hide content using <strong>in-page</strong>{' '}
navigation UI.
</p>
</EuiText>
),
Expand Down
53 changes: 53 additions & 0 deletions src-docs/src/views/tabs/tabs_guidance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React from 'react';

import {
EuiCode,
EuiText,
EuiLink,
EuiSpacer,
} from '../../../../src/components';

export default () => (
<>
<EuiText grow={false}>
<h2>Do</h2>
<p>
Follow best practices. Use tabs to organize in-page content. Each tab
should contain a segment of information relevant to the current subject.
For more UX tips see{' '}
<EuiLink href="https://www.nngroup.com/articles/tabs-used-right/">
NNG&apos;s article &quot;Tabs, Used Right&quot;
</EuiLink>
.
</p>
<h2>Do</h2>
<p>
For tabs showing primary page content, use the <EuiCode>href</EuiCode>{' '}
prop to change the current URL hash. Ensure the tab selection is
persisted in the user's navigation history and works with the browser's
back button.
</p>
<EuiSpacer size="xs" />
<h2>Do</h2>
<p>
Ensure when a page is loaded with a URL hash representing a selected tab
(as applied by the <EuiCode>href</EuiCode> prop), that the corresponding
tab is shown using the <EuiCode>selectedTab</EuiCode> prop.
</p>
<EuiSpacer size="xs" />
<h2>Don't</h2>
<p>
Apply the <EuiCode>href</EuiCode> prop to change the current page URL
hash on more than one set of tabs per page, or non-primary content.
</p>
<EuiSpacer size="xs" />
<h2>Don't</h2>
<p>
Keep users on the same page visually, but change the higher-level
navigation logically. Tabs should keep users at the same place within an
application. Breadcrumbs and main navigation should not change. The URL
hash is the only thing that should change.
</p>
</EuiText>
</>
);
Loading