[Page Layouts] Created EuiPageTemplate to facilitate the new design patterns for page layouts #4525

cchaos · 2021-02-15T21:16:58Z

... And updated the EUI docs to use the new pattern.

Component updates/additions

EuiPage

grow: To easily facilitate allowing the whole page to stretch to fit vertically.
direction: Changes the flex-direction property. Originally added because I wanted to remove the EuiPageBody dependency, but found the EuiPageBody to be a better solution. Leaving it in, just as a nice solution for others.

EuiPageBody

panelled: Uses an EuiPanel as the main component instead of a plain div
panelProps: Extends any extra EuiPanel props if panelled=true
paddingSize: For changes to overall padding for both EuiPanel and plain div

EuiPageContent

Fix: I'm pretty sure I fixed the overflowing of content when the EuiPageContent component is a flex item next to EuiSideBar by adding min-width: 0.

EuiPageContentBody

restrictWidth: Aligns with all other EuiPage component restrictWidth props
paddingSize: Also to align with all other EuiPage component padding sizes

EuiPageHeader

Added paddingSize to align with all other EuiPage component padding sizes
Moved docs to their own page

EuiPageHeaderContent

Updated the EuiTabs component to render the large size.

EuiPageSideBar

Added $euiPageSidebarMinWidth global token for updating the hard-coded min-width
Added the prop sticky for easily allowing the sidebar to scroll independently of the page contents. The euiHeaderAffordForFixed() Sass mixin now also applies any extra styling to .euiSideBar--sticky to afford for any fixed headers.

[NEW] EuiPageTemplate

Similar to the EuiSelectableSitewideTemplate component this new EuiPageTemplate component is a shortcut for creating the different types of page layout patterns described in the docs. It is somewhat opinionated, but still with the ability to customize most of the inner components with props like sideBarProps and pageContentProps.

This template may not be complete at this time, but provides solutions with a quick way to opt in to the new layout patterns. And fixes #3743

Example. This simple React usage:

<EuiPageTemplate
  pageSideBar={sideNav}
  pageHeader={{
    iconType: 'logoElastic',
    pageTitle: 'Page title',
    rightSideItems: [button],
    tabs: [{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }],
  }}>
    {content}
</EuiPageTemplate>

Will render as:

Four types of `templates`

As of right now there are 4 template types, all with/without sideBars: 'default' | 'centeredBody' | 'centeredContent' | 'empty'. The example above is the default. The centered options allow for either the whole body or just the content to be centered depending, usually, on which part is the "empty" state.

centeredBody

centeredContent

empty
Good for more free-form body content like dashboards.

Padding size and max-widths

Both the restrictWidth and paddingSize props can be applied as this top layer and will apply them to all the appropriate inner components. It also defaults the restrictWidth to true so that most layouts are automatically maxed.

Other component fixes

EuiBreadcrumbs truncation

Since I re-discovered the min-width: 0 trick for flex items and noticed that long header breadcrumbs were breaking the header layouts, I added this directly to the EuiBreadcrumb component.

EuiHeaderSectionItemButton only rendered a `<button>`

These buttons weren't accepting href's like I needed for the docs updates with putting the github and design library links in the header. Now the component just extends EuiButtonEmpty to easily get all the states and types necessary for allowing both onClick and href.

This also removed the specific :hover states to be more inline with our empty button behavior which has none.

Docs updates/additions

Added an EuiHeader to house the theme switcher and other links that previously only existed on the home page

I've also made the design library and codesandbox links theme aware. Meaning, depending on the currently selected theme, it will update these library links to point to that theme's library and the codesandbox link will import the corresponding CSS file.

Added the ability to create custom demo tabs

For these new EuiPage docs, I really wanted to show both how to use the template version and how to create the same layout manually with the corresponding components. I could have used the Demo JS and Snippet tabs for this, but I wanted to be more explicit than that. I also wanted to be able to have all the import statements for both (which Snippets do not automatically come with).

So now you can pass something like the following into the source key of the guide section, and it will render similar to our current Demo JS tab but with a custom tab displayName.

{
  type: GuideSectionTypes.JS,
  code: PageCustomContentTemplateSource,
  displayName: 'Template JS',
}

The tabs will also now render in the order they're given in the source.

Updated the home page 😸

Follow-ups

There are still a few minor things to work out like:

More EuiHeader z-index issues
Figure out how to allow EuiPanel to render any component like <main>

Checklist (Still working on most of these)

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs and playground toggles
Added documentation
Checked Code Sandbox works for the any docs examples
Added or updated jest tests
~~[ ] Checked for breaking changes and labeled appropriately~~
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

# Conflicts: # src-docs/src/components/guide_page/guide_page.js # src-docs/src/views/home/home_view.js

# Conflicts: # src-docs/src/images/button_popover.svg

# Conflicts: # src-docs/src/components/guide_components.scss

# Conflicts: # src-docs/src/components/guide_section/_guide_section.scss # src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx

But sticky isn’t working inside the page

…th prop

And created template versions of all the doc examples

# Conflicts: # src/components/index.js

Co-authored-by: Dave Snider <dave.snider@gmail.com>

cchaos · 2021-02-22T20:38:01Z

Dynamically set number of cards on the homepage

I think it's odd to hide cards at certain page sizes. I think we just need to add more at some point 😄

Colors page sticky margins are off

Actually this failure from negative margins of the lower gray box ...

EDIT: And I know how to fix now actually

Tabs on example pages

I'm hoping NOT to wait on the other PR for long. So I'd like to stick with this usage as it's using the inherent tabs prop of EuiPageHeader to showcase specifically how that works.

snide

LGTM. Reasons to stick with with these decisions make sense to me knowing we have another PR coming soon. Nice work. Huge change!

kibanamachine · 2021-02-22T21:01:29Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4525/

…g` to `ReactNode`

kibanamachine · 2021-02-23T20:51:18Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4525/

thompsongl

I didn't look too closely at the docs changes, but the new component changes look ready to go
Just a couple changes for TS and CL

thompsongl · 2021-02-25T20:31:32Z

CHANGELOG.md

@@ -23,9 +23,26 @@

 - Removed letter-spacing from `euiFont` Sass mixin ([#4488](https://github.com/elastic/eui/pull/4488))

+### Feature: EuiPageTemplate ([#4517](https://github.com/elastic/eui/pull/4517))


Had a release in the meantime. Need to update the location.

thompsongl · 2021-02-25T21:02:19Z

src/components/header/header_links/header_links.tsx

  const onMenuButtonClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+    // @ts-ignore HELP


Suggested change

const onMenuButtonClick: MouseEventHandler<HTMLButtonElement> = (e) => {

// @ts-ignore HELP

const onMenuButtonClick: MouseEventHandler<

HTMLButtonElement & HTMLAnchorElement

> = (e) => {

src/components/header/header_links/header_links.tsx

kibanamachine · 2021-02-25T22:41:08Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4525/

cchaos · 2021-02-25T22:57:06Z

Jenkins, test this

kibanamachine · 2021-02-25T23:22:59Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4525/

cchaos · 2021-02-25T23:24:16Z

Jenkins, test this

kibanamachine · 2021-02-25T23:47:57Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4525/

cchaos · 2021-02-26T00:16:15Z

Jenkins, test this

kibanamachine · 2021-02-26T00:40:54Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4525/

cchaos added 30 commits February 11, 2021 12:16

New docs layout

a9e1478

# Conflicts: # src-docs/src/components/guide_page/guide_page.js # src-docs/src/views/home/home_view.js

Cleanup

324d857

Updating homepage blockforms

d27f0ec

# Conflicts: # src-docs/src/images/button_popover.svg

Cleanup homepage

926613e

# Conflicts: # src-docs/src/components/guide_components.scss

Som more cleanup and fixing of mobile styles

d504194

# Conflicts: # src-docs/src/components/guide_section/_guide_section.scss # src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx

Fix page layout

eaff2bf

Fix locale selector

ee3dc9e

Fixed theme selector

cb67e0a

Fix autoscrolls

9e71f21

But sticky isn’t working inside the page

Fixing overflows and in turn stickies

290bd97

Move babelfish and fix overflowing page content (again)

7b16459

Some cleanup of spacing

744f870

Som initial cleanup of the docs stuff

e684b89

Making design library links based on current theme

d5c31cb

Made codesandbox import the current themes css

1bcd9e0

Initial setups with doc examples started

0583737

Added grow prop to EuiPage and created helper for the restrictedWid…

2e41b1f

…th prop

Added sticky and grow props to EuiPageSideBar

d16a490

Subdue figma link notification

c42d2c3

No more grow

a6f26a9

Added direction prop to EuiPage

202eee0

Added paddingSize and restricted width helper to EuiPageContentBody

add779d

WIP: Docs

6b00ac5

Using restrictedWidth helper on EuiPageBody

ac3c7df

Added panelled and panelProps to EuiPageBody

2d63933

Fixing up all the examples

3295b3f

Added EuiPageTemplate component

69d07ec

And created template versions of all the doc examples

Playground

b0791b3

Propagating paddingSize throughout

dd50cac

Allowing customization of demo tab displayNames

8741cc3

cchaos and others added 3 commits February 22, 2021 15:10

Merge remote-tracking branch 'upstream/master' into new/page_layout

8391d27

# Conflicts: # src/components/index.js

A couple quick docs fixes

96673fd

Fixing typos

a762d4a

Co-authored-by: Dave Snider <dave.snider@gmail.com>

snide approved these changes Feb 22, 2021

View reviewed changes

cchaos added 6 commits February 22, 2021 16:06

More docs fixes and updates EuiPageHeader.tabs.label prop from `strin…

49c7e3c

…g` to `ReactNode`

pretty

160d47d

Fixing different browsers

8be464c

Fix codesandbox link to pass the right code of custom tabs

1f7b3c5

cl

9c81ffc

Removing .guideSection__shadedBox in favor of EuiPanel.subdued

0ff0cb3

thompsongl approved these changes Feb 25, 2021

View reviewed changes

cchaos added 3 commits February 25, 2021 17:02

Fix TS type and remove outdated playground

0c477d1

Merge remote-tracking branch 'upstream/master' into new/page_layout

58a5847

cl

f861214

cchaos added 3 commits February 25, 2021 17:49

cl

28d0235

force

a195cc4

cl

7372654

cchaos merged commit 00fa729 into elastic:master Feb 26, 2021

cchaos deleted the new/page_layout branch February 26, 2021 00:55

j-m mentioned this pull request Feb 26, 2021

[EuiPageContent] Add prop withPanel to control whether the component is styled as an EuiPanel #4192

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Page Layouts] Created EuiPageTemplate to facilitate the new design patterns for page layouts #4525

[Page Layouts] Created EuiPageTemplate to facilitate the new design patterns for page layouts #4525

cchaos commented Feb 15, 2021 •

edited

Loading

cchaos commented Feb 22, 2021 •

edited

Loading

snide left a comment

kibanamachine commented Feb 22, 2021

kibanamachine commented Feb 23, 2021

thompsongl left a comment

thompsongl Feb 25, 2021

thompsongl Feb 25, 2021

kibanamachine commented Feb 25, 2021

cchaos commented Feb 25, 2021

kibanamachine commented Feb 25, 2021

cchaos commented Feb 25, 2021

kibanamachine commented Feb 25, 2021

cchaos commented Feb 26, 2021

kibanamachine commented Feb 26, 2021

		@@ -23,9 +23,26 @@

		- Removed letter-spacing from `euiFont` Sass mixin ([#4488](https://github.com/elastic/eui/pull/4488))

		### Feature: EuiPageTemplate ([#4517](https://github.com/elastic/eui/pull/4517))

		const onMenuButtonClick: MouseEventHandler<HTMLButtonElement> = (e) => {
		// @ts-ignore HELP

[Page Layouts] Created EuiPageTemplate to facilitate the new design patterns for page layouts #4525

[Page Layouts] Created EuiPageTemplate to facilitate the new design patterns for page layouts #4525

Conversation

cchaos commented Feb 15, 2021 • edited Loading

Component updates/additions

EuiPage

EuiPageBody

EuiPageContent

EuiPageContentBody

EuiPageHeader

EuiPageHeaderContent

EuiPageSideBar

[NEW] EuiPageTemplate

Four types of templates

Padding size and max-widths

Other component fixes

EuiBreadcrumbs truncation

EuiHeaderSectionItemButton only rendered a <button>

Docs updates/additions

Added an EuiHeader to house the theme switcher and other links that previously only existed on the home page

Added the ability to create custom demo tabs

Updated the home page 😸

Follow-ups

Checklist (Still working on most of these)

cchaos commented Feb 22, 2021 • edited Loading

snide left a comment

Choose a reason for hiding this comment

kibanamachine commented Feb 22, 2021

kibanamachine commented Feb 23, 2021

thompsongl left a comment

Choose a reason for hiding this comment

thompsongl Feb 25, 2021

Choose a reason for hiding this comment

thompsongl Feb 25, 2021

Choose a reason for hiding this comment

kibanamachine commented Feb 25, 2021

cchaos commented Feb 25, 2021

kibanamachine commented Feb 25, 2021

cchaos commented Feb 25, 2021

kibanamachine commented Feb 25, 2021

cchaos commented Feb 26, 2021

kibanamachine commented Feb 26, 2021

cchaos commented Feb 15, 2021 •

edited

Loading

Four types of `templates`

EuiHeaderSectionItemButton only rendered a `<button>`

cchaos commented Feb 22, 2021 •

edited

Loading