[EuiPageLayout] Add `bottomBar` & [EuiBottomBar] Add more position props #4662

cchaos · 2021-03-24T14:42:53Z

This has been a big struggle for some consumers especially when there is side-nav. So this PR builds an optional bottomBar into the page template, while also adding some more props to EuiBottomBar for customizing position.

EuiBottomBar

There had been talk of deprecating the EuiBottomBar for the EuiControlBar, but the lack of custom content in EuiControlBar hasn't allowed us to do that. So now I'm more beefing up the bottom bar that may eventually replace the wrapping component of EuiControlBar which would just be content-specific.

I've also rewritten the component to use useEffect instead of the old way and useResizeObserver() as the size watcher.

New props

position: 'static' | 'sticky' | 'fixed' - Defaults to fixed
usePortal: boolean - Only works if position is fixed; Defaults to true

🔔 BREAKING: Moved all the positioning attributes to be applied as style attributes.

Any custom classes or CSS used to position the bar, will need to adjust these by add !important for overrides or use the following new props (their defaults shown):

left = 0
right = 0
bottom = 0
top

I also darkened the bottom bar color to better match the header.

EuiPageTemplate

I found that the easiest way to accomodate side-navs when using the bottom bar, is to place it as the last item inside EuiPageBody with position = sticky. This way it will never overlap the side bar on the left (as it's contained within the page body) and in mobile it will never overlap the revealed navigation list as it will stop being "sticky" when page body is not in view.

Screen.Recording.2021-03-24.at.10.11.26.AM.mp4

So this PR adds the following bottom bar props, but it's only allowed when template = 'default' because empty pages should not have bottom bars when there's nothing to "save".

bottomBar: ReactNode - Any contents
bottomBarProps: EuiBottomBarProps - Extends the components props

The bottomBar contents also gets wrapped in a EuiPageContentBody so that it can accept the same restrictWidth prop for keeping content aligned.

Other updates

Added a bunch of role="main" to the EuiPageContent elements in the template and code examples for accessibility.
Added bottomBorder prop to EuiPageHeader, this allows me to enforce the bottom border when I couldn't target it successfully with CSS

Checklist

…n_page

…n style to JS

…trictWidth

kibanamachine · 2021-03-24T15:12:30Z

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

src-docs/src/views/app_view.js

src-docs/src/views/home/home_view.js

cchaos · 2021-03-24T15:16:26Z

src/components/bottom_bar/bottom_bar.tsx

+    // TODO: Allow this hooke to be conditional
+    const dimensions = useResizeObserver(resizeRef);


It doesn't necessarily have to happen in this PR, but we should allow this hook to be conditional somehow. In this particular instance, we don't need to watch for resizing unless the user has specified to affordForDisplacement.

…n_page

kibanamachine · 2021-03-24T16:05:51Z

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

…n_page # Conflicts: # CHANGELOG.md # src-docs/src/views/bottom_bar/bottom_bar_example.js # src-docs/src/views/bottom_bar/playground.js

kibanamachine · 2021-03-29T21:59:57Z

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

chandlerprall

Handful of small asks + one question; substance of changes looks great!

src-docs/src/views/bottom_bar/bottom_bar_example.js

src-docs/src/views/home/home_view.js

src/components/page/page_template.tsx

Co-authored-by: Chandler Prall <[email protected]>

chandlerprall · 2021-03-31T14:48:13Z

PR for you, moving the role=main logic into EuiPageContent: cchaos#47

Moved role=main logic into EuiPageComponent

kibanamachine · 2021-03-31T15:49:22Z

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

…n_page

cchaos · 2021-03-31T16:31:48Z

I need help, because I'm really struggling to understand why this PR would mess up the EuiHeaderSectionItemButton's ref tests:

EuiHeaderSectionItemButton › ref › is the anchor element
    expect(jest.fn()).toHaveBeenCalledTimes(expected)
    Expected number of calls: 1
    Received number of calls: 3

kibanamachine · 2021-03-31T16:51:51Z

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

kibanamachine · 2021-03-31T18:04:23Z

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

cchaos · 2021-03-31T19:41:33Z

Jenkins, test this

kibanamachine · 2021-03-31T20:07:12Z

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

…n_page

kibanamachine · 2021-03-31T22:14:57Z

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

…n_page # Conflicts: # src-docs/src/views/page/page_example.js

kibanamachine · 2021-04-01T01:43:04Z

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

chandlerprall

Changes LGTM, pulled locally to test the template prop interaction with bottomBar/bottomBarProps

kibanamachine · 2021-04-01T16:01:29Z

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

cchaos added 11 commits March 16, 2021 17:39

WIP adding more props

cde54f9

Adding position and usePortal props

31f5749

Merge remote-tracking branch 'upstream/master' into feat/bottom_bar_i…

ffea7dd

…n_page

Restricted use of some props when position is fixed and moved positio…

21e9a53

…n style to JS

Fixing page header border depending on page body padding

d22a404

Adding bottomBar to EuiPageTemplate

61e3cd0

Adding EUiPageContentBody wrapper on bottom bar contents to align res…

860b627

…trictWidth

Change doc title to say page first

2451d7b

Adjusting bottomBar positioning attributes

ee31a48

Cleanup

48cb74b

Adding main roles

01c125c

cchaos added the breaking change label Mar 24, 2021

Cleanup

0c42e68

cchaos commented Mar 24, 2021

View reviewed changes

src-docs/src/views/app_view.js Show resolved Hide resolved

src-docs/src/views/home/home_view.js Show resolved Hide resolved

cchaos commented Mar 24, 2021

View reviewed changes

cchaos changed the title ~~Feat/bottom bar in page~~ [EuiPageLayout] Add bottomBar & [EuiBottomBar] Add more position props Mar 24, 2021

cchaos added 4 commits March 24, 2021 11:20

Merge remote-tracking branch 'upstream/master' into feat/bottom_bar_i…

ba40203

…n_page

cl

b2cfea6

Updating bottom bar playground

570f49c

Added note about page template in bottom bar docs

24c35d5

Merge remote-tracking branch 'upstream/master' into feat/bottom_bar_i…

9dd0fbd

…n_page # Conflicts: # CHANGELOG.md # src-docs/src/views/bottom_bar/bottom_bar_example.js # src-docs/src/views/bottom_bar/playground.js

cchaos requested a review from thompsongl March 30, 2021 15:22

chandlerprall suggested changes Mar 30, 2021

View reviewed changes

thompsongl removed their request for review March 30, 2021 17:52

cchaos and others added 3 commits March 30, 2021 14:07

Apply suggestions from code review

a56e91b

Co-authored-by: Chandler Prall <[email protected]>

Merge branch 'master' into feat/bottom_bar_in_page

d7e7120

Moved role=main logic into EuiPageComponent

8583d9d

Merge pull request #47 from chandlerprall/feat/bottom_bar_in_page

13c29cf

Moved role=main logic into EuiPageComponent

cchaos added 2 commits March 31, 2021 12:23

Merge remote-tracking branch 'upstream/master' into feat/bottom_bar_i…

16a9a5e

…n_page

Better extension of EuiPanel props in EuiPageContent and more tests

d8c9ac9

cchaos mentioned this pull request Mar 31, 2021

[Docs] Updates to the layout section (part 2) #4670

Merged

7 tasks

cchaos added 2 commits March 31, 2021 13:30

test

27544f3

Remove test and force CI?

20d412b

cchaos requested a review from chandlerprall March 31, 2021 17:36

cchaos added 2 commits March 31, 2021 13:37

cl

78305ea

cl

888b517

Merge remote-tracking branch 'upstream/master' into feat/bottom_bar_i…

ef38221

…n_page

cchaos added 2 commits March 31, 2021 19:06

Merge remote-tracking branch 'upstream/master' into feat/bottom_bar_i…

b22c06a

…n_page # Conflicts: # src-docs/src/views/page/page_example.js

Fixing a11y

6122476

chandlerprall approved these changes Apr 1, 2021

View reviewed changes

Remove footer element

9f26af0

chandlerprall merged commit a3eaf22 into elastic:master Apr 1, 2021

cchaos mentioned this pull request Apr 1, 2021

[EuiPanel] Fix selector for button element styling #4681

Merged

4 tasks

thompsongl mentioned this pull request Apr 7, 2021

Upgrade EUI to v32.0.4 elastic/kibana#96459

Merged

cchaos deleted the feat/bottom_bar_in_page branch May 11, 2021 19:52

This was referenced Mar 18, 2022

Eui Bottom Bar prysmex/ember-eui#108

Merged

Eui Modal prysmex/ember-eui#110

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiPageLayout] Add `bottomBar` & [EuiBottomBar] Add more position props #4662

[EuiPageLayout] Add `bottomBar` & [EuiBottomBar] Add more position props #4662

cchaos commented Mar 24, 2021 •

edited

Loading

kibanamachine commented Mar 24, 2021

cchaos Mar 24, 2021

kibanamachine commented Mar 24, 2021

kibanamachine commented Mar 29, 2021

chandlerprall left a comment

chandlerprall commented Mar 31, 2021

kibanamachine commented Mar 31, 2021

cchaos commented Mar 31, 2021

kibanamachine commented Mar 31, 2021

kibanamachine commented Mar 31, 2021

cchaos commented Mar 31, 2021

kibanamachine commented Mar 31, 2021

kibanamachine commented Mar 31, 2021

kibanamachine commented Apr 1, 2021

chandlerprall left a comment

kibanamachine commented Apr 1, 2021

		// TODO: Allow this hooke to be conditional
		const dimensions = useResizeObserver(resizeRef);

[EuiPageLayout] Add bottomBar & [EuiBottomBar] Add more position props #4662

[EuiPageLayout] Add bottomBar & [EuiBottomBar] Add more position props #4662

Conversation

cchaos commented Mar 24, 2021 • edited Loading

EuiBottomBar

EuiPageTemplate

Other updates

Checklist

kibanamachine commented Mar 24, 2021

cchaos Mar 24, 2021

Choose a reason for hiding this comment

kibanamachine commented Mar 24, 2021

kibanamachine commented Mar 29, 2021

chandlerprall left a comment

Choose a reason for hiding this comment

chandlerprall commented Mar 31, 2021

kibanamachine commented Mar 31, 2021

cchaos commented Mar 31, 2021

kibanamachine commented Mar 31, 2021

kibanamachine commented Mar 31, 2021

cchaos commented Mar 31, 2021

kibanamachine commented Mar 31, 2021

kibanamachine commented Mar 31, 2021

kibanamachine commented Apr 1, 2021

chandlerprall left a comment

Choose a reason for hiding this comment

kibanamachine commented Apr 1, 2021

[EuiPageLayout] Add `bottomBar` & [EuiBottomBar] Add more position props #4662

[EuiPageLayout] Add `bottomBar` & [EuiBottomBar] Add more position props #4662

cchaos commented Mar 24, 2021 •

edited

Loading