Skip to content
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

Jump to bottom

[EuiCollapsibleNavBeta] Various API updates and cleanups #7228

Merged
merged 7 commits into from
Sep 27, 2023
Merged

[EuiCollapsibleNavBeta] Various API updates and cleanups #7228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c12fb27
Remove `isGroupTitle` API in favor of `renderItem`
cee-chen Sep 26, 2023
bc1e8a2
[kibana] Provide example of "grouped" API sitting on top of flatter E…
cee-chen Sep 26, 2023
4a741a3
[setup] Create DRY `EuiCollapsibleNavSubItems` component
cee-chen Sep 26, 2023
ee2c6e0
Create new beta EuiCollapsibleNavGroup subcomponent
cee-chen Sep 26, 2023
5152f08
[refactor] Add new body & footer components
cee-chen Sep 26, 2023
4b31809
[architecture] Export subcomponents with `.` namespacing
cee-chen Sep 26, 2023
c8598ae
[Kibana request] Remove scrolling/overflow hidden on baseline nav/flyout
cee-chen Sep 27, 2023
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
26 changes: 26 additions & 0 deletions src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiCollapsibleNavBody renders 1`] = `
<div
aria-label="aria-label"
class="euiFlyoutBody euiCollapsibleNav__body testClass1 testClass2 emotion-euiFlyoutBody-euiCollapsibleNav__body-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiFlyoutBody__overflow css-18yrfj9-noBanner"
tabindex="-1"
>
<div
class="euiFlyoutBody__overflowContent"
/>
</div>
</div>
`;

exports[`EuiCollapsibleNavFooter renders 1`] = `
<div
aria-label="aria-label"
class="euiFlyoutFooter euiCollapsibleNav__footer testClass1 testClass2 emotion-euiFlyoutFooter-euiCollapsibleNav__footer-euiTestCss"
data-test-subj="test subject string"
/>
`;
207 changes: 113 additions & 94 deletions src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ import type { Meta, StoryObj } from '@storybook/react';

import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '../header';
import { EuiPageTemplate } from '../page_template';
import { EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter } from '../flyout';
import { EuiFlyout } from '../flyout';
import { EuiButton } from '../button';
import { EuiTitle } from '../title';

import { EuiCollapsibleNavItem } from './collapsible_nav_item';
import {
EuiCollapsibleNavBeta,
EuiCollapsibleNavBetaProps,
} from './collapsible_nav_beta';
EuiCollapsibleNavItemProps,
} from './';

const meta: Meta<EuiCollapsibleNavBetaProps> = {
title: 'EuiCollapsibleNavBeta',
Expand Down Expand Up @@ -58,12 +59,41 @@ const OpenCollapsibleNav: FunctionComponent<
);
};

const renderGroup = (
groupTitle: string,
groupItems: EuiCollapsibleNavItemProps[]
) => {
return [
{
renderItem: () => (
<EuiTitle
size="xxxs"
className="eui-textTruncate"
css={({ euiTheme }) => ({
marginTop: euiTheme.size.base,
paddingBlock: euiTheme.size.xs,
paddingInline: euiTheme.size.s,
})}
>
<div>{groupTitle}</div>
</EuiTitle>
),
},
...groupItems,
];
};

export const KibanaExample: Story = {
render: ({ ...args }) => (
<OpenCollapsibleNav {...args}>
<EuiFlyoutBody scrollableTabIndex={-1}>
<EuiCollapsibleNavItem title="Home" icon="home" isSelected href="#" />
<EuiCollapsibleNavItem
<EuiCollapsibleNavBeta.Body>
<EuiCollapsibleNavBeta.Item
title="Home"
icon="home"
isSelected
href="#"
/>
<EuiCollapsibleNavBeta.Item
title="Recent"
icon="clock"
items={[
Expand All @@ -72,25 +102,26 @@ export const KibanaExample: Story = {
{ title: 'Ultricies tellus', icon: 'visMetric', href: '#' },
]}
/>
<EuiCollapsibleNavItem
<EuiCollapsibleNavBeta.Item
title="Elasticsearch"
icon="logoElasticsearch"
href="#"
items={[
{ title: 'Get started', href: '#' },
{ title: 'Explore', isGroupTitle: true },
{ title: 'Discover', href: '#' },
{ title: 'Dashboards', href: '#' },
{ title: 'Visualize library', href: '#' },
{ title: 'Content', isGroupTitle: true },
{ title: 'Indices', href: '#' },
{ title: 'Transforms', href: '#' },
{ title: 'Indexing API', href: '#' },
{ title: 'Security', isGroupTitle: true },
{ title: 'API keys', href: '#' },
...renderGroup('Explore', [
{ title: 'Discover', href: '#' },
{ title: 'Dashboards', href: '#' },
{ title: 'Visualize library', href: '#' },
]),
...renderGroup('Content', [
{ title: 'Indices', href: '#' },
{ title: 'Transforms', href: '#' },
{ title: 'Indexing API', href: '#' },
]),
...renderGroup('Security', [{ title: 'API keys', href: '#' }]),
]}
/>
<EuiCollapsibleNavItem
<EuiCollapsibleNavBeta.Item
title="Enterprise Search"
icon="logoEnterpriseSearch"
href="#"
Expand All @@ -106,7 +137,7 @@ export const KibanaExample: Story = {
{ title: 'Search experiences', href: '#' },
]}
/>
<EuiCollapsibleNavItem
<EuiCollapsibleNavBeta.Item
title="Observability"
icon="logoObservability"
href="#"
Expand All @@ -115,34 +146,36 @@ export const KibanaExample: Story = {
{ title: 'Alerts', href: '#' },
{ title: 'Cases', href: '#' },
{ title: 'SLOs', href: '#' },
{ title: 'Signals', isGroupTitle: true },
{ title: 'Logs', href: '#' },
{
title: 'Tracing',
href: '#',
items: [
{ title: 'Services', href: '#' },
{ title: 'Traces', href: '#' },
{ title: 'Dependencies', href: '#' },
],
},
{ title: 'Toolbox', isGroupTitle: true },
{ title: 'Visualize library', href: '#' },
{ title: 'Dashboards', href: '#' },
{
title: 'AIOps',
href: '#',
items: [
{ title: 'Anomaly detection', href: '#' },
{ title: 'Spike analysis', href: '#' },
{ title: 'Change point detection', href: '#' },
{ title: 'Notifications', href: '#' },
],
},
{ title: 'Add data', href: '#' },
...renderGroup('Signals', [
{ title: 'Logs', href: '#' },
{
title: 'Tracing',
href: '#',
items: [
{ title: 'Services', href: '#' },
{ title: 'Traces', href: '#' },
{ title: 'Dependencies', href: '#' },
],
},
]),
...renderGroup('Toolbox', [
{ title: 'Visualize library', href: '#' },
{ title: 'Dashboards', href: '#' },
{
title: 'AIOps',
href: '#',
items: [
{ title: 'Anomaly detection', href: '#' },
{ title: 'Spike analysis', href: '#' },
{ title: 'Change point detection', href: '#' },
{ title: 'Notifications', href: '#' },
],
},
{ title: 'Add data', href: '#' },
]),
]}
/>
<EuiCollapsibleNavItem
<EuiCollapsibleNavBeta.Item
title="Security"
icon="logoSecurity"
href="#"
Expand Down Expand Up @@ -199,7 +232,7 @@ export const KibanaExample: Story = {
},
]}
/>
<EuiCollapsibleNavItem
<EuiCollapsibleNavBeta.Item
title="Analytics"
icon="stats"
href="#"
Expand All @@ -209,33 +242,37 @@ export const KibanaExample: Story = {
{ title: 'Visualize library', href: '#' },
]}
/>
<EuiCollapsibleNavItem
<EuiCollapsibleNavBeta.Item
title="Machine learning"
icon="indexMapping"
href="#"
items={[
{ title: 'Overview', href: '#' },
{ title: 'Notifications', href: '#' },
{ title: 'Memory usage', href: '#' },
{ title: 'Anomaly detection', isGroupTitle: true },
{ title: 'Jobs', href: '#' },
{ title: 'Anomaly explorer', href: '#' },
{ title: 'Single metric viewer', href: '#' },
{ title: 'Settings', href: '#' },
{ title: 'Data frame analytics', isGroupTitle: true },
{ title: 'Jobs', href: '#' },
{ title: 'Results explorer', href: '#' },
{ title: 'Analytics map', href: '#' },
{ title: 'Model management', isGroupTitle: true },
{ title: 'Trained models', href: '#' },
{ title: 'Data visualizer', isGroupTitle: true },
{ title: 'File', href: '#' },
{ title: 'Data view', href: '#' },
...renderGroup('Anomaly detection', [
{ title: 'Jobs', href: '#' },
{ title: 'Anomaly explorer', href: '#' },
{ title: 'Single metric viewer', href: '#' },
{ title: 'Settings', href: '#' },
]),
...renderGroup('Data frame analytics', [
{ title: 'Jobs', href: '#' },
{ title: 'Results explorer', href: '#' },
{ title: 'Analytics map', href: '#' },
]),
...renderGroup('Model management', [
{ title: 'Trained models', href: '#' },
]),
...renderGroup('Data visualizer', [
{ title: 'File', href: '#' },
{ title: 'Data view', href: '#' },
]),
]}
/>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiCollapsibleNavItem
</EuiCollapsibleNavBeta.Body>
<EuiCollapsibleNavBeta.Footer>
<EuiCollapsibleNavBeta.Item
title="Developer tools"
icon="editorCodeBlock"
href="#"
Expand All @@ -246,7 +283,7 @@ export const KibanaExample: Story = {
{ title: 'Painless lab', href: '#' },
]}
/>
<EuiCollapsibleNavItem
<EuiCollapsibleNavBeta.Item
title="Management"
icon="gear"
items={[
Expand All @@ -257,7 +294,7 @@ export const KibanaExample: Story = {
{ title: 'Stack management', href: '#' },
]}
/>
<EuiCollapsibleNavItem
<EuiCollapsibleNavBeta.Item
title="Project settings"
icon="gear"
items={[
Expand All @@ -279,7 +316,7 @@ export const KibanaExample: Story = {
},
]}
/>
</EuiFlyoutFooter>
</EuiCollapsibleNavBeta.Footer>
</OpenCollapsibleNav>
),
};
Expand All @@ -288,28 +325,10 @@ export const KibanaExample: Story = {
export const SecurityExample: Story = {
render: ({ ...args }) => (
<OpenCollapsibleNav {...args}>
<EuiFlyoutBody scrollableTabIndex={-1}>
<EuiCollapsibleNavItem
title="Recent"
icon="clock"
items={[
{ title: 'Lorem ipsum', icon: 'visMapRegion', href: '#' },
{ title: 'Consectetur cursus', icon: 'visPie', href: '#' },
{ title: 'Ultricies tellus', icon: 'visMetric', href: '#' },
]}
/>
<EuiCollapsibleNavItem
isSelected
<EuiCollapsibleNavBeta.Body>
<EuiCollapsibleNavBeta.Group
title="Security"
icon="logoSecurity"
href="#"
// Workaround to always display this section as open and remove the accordion toggle
// Rather than baking in a top-level prop to support this behavior, this is likely
// the path we'd recommend to Security instead if their use-case isn't standard
accordionProps={{
forceState: 'open',
arrowProps: { css: { display: 'none' } },
}}
items={[
{ title: 'Get started', href: '#' },
{ title: 'Dashboards', href: '#' },
Expand Down Expand Up @@ -363,14 +382,14 @@ export const SecurityExample: Story = {
},
]}
/>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiCollapsibleNavItem
</EuiCollapsibleNavBeta.Body>
<EuiCollapsibleNavBeta.Footer>
<EuiCollapsibleNavBeta.Item
title="Developer tools"
icon="editorCodeBlock"
href="#"
/>
<EuiCollapsibleNavItem
<EuiCollapsibleNavBeta.Item
title="Project settings"
icon="gear"
items={[
Expand All @@ -392,7 +411,7 @@ export const SecurityExample: Story = {
},
]}
/>
</EuiFlyoutFooter>
</EuiCollapsibleNavBeta.Footer>
</OpenCollapsibleNav>
),
};
Expand Down Expand Up @@ -423,10 +442,10 @@ const MockConsumerFlyout: FunctionComponent = () => {
</EuiButton>
{flyoutIsOpen && (
<EuiFlyout onClose={() => setFlyoutOpen(false)}>
<EuiFlyoutBody>
<EuiCollapsibleNavBeta.Body>
Some other mock consumer flyout that <strong>should</strong> overlap
EuiCollapsibleNav
</EuiFlyoutBody>
</EuiCollapsibleNavBeta.Body>
</EuiFlyout>
)}
</>
Expand Down
Loading
Loading