From d3228be4dd503167936ab2024603d5176eef5907 Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Tue, 11 Feb 2025 17:14:40 -0700 Subject: [PATCH 1/8] NavItem title should be optional --- .../collapsible_nav_group.tsx | 20 ++++---- .../collapsible_nav_item.tsx | 49 ++++++++++--------- 2 files changed, 38 insertions(+), 31 deletions(-) diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx index 73aad3be6fa..5195c7130d4 100644 --- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx +++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx @@ -23,7 +23,7 @@ import { EuiCollapsibleNavLink } from './collapsible_nav_link'; type EuiCollapsibleNavGroupProps = _SharedEuiCollapsibleNavItemProps & _EuiCollapsibleNavItemDisplayProps & Required> & { - header: ReactNode; + header?: ReactNode; }; /** @@ -61,14 +61,16 @@ export const EuiCollapsibleNavGroup: FunctionComponent< return (
- - {header} - + {header ? ( + + {header} + + ) : null} & isSelected?: boolean; }; -export type EuiCollapsibleNavItemProps = _SharedEuiCollapsibleNavItemProps & { - /** - * Required text to render as the nav item title - */ - title: string; - /** - * Allows customizing the title element. - * Consider using a heading element for better accessibility. - * Defaults to an unsemantic `span` or `div`, depending on context. - */ - titleElement?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div'; - /** - * Optional icon to render to the left of title content - */ - icon?: IconType; - /** - * Optional props to pass to the title icon - */ - iconProps?: Partial; -} & ExclusiveUnion< +export type EuiCollapsibleNavItemProps = _SharedEuiCollapsibleNavItemProps & + ExclusiveUnion< + { + /** + * Required text to render as the nav item title + */ + title: string; + /** + * Allows customizing the title element. + * Consider using a heading element for better accessibility. + * Defaults to an unsemantic `span` or `div`, depending on context. + */ + titleElement?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div'; + /** + * Optional icon to render to the left of title content + */ + icon?: IconType; + /** + * Optional props to pass to the title icon + */ + iconProps?: Partial; + }, + {} + > & + ExclusiveUnion< { /** * The nav item link. @@ -150,7 +155,7 @@ const EuiCollapsibleNavItemDisplay: FunctionComponent< children, // Ensure children isn't spread ...props }) => { - const headerContent = ( + const headerContent = title != null && ( Date: Tue, 11 Feb 2025 16:25:38 -0700 Subject: [PATCH 2/8] Padding of sub-sub items --- .../collapsible_nav_item/collapsible_nav_item.styles.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts index 73e3fb46728..696cd4e4033 100644 --- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts +++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts @@ -61,8 +61,11 @@ export const euiCollapsibleNavSubItemsStyles = ({ euiTheme }: UseEuiTheme) => { `, isSubItem: css` ${logicalCSS('border-left', euiTheme.border.thin)} - ${logicalCSS('margin-left', euiTheme.size.s)} - ${logicalCSS( + ${logicalCSS( + 'margin-left', + mathWithUnits([euiTheme.size.xs], (x) => x * 4) + )} + ${logicalCSS( 'padding-left', mathWithUnits( [euiTheme.size.s, euiTheme.border.width.thin], From 8af19c955c1fa3d730afedf0229d20f836ce1203 Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Wed, 12 Feb 2025 13:49:55 -0700 Subject: [PATCH 3/8] if there is a single section, use no left padding for items in that section --- .../collapsible_nav_item.styles.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts index 696cd4e4033..362132df7e5 100644 --- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts +++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts @@ -80,14 +80,16 @@ export const euiCollapsibleNavSubItemsStyles = ({ euiTheme }: UseEuiTheme) => { * Top-level item only styles */ -export const euiCollapsibleNavTopItemStyles = ({ euiTheme }: UseEuiTheme) => { +export const euiCollapsibleNavTopItemStyles = ({ + euiTheme: _euiTheme, +}: UseEuiTheme) => { return { - // If this is the only top-level item in the list, assume it's a solution nav and - // reduce its default left padding + increase its relative icon size + // If this is the only top-level item in the list, assume the nav is showing a single solution and + // use no left padding + increase its relative icon size euiCollapsibleNavTopItem: css` &:only-child { .euiCollapsibleNavItem__items { - ${logicalCSS('padding-left', euiTheme.size.s)} + ${logicalCSS('padding-left', 0)} } .euiCollapsibleNavItem__icon { From 5c49071279f3a2f913dd5ca2860b6654231f4bd8 Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Tue, 18 Feb 2025 14:57:37 -0700 Subject: [PATCH 4/8] Turn off text truncation for nav item --- .../collapsible_nav_item/collapsible_nav_item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx index 6775a4c8a22..b500d38ff00 100644 --- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx +++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx @@ -227,7 +227,7 @@ export const EuiCollapsibleNavItemTitle: FunctionComponent< )} {title} From 31c0bd1f822b9406c997769af0c126b79c444c38 Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Tue, 11 Feb 2025 16:11:45 -0700 Subject: [PATCH 5/8] Update EuiCollapsibleNavBeta Playground storybook --- .../collapsible_nav_beta.stories.tsx | 115 ++++++++++-------- 1 file changed, 67 insertions(+), 48 deletions(-) diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx index 6251789c2cd..0f6c27ac4da 100644 --- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx +++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx @@ -26,6 +26,7 @@ import { EuiCollapsibleNavBetaProps, EuiCollapsibleNavItemProps, } from './'; +import { EuiSpacer } from '../spacer'; const meta: Meta = { title: 'Navigation/EuiCollapsibleNav (beta)/EuiCollapsibleNavBeta', @@ -71,13 +72,15 @@ const renderGroup = ( groupItems: EuiCollapsibleNavItemProps[] ) => { return [ + { + renderItem: () => , + }, { renderItem: () => ( ({ - marginTop: euiTheme.size.base, paddingBlock: euiTheme.size.xs, paddingInline: euiTheme.size.s, })} @@ -90,6 +93,15 @@ const renderGroup = ( ]; }; +const renderSection = (groupItems: EuiCollapsibleNavItemProps[]) => { + return [ + { + renderItem: () => , + }, + ...groupItems, + ]; +}; + export const Playground: Story = { render: ({ ...args }) => ( @@ -99,17 +111,19 @@ export const Playground: Story = { icon="logoElasticsearch" isCollapsible={false} items={[ - { title: 'Get started', href: '#' }, + { title: 'Get started', href: '#', icon: 'launch' }, ...renderGroup('Explore', [ { title: 'Discover', onClick: () => action('Discover')('clicked!'), + icon: 'iInCircle', }, - { title: 'Dashboards', href: '#' }, - { title: 'Visualize library', href: '#' }, + { title: 'Dashboards', href: '#', icon: 'iInCircle' }, + { title: 'Visualize library', href: '#', icon: 'iInCircle' }, ]), { title: 'Machine learning', + icon: 'iInCircle', items: [ { title: 'Anomaly detection', href: '#' }, { title: 'Data frame analytics', href: '#' }, @@ -129,63 +143,68 @@ export const Playground: Story = { ), }, + ...renderSection([ + { + title: 'Standalone item with long name', + href: '#', + icon: 'iInCircle', + }, + ]), ...renderGroup('Content', [ - { title: 'Indices', href: '#' }, - { title: 'Transforms', href: '#' }, - { title: 'Indexing API', href: '#' }, + { title: 'Indices', href: '#', icon: 'iInCircle' }, + { title: 'Transforms', href: '#', icon: 'iInCircle' }, + { title: 'Indexing API', href: '#', icon: 'iInCircle' }, + ]), + ...renderGroup('Security', [ + { title: 'API keys', href: '#', icon: 'gear' }, ]), - ...renderGroup('Security', [{ title: 'API keys', href: '#' }]), ]} /> - - From 0b612f8d4862fd187d85828ddabbef2d9aed4cea Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Tue, 18 Feb 2025 15:02:03 -0700 Subject: [PATCH 6/8] update test snapshots --- .../collapsible_nav_kibana_solution.test.tsx.snap | 2 +- .../__snapshots__/collapsible_nav_accordion.test.tsx.snap | 4 ++-- .../__snapshots__/collapsible_nav_group.test.tsx.snap | 4 ++-- .../__snapshots__/collapsible_nav_item.test.tsx.snap | 8 ++++---- .../__snapshots__/collapsed_nav_popover.test.tsx.snap | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap index f55129006bb..1768975a1c4 100644 --- a/packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap +++ b/packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap @@ -168,7 +168,7 @@ exports[`KibanaCollapsibleNavSolution renders with a solution switcher 1`] = ` class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem" > Some navigation link diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap index fff981ec06d..9fc5c4ea218 100644 --- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap +++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap @@ -58,7 +58,7 @@ exports[`EuiCollapsibleNavAccordion renders as a sub item 1`] = ` class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem" > sub item @@ -129,7 +129,7 @@ exports[`EuiCollapsibleNavAccordion renders as a top level item 1`] = ` class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem" > sub item diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_group.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_group.test.tsx.snap index 1cd58f934fb..c82a95950e7 100644 --- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_group.test.tsx.snap +++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_group.test.tsx.snap @@ -19,7 +19,7 @@ exports[`EuiCollapsibleNavGroup renders as a sub item 1`] = ` class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem" > sub item @@ -49,7 +49,7 @@ exports[`EuiCollapsibleNavGroup renders as a top level item 1`] = ` class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem" > sub item diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap index 9da7f91ea2d..5016453c851 100644 --- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap +++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap @@ -45,7 +45,7 @@ exports[`EuiCollapsibleNavItem renders a top level accordion if items exist 1`] class="euiCollapsibleNavLink emotion-euiCollapsibleNavLink-isTopItem" > Item @@ -88,7 +88,7 @@ exports[`EuiCollapsibleNavItem renders a top level accordion if items exist 1`] data-test-subj="test subject string" > Sub-item @@ -110,7 +110,7 @@ exports[`EuiCollapsibleNavItem renders a top level group if items exist and \`is id="generated-id" > Item @@ -126,7 +126,7 @@ exports[`EuiCollapsibleNavItem renders a top level group if items exist and \`is data-test-subj="test subject string" > Sub-item diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap index 6fc0081a4bd..e1a09a563dd 100644 --- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap +++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap @@ -81,7 +81,7 @@ exports[`EuiCollapsedNavPopover renders 1`] = ` rel="noreferrer" > Sub-item A @@ -93,7 +93,7 @@ exports[`EuiCollapsedNavPopover renders 1`] = ` rel="noreferrer" > Sub-item B From 97a9fae22dfe08c25bda9eeb77e0bf5bf8ed1d4e Mon Sep 17 00:00:00 2001 From: Timothy Sullivan Date: Tue, 18 Feb 2025 15:11:52 -0700 Subject: [PATCH 7/8] update changelog --- packages/eui/changelogs/CHANGELOG_2025.md | 1 + packages/eui/changelogs/upcoming/8332.md | 4 ++++ 2 files changed, 5 insertions(+) create mode 100644 packages/eui/changelogs/upcoming/8332.md diff --git a/packages/eui/changelogs/CHANGELOG_2025.md b/packages/eui/changelogs/CHANGELOG_2025.md index fc377ebf5e7..024f556ed4b 100644 --- a/packages/eui/changelogs/CHANGELOG_2025.md +++ b/packages/eui/changelogs/CHANGELOG_2025.md @@ -3,6 +3,7 @@ - Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. ([#8271](https://github.com/elastic/eui/pull/8271)) - Added `plugs` and `web` glyphs to `EuiIcon` ([#8285](https://github.com/elastic/eui/pull/8285)) - Update `title` on `EuiColorPalettePickerPaletteProps` to be optional ([#8289](https://github.com/elastic/eui/pull/8289)) +- Minor design updates to `EuiCollapsibleNavBeta` ([#8332](https://github.com/elastic/eui/pull/8332)) **Bug fixes** diff --git a/packages/eui/changelogs/upcoming/8332.md b/packages/eui/changelogs/upcoming/8332.md new file mode 100644 index 00000000000..cd4efc1a504 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8332.md @@ -0,0 +1,4 @@ +- Minor design updates to `EuiCollapsibleNavBeta` + - Allow section without a title + - Second-level icons should be horizontally aligned with the top-level icon + - Turn off text truncation for nav items From 45ed35d9c5f983b4f8874e6e03786d3467484f9e Mon Sep 17 00:00:00 2001 From: Tomasz Kajtoch Date: Tue, 25 Feb 2025 14:36:49 +0100 Subject: [PATCH 8/8] Update packages/eui/changelogs/CHANGELOG_2025.md --- packages/eui/changelogs/CHANGELOG_2025.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/eui/changelogs/CHANGELOG_2025.md b/packages/eui/changelogs/CHANGELOG_2025.md index 4c9b792c8cb..da0ed30ce06 100644 --- a/packages/eui/changelogs/CHANGELOG_2025.md +++ b/packages/eui/changelogs/CHANGELOG_2025.md @@ -17,7 +17,6 @@ - Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. ([#8271](https://github.com/elastic/eui/pull/8271)) - Added `plugs` and `web` glyphs to `EuiIcon` ([#8285](https://github.com/elastic/eui/pull/8285)) - Update `title` on `EuiColorPalettePickerPaletteProps` to be optional ([#8289](https://github.com/elastic/eui/pull/8289)) -- Minor design updates to `EuiCollapsibleNavBeta` ([#8332](https://github.com/elastic/eui/pull/8332)) **Bug fixes**