[EuiPageTemplate] Add support for `fullHeight` layouts by cchaos · Pull Request #4793 · elastic/eui

cchaos · 2021-05-11T21:51:08Z

Added `fullHeight` prop to EuiPageTemplate

Only if template type is 'empty' or 'default'.

This is essentially to help with layouts like in Kibana's Dev Tools application where the app is the full window height and the inner panels scroll individually. The new prop will extend the height of each child element to height: 100% and cut off overflows. There are three options for this new prop:

false: default : Behaves as it does today and relies on the body overflow for scrolling
true: Extends the height, but does add scrolling to the EuiPageContentBody component
'noscroll': Extends the height and removes all scrolling ability. Consumers must add it to a child component

There is a slight backup just in case of weird edge cases, like if the height of the browser is too small, a scroll will kick in. This could mean that there's double scroll but at least the content won't get cut off.

Also added minHeight prop directly to EuiPageTemplate to control the forced scrolling in case the window is very short.

Other updates added to help with this

Added `.eui-fullHeight` and `euiFullHeight()` utilities

Added `paddingSize` to EuiPageSideBar

Added `flex-shrink: 0` to EuiTabs, EuiSpacer, and EuiImage

If these ever ended up being a direct descendent of a flex container, there was a good possibility they could shrink smaller than their actual height. This is now prevented.

Fixed duplicate `main` aria roles in the EuiPageTemplate and other common EuiPage patterns

By changing the default component of EuiPageBody from main to div and keeping role=main on EuiPageContent.

Fixed text color of EuiBottomBar

It was using empty color instead of ghost.

Checklist

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

…es for consumers

…ull-height # Conflicts: # src-docs/src/views/utility_classes/utility_classes_overflow.js

src/components/code/_code_block.scss

cchaos · 2021-05-11T22:05:58Z

src/components/page/__snapshots__/page_template.test.tsx.snap

@@ -1,5 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`EuiPageTemplate fullHeight is rendered with noscroll 1`] = `


Does anyone know how to get hooks to work in tests? I can never seem to get useIsWithinBreakpoints() to return true in tests.

Haven't dug into it, but I think I've faced similar issues with around breakpoints in tests and it's because the window object is all gummed up. You'd need to mock whatever browser APIs you need to get it to work...

cchaos · 2021-05-11T22:07:43Z

src/components/page/page_template.tsx

  'empty',
 ] as const;

-type _EuiPageTemplateTypes = ExclusiveUnion<


I removed this exclusive union because it really messes with consuming applications when they try to be wrappers of this component.

kibanamachine · 2021-05-11T22:34:18Z

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

Removed default `main` as the component for EuiPageBody

kibanamachine · 2021-05-12T15:07:24Z

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

kibanamachine · 2021-05-13T15:26:01Z

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

snide

Small docs issue. Don't forget to update the classes on the individual component examples as well. Ran through code and docs. LGTM otherwise.

src-docs/src/views/page/page_example.js

src-docs/src/views/utility_classes/utility_classes_overflow.js

src/components/page/_page.scss

Moved this from Sass to `style` tag for easier manipulation

# Conflicts: # CHANGELOG.md

cchaos · 2021-05-13T17:35:19Z

@snide Thanks! Good catch on the sidebar padding. That was a last minute addition that I forgot to check the manual component versions for. Pushed all the changes!

…ull-height

kibanamachine · 2021-05-13T18:03:04Z

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

cchaos · 2021-05-13T18:08:37Z

Jenkins, test this

kibanamachine · 2021-05-13T18:28:57Z

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

snide

LGTM. Thanks for the changes.

kibanamachine · 2021-05-19T16:30:20Z

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

kibanamachine · 2021-05-25T14:01:08Z

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

cchaos added 9 commits May 5, 2021 16:18

Removed ExclusiveUnion for bottomBar because it caused lots of issu…

b419979

…es for consumers

Ensuring spacers and images don’t shrink in flex layouts

1ca6cd5

Added .eui-fullHeight and euiFullHeight() utilities

1a18357

Fixing a contrast issue in code block syntax highlighting

ca00f38

Ensuring tabs don’t shrink in flex layouts

3dd79eb

[EuiPageTemplate] Added fullHeight prop

761b044

[EuiPageSideBar] Added paddingSize

f2332f4

Playground

94d3318

Merge remote-tracking branch 'upstream/master' into update/template-f…

684716a

…ull-height # Conflicts: # src-docs/src/views/utility_classes/utility_classes_overflow.js

cchaos commented May 11, 2021

View reviewed changes

src/components/code/_code_block.scss Show resolved Hide resolved

cchaos commented May 11, 2021

View reviewed changes

Cleanup & CL

2c3da10

Fixed duplicate main aria roles

dc51d8b

Removed default `main` as the component for EuiPageBody

Merge branch 'master' into update/template-full-height

93b28d9

snide suggested changes May 13, 2021

View reviewed changes

cchaos added 5 commits May 13, 2021 13:33

[EuiBottomBar] Fix text color

4fbb861

[EuiPageTemplate] Added minHeight

ac9bd70

Moved this from Sass to `style` tag for easier manipulation

Fixed component examples side bar padding

6c72b6f

Typos

85b3230

CL

311ea2c

# Conflicts: # CHANGELOG.md

cchaos added 4 commits May 13, 2021 13:37

Merge remote-tracking branch 'upstream/master' into update/template-f…

5c2033d

…ull-height

cl

86cd92c

cl

6dd3ac9

cl

f14c32e

snide approved these changes May 13, 2021

View reviewed changes

Merge branch 'master' into update/template-full-height

d79395b

Merge branch 'master' into update/template-full-height

cf90478

cchaos merged commit 5bf86b6 into elastic:master May 25, 2021

cchaos deleted the update/template-full-height branch May 25, 2021 14:27

thompsongl mentioned this pull request Jun 3, 2021

Upgrade EUI to v34.3.0 elastic/kibana#101334

Merged

		@@ -1,5 +1,43 @@
		// Jest Snapshot v1, https://goo.gl/fbAQLP

		exports[`EuiPageTemplate fullHeight is rendered with noscroll 1`] = `

Conversation

cchaos commented May 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Added fullHeight prop to EuiPageTemplate

Other updates added to help with this

Added .eui-fullHeight and euiFullHeight() utilities

Added paddingSize to EuiPageSideBar

Added flex-shrink: 0 to EuiTabs, EuiSpacer, and EuiImage

Fixed duplicate main aria roles in the EuiPageTemplate and other common EuiPage patterns

Fixed text color of EuiBottomBar

Checklist

Uh oh!

Uh oh!

cchaos May 11, 2021

Choose a reason for hiding this comment

Uh oh!

myasonik May 13, 2021

Choose a reason for hiding this comment

Uh oh!

cchaos May 11, 2021

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented May 11, 2021

Uh oh!

kibanamachine commented May 12, 2021

Uh oh!

kibanamachine commented May 13, 2021

Uh oh!

snide left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cchaos commented May 13, 2021

Uh oh!

kibanamachine commented May 13, 2021

Uh oh!

cchaos commented May 13, 2021

Uh oh!

kibanamachine commented May 13, 2021

Uh oh!

snide left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented May 19, 2021

Uh oh!

kibanamachine commented May 25, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cchaos commented May 11, 2021 •

edited

Loading

Added `fullHeight` prop to EuiPageTemplate

Added `.eui-fullHeight` and `euiFullHeight()` utilities

Added `paddingSize` to EuiPageSideBar

Added `flex-shrink: 0` to EuiTabs, EuiSpacer, and EuiImage

Fixed duplicate `main` aria roles in the EuiPageTemplate and other common EuiPage patterns