Skip to content

Commit

Permalink
[EuiCollapsibleNavBeta] Various API updates and cleanups (#7228)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen authored Sep 27, 2023
1 parent e901c63 commit 507bd17
Show file tree
Hide file tree
Showing 24 changed files with 804 additions and 300 deletions.
26 changes: 26 additions & 0 deletions src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap
View file
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
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

0 comments on commit 507bd17

Please sign in to comment.