Updates to EuiSelectableTemplateSitewide and some other fixes for the new header #4008

cchaos · 2020-09-04T16:29:10Z

Fixes #3988

Updates the text color of the search input when in the dark header to be more visible. The placeholder still shouldn't be too prominent, so it's only slightly lighter.

Fixes #3946

EuiHeaderSectionItemButton now accepts a boolean for notification and when set tp true will simply display a dot icon.

Handling of a "mobile" version of EuiSelectableTemplateSitewide

New props were added to the component for providing the ability to trigger the whole component with a separate button. This prop is called popoverButton. Which, when provided, will display this inline while putting the search component inside of the popover. It also adds popoverButtonMaxBreakpoint to allow setting a certain point as to when to stop using the popoverButton.

If neither are provided, it simply continues to display as before. Here is an example of it working in the header.

EuiHeaderLink colors

Prior to this PR, they would always render as text color for inactive and blue for active, but now consumers can pass any color that is accepted by EuiLink. This supports Kibana's use of moving the menu link to the header. The main reason for this is so that they can get the mobile version out-of-the-box.

EuiSelectable fix

The EuiSelectableList accidentally had it's showIcon prop removed during #3983. This adds that back in.

⚠️ Breaking changes

In the header example above, it was necessary to use the EuiHideFor and EuiShowFor components to move the display from the center items to the right side items in smaller windows. The original problem was that these components were simply hiding the elements with display: none but still causing them to render which duplicate a lot of code and can cause id & ref clashes.

Now that we have access to our breakpoints in JS, I've converted these components from using classes to simply rendering or not rendering their children based on the window width. This does now require children and may break instances of people using custom SASS breakpoints that override EUI's defaults. This shouldn't be the case in any of Elastic products, so I feel mostly safe there.

Also removes the display prop of EuiShowFor as we're no longer rendering a wrapping element.

--

I'm going to say that this PR closes out #3490 and #3489 in preference of opening up more specific issues that arise. 🎉
But all the bits should be in there and available by EUI.

Checklist

kibanamachine · 2020-09-04T16:51:38Z

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

src-docs/src/components/guide_section/guide_section.js

src/components/badge/notification_badge/badge_notification.tsx

src/components/responsive/show_for.test.tsx

kibanamachine · 2020-09-04T18:04:50Z

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

kibanamachine · 2020-09-04T20:37:58Z

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

kibanamachine · 2020-09-10T17:06:06Z

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

src/components/badge/notification_badge/badge_notification.tsx

src/components/header/header_links/_header_link.scss

src/components/responsive/show_for.test.tsx

kibanamachine · 2020-09-10T20:51:13Z

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

cchaos · 2020-09-10T22:20:27Z

@chandlerprall Sorry for the last minute change, but I think allowing the consumer to provide an array of breakpoints is better than just setting a cap because then they could be adjust for larger screens as well.

kibanamachine · 2020-09-10T22:43:24Z

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

cchaos · 2020-09-10T23:04:29Z

Jenkins, test this

kibanamachine · 2020-09-10T23:35:44Z

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

myasonik

Just some nits but nothing seems big or serious

(Just did a code review at this point, haven't rerun this since helping in a commit earlier)

src/components/header/header_section/header_section_item_button.tsx

src/components/responsive/hide_for.tsx

src/components/responsive/show_for.tsx

instead of relying on classes

…simply display a dot icon

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

…eakpoints`

kibanamachine · 2020-09-14T18:54:11Z

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

chandlerprall

Apart from pending comments/conversations @myasonik made, this LGTM!

kibanamachine · 2020-09-14T20:02:55Z

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

kibanamachine · 2020-09-14T20:46:39Z

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

cchaos added the breaking change label Sep 4, 2020

cchaos commented Sep 4, 2020

View reviewed changes

src-docs/src/components/guide_section/guide_section.js Show resolved Hide resolved

src/components/badge/notification_badge/badge_notification.tsx Outdated Show resolved Hide resolved

src/components/responsive/show_for.test.tsx Show resolved Hide resolved

cchaos marked this pull request as ready for review September 4, 2020 21:45

cchaos requested review from myasonik and chandlerprall September 4, 2020 21:45

chandlerprall suggested changes Sep 10, 2020

View reviewed changes

src/components/badge/notification_badge/badge_notification.tsx Outdated Show resolved Hide resolved

src/components/header/header_links/_header_link.scss Outdated Show resolved Hide resolved

src/components/responsive/show_for.test.tsx Show resolved Hide resolved

cchaos requested a review from chandlerprall September 10, 2020 20:09

cchaos force-pushed the k8_header/fixes branch from 68c605d to 64440cc Compare September 10, 2020 20:28

myasonik approved these changes Sep 11, 2020

View reviewed changes

cchaos and others added 12 commits September 14, 2020 11:57

Fix colors of search in dark header

f6630d3

Quick fix for spacing of non-header links in mobile header links list

d8be595

Allow consumers to override the color of header links

6ce6839

Added mobileToggle and mobileBreakpointMax

1347be9

Update global example

9d73e44

[Breaking] EuiHide/ShowFor will now render or not render

26a856d

instead of relying on classes

Fixing props and example for EuiHide/ShowFor

99d212a

[EuiHeaderSectionItemButton] Allowing notification to be true to …

f926223

…simply display a dot icon

Change mobile-specific naming to general popoverButton

0a75a41

Some fixes

a17b480

Fixes bugs with popover buttons

3c82bec

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

Move checks to after custom focus events

caf8d73

cchaos added 7 commits September 14, 2020 11:57

Fixing title and search input border-radius in dark header

41d3417

Fix bottom bar z-index

cfe8ecc

Fixes

75e06e4

Better tests

9ce8a59

cl

d4ec8ae

Changing popoverButtonMaxBreakpoint to an array of `popoverButtonBr…

901a2d0

…eakpoints`

Update aria-labels for header buttons with notification

c2fc811

cchaos force-pushed the k8_header/fixes branch from b697cba to c2fc811 Compare September 14, 2020 18:32

chandlerprall approved these changes Sep 14, 2020

View reviewed changes

Update src/components/responsive/hide_for.tsx

a25edb0

cchaos merged commit abd27b2 into elastic:master Sep 14, 2020

This was referenced Sep 14, 2020

Decrease EuiBottomBar z-index #4020

Closed

Create navigational/header search solution #3490

Closed

Create a stacked header solution #3489

Closed

ryankeairns mentioned this pull request Sep 15, 2020

Global search shows undefined in list item titles elastic/kibana#77449

Closed

myasonik mentioned this pull request Sep 16, 2020

[Global header] Review feedback and suggestions for small visual improvements elastic/kibana#77663

Closed

7 tasks

thompsongl mentioned this pull request Sep 17, 2020

Upgrade EUI to v29.0.0 elastic/kibana#77802

Merged

ryankeairns mentioned this pull request Sep 18, 2020

Use new header icon badge for newsfeed button elastic/kibana#77946

Merged

cchaos deleted the k8_header/fixes branch November 24, 2020 18:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updates to EuiSelectableTemplateSitewide and some other fixes for the new header #4008

Updates to EuiSelectableTemplateSitewide and some other fixes for the new header #4008

cchaos commented Sep 4, 2020 •

edited

Loading

kibanamachine commented Sep 4, 2020

kibanamachine commented Sep 4, 2020

kibanamachine commented Sep 4, 2020

kibanamachine commented Sep 10, 2020

kibanamachine commented Sep 10, 2020

cchaos commented Sep 10, 2020

kibanamachine commented Sep 10, 2020

cchaos commented Sep 10, 2020

kibanamachine commented Sep 10, 2020

myasonik left a comment •

edited

Loading

kibanamachine commented Sep 14, 2020

chandlerprall left a comment

kibanamachine commented Sep 14, 2020

kibanamachine commented Sep 14, 2020

Updates to EuiSelectableTemplateSitewide and some other fixes for the new header #4008

Updates to EuiSelectableTemplateSitewide and some other fixes for the new header #4008

Conversation

cchaos commented Sep 4, 2020 • edited Loading

Fixes #3988

Fixes #3946

Handling of a "mobile" version of EuiSelectableTemplateSitewide

EuiHeaderLink colors

EuiSelectable fix

⚠️ Breaking changes

Checklist

kibanamachine commented Sep 4, 2020

kibanamachine commented Sep 4, 2020

kibanamachine commented Sep 4, 2020

kibanamachine commented Sep 10, 2020

kibanamachine commented Sep 10, 2020

cchaos commented Sep 10, 2020

kibanamachine commented Sep 10, 2020

cchaos commented Sep 10, 2020

kibanamachine commented Sep 10, 2020

myasonik left a comment • edited Loading

Choose a reason for hiding this comment

kibanamachine commented Sep 14, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

kibanamachine commented Sep 14, 2020

kibanamachine commented Sep 14, 2020

cchaos commented Sep 4, 2020 •

edited

Loading

myasonik left a comment •

edited

Loading