From e831647c8e130d3b677780590dd1cc0a0b8c2519 Mon Sep 17 00:00:00 2001 From: Danny Allen Date: Mon, 11 Dec 2023 17:28:57 +0000 Subject: [PATCH 1/3] Fix #7412: Add missing closing quotes on line 110 of `src-docs\src\views\list_group\list_group_example.js`. (#7413) --- src-docs/src/views/list_group/list_group_example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js index 76a23f0b8d0..f701c86565c 100644 --- a/src-docs/src/views/list_group/list_group_example.js +++ b/src-docs/src/views/list_group/list_group_example.js @@ -107,7 +107,7 @@ export const ListGroupExample = { }, { label: 'Second link', - href: '#, + href: '#', isActive: true, iconType: 'clock', }] From 766f3bf022ace3895b53be5030bb57036aad02db Mon Sep 17 00:00:00 2001 From: Trevor Pierce <1Copenut@users.noreply.github.com> Date: Mon, 11 Dec 2023 14:45:29 -0600 Subject: [PATCH 2/3] [DOCS] Add guidance for `EuiTabs` around higher-order navigation (#7410) --- .../views/breadcrumbs/breadcrumbs_example.js | 7 +++ src-docs/src/views/tabs/tabs_example.js | 13 ++--- src-docs/src/views/tabs/tabs_guidance.js | 53 +++++++++++++++++++ 3 files changed, 65 insertions(+), 8 deletions(-) create mode 100644 src-docs/src/views/tabs/tabs_guidance.js diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js index 1f0c72bfee3..9d3ec472d66 100644 --- 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 = { {' '} should be used for application-wide navigation.

+

+ See{' '} + + EuiTabs guidelines + {' '} + if your application requires breadcrumbs and tabs on the same view. +

), sections: [ diff --git a/src-docs/src/views/tabs/tabs_example.js b/src-docs/src/views/tabs/tabs_example.js index 91daf00c723..a5d8ed3aac5 100644 --- a/src-docs/src/views/tabs/tabs_example.js +++ b/src-docs/src/views/tabs/tabs_example.js @@ -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'; @@ -31,16 +31,13 @@ const controlledSource = require('!!raw-loader!./controlled'); export const TabsExample = { title: 'Tabs', + guidelines: , intro: (

- Use tabs to organize in-page navigation, segmenting - mutually-exclusive content under a single organizational principle. For - more guideline usage see{' '} - - NNG's article "Tabs, Used Right" - - . + Use tabs to organize related but unique content for a single idea or + subject. Tabs show and hide content using in-page{' '} + navigation UI.

), diff --git a/src-docs/src/views/tabs/tabs_guidance.js b/src-docs/src/views/tabs/tabs_guidance.js new file mode 100644 index 00000000000..63ae1397f89 --- /dev/null +++ b/src-docs/src/views/tabs/tabs_guidance.js @@ -0,0 +1,53 @@ +import React from 'react'; + +import { + EuiCode, + EuiText, + EuiLink, + EuiSpacer, +} from '../../../../src/components'; + +export default () => ( + <> + +

Do

+

+ 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{' '} + + NNG's article "Tabs, Used Right" + + . +

+

Do

+

+ For tabs showing primary page content, use the href{' '} + 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. +

+ +

Do

+

+ Ensure 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

+

+ 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. +

+ + +); From d70d4596f4d1c887f62a6d83025cf3e990521667 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Mon, 11 Dec 2023 23:44:06 -0800 Subject: [PATCH 3/3] [docs][EuiFlexGroup] Fix example order/organization (#7414) --- src-docs/src/views/flex/flex_example.js | 44 ++++++++++++------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js index 30dbde0c4ec..9fd7a0e7c83 100644 --- a/src-docs/src/views/flex/flex_example.js +++ b/src-docs/src/views/flex/flex_example.js @@ -362,28 +362,6 @@ export const FlexExample = { ), }, - { - title: 'Allowing flex items to wrap', - source: [ - { - type: GuideSectionTypes.JS, - code: flexGroupWrapSource, - }, - ], - text: ( -

- You can set wrap on EuiFlexGroup{' '} - if it contains EuiFlexItems with minimum widths, - which you want to wrap as the container becomes narrower. -

- ), - snippet: flexGroupWrap, - demo: ( - - - - ), - }, { source: [ { @@ -455,6 +433,28 @@ export const FlexExample = { ), }, + { + title: 'Allowing flex items to wrap', + source: [ + { + type: GuideSectionTypes.JS, + code: flexGroupWrapSource, + }, + ], + text: ( +

+ You can set wrap on EuiFlexGroup{' '} + if it contains EuiFlexItems with minimum widths, + which you want to wrap as the container becomes narrower. +

+ ), + snippet: flexGroupWrap, + demo: ( + + + + ), + }, { title: 'Responsive flex groups', source: [