Skip to content

Commit 4f2d9b6

Browse files
maxintegermaxinteger
committed
fix(menu): re-export mdc menu components
1 parent e6cd9c3 commit 4f2d9b6

File tree

10 files changed

+161
-103
lines changed

10 files changed

+161
-103
lines changed

‎src/components/Icon/Icon.types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { CSSProperties } from 'react';
22
import type IconKeys from '@momentum-design/icons/dist/types/types';
33
import { Props as TooltipProps } from '../Tooltip/Tooltip.types';
4+
import type { MdcIconProps } from '../../types';
45

56
export type IconWeight = 'light' | 'regular' | 'bold' | 'filled';
67

@@ -30,7 +31,7 @@ export type IconScale =
3031
| 'auto'
3132
| 'inherit';
3233

33-
export interface Props {
34+
export interface Props extends Omit<MdcIconProps, 'name'> {
3435
/**
3536
* If set to true, then the icon size will scale according to the parent element.
3637
*

‎src/index.js‎ renamed to ‎src/index.ts‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export {
2424
Menu,
2525
MenuContent,
2626
MenuOverlay,
27-
MenuItem,
27+
MenuItem as MenuItemLegacy,
2828
Modal,
2929
ModalBody,
3030
ModalFooter,
@@ -36,7 +36,7 @@ export {
3636
SpaceListItem,
3737
Spinner,
3838
SubMenu,
39-
Tooltip,
39+
Tooltip as TooltipLegacy,
4040
} from './legacy';
4141

4242
/** V2 Components [TypeScript] */
@@ -84,18 +84,9 @@ export {
8484
SpaceListItem as SpaceListItemNext,
8585
SpaceTreeNode,
8686
List as ListNext,
87-
ListRefObject,
8887
Popover as PopoverNext,
89-
PopoverInstance,
9088
Reaction,
91-
OnVideoReactionName,
92-
OriginalReactionName,
9389
REACTION_CONSTANTS,
94-
ReactionName,
95-
ReactionProps,
96-
ReactionWithSkinTone,
97-
ReactionWithoutSkinTone,
98-
SkinTone,
9990
ReactionBadge,
10091
ReactionButton,
10192
ReactionPicker,
@@ -136,15 +127,45 @@ export {
136127
TabPanel as TabPanelNext,
137128
VirtualizedList,
138129
SpatialNavigationProvider,
130+
} from './components';
131+
132+
/** V2 Components types [TypeScript] */
133+
export type {
134+
ListRefObject,
135+
PopoverInstance,
136+
OnVideoReactionName,
137+
OriginalReactionName,
138+
ReactionName,
139+
ReactionProps,
140+
ReactionWithSkinTone,
141+
ReactionWithoutSkinTone,
142+
SkinTone,
139143
ButtonRefType,
140144
} from './components';
141145

146+
/** Momentum Design Components */
142147
export {
143148
Animation,
144-
Textarea as TextArea,
145-
Skeleton,
149+
AvatarButton,
150+
Divider,
146151
Listheader as ListHeader,
152+
MenuItem,
153+
MenuItemCheckbox,
154+
MenuItemRadio,
155+
MenuPopover,
156+
MenuSection,
157+
Skeleton,
158+
Textarea as TextArea,
159+
Tooltip,
147160
} from '@momentum-design/components/dist/react';
148161

162+
/** Momentum Design types */
163+
export type {
164+
MenuPopoverActionEvent,
165+
MenuPopoverChangeEvent,
166+
MenuSectionChangeEvent,
167+
} from '@momentum-design/components';
168+
169+
/** Other */
149170
export { PRESERVE_TABINDEX_CLASSNAME } from './utils/navigation';
150-
export { AriaLabelRequired } from './utils/a11y';
171+
export type { AriaLabelRequired } from './utils/a11y';

‎src/legacy/Menu/tests/index.spec.js‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { shallow, mount } from 'enzyme';
3-
import { Menu, MenuItem, SubMenu } from '@momentum-ui/react-collaboration';
3+
import { Menu, MenuItemLegacy, SubMenu } from '@momentum-ui/react-collaboration';
44
import Icon from '../../../components/Icon';
55
import ListItemBaseSection from '../../../components/ListItemBaseSection';
66

@@ -12,7 +12,7 @@ describe('tests for <Menu />', () => {
1212
it('should render a Menu', () => {
1313
const wrapper = mount(
1414
<Menu>
15-
<MenuItem label="one" />
15+
<MenuItemLegacy label="one" />
1616
</Menu>
1717
);
1818

@@ -22,7 +22,7 @@ describe('tests for <Menu />', () => {
2222
it('should apply className to Menu', () => {
2323
const wrapper = mount(
2424
<Menu className="test">
25-
<MenuItem label="one" />
25+
<MenuItemLegacy label="one" />
2626
</Menu>
2727
);
2828

@@ -32,9 +32,9 @@ describe('tests for <Menu />', () => {
3232
it('should not focus first if focusFirst={false}', () => {
3333
const wrapper = mount(
3434
<Menu focusFirst={false}>
35-
<MenuItem label="one" eventKey="test-1" />
36-
<MenuItem label="two" eventKey="test-2" />
37-
<MenuItem label="three" eventKey="test-3" />
35+
<MenuItemLegacy label="one" eventKey="test-1" />
36+
<MenuItemLegacy label="two" eventKey="test-2" />
37+
<MenuItemLegacy label="three" eventKey="test-3" />
3838
</Menu>
3939
);
4040
const instance = wrapper.find('Menu').instance();
@@ -50,9 +50,9 @@ describe('tests for <Menu />', () => {
5050
document.body.append(focusContainer);
5151
const wrapper = mount(
5252
<Menu>
53-
<MenuItem label="one" isHeader eventKey="test-1" />
54-
<MenuItem label="two" disabled eventKey="test-2" />
55-
<MenuItem label="three" eventKey="test-3" />
53+
<MenuItemLegacy label="one" isHeader eventKey="test-1" />
54+
<MenuItemLegacy label="two" disabled eventKey="test-2" />
55+
<MenuItemLegacy label="three" eventKey="test-3" />
5656
</Menu>,
5757
{ attachTo: focusContainer }
5858
);
@@ -69,10 +69,10 @@ describe('tests for <Menu />', () => {
6969
const wrapper = mount(
7070
<Menu onSelect={onSelect}>
7171
<SubMenu label="one" eventKey="test-1">
72-
<MenuItem label="one-one" key="0" eventKey="test-1-1" />
72+
<MenuItemLegacy label="one-one" key="0" eventKey="test-1-1" />
7373
</SubMenu>
74-
<MenuItem label="two" eventKey="test-2" />
75-
<MenuItem label="three" eventKey="test-3" />
74+
<MenuItemLegacy label="two" eventKey="test-2" />
75+
<MenuItemLegacy label="three" eventKey="test-3" />
7676
</Menu>
7777
);
7878
let menuItem = wrapper.find('SubMenu').at(0);
@@ -99,16 +99,16 @@ describe('tests for <Menu />', () => {
9999
const wrapper = mount(
100100
<Menu onSelect={onSelect}>
101101
<SubMenu label="one" eventKey="test-1">
102-
<MenuItem label="one-one" key="0" eventKey="test-1-1" />
103-
<MenuItem eventKey="customized-submenu-item">
102+
<MenuItemLegacy label="one-one" key="0" eventKey="test-1-1" />
103+
<MenuItemLegacy eventKey="customized-submenu-item">
104104
<ListItemBaseSection position="left">customized subMenu item</ListItemBaseSection>
105105
<ListItemBaseSection position="middle">
106106
<Icon name="pop-out" scale={16} />
107107
</ListItemBaseSection>
108-
</MenuItem>
108+
</MenuItemLegacy>
109109
</SubMenu>
110-
<MenuItem label="two" eventKey="test-2" />
111-
<MenuItem label="three" eventKey="test-3" />
110+
<MenuItemLegacy label="two" eventKey="test-2" />
111+
<MenuItemLegacy label="three" eventKey="test-3" />
112112
</Menu>
113113
);
114114
let menuItem = wrapper.find('SubMenu').at(0);
@@ -137,10 +137,10 @@ describe('tests for <Menu />', () => {
137137
const wrapper = mount(
138138
<Menu onSelect={onSelect}>
139139
<SubMenu label="one" eventKey="test-1">
140-
<MenuItem label="one-one" key="0" eventKey="test-1-1" />
140+
<MenuItemLegacy label="one-one" key="0" eventKey="test-1-1" />
141141
</SubMenu>
142-
<MenuItem label="two" eventKey="test-2" />
143-
<MenuItem label="three" eventKey="test-3" />
142+
<MenuItemLegacy label="two" eventKey="test-2" />
143+
<MenuItemLegacy label="three" eventKey="test-3" />
144144
</Menu>
145145
);
146146
const instance = wrapper.find('Menu').instance();
@@ -196,7 +196,7 @@ describe('tests for <Menu />', () => {
196196
try {
197197
mount(
198198
<Menu>
199-
<MenuItem>one</MenuItem>
199+
<MenuItemLegacy>one</MenuItemLegacy>
200200
</Menu>
201201
);
202202
} catch (e) {

‎src/legacy/MenuItem/tests/index.spec.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import React from 'react';
22
import { mount } from 'enzyme';
33
import SelectableContext from '../../SelectableContext';
4-
import { Icon, ListItemSection, MenuItem } from '@momentum-ui/react-collaboration';
4+
import { Icon, ListItemSection, MenuItemLegacy } from '@momentum-ui/react-collaboration';
55
import Toggle from '../../../components/Toggle';
66
beforeEach(() => {
77
jest.resetModules();
88
jest.clearAllMocks();
99
});
1010

11-
describe('tests for <MenuItem />', () => {
11+
describe('tests for <MenuItemLegacy />', () => {
1212
const context = {
1313
parentKeyDown: jest.fn(),
1414
parentKeyUp: jest.fn(),
1515
parentOnSelect: jest.fn(),
1616
};
1717

1818
it('should render a MenuItem', () => {
19-
const wrapper = mount(<MenuItem label="one" />);
19+
const wrapper = mount(<MenuItemLegacy label="one" />);
2020
expect(wrapper).toMatchSnapshot();
2121
});
2222

@@ -25,7 +25,7 @@ describe('tests for <MenuItem />', () => {
2525

2626
const wrapper = mount(
2727
<SelectableContext.Provider value={context}>
28-
<MenuItem onClick={onClick} label="one" />
28+
<MenuItemLegacy onClick={onClick} label="one" />
2929
</SelectableContext.Provider>
3030
);
3131

@@ -40,7 +40,7 @@ describe('tests for <MenuItem />', () => {
4040

4141
const wrapper = mount(
4242
<SelectableContext.Provider value={context}>
43-
<MenuItem onClick={onClick} label="one" value="test" />
43+
<MenuItemLegacy onClick={onClick} label="one" value="test" />
4444
</SelectableContext.Provider>
4545
);
4646

@@ -55,15 +55,15 @@ describe('tests for <MenuItem />', () => {
5555

5656
const wrapper = mount(
5757
<SelectableContext.Provider value={context}>
58-
<MenuItem onClick={onClick} label="one" value="test">
58+
<MenuItemLegacy onClick={onClick} label="one" value="test">
5959
<ListItemSection position="left">
6060
<Icon name="edit_20" />
6161
</ListItemSection>
6262
<ListItemSection position="center">Dark mode</ListItemSection>
6363
<ListItemSection position="right">
6464
<Toggle aria-label="toggle" />
6565
</ListItemSection>
66-
</MenuItem>
66+
</MenuItemLegacy>
6767
</SelectableContext.Provider>
6868
);
6969

@@ -87,7 +87,7 @@ describe('tests for <MenuItem />', () => {
8787

8888
const wrapper = mount(
8989
<SelectableContext.Provider value={context}>
90-
<MenuItem onKeyDown={onKeyDown} label="one" value="test" />
90+
<MenuItemLegacy onKeyDown={onKeyDown} label="one" value="test" />
9191
</SelectableContext.Provider>
9292
);
9393

@@ -102,7 +102,7 @@ describe('tests for <MenuItem />', () => {
102102

103103
const wrapper = mount(
104104
<SelectableContext.Provider value={context}>
105-
<MenuItem onKeyUp={onKeyUp} label="one" value="test" />
105+
<MenuItemLegacy onKeyUp={onKeyUp} label="one" value="test" />
106106
</SelectableContext.Provider>
107107
);
108108

@@ -113,20 +113,20 @@ describe('tests for <MenuItem />', () => {
113113
});
114114

115115
it('should apply class for isHeader prop', () => {
116-
const container = mount(<MenuItem isHeader />);
116+
const container = mount(<MenuItemLegacy isHeader />);
117117

118118
expect(container.find('.md-menu-item__header').exists()).toEqual(true);
119119
});
120120

121121
describe('tests for title Prop', () => {
122122
it('should not have title by default', () => {
123-
const container = mount(<MenuItem />);
123+
const container = mount(<MenuItemLegacy />);
124124

125125
expect(container.find('.md-list-item').props().title).toEqual(undefined);
126126
});
127127

128128
it('should handle title prop', () => {
129-
const container = mount(<MenuItem title="testTitle" />);
129+
const container = mount(<MenuItemLegacy title="testTitle" />);
130130

131131
expect(container.find('.md-list-item').props().title).toEqual('testTitle');
132132
});

‎src/legacy/MenuItem/tests/index.spec.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`tests for <MenuItem /> should render a MenuItem 1`] = `
3+
exports[`tests for <MenuItemLegacy /> should render a MenuItem 1`] = `
44
<ContextTransform(MenuItem)
55
label="one"
66
>

0 commit comments

Comments
 (0)