Skip to content

Commit 93ad1bf

Browse files
tsullivantsullivan
committed
Move changes into TODOs for next PR
1 parent af5f268 commit 93ad1bf

14 files changed

Lines changed: 496 additions & 623 deletions

‎packages/eui/src/components/flyout/flyout.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,5 +81,4 @@ export const EuiFlyout = forwardRef<
8181
isUnmanagedFlyout.current = true;
8282
return <EuiFlyoutComponent {...rest} onClose={onClose} as={as} ref={ref} />;
8383
});
84-
8584
EuiFlyout.displayName = 'EuiFlyout';

‎packages/eui/src/components/flyout/flyout_menu.stories.tsx‎

Lines changed: 72 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,64 +10,110 @@ import React, { useState } from 'react';
1010

1111
import { action } from '@storybook/addon-actions';
1212
import { Meta, StoryObj } from '@storybook/react';
13-
import { EuiButton } from '../button';
13+
import { EuiButton, EuiButtonEmpty, EuiButtonIcon } from '../button';
1414
import { EuiSpacer } from '../spacer';
1515
import { EuiText } from '../text';
1616
import { EuiFlyout } from './flyout';
1717
import { EuiFlyoutBody } from './flyout_body';
1818
import { EuiFlyoutMenu, EuiFlyoutMenuProps } from './flyout_menu';
19-
import { EuiFlyoutMenuContext } from './flyout_menu_context';
19+
import { EuiIcon } from '../icon';
20+
import { EuiPopover } from '../popover';
21+
import { EuiListGroup, EuiListGroupItem } from '../list_group';
2022

2123
interface Args extends EuiFlyoutMenuProps {
22-
showBackButton?: boolean;
24+
showBackButton: boolean;
2325
showCustomActions: boolean;
26+
showPopover: boolean;
2427
}
2528

2629
const meta: Meta<Args> = {
2730
title: 'Layout/EuiFlyout/EuiFlyoutMenu',
2831
component: EuiFlyoutMenu,
2932
argTypes: {
30-
'aria-label': { table: { disable: true } },
31-
backButtonProps: { table: { disable: true } },
32-
customActions: { table: { disable: true } },
33-
historyItems: { table: { disable: true } },
34-
showBackButton: { control: 'boolean' },
3533
showCustomActions: { control: 'boolean' },
34+
customActions: { table: { disable: true } },
35+
showPopover: { control: 'boolean' },
36+
backButton: { table: { disable: true } },
37+
popover: { table: { disable: true } },
3638
},
3739
args: {
40+
hideCloseButton: false,
3841
showBackButton: true,
3942
showCustomActions: true,
43+
showPopover: true,
4044
},
4145
};
4246

4347
export default meta;
4448

4549
const MenuBarFlyout = (args: Args) => {
46-
const { showCustomActions: showCustomAction, showBackButton } = args;
50+
const { showCustomActions, hideCloseButton, showBackButton, showPopover } =
51+
args;
4752

4853
const [isFlyoutOpen, setIsFlyoutOpen] = useState(true);
4954
const openFlyout = () => setIsFlyoutOpen(true);
5055
const closeFlyout = () => {
5156
setIsFlyoutOpen(false);
5257
};
5358

54-
const historyItems = ['First item', 'Second item', 'Third item'].map(
55-
(title) => ({
56-
title,
57-
onClick: () => {
58-
action('history item')(`${title} clicked`);
59-
},
60-
})
59+
/* Back button */
60+
61+
// TODO: back button should be internalized in EuiFlyoutMenu when historyItems are passed
62+
const backButton = (
63+
<EuiButtonEmpty size="xs" color="text">
64+
<EuiIcon type="editorUndo" /> Back
65+
</EuiButtonEmpty>
66+
);
67+
68+
/* History popover */
69+
70+
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
71+
const handlePopoverButtonClick = () => {
72+
setIsPopoverOpen(!isPopoverOpen);
73+
};
74+
75+
const historyItems = [
76+
{ config: { mainTitle: 'First item' } },
77+
{ config: { mainTitle: 'Second item' } },
78+
{ config: { mainTitle: 'Third item' } },
79+
];
80+
81+
// TODO: history popover should be internalized in EuiFlyoutMenu when historyItems are passed
82+
const historyPopover = (
83+
<EuiPopover
84+
button={
85+
<EuiButtonIcon iconType="arrowDown" color="text" aria-label="History" />
86+
}
87+
isOpen={isPopoverOpen}
88+
onClick={handlePopoverButtonClick}
89+
closePopover={() => setIsPopoverOpen(false)}
90+
panelPaddingSize="xs"
91+
anchorPosition="downLeft"
92+
>
93+
<EuiListGroup gutterSize="none">
94+
{historyItems.map((item, index) => (
95+
<EuiListGroupItem
96+
key={index}
97+
label={item.config.mainTitle}
98+
size="s"
99+
onClick={() => {
100+
action(`Clicked ${item.config.mainTitle}`)();
101+
setIsPopoverOpen(false);
102+
}}
103+
>
104+
{item.config.mainTitle}
105+
</EuiListGroupItem>
106+
))}
107+
</EuiListGroup>
108+
</EuiPopover>
61109
);
62110

63111
const customActions = ['gear', 'broom'].map((iconType) => ({
64112
iconType,
65113
onClick: () => {
66114
action('custom action')(`${iconType} action clicked`);
67115
},
68-
'aria-label': `${
69-
iconType.charAt(0).toUpperCase() + iconType.slice(1)
70-
} action`,
116+
'aria-label': `${iconType} action`,
71117
}));
72118

73119
return (
@@ -84,20 +130,14 @@ const MenuBarFlyout = (args: Args) => {
84130
type="overlay"
85131
outsideClickCloses={false}
86132
ownFocus
133+
flyoutMenuProps={{
134+
title: 'Flyout title',
135+
hideCloseButton,
136+
backButton: showBackButton ? backButton : undefined,
137+
popover: showPopover ? historyPopover : undefined,
138+
customActions: showCustomActions ? customActions : undefined,
139+
}}
87140
>
88-
<EuiFlyoutMenuContext.Provider value={{ onClose: closeFlyout }}>
89-
<EuiFlyoutMenu
90-
title="Title"
91-
showBackButton={showBackButton}
92-
backButtonProps={{
93-
onClick: () => {
94-
action('back button')('click');
95-
},
96-
}}
97-
historyItems={historyItems}
98-
customActions={showCustomAction ? customActions : undefined}
99-
/>
100-
</EuiFlyoutMenuContext.Provider>
101141
<EuiFlyoutBody>
102142
<EuiText>
103143
<p>Simple flyout content.</p>

‎packages/eui/src/components/flyout/flyout_menu.styles.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,8 @@ export const euiFlyoutMenuStyles = (euiThemeContext: UseEuiTheme) => {
2828
euiFlyoutMenu__spacer: css`
2929
padding-inline: ${euiTheme.size.m};
3030
`,
31+
euiFlyoutMenu__actions: css`
32+
block-size: calc(${euiTheme.size.m} * 1.8);
33+
`,
3134
};
3235
};

‎packages/eui/src/components/flyout/flyout_menu.tsx‎

Lines changed: 18 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -7,106 +7,35 @@
77
*/
88

99
import classNames from 'classnames';
10-
import React, {
11-
FunctionComponent,
12-
HTMLAttributes,
13-
MouseEventHandler,
14-
useContext,
15-
useState,
16-
} from 'react';
17-
import {
18-
useEuiMemoizedStyles,
19-
useEuiTheme,
20-
useGeneratedHtmlId,
21-
} from '../../services';
22-
import { EuiButtonEmpty, EuiButtonIcon } from '../button';
10+
import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
11+
import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
12+
import { EuiButtonIcon } from '../button';
2313
import { CommonProps } from '../common';
2414
import { EuiFlexGroup, EuiFlexItem } from '../flex';
25-
import { EuiIcon } from '../icon';
26-
import { EuiListGroup, EuiListGroupItem } from '../list_group';
27-
import { EuiPopover } from '../popover';
2815
import { EuiTitle } from '../title';
2916
import { EuiFlyoutCloseButton } from './_flyout_close_button';
3017
import { euiFlyoutMenuStyles } from './flyout_menu.styles';
3118
import { EuiFlyoutMenuContext } from './flyout_menu_context';
3219

33-
type EuiFlyoutMenuBackButtonProps = {
34-
onClick?: MouseEventHandler<HTMLButtonElement>;
35-
isDisabled?: boolean;
36-
'aria-label'?: string;
37-
'data-test-subj'?: string;
38-
};
39-
40-
type EuiFlyoutHistoryItem = {
41-
title: string;
42-
onClick: () => void;
43-
};
44-
4520
export type EuiFlyoutMenuProps = CommonProps &
4621
HTMLAttributes<HTMLDivElement> & {
22+
backButton?: React.ReactNode;
23+
popover?: React.ReactNode;
4724
title?: React.ReactNode;
48-
historyItems?: EuiFlyoutHistoryItem[];
49-
showBackButton?: boolean;
50-
backButtonProps?: EuiFlyoutMenuBackButtonProps;
25+
hideCloseButton?: boolean;
5126
customActions?: Array<{
5227
iconType: string;
5328
onClick: () => void;
5429
'aria-label': string;
5530
}>;
5631
};
5732

58-
const BackButton: React.FC<EuiFlyoutMenuBackButtonProps> = (props) => {
59-
return (
60-
<EuiButtonEmpty size="xs" color="text" {...props}>
61-
<EuiIcon type="editorUndo" /> Back
62-
</EuiButtonEmpty>
63-
);
64-
};
65-
66-
const HistoryPopover: React.FC<{
67-
items: EuiFlyoutHistoryItem[];
68-
}> = ({ items }) => {
69-
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
70-
const handlePopoverButtonClick = () => {
71-
setIsPopoverOpen(!isPopoverOpen);
72-
};
73-
74-
return (
75-
<EuiPopover
76-
button={
77-
<EuiButtonIcon iconType="arrowDown" color="text" aria-label="History" />
78-
}
79-
isOpen={isPopoverOpen}
80-
onClick={handlePopoverButtonClick}
81-
closePopover={() => setIsPopoverOpen(false)}
82-
panelPaddingSize="xs"
83-
anchorPosition="downLeft"
84-
>
85-
<EuiListGroup gutterSize="none">
86-
{items.map((item, index) => (
87-
<EuiListGroupItem
88-
key={`history-item-${index}`}
89-
label={item.title}
90-
size="s"
91-
onClick={() => {
92-
item.onClick();
93-
setIsPopoverOpen(false);
94-
}}
95-
>
96-
{item.title}
97-
</EuiListGroupItem>
98-
))}
99-
</EuiListGroup>
100-
</EuiPopover>
101-
);
102-
};
103-
10433
export const EuiFlyoutMenu: FunctionComponent<EuiFlyoutMenuProps> = ({
10534
className,
35+
backButton,
36+
popover,
10637
title,
107-
historyItems = [],
108-
showBackButton,
109-
backButtonProps,
38+
hideCloseButton,
11039
customActions,
11140
...rest
11241
}) => {
@@ -137,8 +66,6 @@ export const EuiFlyoutMenu: FunctionComponent<EuiFlyoutMenuProps> = ({
13766
/>
13867
);
13968

140-
const { euiTheme } = useEuiTheme();
141-
14269
return (
14370
<div className={classes} css={styles.euiFlyoutMenu__container} {...rest}>
14471
<EuiFlexGroup
@@ -147,18 +74,8 @@ export const EuiFlyoutMenu: FunctionComponent<EuiFlyoutMenuProps> = ({
14774
gutterSize="none"
14875
responsive={false}
14976
>
150-
{showBackButton && (
151-
<EuiFlexItem grow={false}>
152-
<BackButton {...backButtonProps} />
153-
</EuiFlexItem>
154-
)}
155-
156-
{historyItems.length > 0 && (
157-
<EuiFlexItem grow={false}>
158-
<HistoryPopover items={historyItems} />
159-
</EuiFlexItem>
160-
)}
161-
77+
{backButton && <EuiFlexItem grow={false}>{backButton}</EuiFlexItem>}
78+
{popover && <EuiFlexItem grow={false}>{popover}</EuiFlexItem>}
16279
{titleNode && <EuiFlexItem grow={false}>{titleNode}</EuiFlexItem>}
16380

16481
<EuiFlexItem grow={true}></EuiFlexItem>
@@ -168,6 +85,7 @@ export const EuiFlyoutMenu: FunctionComponent<EuiFlyoutMenuProps> = ({
16885
<EuiFlexItem
16986
grow={false}
17087
key={`action-index-flex-item-${actionIndex}`}
88+
css={styles.euiFlyoutMenu__actions}
17189
>
17290
<EuiButtonIcon
17391
key={`action-index-icon-${actionIndex}`}
@@ -176,13 +94,16 @@ export const EuiFlyoutMenu: FunctionComponent<EuiFlyoutMenuProps> = ({
17694
onClick={action.onClick}
17795
color="text"
17896
size="s"
179-
style={{ blockSize: euiTheme.size.l }}
18097
/>
18198
</EuiFlexItem>
18299
))}
183-
<EuiFlexItem grow={false} css={styles.euiFlyoutMenu__spacer} />
100+
101+
{/* spacer to give custom actions room around the close button */}
102+
{!hideCloseButton && (
103+
<EuiFlexItem grow={false} css={styles.euiFlyoutMenu__spacer} />
104+
)}
184105
</EuiFlexGroup>
185-
{closeButton}
106+
{!hideCloseButton && closeButton}
186107
</div>
187108
);
188109
};

‎packages/eui/src/components/flyout/manager/actions.test.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,12 @@ describe('flyout manager actions', () => {
7676
});
7777

7878
it('should default to LEVEL_MAIN when level is not provided', () => {
79-
const action = addFlyout('flyout-1');
79+
const action = addFlyout('flyout-1', 'flyout title');
8080

8181
expect(action).toEqual({
8282
type: ACTION_ADD,
8383
flyoutId: 'flyout-1',
84+
title: 'flyout title',
8485
level: LEVEL_MAIN,
8586
});
8687
});
@@ -244,7 +245,7 @@ describe('flyout manager actions', () => {
244245

245246
describe('action type safety', () => {
246247
it('should have correct action type structure', () => {
247-
const addAction = addFlyout('test');
248+
const addAction = addFlyout('test', 'flyout title');
248249
const closeAction = closeFlyout('test');
249250
const setActiveAction = setActiveFlyout('test');
250251
const setWidthAction = setFlyoutWidth('test', 100);

0 commit comments

Comments
 (0)