Skip to content

Commit

Permalink
[8.x] [TopNav] Ability for menu items to collapse into popover at cus…
Browse files Browse the repository at this point in the history
…tom breakpoints (#195820) (#197269)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[TopNav] Ability for menu items to collapse into popover at custom
breakpoints (#195820)](#195820)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Tim
Sullivan","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-22T15:04:09Z","message":"[TopNav]
Ability for menu items to collapse into popover at custom breakpoints
(#195820)\n\n## Summary\r\n\r\nCloses #154414\r\n\r\nAllows
customization of `popoverBreakpoints` that are passed
to\r\n`EuiHeaderLinks`.
See\r\nhttps://eui.elastic.co/#/layout/header#header-links\r\n\r\nBEFORE\r\n\r\n\r\n![before-bldx7lhzrxkzrxkyzr](https://github.com/user-attachments/assets/798836b1-f254-4f11-bda4-803caf0e02e5)\r\n\r\nAFTER\r\n\r\n\r\n![after-bldx7lhzrxkzrxkyzr](https://github.com/user-attachments/assets/c227746b-00b0-4a41-9982-00b7cfb7e084)\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] This
renders correctly on smaller devices using a responsive\r\nlayout. (You
can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"a5e49e63eaab60d44b3c455b790e59931bc5a067","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:version","v8.17.0"],"title":"[TopNav]
Ability for menu items to collapse into popover at custom
breakpoints","number":195820,"url":"https://github.com/elastic/kibana/pull/195820","mergeCommit":{"message":"[TopNav]
Ability for menu items to collapse into popover at custom breakpoints
(#195820)\n\n## Summary\r\n\r\nCloses #154414\r\n\r\nAllows
customization of `popoverBreakpoints` that are passed
to\r\n`EuiHeaderLinks`.
See\r\nhttps://eui.elastic.co/#/layout/header#header-links\r\n\r\nBEFORE\r\n\r\n\r\n![before-bldx7lhzrxkzrxkyzr](https://github.com/user-attachments/assets/798836b1-f254-4f11-bda4-803caf0e02e5)\r\n\r\nAFTER\r\n\r\n\r\n![after-bldx7lhzrxkzrxkyzr](https://github.com/user-attachments/assets/c227746b-00b0-4a41-9982-00b7cfb7e084)\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] This
renders correctly on smaller devices using a responsive\r\nlayout. (You
can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"a5e49e63eaab60d44b3c455b790e59931bc5a067"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195820","number":195820,"mergeCommit":{"message":"[TopNav]
Ability for menu items to collapse into popover at custom breakpoints
(#195820)\n\n## Summary\r\n\r\nCloses #154414\r\n\r\nAllows
customization of `popoverBreakpoints` that are passed
to\r\n`EuiHeaderLinks`.
See\r\nhttps://eui.elastic.co/#/layout/header#header-links\r\n\r\nBEFORE\r\n\r\n\r\n![before-bldx7lhzrxkzrxkyzr](https://github.com/user-attachments/assets/798836b1-f254-4f11-bda4-803caf0e02e5)\r\n\r\nAFTER\r\n\r\n\r\n![after-bldx7lhzrxkzrxkyzr](https://github.com/user-attachments/assets/c227746b-00b0-4a41-9982-00b7cfb7e084)\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] This
renders correctly on smaller devices using a responsive\r\nlayout. (You
can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"a5e49e63eaab60d44b3c455b790e59931bc5a067"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Tim Sullivan <[email protected]>
  • Loading branch information
kibanamachine and tsullivan authored Oct 22, 2024
1 parent bb09eb3 commit 259ab11
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 13 deletions.
26 changes: 19 additions & 7 deletions src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@
import React, { ReactElement } from 'react';
import classNames from 'classnames';

import { MountPoint } from '@kbn/core/public';
import type { MountPoint } from '@kbn/core/public';
import { MountPointPortal } from '@kbn/react-kibana-mount';
import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
import { StatefulSearchBarProps } from '@kbn/unified-search-plugin/public';
import { AggregateQuery, Query } from '@kbn/es-query';
import { TopNavMenuData } from './top_nav_menu_data';
import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
import type { StatefulSearchBarProps } from '@kbn/unified-search-plugin/public';
import type { AggregateQuery, Query } from '@kbn/es-query';
import type { EuiBreakpointSize } from '@elastic/eui';
import type { TopNavMenuData } from './top_nav_menu_data';
import { TopNavMenuItems } from './top_nav_menu_items';
import { TopNavMenuBadgeProps, TopNavMenuBadges } from './top_nav_menu_badges';
import { type TopNavMenuBadgeProps, TopNavMenuBadges } from './top_nav_menu_badges';

export type TopNavMenuProps<QT extends Query | AggregateQuery = Query> = Omit<
StatefulSearchBarProps<QT>,
Expand Down Expand Up @@ -51,6 +52,11 @@ export type TopNavMenuProps<QT extends Query | AggregateQuery = Query> = Omit<
* ```
*/
setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;

/**
* A list of named breakpoints at which to show the popover version. If not provided, it will use the default set of ['xs', 's'] that is internally provided by EUI.
*/
popoverBreakpoints?: EuiBreakpointSize[];
};

/*
Expand All @@ -76,7 +82,13 @@ export function TopNavMenu<QT extends AggregateQuery | Query = Query>(
}

function renderMenu(className: string): ReactElement | null {
return <TopNavMenuItems config={config} className={className} />;
return (
<TopNavMenuItems
config={config}
className={className}
popoverBreakpoints={props.popoverBreakpoints}
/>
);
}

function renderSearchBar(): ReactElement | null {
Expand Down
21 changes: 15 additions & 6 deletions src/plugins/navigation/public/top_nav_menu/top_nav_menu_items.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,30 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { EuiHeaderLinks } from '@elastic/eui';
import { EuiBreakpointSize, EuiHeaderLinks } from '@elastic/eui';
import React from 'react';
import type { TopNavMenuData } from './top_nav_menu_data';
import { TopNavMenuItem } from './top_nav_menu_item';

interface TopNavMenuItemsProps {
config: TopNavMenuData[] | undefined;
className?: string;
popoverBreakpoints?: EuiBreakpointSize[];
}

export const TopNavMenuItems = ({
config,
className,
}: {
config: TopNavMenuData[] | undefined;
className?: string;
}) => {
popoverBreakpoints,
}: TopNavMenuItemsProps) => {
if (!config || config.length === 0) return null;
return (
<EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
<EuiHeaderLinks
data-test-subj="top-nav"
gutterSize="xs"
className={className}
popoverBreakpoints={popoverBreakpoints}
>
{config.map((menuItem: TopNavMenuData, i: number) => {
return <TopNavMenuItem key={`nav-menu-${i}`} {...menuItem} />;
})}
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1071,6 +1071,7 @@ export const LensTopNavMenu = ({
return (
<AggregateQueryTopNavMenu
setMenuMountPoint={setHeaderActionMenu}
popoverBreakpoints={['xs', 's', 'm']}
config={topNavConfig}
saveQueryMenuVisibility={
application.capabilities.visualize.saveQuery
Expand Down

0 comments on commit 259ab11

Please sign in to comment.