[EuiHeader] Stacked example #3538

cchaos · 2020-06-02T18:47:22Z

Part 2/3 for next iteration of K8 support; Fixes #3504

This PR is mostly a docs example as it does not add any new props. However it does contain a breaking change to the way the position="fixed" version handles adding body padding. Spoiler, it no longer does.

Rendered example:

Dark mode theme="dark" now renders slightly darker to create visual separation when they're stacked.

Breaking change

Before, when a consumer added position="fixed" it would add the euiBody--headerIsFixed body class and apply top padding styles. However, some consumers may want this and some may not, but there's no configuration option. And with the allowed stacked headers, EUI cannot know how many headers they are stacking.

So now it's on the now consumer to apply the appropriate padding and EUI provides both variables and mixins to help. The fixed header example was updated to describe this in description and snippet.

The stacked example provides a SASS snippet as well.

Known visual problem

In Amsterdam, the new flyout shadows extend top and bottom instead of just to the left of flyouts, so they will overlap any fixed headers. We can’t simply use z-index because of nesting (flyout lives inside of header DOM) and we’d still have issues if they used portals because the flyout would always come after. We may need a specific shadow for flyouts or use clip-mask.

I've added to list of Amsterdam bugs and will be fixed in a later PR.

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in IE11 and Firefox
[ ] Props have proper autodocs
Added documentation 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

kibanamachine · 2020-06-02T19:07:20Z

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

kibanamachine · 2020-06-02T22:20:00Z

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

snide

These are small quibbles and shouldn't be considered blockers for merge. I REALLY like the way you're demoing the fixed headers and my immediately want was to see this with the collapsable nav so we can see the fully completed death start.

I'd err towards the final patterns in your examples

It's good to show the flexibility of these components, but you might want to show the end result patterns as the examples, especially in the stacked view.

src-docs/src/components/guide_components.scss

src-docs/src/views/header/header_example.js

kibanamachine · 2020-06-03T18:14:09Z

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

snide

LGTM. Reasoning for holding for changes till the next PR makes sense to me.

kibanamachine · 2020-06-03T18:57:44Z

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

snide · 2020-06-03T19:49:31Z

@cchaos Does this PR fix #3504?

chandlerprall

Missing a word in the changelog, but otherwise LGTM!

chandlerprall · 2020-06-03T20:14:47Z

CHANGELOG.md


+**Breaking changes**
+
+- A fixed `EuiHeader` no longer automatically padding directly to the `<body>` element ([#3538](https://github.com/elastic/eui/pull/3538))


Suggested change

- A fixed `EuiHeader` no longer automatically padding directly to the `<body>` element ([#3538](https://github.com/elastic/eui/pull/3538))

- A fixed `EuiHeader` no longer automatically adds padding directly to the `<body>` element ([#3538](https://github.com/elastic/eui/pull/3538))

cchaos · 2020-06-03T20:16:42Z

@cchaos Does this PR fix #3504?

Cool, yeah I think so. It doesn't address any modal content, but I think that's just piecing other EUI components together. 🎉

kibanamachine · 2020-06-03T21:24:57Z

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

**Break**: EuiHeader now requires consumer to use mixin to apply padding to account for fixed position

- Darker in actual dark theme

…aders

Co-authored-by: Dave Snider <[email protected]>

kibanamachine · 2020-06-04T01:53:36Z

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

elizabetdev

LGTM! Tested locally and looked at the code.

timroes · 2020-06-07T21:46:10Z

@cchaos I think this PR sneaked in a couple of issues into the documentation.

You will then need to apply your own padding to this body class to afford for the header height. EUI supplies a helper mixin that also accounts for this height in flyouts and the collapsible nav. Simply add @mixin euiHeaderAffordForFixed; anywhere in your SASS.

I think this should be @include euiHeaderAffordForFixed; and not @mixin if you want to include it. Also it seems, you MUST add it into a body rule and not anywhere in your SASS, since the style of that mixin currently uses &.euiBody--headerIsFixed to set the padding.

Also I am having problems actually applying this without specifying the value (seems the default is not working):

@import '@elastic/eui/src/global_styling/variables';
@import '@elastic/eui/src/global_styling/mixins';

body {
  @include euiHeaderAffordForFixed;
}

results in the error:

SassError: Undefined variable: "$euiHeaderHeightCompensation".
        on line 1 of node_modules/@elastic/eui/src/global_styling/mixins/_header.scss, in mixin `euiHeaderAffordForFixed`
        from line 5 of src/app/header.scss
>> in euiHeaderAffordForFixed($headerHeight: $euiHeaderHeightCompensation) {

Do I need to import a specific other sass file to have this variable working or could this be an issue? Looking for the variable looks like it's only set in any of the global files (that we advice in the documentation to include) for the amsterdam theme, but not any other theme (and only local in the header component, which I assume another project should not directly import)?

cchaos · 2020-06-10T16:27:21Z

Good catch @timroes , thanks for this. I'll create an issue based on that and get them fixed.

cchaos added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Jun 2, 2020

cchaos requested review from chandlerprall and elizabetdev June 2, 2020 22:03

cchaos marked this pull request as ready for review June 2, 2020 22:03

snide added the priority label Jun 3, 2020

snide reviewed Jun 3, 2020

View reviewed changes

snide approved these changes Jun 3, 2020

View reviewed changes

chandlerprall approved these changes Jun 3, 2020

View reviewed changes

cchaos force-pushed the k8/double_header branch from cf2f3ec to ecac9d3 Compare June 3, 2020 20:47

cchaos and others added 11 commits June 3, 2020 21:20

Added stacked header example

e3bb178

**Break**: EuiHeader now requires consumer to use mixin to apply padding to account for fixed position

Adding header updates to test flyouts

9d027c9

Fix styles for dark theme

e60994a

- Darker in actual dark theme

Fix addition/removal of body classes when there are mulitple fixed he…

4014b7e

…aders

Cleanup

844e82e

cl

c79fc7d

Apply suggestions from code review

892afb2

Co-authored-by: Dave Snider <[email protected]>

Fixing shadows on flyouts.

d6dea9b

Change Fixed Header example and fixed separation of flyout and header

cab6a11

Last style fix

19c3cb1

Fix a11y

12005c0

cchaos force-pushed the k8/double_header branch from afb91ea to 12005c0 Compare June 4, 2020 01:31

cchaos added 2 commits June 3, 2020 21:32

cl

df32d1d

cl

fa68c36

elizabetdev approved these changes Jun 4, 2020

View reviewed changes

cchaos merged commit c134b58 into elastic:master Jun 4, 2020

cchaos deleted the k8/double_header branch June 4, 2020 14:42

cchaos mentioned this pull request Jun 10, 2020

[EuiHeader] Some SASS issues from latest PR #3589

Closed

thompsongl mentioned this pull request Jun 29, 2020

Upgrade EUI to v26.3.1 elastic/kibana#70243

Merged

cee-chen mentioned this pull request Oct 9, 2024

Navigation sidebar border-top disappears on dark theme #8067

Closed


		Breaking changes

		- A fixed `EuiHeader` no longer automatically padding directly to the `<body>` element ([#3538](https://github.com/elastic/eui/pull/3538))

[EuiHeader] Stacked example #3538

[EuiHeader] Stacked example #3538

Uh oh!

Conversation

cchaos commented Jun 2, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Part 2/3 for next iteration of K8 support; Fixes #3504

Rendered example:

Breaking change

Known visual problem

Checklist

Uh oh!

kibanamachine commented Jun 2, 2020

Uh oh!

kibanamachine commented Jun 2, 2020

Uh oh!

snide left a comment

Choose a reason for hiding this comment

I'd err towards the final patterns in your examples

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Jun 3, 2020

Uh oh!

snide left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jun 3, 2020

Uh oh!

snide commented Jun 3, 2020

Uh oh!

chandlerprall left a comment

Choose a reason for hiding this comment

Uh oh!

chandlerprall Jun 3, 2020

Choose a reason for hiding this comment

Uh oh!

cchaos commented Jun 3, 2020

Uh oh!

kibanamachine commented Jun 3, 2020

Uh oh!

kibanamachine commented Jun 4, 2020

Uh oh!

elizabetdev left a comment

Choose a reason for hiding this comment

Uh oh!

timroes commented Jun 7, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cchaos commented Jun 10, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

cchaos commented Jun 2, 2020 •

edited

Loading

timroes commented Jun 7, 2020 •

edited

Loading