From a74ce1cbdf24278e73ecd1f2f6f9ef6f1efe20ff Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Fri, 11 Feb 2022 13:34:45 -0500 Subject: [PATCH 1/4] =?UTF-8?q?[EuiPageTemplate=20Feature]=20[Docs]=20Crea?= =?UTF-8?q?te=20new=20section=20for=20=E2=80=9CTemplates=E2=80=9D=20(#5625?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [Docs] Create new section for “Templates” - Moves Page Template, SuperDatePicker, and Searchable Sitewide Template - Stubs in placeholder page for in lower level page components - Fixes routes --- scripts/a11y-testing.js | 4 +- src-docs/src/routes.js | 15 +- .../auto_refresh/auto_refresh_example.js | 2 +- .../views/bottom_bar/bottom_bar_example.js | 2 +- .../views/datagrid/row_auto_height_data.json | 4 +- .../empty_prompt/empty_prompt_example.js | 11 +- src-docs/src/views/page/page_example.js | 728 +---------------- .../src/views/page/page_template_example.js | 759 ++++++++++++++++++ .../views/page_header/page_header_example.js | 2 +- src-docs/src/views/panel/panel_example.js | 4 +- .../views/selectable/selectable_example.js | 152 ---- .../selectable_sitewide_template_example.js | 182 +++++ src-docs/src/views/tabs/tabs_example.js | 2 +- 13 files changed, 981 insertions(+), 886 deletions(-) create mode 100644 src-docs/src/views/page/page_template_example.js create mode 100644 src-docs/src/views/selectable/selectable_sitewide_template_example.js diff --git a/scripts/a11y-testing.js b/scripts/a11y-testing.js index f21ac10ab80..4a70c31b894 100644 --- a/scripts/a11y-testing.js +++ b/scripts/a11y-testing.js @@ -4,13 +4,13 @@ const { AxePuppeteer } = require('@axe-core/puppeteer'); const docsPages = async (root, page) => { const pagesToSkip = [ - `${root}#/layout/page`, // Has duplicate `
` element + `${root}#/templates/page-template`, // Has duplicate `
` element `${root}#/layout/page-header`, // Has duplicate `
` element `${root}#/display/aspect-ratio`, `${root}#/forms/combo-box`, `${root}#/forms/color-selection`, `${root}#/forms/date-picker`, - `${root}#/forms/super-date-picker`, + `${root}#/templates/super-date-picker`, `${root}#/tabular-content/data-grid-styling-and-control`, `${root}#/tabular-content/data-grid-virtualization`, `${root}#/tabular-content/data-grid-row-heights-options`, diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 23c7d8366e5..667061c2124 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -26,6 +26,12 @@ import { writingExamplesSections, } from './views/guidelines/writing_examples'; +// Templates + +import { PageTemplateExample } from './views/page/page_template_example'; + +import { SitewideSearchExample } from './views/selectable/selectable_sitewide_template_example'; + // Services import { ColorPaletteExample } from './views/color_palette/color_palette_example'; @@ -442,6 +448,14 @@ const navigation = [ }, ], }, + { + name: 'Templates', + items: [ + PageTemplateExample, + SitewideSearchExample, + SuperDatePickerExample, + ].map((example) => createExample(example)), + }, { name: 'Layout', items: [ @@ -539,7 +553,6 @@ const navigation = [ SearchBarExample, SelectableExample, SuggestExample, - SuperDatePickerExample, SuperSelectExample, ].map((example) => createExample(example)), }, diff --git a/src-docs/src/views/auto_refresh/auto_refresh_example.js b/src-docs/src/views/auto_refresh/auto_refresh_example.js index 53eead3917c..80574692937 100644 --- a/src-docs/src/views/auto_refresh/auto_refresh_example.js +++ b/src-docs/src/views/auto_refresh/auto_refresh_example.js @@ -37,7 +37,7 @@ export const AutoRefreshExample = { text: (

This is a component that is used by the{' '} - + EuiSuperDatePicker {' '} component to create an automatic refresh configuration. It merely diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js index 8dad801f5c6..73756c91328 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar_example.js +++ b/src-docs/src/views/bottom_bar/bottom_bar_example.js @@ -23,7 +23,7 @@ export const BottomBarExample = {

EuiPageTemplate offers a quick way to{' '} - + apply a bottom bar to your page layouts . diff --git a/src-docs/src/views/datagrid/row_auto_height_data.json b/src-docs/src/views/datagrid/row_auto_height_data.json index c905eb01e22..54d1bef9229 100644 --- a/src-docs/src/views/datagrid/row_auto_height_data.json +++ b/src-docs/src/views/datagrid/row_auto_height_data.json @@ -2391,7 +2391,7 @@ "comments": 4, "created_at": "2021-05-04T12:44:31Z", "author_association": "NONE", - "body": "## Summary\r\n\r\nUsing the super time picker in Kibana can lead to UI crashing for edge case values (see https://github.com/elastic/kibana/issues/91138).\r\n\r\n## How to reproduce\r\n\r\n1. Navigate here https://eui.elastic.co/#/forms/super-date-picker#configurations\r\n2. Select “days ago” and entering a value of 9 9s\r\n3. See error\r\n\r\nIs there a recommended way to handle this outside of the elastic/eui lib such that we can not crash and guide users to the erroneous input?\r\n\r\n## Gif\r\n\r\n![supertimepickerbug](https://user-images.githubusercontent.com/8155004/117005090-21d59380-ace7-11eb-87ec-af7897b879f9.gif)\r\n" + "body": "## Summary\r\n\r\nUsing the super time picker in Kibana can lead to UI crashing for edge case values (see https://github.com/elastic/kibana/issues/91138).\r\n\r\n## How to reproduce\r\n\r\n1. Navigate here https://eui.elastic.co/#/templates/super-date-picker#configurations\r\n2. Select “days ago” and entering a value of 9 9s\r\n3. See error\r\n\r\nIs there a recommended way to handle this outside of the elastic/eui lib such that we can not crash and guide users to the erroneous input?\r\n\r\n## Gif\r\n\r\n![supertimepickerbug](https://user-images.githubusercontent.com/8155004/117005090-21d59380-ace7-11eb-87ec-af7897b879f9.gif)\r\n" }, { "html_url": "https://github.com/elastic/eui/issues/4774", @@ -6879,7 +6879,7 @@ "comments": 0, "created_at": "2020-09-10T20:23:33Z", "author_association": "NONE", - "body": "SuperDatePicker does not properly restore relative dates\r\n\r\nSteps to reproduce:\r\n1. Go to https://elastic.github.io/eui/#/forms/super-date-picker and to the first time picker on that page\r\n2. Click start date to edit the start date and enter `15` `months ago`\r\n![image](https://user-images.githubusercontent.com/8397647/92798784-ddbd0980-f378-11ea-975b-874cdea6a1e4.png)\r\n3. Observe SuperDatePicker puts human friendly desc in start date of `~ 1 year ago` which is handy.\r\n4. Click `Update`\r\n5. Observe the time picker reflects `15 months ago` just fine.\r\n![image](https://user-images.githubusercontent.com/8397647/92799079-21177800-f379-11ea-9c5c-b68a0b70272f.png)\r\n6. Click to edit the start date again\r\n7. Observe that `1` `year ago` is populate in the time picker GUI instead of `15 months ago`. Note the underlying date is still correct (verify this by looking at the absolute date at the bottom of the picker).\r\n![image](https://user-images.githubusercontent.com/8397647/92799418-6340b980-f379-11ea-99c0-7e470bf54bd5.png)\r\n8. As a user I would expect it to restore `15 months ago` and if I manually fix it myself it causes the dialog to get stuck in \"update mode\" (see https://github.com/elastic/eui/issues/4025)\r\n" + "body": "SuperDatePicker does not properly restore relative dates\r\n\r\nSteps to reproduce:\r\n1. Go to https://elastic.github.io/eui/#/templates/super-date-picker and to the first time picker on that page\r\n2. Click start date to edit the start date and enter `15` `months ago`\r\n![image](https://user-images.githubusercontent.com/8397647/92798784-ddbd0980-f378-11ea-975b-874cdea6a1e4.png)\r\n3. Observe SuperDatePicker puts human friendly desc in start date of `~ 1 year ago` which is handy.\r\n4. Click `Update`\r\n5. Observe the time picker reflects `15 months ago` just fine.\r\n![image](https://user-images.githubusercontent.com/8397647/92799079-21177800-f379-11ea-9c5c-b68a0b70272f.png)\r\n6. Click to edit the start date again\r\n7. Observe that `1` `year ago` is populate in the time picker GUI instead of `15 months ago`. Note the underlying date is still correct (verify this by looking at the absolute date at the bottom of the picker).\r\n![image](https://user-images.githubusercontent.com/8397647/92799418-6340b980-f379-11ea-99c0-7e470bf54bd5.png)\r\n8. As a user I would expect it to restore `15 months ago` and if I manually fix it myself it causes the dialog to get stuck in \"update mode\" (see https://github.com/elastic/eui/issues/4025)\r\n" }, { "html_url": "https://github.com/elastic/eui/issues/4024", diff --git a/src-docs/src/views/empty_prompt/empty_prompt_example.js b/src-docs/src/views/empty_prompt/empty_prompt_example.js index e4745fa0277..b8e449be4b2 100644 --- a/src-docs/src/views/empty_prompt/empty_prompt_example.js +++ b/src-docs/src/views/empty_prompt/empty_prompt_example.js @@ -317,10 +317,11 @@ export const EmptyPromptExample = { <>

When using a EuiEmptyPrompt in a{' '} - EuiPageTemplate, pay attention to the - template you’re passing. The template will determine which{' '} - color and hasBorder prop you - should use to ensure consistency across our Elastic products. + EuiPageTemplate, pay + attention to the template you’re passing. The template will + determine which color and{' '} + hasBorder prop you should use to ensure + consistency across our Elastic products.

@@ -348,7 +349,7 @@ export const EmptyPromptExample = { You can then tie multiple types of empty states together to create a seamless loading to empty or loading to error experience. The following example shows how to encorprate these states with{' '} - + EuiPageTemplate {' '} using {'template="centeredContent"'}. diff --git a/src-docs/src/views/page/page_example.js b/src-docs/src/views/page/page_example.js index 3271025bba2..07e2d0c20dd 100644 --- a/src-docs/src/views/page/page_example.js +++ b/src-docs/src/views/page/page_example.js @@ -1,746 +1,38 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { GuideSectionTypes } from '../../components'; -import { pageTemplateConfig } from './playground'; -import { PageDemo } from './_page_demo'; - -import { - EuiCode, - EuiPage, - EuiPageBody, - EuiPageContent, - EuiPageContentBody, - EuiPageHeader, - EuiPageSideBar, - EuiText, - EuiEmptyPrompt, - EuiPageTemplate, - EuiCallOut, - EuiSpacer, - EuiBottomBar, -} from '../../../../src/components'; - -import PageNew from './page_new'; -const pageNewSource = require('!!raw-loader!./page_new'); -import PageTemplate from './page_template'; -const PageTemplateSource = require('!!raw-loader!./page_template'); - -import PageBottomBar from './page_bottom_bar'; -const pageBottomBarSource = require('!!raw-loader!./page_bottom_bar'); -import PageBottomBarTemplate from './page_bottom_bar_template'; -const PageBottomBarTemplateSource = require('!!raw-loader!./page_bottom_bar_template'); - -import PageRestrictingWidth from './page_restricting_width'; -const PageRestrictingWidthSource = require('!!raw-loader!./page_restricting_width'); -import PageRestrictingWidthTemplate from './page_restricting_width_template'; -const PageRestrictingWidthTemplateSource = require('!!raw-loader!./page_restricting_width_template'); - -import PageCenteredBody from './page_centered_body'; -const PageCenteredBodySource = require('!!raw-loader!./page_centered_body'); -import PageCenteredBodyTemplate from './page_centered_body_template'; -const PageCenteredBodyTemplateSource = require('!!raw-loader!./page_centered_body_template'); - -import PageCenteredContent from './page_centered_content'; -const PageCenteredContentSource = require('!!raw-loader!./page_centered_content'); -import PageCenteredContentTemplate from './page_centered_content_template'; -const PageCenteredContentTemplateSource = require('!!raw-loader!./page_centered_content_template'); - -import PageSimple from './page_simple'; -const PageSimpleSource = require('!!raw-loader!./page_simple'); -import PageSimpleTemplate from './page_simple_template'; -const PageSimpleTemplateSource = require('!!raw-loader!./page_simple_template'); - -import PageFullHeight from './page_full_height'; -const PageFullHeightSource = require('!!raw-loader!./page_full_height'); -import PageFullHeightTemplate from './page_full_height_template'; -const PageFullHeightTemplateSource = require('!!raw-loader!./page_full_height_template'); - -import PageSimpleCenteredBody from './page_simple_content_body'; -const PageSimpleCenteredBodySource = require('!!raw-loader!./page_simple_content_body'); -import PageSimpleCenteredBodyTemplate from './page_simple_content_body_template'; -const PageSimpleCenteredBodyTemplateSource = require('!!raw-loader!./page_simple_content_body_template'); - -import PageSimpleEmptyContent from './page_simple_empty_content'; -const PageSimpleEmptyContentSource = require('!!raw-loader!./page_simple_empty_content'); -import PageSimpleEmptyContentTemplate from './page_simple_empty_content_template'; -const PageSimpleEmptyContentTemplateSource = require('!!raw-loader!./page_simple_empty_content_template'); - -import PageCustomContent from './page_custom_content'; -const PageCustomContentSource = require('!!raw-loader!./page_custom_content'); -import PageCustomContentTemplate from './page_custom_content_template'; -const PageCustomContentTemplateSource = require('!!raw-loader!./page_custom_content_template'); - -import PageLegacy from './page'; -const PageLegacySource = require('!!raw-loader!./page'); +import { EuiText, EuiSpacer, EuiCallOut } from '../../../../src/components'; export const PageExample = { - title: 'Page', + title: 'Page components', intro: ( <>

Page layouts are modular and fit together in a precise manner, though certain parts can also be added or removed as needed. EUI provides - both the indivdual page components and an over-arching template for + both the individual page components and an{' '} + over-arching template for easily creating some pre-defined layouts.

- You'll find the code for each in their own tab and if you go to - full screen, you can see how they would behave in a typical - application layout. + If you're looking for full page layout examples, we recommend + using the EuiPageTemplate{' '} + and use this page to modify the props of each part of the template.

), sections: [ { - title: 'A full page with everything', - source: [ - { - type: GuideSectionTypes.JS, - code: PageTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: pageNewSource, - displayName: 'Components JS', - }, - ], - text: ( -
-

- EUI provides a family of components using the{' '} - EuiPage prefix that work together to build - consistent page layouts that work responsively. -

-
    -
  • - EuiPage and EuiPageBody provide - the overall wrapper with a column flex display. -
    • -
  • - EuiPageSideBar provides a way to add side - navigation that can be made sticky to scroll - independent of the page content. See{' '} - - EuiSideNav - {' '} - for contents. -
    • -
  • - - EuiPageHeader - {' '} - provides a title, description, section for actions and possible - tabs. -
    • -
  • - EuiPageContent provides the main content - container and extends{' '} - - EuiPanel - - . -
    • -
  • - EuiPageContentBody wraps the content that comes - after the page header. -
    • -
-

- Or you can use the provided EuiPageTemplate, which - is simply a shortcut for creating the different types of page layout - patterns described in these docs. It is somewhat opinionated, but - still has the ability to customize most of the inner components with - props like pageSideBarProps and{' '} - pageContentProps. -

-
- ), - props: { - EuiPageTemplate, - EuiPage, - EuiPageBody, - EuiPageSideBar, - EuiPageHeader, - EuiPageContent, - EuiPageContentBody, - EuiBottomBar, - }, - playground: pageTemplateConfig, - demo: ( - - ), - fullScreen: { - slug: 'full-page', - demo: ( - - ), - }, - }, - { - title: 'Restricting page width', - source: [ - { - type: GuideSectionTypes.JS, - code: PageRestrictingWidthTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageRestrictingWidthSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- Most content does not scale well to the full width of the window. - You can restrict this to a typical width and center the page by - setting the restrictWidth prop to{' '} - true on EuiPageHeader and{' '} - EuiPageContent. You can also pass an integer to - this property to max out the width at a custom pixel value or a - string with a custom measurement. -

- - The EuiPageTemplate allows setting this - property at the top level and defaults to{' '} - true. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'restricting-page-width', - demo: ( - - ), - }, - }, - { - title: 'Showing a bottom bar', - source: [ - { - type: GuideSectionTypes.JS, - code: PageBottomBarTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: pageBottomBarSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- Adding an{' '} - - EuiBottomBar - {' '} - can be tricky to use and account for any side bars.{' '} - EuiPageTemplate handles this nicely by supplying a{' '} - bottomBar prop for passing the contents of your - bottom bar, and bottomBarProps that extends{' '} - EuiBottomBar. -

-

- It uses the sticky position so that it sticks to - the bottom of and remains within the bounds of{' '} - EuiPageBody. This way it will never overlap the{' '} - EuiPageSideBar, no matter the screen size. It also - means not needing to accommodate for the height of the bar in the - body element. -

- - EuiPageTemplate only supports bottom bars in - the default template. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'bottom-bar', - demo: ( - - ), - }, - }, - { - title: 'Centered body', - source: [ - { - type: GuideSectionTypes.JS, - code: PageCenteredBodyTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageCenteredBodySource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- When the content for the page is minimal or in an empty/pre-setup - state, the page content can be centered vertically and horizontally. - We recommend then using the{' '} - - EuiEmptyPrompt - {' '} - for the content. -

- - This layout can be achieved in EuiPageTemplate{' '} - by setting {'template="centeredBody"'}. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'centered-body', - demo: ( - - ), - }, - props: { EuiPageTemplate, EuiEmptyPrompt }, - }, - { - title: 'Centered content', - source: [ - { - type: GuideSectionTypes.JS, - code: PageCenteredContentTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageCenteredContentSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- Similar to the previous example, you can create a centered panel to - emphasize incompleteness even with a page header. For this setup, we - recommend using setting EuiPageContent to use the{' '} - subdued color as to not have nested shadows. -

- - This layout can be achieved in EuiPageTemplate{' '} - by setting {'template="centeredContent"'}. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'centered-content', - demo: ( - - ), - }, - }, - { - title: 'A simple page with tabs', - source: [ - { - type: GuideSectionTypes.JS, - code: PageSimpleTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageSimpleSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- When leaving off the EuiPageSideBar, we recommend a - slightly different configuration by pulling the page header out of - the EuiPageContent and removing the shadow from{' '} - EuiPageContent. -

- - This layout will automatically be achieved through{' '} - EuiPageTemplate by leaving{' '} - pageSideBar as undefined. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'tabs', - demo: ( - - ), - }, - }, - { - title: 'Full height layout', - source: [ - { - type: GuideSectionTypes.JS, - code: PageFullHeightTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageFullHeightSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- Though it is not recomended for most layouts, some require the - control of scrolling to be handled through child components. You can - achieve this through nested flex groups and overflow properties; - adding certain combinations of{' '} - - CSS overflow utility classes - {' '} - to these children. There are a few caveats to - understand when trying to achieve full height layouts with{' '} - EuiPageTemplate. -

-
    -
  1. - Using the {'fullHeight'} prop adds an extra - layer of{' '} - - EuiFlexGroup and EuiFlexItem - {' '} - around the template children to negate the negative margins. -
    2. -
  2. - Using {'fullHeight=true'} will automatically - add scrolling behavior to the EuiFlexItem that - wraps the children. -
    3. -
  3. - Using {'fullHeight="noscroll"'} removes all - scrolling behavior and your layouts will break if you do not - manually add them. -
    4. -
  4. - When using either values for {'fullHeight'}, - there will always be a minimum height of 460px{' '} - to the page contents. -
    5. -
  5. - Full height layouts are restricted to{' '} - medium breakpoints and above. We recommend - retaining any responsive behavior and allowing normal page scroll - on smaller screens. -
    6. -
- - When applying the .eui-yScroll class, it is - recommended to also apply tabindex=0 to - ensure keyboard users can scroll these containers. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'full-height', - demo: ( - - ), - }, - }, - { - title: 'Simple layout with centered body', - source: [ - { - type: GuideSectionTypes.JS, - code: PageSimpleCenteredBodyTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageSimpleCenteredBodySource, - displayName: 'Components JS', - }, - ], - text: ( -

- Similar to the version with a side bar, when the content for the page - is minimal or in an empty/pre-setup state, the page content can be - centered vertically and horizontally. We recommend then using the{' '} - - EuiEmptyPrompt - {' '} - for the content. -

- ), - demo: ( - - ), - fullScreen: { - slug: 'simple-centered-body', - demo: ( - - ), - }, - }, - { - title: 'Simple layout with centered content', - source: [ - { - type: GuideSectionTypes.JS, - code: PageSimpleEmptyContentTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageSimpleEmptyContentSource, - displayName: 'Components JS', - }, - ], - text: ( -

- Also similar to the previous examples, you can create a centered panel - to emphasis incompleteness even with a page header. For this setup, - You will need to use nested EuiPageContent components - in order for the centering to work. -

- ), - demo: ( - - ), - fullScreen: { - slug: 'simple-centered-content', - demo: ( - - ), - }, - }, - { - title: 'A simple page layout with custom content', - source: [ - { - type: GuideSectionTypes.JS, - code: PageCustomContentTemplateSource, - displayName: 'Template JS', - }, - { - type: GuideSectionTypes.JS, - code: PageCustomContentSource, - displayName: 'Components JS', - }, - ], - text: ( - <> -

- You can replace the inner parts of EuiPageBody with - your own content, with or without a page header. This allows you to - create dashboard style layouts with lots of panels. It is not - recommended, however, to use this setup when you also have side bar. -

- - This layout can be achieved in EuiPageTemplate{' '} - by setting {'template="empty"'}. - - } - /> - - ), - demo: ( - - ), - fullScreen: { - slug: 'simple-custom-content', - demo: ( - - ), - }, - }, - { - title: 'Legacy layout', - source: [ - { - type: GuideSectionTypes.JS, - code: PageLegacySource, - }, - ], - text: ( -

- In previous versions of EUI, we emulated page layouts where the{' '} - EuiPageContent had margins all around created by - padding on EuiPage. This layout is still achievable - but not through EuiPageTemplate. You must use the{' '} - EuiPage components manually as seen in this example. -

- ), - demo: ( -
- -
- ), - props: { - EuiPage, - EuiPageBody, - EuiPageSideBar, - EuiPageHeader, - EuiPageContent, - EuiPageContentBody, - }, + title: 'To do', + text:

TO DO

, }, ], }; diff --git a/src-docs/src/views/page/page_template_example.js b/src-docs/src/views/page/page_template_example.js new file mode 100644 index 00000000000..32c14415bc5 --- /dev/null +++ b/src-docs/src/views/page/page_template_example.js @@ -0,0 +1,759 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import { GuideSectionTypes } from '../../components'; +import { pageTemplateConfig } from './playground'; +import { PageDemo } from './_page_demo'; + +import { + EuiCode, + EuiPage, + EuiPageBody, + EuiPageContent, + EuiPageContentBody, + EuiPageHeader, + EuiPageSideBar, + EuiText, + EuiEmptyPrompt, + EuiPageTemplate, + EuiCallOut, + EuiSpacer, + EuiBottomBar, +} from '../../../../src/components'; + +import PageNew from './page_new'; +const pageNewSource = require('!!raw-loader!./page_new'); +import PageTemplate from './page_template'; +const PageTemplateSource = require('!!raw-loader!./page_template'); + +import PageBottomBar from './page_bottom_bar'; +const pageBottomBarSource = require('!!raw-loader!./page_bottom_bar'); +import PageBottomBarTemplate from './page_bottom_bar_template'; +const PageBottomBarTemplateSource = require('!!raw-loader!./page_bottom_bar_template'); + +import PageRestrictingWidth from './page_restricting_width'; +const PageRestrictingWidthSource = require('!!raw-loader!./page_restricting_width'); +import PageRestrictingWidthTemplate from './page_restricting_width_template'; +const PageRestrictingWidthTemplateSource = require('!!raw-loader!./page_restricting_width_template'); + +import PageCenteredBody from './page_centered_body'; +const PageCenteredBodySource = require('!!raw-loader!./page_centered_body'); +import PageCenteredBodyTemplate from './page_centered_body_template'; +const PageCenteredBodyTemplateSource = require('!!raw-loader!./page_centered_body_template'); + +import PageCenteredContent from './page_centered_content'; +const PageCenteredContentSource = require('!!raw-loader!./page_centered_content'); +import PageCenteredContentTemplate from './page_centered_content_template'; +const PageCenteredContentTemplateSource = require('!!raw-loader!./page_centered_content_template'); + +import PageSimple from './page_simple'; +const PageSimpleSource = require('!!raw-loader!./page_simple'); +import PageSimpleTemplate from './page_simple_template'; +const PageSimpleTemplateSource = require('!!raw-loader!./page_simple_template'); + +import PageFullHeight from './page_full_height'; +const PageFullHeightSource = require('!!raw-loader!./page_full_height'); +import PageFullHeightTemplate from './page_full_height_template'; +const PageFullHeightTemplateSource = require('!!raw-loader!./page_full_height_template'); + +import PageSimpleCenteredBody from './page_simple_content_body'; +const PageSimpleCenteredBodySource = require('!!raw-loader!./page_simple_content_body'); +import PageSimpleCenteredBodyTemplate from './page_simple_content_body_template'; +const PageSimpleCenteredBodyTemplateSource = require('!!raw-loader!./page_simple_content_body_template'); + +import PageSimpleEmptyContent from './page_simple_empty_content'; +const PageSimpleEmptyContentSource = require('!!raw-loader!./page_simple_empty_content'); +import PageSimpleEmptyContentTemplate from './page_simple_empty_content_template'; +const PageSimpleEmptyContentTemplateSource = require('!!raw-loader!./page_simple_empty_content_template'); + +import PageCustomContent from './page_custom_content'; +const PageCustomContentSource = require('!!raw-loader!./page_custom_content'); +import PageCustomContentTemplate from './page_custom_content_template'; +const PageCustomContentTemplateSource = require('!!raw-loader!./page_custom_content_template'); + +import PageLegacy from './page'; +const PageLegacySource = require('!!raw-loader!./page'); + +export const PageTemplateExample = { + title: 'Page template', + intro: ( + <> + +

+ Page layouts are modular and fit together in a precise manner, though + certain parts can also be added or removed as needed. EUI provides + both the{' '} + individual page components{' '} + and an over-arching template for easily creating some + pre-defined layouts. +

+ + + +

+ You'll find the code for each in their own tab and if you go to + full screen, you can see how they would behave in a typical + application layout. +

+ + + +

+ The template is a very fragile component that will cause unexpected + results if nested. +

+ + + ), + sections: [ + { + title: 'A full page with everything', + source: [ + { + type: GuideSectionTypes.JS, + code: PageTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: pageNewSource, + displayName: 'Components JS', + }, + ], + text: ( +
+

+ EUI provides a family of components using the{' '} + EuiPage prefix that work together to build + consistent page layouts that work responsively. +

+
    +
  • + EuiPage and EuiPageBody provide + the overall wrapper with a column flex display. +
    • +
  • + EuiPageSideBar provides a way to add side + navigation that can be made sticky to scroll + independent of the page content. See{' '} + + EuiSideNav + {' '} + for contents. +
    • +
  • + + EuiPageHeader + {' '} + provides a title, description, section for actions and possible + tabs. +
    • +
  • + EuiPageContent provides the main content + container and extends{' '} + + EuiPanel + + . +
    • +
  • + EuiPageContentBody wraps the content that comes + after the page header. +
    • +
+

+ Or you can use the provided EuiPageTemplate, which + is simply a shortcut for creating the different types of page layout + patterns described in these docs. It is somewhat opinionated, but + still has the ability to customize most of the inner components with + props like pageSideBarProps and{' '} + pageContentProps. +

+
+ ), + props: { + EuiPageTemplate, + EuiPage, + EuiPageBody, + EuiPageSideBar, + EuiPageHeader, + EuiPageContent, + EuiPageContentBody, + EuiBottomBar, + }, + playground: pageTemplateConfig, + demo: ( + + ), + fullScreen: { + slug: 'full-page', + demo: ( + + ), + }, + }, + { + title: 'Restricting page width', + source: [ + { + type: GuideSectionTypes.JS, + code: PageRestrictingWidthTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageRestrictingWidthSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ Most content does not scale well to the full width of the window. + You can restrict this to a typical width and center the page by + setting the restrictWidth prop to{' '} + true on EuiPageHeader and{' '} + EuiPageContent. You can also pass an integer to + this property to max out the width at a custom pixel value or a + string with a custom measurement. +

+ + The EuiPageTemplate allows setting this + property at the top level and defaults to{' '} + true. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'restricting-page-width', + demo: ( + + ), + }, + }, + { + title: 'Showing a bottom bar', + source: [ + { + type: GuideSectionTypes.JS, + code: PageBottomBarTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: pageBottomBarSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ Adding an{' '} + + EuiBottomBar + {' '} + can be tricky to use and account for any side bars.{' '} + EuiPageTemplate handles this nicely by supplying a{' '} + bottomBar prop for passing the contents of your + bottom bar, and bottomBarProps that extends{' '} + EuiBottomBar. +

+

+ It uses the sticky position so that it sticks to + the bottom of and remains within the bounds of{' '} + EuiPageBody. This way it will never overlap the{' '} + EuiPageSideBar, no matter the screen size. It also + means not needing to accommodate for the height of the bar in the + body element. +

+ + EuiPageTemplate only supports bottom bars in + the default template. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'bottom-bar', + demo: ( + + ), + }, + }, + { + title: 'Centered body', + source: [ + { + type: GuideSectionTypes.JS, + code: PageCenteredBodyTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageCenteredBodySource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ When the content for the page is minimal or in an empty/pre-setup + state, the page content can be centered vertically and horizontally. + We recommend then using the{' '} + + EuiEmptyPrompt + {' '} + for the content. +

+ + This layout can be achieved in EuiPageTemplate{' '} + by setting {'template="centeredBody"'}. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'centered-body', + demo: ( + + ), + }, + props: { EuiPageTemplate, EuiEmptyPrompt }, + }, + { + title: 'Centered content', + source: [ + { + type: GuideSectionTypes.JS, + code: PageCenteredContentTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageCenteredContentSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ Similar to the previous example, you can create a centered panel to + emphasize incompleteness even with a page header. For this setup, we + recommend setting EuiPageContent to use the{' '} + subdued color as to not have nested shadows. +

+ + This layout can be achieved in EuiPageTemplate{' '} + by setting {'template="centeredContent"'}. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'centered-content', + demo: ( + + ), + }, + }, + { + title: 'A simple page with tabs', + source: [ + { + type: GuideSectionTypes.JS, + code: PageSimpleTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageSimpleSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ When leaving off the EuiPageSideBar, we recommend a + slightly different configuration by pulling the page header out of + the EuiPageContent and removing the shadow from{' '} + EuiPageContent. +

+ + This layout will automatically be achieved through{' '} + EuiPageTemplate by leaving{' '} + pageSideBar as undefined. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'tabs', + demo: ( + + ), + }, + }, + { + title: 'Full height layout', + source: [ + { + type: GuideSectionTypes.JS, + code: PageFullHeightTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageFullHeightSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ Though it is not recommended for most layouts, some require the + control of scrolling to be handled through child components. You can + achieve this through nested flex groups and overflow properties; + adding certain combinations of{' '} + + CSS overflow utility classes + {' '} + to these children. There are a few caveats to + understand when trying to achieve full height layouts with{' '} + EuiPageTemplate. +

+
    +
  1. + Using the {'fullHeight'} prop adds an extra + layer of{' '} + + EuiFlexGroup and EuiFlexItem + {' '} + around the template children to negate the negative margins. +
    2. +
  2. + Using {'fullHeight=true'} will automatically + add scrolling behavior to the EuiFlexItem that + wraps the children. +
    3. +
  3. + Using {'fullHeight="noscroll"'} removes all + scrolling behavior and your layouts will break if you do not + manually add them. +
    4. +
  4. + When using either values for {'fullHeight'}, + there will always be a minimum height of 460px{' '} + to the page contents. +
    5. +
  5. + Full height layouts are restricted to{' '} + medium breakpoints and above. We recommend + retaining any responsive behavior and allowing normal page scroll + on smaller screens. +
    6. +
+ + When applying the .eui-yScroll class, it is + recommended to also apply tabindex=0 to + ensure keyboard users can scroll these containers. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'full-height', + demo: ( + + ), + }, + }, + { + title: 'Simple layout with centered body', + source: [ + { + type: GuideSectionTypes.JS, + code: PageSimpleCenteredBodyTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageSimpleCenteredBodySource, + displayName: 'Components JS', + }, + ], + text: ( +

+ Similar to the version with a side bar, when the content for the page + is minimal or in an empty/pre-setup state, the page content can be + centered vertically and horizontally. We recommend then using the{' '} + + EuiEmptyPrompt + {' '} + for the content. +

+ ), + demo: ( + + ), + fullScreen: { + slug: 'simple-centered-body', + demo: ( + + ), + }, + }, + { + title: 'Simple layout with centered content', + source: [ + { + type: GuideSectionTypes.JS, + code: PageSimpleEmptyContentTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageSimpleEmptyContentSource, + displayName: 'Components JS', + }, + ], + text: ( +

+ Also similar to the previous examples, you can create a centered panel + to emphasize incompleteness even with a page header. For this setup, + You will need to use nested EuiPageContent components + in order for the centering to work. +

+ ), + demo: ( + + ), + fullScreen: { + slug: 'simple-centered-content', + demo: ( + + ), + }, + }, + { + title: 'A simple page layout with custom content', + source: [ + { + type: GuideSectionTypes.JS, + code: PageCustomContentTemplateSource, + displayName: 'Template JS', + }, + { + type: GuideSectionTypes.JS, + code: PageCustomContentSource, + displayName: 'Components JS', + }, + ], + text: ( + <> +

+ You can replace the inner parts of EuiPageBody with + your own content, with or without a page header. This allows you to + create dashboard style layouts with lots of panels. It is not + recommended, however, to use this setup when you also have side bar. +

+ + This layout can be achieved in EuiPageTemplate{' '} + by setting {'template="empty"'}. + + } + /> + + ), + demo: ( + + ), + fullScreen: { + slug: 'simple-custom-content', + demo: ( + + ), + }, + }, + { + title: 'Legacy layout', + source: [ + { + type: GuideSectionTypes.JS, + code: PageLegacySource, + }, + ], + text: ( +

+ In previous versions of EUI, we emulated page layouts where the{' '} + EuiPageContent had margins all around created by + padding on EuiPage. This layout is still achievable + but not through EuiPageTemplate. You must use the{' '} + EuiPage components manually as seen in this example. +

+ ), + demo: ( +
+ +
+ ), + props: { + EuiPage, + EuiPageBody, + EuiPageSideBar, + EuiPageHeader, + EuiPageContent, + EuiPageContentBody, + }, + }, + ], +}; diff --git a/src-docs/src/views/page_header/page_header_example.js b/src-docs/src/views/page_header/page_header_example.js index bdd87823076..a7dc623f22a 100644 --- a/src-docs/src/views/page_header/page_header_example.js +++ b/src-docs/src/views/page_header/page_header_example.js @@ -30,7 +30,7 @@ export const PageHeaderExample = {

While the EuiPageHeader component can be placed anywhere within your page layout, we recommend using it within the{' '} - + EuiPageTemplate {' '} component by passing the configuration props as its{' '} diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js index 44a0b4be20a..1d4b2b5ec1c 100644 --- a/src-docs/src/views/panel/panel_example.js +++ b/src-docs/src/views/panel/panel_example.js @@ -88,13 +88,13 @@ export const PanelExample = { EuiPanel is a building block component. Use it as a layout helper for containing content. It is also commonly used as a base for other larger components like{' '} - + EuiPage ,{' '} EuiPopover - + {' '} and{' '} EuiCard diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index b1301294ed1..48dda387863 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -8,18 +8,12 @@ import { EuiSelectable, EuiSelectableMessage, EuiText, - EuiSpacer, - EuiSelectableTemplateSitewide, - EuiCodeBlock, - EuiAccordion, } from '../../../../src/components'; import { EuiSelectableOptionProps, EuiSelectableOptionsList, EuiSelectableSearchProps, - Options, - MetaData, } from './props'; import Selectable from './selectable'; @@ -43,10 +37,7 @@ const selectableMessagesSource = require('!!raw-loader!./selectable_messages'); import SelectableCustomRender from './selectable_custom_render'; const selectableCustomRenderSource = require('!!raw-loader!./selectable_custom_render'); -import SearchOption from './sitewide_option'; -import Search from './search'; import { EuiCallOut } from '../../../../src/components/call_out'; -const searchSource = require('!!raw-loader!./search'); export const SelectableExample = { title: 'Selectable', @@ -407,148 +398,5 @@ export const SelectableExample = { )} `, }, - { - title: 'Sitewide search template', - source: [ - { - type: GuideSectionTypes.JS, - code: searchSource, - }, - ], - text: ( - -

- EuiSelectableTemplateSitewide is an opinionated - wrapper around EuiSelectable to provide a reusable - template across the Elastic products that will share the same global - search capabilities. It creates the search input that triggers a - popover containing the list of options. -

-

Search input

-

- The search ability of EuiSelectable is still hooked up to the - options provided. It will highlight the portion of the label that - matches the search string. -

- -

Popover

-

- The popover itself allows you to display a{' '} - popoverTitle node,{' '} - popoverFooter node, or pass any of the{' '} - popoverProps to the{' '} - - EuiPopover - {' '} - component. -

-

Options

-

- The options are the most opinionated portion of - the template. Their display is determined by the props passed in and - extends the normal EuiSelectable.option type. All - parts are optional with the exception of the label (B). -

- - - - Code snippet} - > - - - {`const options: EuiSelectableTemplateSitewideOption[] = [ - { - label: 'Label', - icon: { - type: 'logoKibana' - } - avatar: { - name: 'Default', - }, - meta: [ - { - text: 'Meta', - type: 'application', - }, - { - text: 'Deployment', - type: 'deployment', - }, - { - text: 'Default display', - }, - ], - } -]`} - - - -
    -
  • - label (required): The name of the item itself. - By default, the search box will only use this to match the search - term against, but you can supply a separate{' '} - searchableLabel that combines the label and - meta data to search on. -
    • -
  • - icon: Only display the solution or - application's logo when the option links to the application - itself (Dashboard app) and not lower-level items such as - individual dashboards. Size and color are predetermined but can be - overridden. -
    • -
  • - avatar: Represents the Kibana Space that the - item is located in, if multiple spaces are - present. Type and size are predetermined but can be overridden. -
    • -
  • - meta: This bottom line should only contain - items if the option is a lower-level item (individual dashboard). - The display of which defaults to simple text, but if you pass one - of the predetermined types, they will be styled - according to the design pattern. -
    • -
- -

Selection

-

- The options themselves are simply rendered as list items with no - interactive behavior like buttons or links. You must handle the - interaction when the component passes back the altered array of - options with the selected option having{' '} - {"checked: 'on'"}. -

-

Popover toggle and responsiveness

-

- The default display is to render the search input inline which - triggers a popover with the results. Or you can decide to trigger - the whole selectable component from a single button. By passing your - own button to popoverButton, the component will - use this to trigger the popover, putting the search inside. -

-

- This is a great way to handle reducing the size of the component for - smaller screens. The component offers a helper prop called{' '} - popoverButtonBreakpoints which will only render - the popoverButton if the window size matches - named breakpoint(s). -

- - ), - props: { EuiSelectableTemplateSitewide, Options, MetaData }, - demo: , - }, ], }; diff --git a/src-docs/src/views/selectable/selectable_sitewide_template_example.js b/src-docs/src/views/selectable/selectable_sitewide_template_example.js new file mode 100644 index 00000000000..b1d12406dc6 --- /dev/null +++ b/src-docs/src/views/selectable/selectable_sitewide_template_example.js @@ -0,0 +1,182 @@ +import React, { Fragment } from 'react'; +import { Link } from 'react-router-dom'; + +import { GuideSectionTypes } from '../../components'; + +import { + EuiCode, + EuiSpacer, + EuiSelectableTemplateSitewide, + EuiCodeBlock, + EuiAccordion, + EuiCallOut, +} from '../../../../src/components'; + +import { Options, MetaData } from './props'; + +import SearchOption from './sitewide_option'; +import Search from './search'; +const searchSource = require('!!raw-loader!./search'); + +export const SitewideSearchExample = { + title: 'Sitewide search', + description: ( +

+ EuiSelectableTemplateSitewide is an opinionated wrapper + around{' '} + + EuiSelectable + {' '} + to provide a reusable template across the Elastic products that will share + the same global search capabilities. It creates the search input that + triggers a popover containing the list of options. +

+ ), + sections: [ + { + title: 'Basic setup', + source: [ + { + type: GuideSectionTypes.JS, + code: searchSource, + }, + ], + text: ( + +

Search input

+

+ The search ability of{' '} + + EuiSelectable + {' '} + is still hooked up to the options provided. It will highlight the + portion of the label that matches the search string. +

+ +

Popover

+

+ The popover itself allows you to display a{' '} + popoverTitle node,{' '} + popoverFooter node, or pass any of the{' '} + popoverProps to the{' '} + + EuiPopover + {' '} + component. +

+

Selection

+

+ The options themselves are simply rendered as list items with no + interactive behavior like buttons or links. You must handle the + interaction when the component passes back the altered array of + options with the selected option having{' '} + {"checked: 'on'"}. +

+

Popover toggle and responsiveness

+

+ The default display is to render the search input inline which + triggers a popover with the results. Or you can decide to trigger + the whole selectable component from a single button. By passing your + own button to popoverButton, the component will + use this to trigger the popover, putting the search inside. +

+

+ This is a great way to handle reducing the size of the component for + smaller screens. The component offers a helper prop called{' '} + popoverButtonBreakpoints which will only render + the popoverButton if the window size matches + named breakpoint(s). +

+ + ), + props: { EuiSelectableTemplateSitewide, Options, MetaData }, + demo: , + }, + { + title: 'Options', + text: ( + <> +

+ The options are the most opinionated portion of + the template. Their display is determined by the props passed in and + extends the normal EuiSelectable.option type. All + parts are optional with the exception of the label (A). +

+ + + + Code snippet} + > + + + {`const options: EuiSelectableTemplateSitewideOption[] = [ + { + label: 'Label', + icon: { + type: 'logoKibana' + } + avatar: { + name: 'Default', + }, + meta: [ + { + text: 'Meta', + type: 'application', + }, + { + text: 'Deployment', + type: 'deployment', + }, + { + text: 'Default display', + }, + ], + } +]`} + + + +
    +
  • + label (required): The name of the item itself. + By default, the search box will only use this to match the search + term against, but you can supply a separate{' '} + searchableLabel that combines the label and + meta data to search on. +
    • +
  • + icon: Only display the solution or + application's logo when the option links to the application + itself (Dashboard app) and not lower-level items such as + individual dashboards. Size and color are predetermined but can be + overridden. +
    • +
  • + avatar: Represents the Kibana Space that the + item is located in, if multiple spaces are + present. Type and size are predetermined but can be overridden. +
    • +
  • + meta: This bottom line should only contain + items if the option is a lower-level item (individual dashboard). + The display of which defaults to simple text, but if you pass one + of the predetermined types, they will be styled + according to the design pattern. +
    • +
+ + + ), + }, + ], +}; diff --git a/src-docs/src/views/tabs/tabs_example.js b/src-docs/src/views/tabs/tabs_example.js index 567cb907608..4bc6d0ff39e 100644 --- a/src-docs/src/views/tabs/tabs_example.js +++ b/src-docs/src/views/tabs/tabs_example.js @@ -96,7 +96,7 @@ export const TabsExample = { size is best for when placing inside popovers or other small containers. Reserve using the large size for when using as primary page navigation, like inside of{' '} - + EuiPageHeader . From 7d50eb0d9fb7a5607de420abf208d97a243e242d Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 29 Mar 2022 15:52:43 -0400 Subject: [PATCH 2/4] Clean up --- src-docs/src/routes.js | 3 -- src-docs/src/views/page/page_example.js | 38 ------------------- .../src/views/page/page_template_example.js | 5 +-- src-docs/src/views/panel/panel_example.js | 2 +- 4 files changed, 3 insertions(+), 45 deletions(-) delete mode 100644 src-docs/src/views/page/page_example.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 8b2757fe280..15838c1ae02 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -169,8 +169,6 @@ import { OutsideClickDetectorExample } from './views/outside_click_detector/outs import { OverlayMaskExample } from './views/overlay_mask/overlay_mask_example'; -import { PageExample } from './views/page/page_example'; - import { PageHeaderExample } from './views/page_header/page_header_example'; import { PaginationExample } from './views/pagination/pagination_example'; @@ -463,7 +461,6 @@ const navigation = [ HeaderExample, HorizontalRuleExample, ModalExample, - PageExample, PageHeaderExample, PanelExample, PopoverExample, diff --git a/src-docs/src/views/page/page_example.js b/src-docs/src/views/page/page_example.js deleted file mode 100644 index 07e2d0c20dd..00000000000 --- a/src-docs/src/views/page/page_example.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -import { EuiText, EuiSpacer, EuiCallOut } from '../../../../src/components'; - -export const PageExample = { - title: 'Page components', - intro: ( - <> - -

- Page layouts are modular and fit together in a precise manner, though - certain parts can also be added or removed as needed. EUI provides - both the individual page components and an{' '} - over-arching template for - easily creating some pre-defined layouts. -

- - - -

- If you're looking for full page layout examples, we recommend - using the EuiPageTemplate{' '} - and use this page to modify the props of each part of the template. -

- - - ), - sections: [ - { - title: 'To do', - text:

TO DO

, - }, - ], -}; diff --git a/src-docs/src/views/page/page_template_example.js b/src-docs/src/views/page/page_template_example.js index 32c14415bc5..4233f1ec098 100644 --- a/src-docs/src/views/page/page_template_example.js +++ b/src-docs/src/views/page/page_template_example.js @@ -82,9 +82,8 @@ export const PageTemplateExample = {

Page layouts are modular and fit together in a precise manner, though certain parts can also be added or removed as needed. EUI provides - both the{' '} - individual page components{' '} - and an over-arching template for easily creating some + both the individual page components and an + over-arching template for easily creating some pre-defined layouts.

diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js index 9fcf6a82099..aa8724cb5bd 100644 --- a/src-docs/src/views/panel/panel_example.js +++ b/src-docs/src/views/panel/panel_example.js @@ -88,7 +88,7 @@ export const PanelExample = { EuiPanel is a building block component. Use it as a layout helper for containing content. It is also commonly used as a base for other larger components like{' '} - + EuiPage ,{' '} From ab78a2a14fcb6ce3d531f5b80c9dee6aa125f299 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 29 Mar 2022 15:57:09 -0400 Subject: [PATCH 3/4] `fullscreen` --- src-docs/src/views/page/page_template_example.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/page/page_template_example.js b/src-docs/src/views/page/page_template_example.js index 4233f1ec098..dab6311210e 100644 --- a/src-docs/src/views/page/page_template_example.js +++ b/src-docs/src/views/page/page_template_example.js @@ -94,8 +94,8 @@ export const PageTemplateExample = { >

You'll find the code for each in their own tab and if you go to - full screen, you can see how they would behave in a typical - application layout. + fullscreen, you can see how they would behave in a typical application + layout.

From 356df991134aca2eff7bc2a48df5e81170a8b898 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 29 Mar 2022 15:58:10 -0400 Subject: [PATCH 4/4] one last link --- src-docs/src/views/home/home_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js index b2eaaf86826..b4018422aac 100644 --- a/src-docs/src/views/home/home_view.js +++ b/src-docs/src/views/home/home_view.js @@ -186,7 +186,7 @@ export const HomeView = () => (