Skip to content

Commit 08284c5

Browse files
dej611dej611
authored
Merge branch 'main' into feature/enhance-datagrid-comparator
2 parents f420243 + d70d459 commit 08284c5

5 files changed

Lines changed: 88 additions & 31 deletions

File tree

‎src-docs/src/views/breadcrumbs/breadcrumbs_example.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,13 @@ export const BreadcrumbsExample = {
5757
</Link>{' '}
5858
should be used for application-wide navigation.
5959
</p>
60+
<p>
61+
See{' '}
62+
<Link to="/navigation/tabs/guidelines">
63+
<strong>EuiTabs guidelines</strong>
64+
</Link>{' '}
65+
if your application requires breadcrumbs and tabs on the same view.
66+
</p>
6067
</EuiText>
6168
),
6269
sections: [

‎src-docs/src/views/flex/flex_example.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -362,28 +362,6 @@ export const FlexExample = {
362362
</FlexItemHighlightWrapper>
363363
),
364364
},
365-
{
366-
title: 'Allowing flex items to wrap',
367-
source: [
368-
{
369-
type: GuideSectionTypes.JS,
370-
code: flexGroupWrapSource,
371-
},
372-
],
373-
text: (
374-
<p>
375-
You can set <EuiCode>wrap</EuiCode> on <strong>EuiFlexGroup</strong>{' '}
376-
if it contains <strong>EuiFlexItems</strong> with minimum widths,
377-
which you want to wrap as the container becomes narrower.
378-
</p>
379-
),
380-
snippet: flexGroupWrap,
381-
demo: (
382-
<FlexItemHighlightWrapper>
383-
<FlexGroupWrap />
384-
</FlexItemHighlightWrapper>
385-
),
386-
},
387365
{
388366
source: [
389367
{
@@ -455,6 +433,28 @@ export const FlexExample = {
455433
</FlexItemHighlightWrapper>
456434
),
457435
},
436+
{
437+
title: 'Allowing flex items to wrap',
438+
source: [
439+
{
440+
type: GuideSectionTypes.JS,
441+
code: flexGroupWrapSource,
442+
},
443+
],
444+
text: (
445+
<p>
446+
You can set <EuiCode>wrap</EuiCode> on <strong>EuiFlexGroup</strong>{' '}
447+
if it contains <strong>EuiFlexItems</strong> with minimum widths,
448+
which you want to wrap as the container becomes narrower.
449+
</p>
450+
),
451+
snippet: flexGroupWrap,
452+
demo: (
453+
<FlexItemHighlightWrapper>
454+
<FlexGroupWrap />
455+
</FlexItemHighlightWrapper>
456+
),
457+
},
458458
{
459459
title: 'Responsive flex groups',
460460
source: [

‎src-docs/src/views/list_group/list_group_example.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export const ListGroupExample = {
107107
},
108108
{
109109
label: 'Second link',
110-
href: '#,
110+
href: '#',
111111
isActive: true,
112112
iconType: 'clock',
113113
}]

‎src-docs/src/views/tabs/tabs_example.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import {
99
EuiTab,
1010
EuiTabbedContent,
1111
EuiText,
12-
EuiLink,
1312
} from '../../../../src/components';
1413

14+
import TabsGuidance from './tabs_guidance';
1515
import { tabsConfig } from './playground';
1616

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

3232
export const TabsExample = {
3333
title: 'Tabs',
34+
guidelines: <TabsGuidance />,
3435
intro: (
3536
<EuiText>
3637
<p>
37-
Use tabs to organize <strong>in-page</strong> navigation, segmenting
38-
mutually-exclusive content under a single organizational principle. For
39-
more guideline usage see{' '}
40-
<EuiLink href="https://www.nngroup.com/articles/tabs-used-right/">
41-
NNG&apos;s article &quot;Tabs, Used Right&quot;
42-
</EuiLink>
43-
.
38+
Use tabs to organize related but unique content for a single idea or
39+
subject. Tabs show and hide content using <strong>in-page</strong>{' '}
40+
navigation UI.
4441
</p>
4542
</EuiText>
4643
),

‎src-docs/src/views/tabs/tabs_guidance.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
3+
import {
4+
EuiCode,
5+
EuiText,
6+
EuiLink,
7+
EuiSpacer,
8+
} from '../../../../src/components';
9+
10+
export default () => (
11+
<>
12+
<EuiText grow={false}>
13+
<h2>Do</h2>
14+
<p>
15+
Follow best practices. Use tabs to organize in-page content. Each tab
16+
should contain a segment of information relevant to the current subject.
17+
For more UX tips see{' '}
18+
<EuiLink href="https://www.nngroup.com/articles/tabs-used-right/">
19+
NNG&apos;s article &quot;Tabs, Used Right&quot;
20+
</EuiLink>
21+
.
22+
</p>
23+
<h2>Do</h2>
24+
<p>
25+
For tabs showing primary page content, use the <EuiCode>href</EuiCode>{' '}
26+
prop to change the current URL hash. Ensure the tab selection is
27+
persisted in the user's navigation history and works with the browser's
28+
back button.
29+
</p>
30+
<EuiSpacer size="xs" />
31+
<h2>Do</h2>
32+
<p>
33+
Ensure when a page is loaded with a URL hash representing a selected tab
34+
(as applied by the <EuiCode>href</EuiCode> prop), that the corresponding
35+
tab is shown using the <EuiCode>selectedTab</EuiCode> prop.
36+
</p>
37+
<EuiSpacer size="xs" />
38+
<h2>Don't</h2>
39+
<p>
40+
Apply the <EuiCode>href</EuiCode> prop to change the current page URL
41+
hash on more than one set of tabs per page, or non-primary content.
42+
</p>
43+
<EuiSpacer size="xs" />
44+
<h2>Don't</h2>
45+
<p>
46+
Keep users on the same page visually, but change the higher-level
47+
navigation logically. Tabs should keep users at the same place within an
48+
application. Breadcrumbs and main navigation should not change. The URL
49+
hash is the only thing that should change.
50+
</p>
51+
</EuiText>
52+
</>
53+
);

0 commit comments

Comments
 (0)