Skip to content

Reorganize footer items for Solutions #218050

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tsullivan merged 16 commits into from
May 2, 2025
Merged

Reorganize footer items for Solutions #218050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
ecd3f75
Footer structure & text casing fixes for Observability Soln
tsullivan Apr 15, 2025
e46f371
Footer structure fixes and text casing for Search Soln
tsullivan Apr 15, 2025
4afdbba
Footer structure and text casing fixes for Security Soln
tsullivan Apr 15, 2025
3908c0b
fix tests observability
tsullivan Apr 17, 2025
49679dc
functional test fix search
tsullivan Apr 17, 2025
9aa378e
functional test fixes ml/security_navigation
tsullivan Apr 17, 2025
f2355b1
Fix spacing of button and divider
tsullivan Apr 24, 2025
bc6964e
fix snapshot for new connectors link
tsullivan Apr 25, 2025
a4f4457
Merge branch 'main' into sidenav/footer-structure-fixes
tsullivan Apr 28, 2025
91a904c
Update security nav post-merge
tsullivan Apr 28, 2025
0227ec4
reorganize chat footer items
tsullivan Apr 28, 2025
7ccc255
fix casing of Machine Learning in nav
tsullivan Apr 28, 2025
3c212f6
Merge branch 'main' into sidenav/footer-structure-fixes
tsullivan Apr 30, 2025
3b25684
Fix active color of footer nav nodes
tsullivan Apr 30, 2025
702d41d
fix selected highlight color of footer items & accordions
tsullivan Apr 30, 2025
add6779
Merge branch 'main' into sidenav/footer-structure-fixes
tsullivan Apr 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 17 additions & 7 deletions ...hared-ux/chrome/navigation/src/ui/components/navigation_section/navigation_section_ui.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,19 @@ const sectionStyles = {
paddingBlock: euiTheme.size.xs,
paddingInline: euiTheme.size.s,
}),
euiCollapsibleNavItem: ({ euiTheme }: Theme) => css`
.euiAccordion__childWrapper {
transition: none; // Remove the transition as it does not play well with dynamic links added to the accordion
euiCollapsibleNavSection: ({ euiTheme }: Theme) => css`
.euiCollapsibleNavAccordion.isSelected {
.euiAccordion__triggerWrapper,
.euiCollapsibleNavLink {
background-color: ${euiTheme.colors.backgroundLightPrimary};
}
}

.euiAccordion__children .euiCollapsibleNavItem__items {
padding-inline-start: ${euiTheme.size.m};
margin-inline-start: ${euiTheme.size.m};
}

&:only-child .euiCollapsibleNavItem__icon {
transform: scale(1.33);
}
Expand All @@ -60,15 +65,19 @@ const sectionStyles = {
:hover {
background-color: ${euiTheme.colors.backgroundBaseInteractiveHover};
}

&.isSelected {
background-color: ${euiTheme.colors.backgroundLightPrimary};
:hover {
background-color: ${euiTheme.colors.backgroundLightPrimary};
}
}
}

`,
euiAccordionChildWrapper: ({ euiTheme }: Theme) => css`
.euiAccordion__childWrapper {
background-color: ${euiTheme.colors.backgroundBasePlain};
transition: none; // Remove the transition as it does not play well with dynamic links added to the accordion
}
`,
};
Expand Down Expand Up @@ -461,7 +470,8 @@ function nodeToEuiCollapsibleNavProps(
path,
isSelected,
onClick,
css: sectionStyles.euiCollapsibleNavSubItem,
css: [sectionStyles.euiCollapsibleNavSubItem, sectionStyles.euiAccordionChildWrapper],
className: classnames([isSelected ? 'isSelected' : undefined]),
icon: navNode.icon,
// @ts-expect-error title accepts JSX elements and they render correctly but the type definition expects a string
title: navNode.withBadge ? <SubItemTitle item={navNode} /> : navNode.title,
Expand Down Expand Up @@ -609,12 +619,12 @@ export const NavigationSectionUI: FC<Props> = React.memo(({ navNode: _navNode })
{items ? (
<EuiCollapsibleNavItem
{...rest}
css={sectionStyles.euiCollapsibleNavItem}
css={[sectionStyles.euiCollapsibleNavSection, sectionStyles.euiAccordionChildWrapper]}
items={items}
accordionProps={getAccordionProps(navNode.path)}
/>
) : (
<EuiCollapsibleNavItem {...props} css={sectionStyles.euiCollapsibleNavItem} />
<EuiCollapsibleNavItem {...props} css={sectionStyles.euiCollapsibleNavSection} />
)}
</div>
);
Expand Down
83 changes: 48 additions & 35 deletions src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,15 @@ const NavigationWrapper: FC<Props & Omit<Partial<EuiCollapsibleNavBetaProps>, 'c
{props.clickActionText ?? 'Click me'}
</EuiButton>
) : (
<p>Hello world</p>
<>
<h1>Solution side nav</h1>
<br />
<p>There should be multiple &quot;selected&quot; nodes in the side nav:</p>
<ul>
<li>* Item 03 &raquo; Item 22</li>
<li>* Footer parent 1 &raquo; Item 35</li>
</ul>
</>
)}
</EuiPageTemplate.Section>
</EuiPageTemplate>
Expand Down Expand Up @@ -456,49 +464,35 @@ const generalLayoutNavTree: NavigationTreeDefinitionUI = {
path: '',
children: [
{
id: 'footer-section5',
title: 'Parent item, closed',
id: 'footer-section6',
title: 'Footer parent 1',
path: '',
renderAs: 'accordion',
spaceBefore: null,
icon: 'iInCircle',
defaultIsCollapsed: false,
children: [
{
id: 'item29',
id: 'item33',
path: '',
title: 'Item 29',
title: 'Item 33',
href: '/app/kibana',
icon: 'iInCircle',
},
{
id: 'item30',
id: 'item34',
path: '',
title: 'Item 30',
title: 'Item 34',
href: '/app/kibana',
icon: 'iInCircle',
},
{
id: 'item31',
id: 'item35',
path: '',
title: 'Item 31',
title: 'Item 35',
href: '/app/kibana',
icon: 'iInCircle',
},
{
id: 'sub-accordion',
icon: 'iInCircle',
title: 'Sub-Accordion',
path: '',
renderAs: 'accordion',
children: [
{
id: 'sub1',
path: '',
title: 'Item 32',
href: '/app/kibana',
icon: 'iInCircle',
},
],
openInNewTab: true,
},
],
},
Expand All @@ -510,35 +504,49 @@ const generalLayoutNavTree: NavigationTreeDefinitionUI = {
href: '/app/kibana',
},
{
id: 'footer-section6',
title: 'Parent item, opened',
id: 'footer-section5',
title: 'Footer parent 2',
path: '',
renderAs: 'accordion',
spaceBefore: null,
icon: 'iInCircle',
defaultIsCollapsed: false,
children: [
{
id: 'item33',
id: 'item29',
path: '',
title: 'Item 33',
title: 'Item 29',
href: '/app/kibana',
icon: 'iInCircle',
},
{
id: 'item34',
id: 'item30',
path: '',
title: 'Item 34',
title: 'Item 30',
href: '/app/kibana',
icon: 'iInCircle',
},
{
id: 'item35',
id: 'item31',
path: '',
title: 'Item 35',
title: 'Item 31',
href: '/app/kibana',
icon: 'iInCircle',
openInNewTab: true,
},
{
id: 'sub-accordion',
icon: 'iInCircle',
title: 'Sub-Accordion',
path: '',
renderAs: 'accordion',
children: [
{
id: 'sub1',
path: '',
title: 'Item 32',
href: '/app/kibana',
icon: 'iInCircle',
},
],
},
],
},
Expand Down Expand Up @@ -585,6 +593,11 @@ export const GeneralLayoutStructure = (args: NavigationServices) => {
{ id: '', path: 'example_project.root-section1.item03.child-section4' },
{ id: '', path: 'example_project.root-section1.item03.child-section4.sub3' },
],
[
{ id: '', path: 'example_project_footer' },
{ id: '', path: 'example_project_footer.footer-section6' },
{ id: '', path: 'example_project_footer.footer-section6.item35' },
],
]);

return (
Expand Down
Loading