Repository: uber-web/baseui
Pull request #127 (2018-08-14 18:58:21)

fix(menu): rename Menulist to Menu in prep for enhancements


Patch:
diff --git a/rfcs/menulist-component.md b/rfcs/menu-component.md
similarity index 93%
rename from rfcs/menulist-component.md
rename to rfcs/menu-component.md
index ee220809b..5ea571105 100644
--- a/rfcs/menulist-component.md
+++ b/rfcs/menu-component.md
@@ -1,4 +1,4 @@
-# Menu List
+# Menu
 
 ## User Story
 
@@ -6,15 +6,15 @@
 
 ## Exported Components
 
-* `MenuList`
+* `Menu`
 * `StatefulContainer`
-* `StyledMenuList`
+* `StyledMenu`
 * `StyledList`
 * `StyledListItem`
 
 ## Default Internal Structure
 
-The default exported `MenuList` will have the following internal structure
+The default exported `Menu` will have the following internal structure
 
 ```js
 <StatefulContainer>
@@ -66,7 +66,7 @@ State reducer to intercept state changes and return new internal state
 (selectedItem: ?Object) => any;
 ```
 
-## MenuList API
+## Menu API
 
 All of `StatefulContainer` API and the following
 
@@ -83,7 +83,7 @@ Component injection prop, can be used to override any or all of the internal com
 
 ## Render Props API
 
-These are props passed down to the render prop, or children-as-a-function function, for advanced usages (and also used internally for the preconstructed `MenuList`)
+These are props passed down to the render prop, or children-as-a-function function, for advanced usages (and also used internally for the preconstructed `Menu`)
 
 #### `items`
 
diff --git a/src/components/menulist/constants.js b/src/components/menu/constants.js
similarity index 100%
rename from src/components/menulist/constants.js
rename to src/components/menu/constants.js
diff --git a/src/components/menulist/index.js b/src/components/menu/index.js
similarity index 69%
rename from src/components/menulist/index.js
rename to src/components/menu/index.js
index 806eb9411..05d900295 100644
--- a/src/components/menulist/index.js
+++ b/src/components/menu/index.js
@@ -1,7 +1,7 @@
 // @flow
-export {default as StatefulMenulist} from './stateful-menulist';
+export {default as StatefulMenu} from './stateful-menu';
 export {default as StatefulContainer} from './stateful-container';
-export {default as Menulist} from './menulist';
+export {default as Menu} from './menu';
 // Constants
 export {KEY_STRINGS, STATE_CHANGE_TYPES} from './constants';
 // Styled elements
diff --git a/src/components/menulist/menulist.js b/src/components/menu/menu.js
similarity index 90%
rename from src/components/menulist/menulist.js
rename to src/components/menu/menu.js
index cae119535..d0cbde578 100644
--- a/src/components/menulist/menulist.js
+++ b/src/components/menu/menu.js
@@ -9,15 +9,15 @@ import {STYLETRON_PROP_MAPPER} from './constants';
 import {mapStyletronProps} from './utils';
 import {getOverride} from '../../helpers/overrides';
 // Types
-import type {StatelessMenulistPropsT} from './types';
+import type {StatelessMenuPropsT} from './types';
 
-export default function MenuList({
+export default function Menu({
   items,
   getItemLabel,
   getRequiredItemProps = (item, index) => ({key: String(index)}),
   rootRef = React.createRef(),
   overrides = {},
-}: StatelessMenulistPropsT) {
+}: StatelessMenuPropsT) {
   const {List: ListOverride, ListItem: ListItemOverride} = overrides;
   const List = getOverride(ListOverride) || StyledList;
   const ListItem = getOverride(ListItemOverride) || StyledListItem;
diff --git a/src/components/menulist/stateful-container.js b/src/components/menu/stateful-container.js
similarity index 98%
rename from src/components/menulist/stateful-container.js
rename to src/components/menu/stateful-container.js
index 29a282eb4..fc62fb6d3 100644
--- a/src/components/menulist/stateful-container.js
+++ b/src/components/menu/stateful-container.js
@@ -13,7 +13,7 @@ import type {
   RenderPropsT,
 } from './types';
 
-export default class MenuListStatefulContainer extends React.Component<
+export default class MenuStatefulContainer extends React.Component<
   StatefulContainerPropsT,
   StatefulContainerStateT,
 > {
diff --git a/src/components/menulist/stateful-menulist.js b/src/components/menu/stateful-menu.js
similarity index 57%
rename from src/components/menulist/stateful-menulist.js
rename to src/components/menu/stateful-menu.js
index ad5c37eb2..f0931a060 100644
--- a/src/components/menulist/stateful-menulist.js
+++ b/src/components/menu/stateful-menu.js
@@ -2,14 +2,12 @@
 /* eslint-disable react/prefer-stateless-function */
 import * as React from 'react';
 
-import Menulist from './menulist';
+import Menu from './menu';
 import StatefulContainer from './stateful-container';
 
-import type {StatefulMenulistPropsT} from './types';
+import type {StatefulMenuPropsT} from './types';
 
-export default class StatefulMenuList extends React.Component<
-  StatefulMenulistPropsT,
-> {
+export default class StatefulMenu extends React.Component<StatefulMenuPropsT> {
   static defaultProps = {
     overrides: {},
   };
@@ -18,7 +16,7 @@ export default class StatefulMenuList extends React.Component<
     const {overrides, ...props} = this.props;
     return (
       <StatefulContainer {...props}>
-        {renderProps => <Menulist {...renderProps} overrides={overrides} />}
+        {renderProps => <Menu {...renderProps} overrides={overrides} />}
       </StatefulContainer>
     );
   }
diff --git a/src/components/menulist/stories.js b/src/components/menu/stories.js
similarity index 88%
rename from src/components/menulist/stories.js
rename to src/components/menu/stories.js
index e9a9d9dcb..a3727be25 100644
--- a/src/components/menulist/stories.js
+++ b/src/components/menu/stories.js
@@ -5,8 +5,8 @@ import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {withStyle} from 'styletron-react';
 
-import Menulist from './menulist';
-import StatefulMenulist from './stateful-menulist';
+import Menu from './menu';
+import StatefulMenu from './stateful-menu';
 import {List} from './styled-components';
 
 // Give a width to render this nicer
@@ -27,9 +27,9 @@ const ITEMS: Array<{label: string}> = [
   {label: 'Item Twelve'},
 ];
 
-storiesOf('Menulist', module)
+storiesOf('Menu', module)
   .add('Stateless', () => (
-    <Menulist
+    <Menu
       items={ITEMS}
       getItemLabel={item => item.label}
       rootRef={React.createRef()}
@@ -40,7 +40,7 @@ storiesOf('Menulist', module)
     />
   ))
   .add('Stateful with keybindings', () => (
-    <StatefulMenulist
+    <StatefulMenu
       items={ITEMS}
       onItemSelect={action('item select')}
       getItemLabel={item => item.label}
diff --git a/src/components/menulist/styled-components.js b/src/components/menu/styled-components.js
similarity index 100%
rename from src/components/menulist/styled-components.js
rename to src/components/menu/styled-components.js
diff --git a/src/components/menulist/types.js b/src/components/menu/types.js
similarity index 95%
rename from src/components/menulist/types.js
rename to src/components/menu/types.js
index d7c99d546..35f1f101a 100644
--- a/src/components/menulist/types.js
+++ b/src/components/menu/types.js
@@ -78,11 +78,11 @@ export type StatefulContainerPropsT = {
   children?: RenderPropsT => React.Node,
 };
 
-export type StatefulMenulistPropsT = StatefulContainerPropsT & {
+export type StatefulMenuPropsT = StatefulContainerPropsT & {
   overrides?: OverridesT,
 };
 
-export type StatelessMenulistPropsT = {
+export type StatelessMenuPropsT = {
   items: ItemsT,
   getItemLabel: GetItemLabelFnT,
   rootRef: RootRefT,


Test patch:
diff --git a/src/components/menulist/__tests__/__snapshots__/styled-components.test.js.snap b/src/components/menu/__tests__/__snapshots__/styled-components.test.js.snap
similarity index 83%
rename from src/components/menulist/__tests__/__snapshots__/styled-components.test.js.snap
rename to src/components/menu/__tests__/__snapshots__/styled-components.test.js.snap
index d90339b46..6aa95662f 100644
--- a/src/components/menulist/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/components/menu/__tests__/__snapshots__/styled-components.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Menulist Styled Components List - basic render: List has correct styles 1`] = `
+exports[`Menu Styled Components List - basic render: List has correct styles 1`] = `
 Object {
   "background": "$theme.colors.white",
   "borderRadius": "$theme.borders.radius300",
@@ -16,7 +16,7 @@ Object {
 }
 `;
 
-exports[`Menulist Styled Components ListItem - basic render: ListItem has correct styles 1`] = `
+exports[`Menu Styled Components ListItem - basic render: ListItem has correct styles 1`] = `
 Object {
   ":hover": Object {
     "color": "$theme.colors.primary400",
@@ -36,7 +36,7 @@ Object {
 }
 `;
 
-exports[`Menulist Styled Components ListItem - highlighted render: ListItem has correct styles when highlighted 1`] = `
+exports[`Menu Styled Components ListItem - highlighted render: ListItem has correct styles when highlighted 1`] = `
 Object {
   ":hover": Object {
     "color": "$theme.colors.primary400",
diff --git a/src/components/menulist/__tests__/menulist.test.js b/src/components/menu/__tests__/menu.test.js
similarity index 87%
rename from src/components/menulist/__tests__/menulist.test.js
rename to src/components/menu/__tests__/menu.test.js
index d62de14ca..0fce1808e 100644
--- a/src/components/menulist/__tests__/menulist.test.js
+++ b/src/components/menu/__tests__/menu.test.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import {mount} from 'enzyme';
 import {List, ListItem} from '../styled-components';
-import Menulist from '../menulist';
+import Menu from '../menu';
 
 const mockItems = [{label: 'item1'}, {label: 'item2'}];
 
@@ -18,10 +18,10 @@ function getSharedProps() {
   };
 }
 
-describe('Menulist Stateless Component', () => {
+describe('Menu Stateless Component', () => {
   test('basic renders', () => {
     // $FlowFixMe
-    const component = mount(<Menulist {...getSharedProps()} />);
+    const component = mount(<Menu {...getSharedProps()} />);
 
     expect(component.find(List)).toExist();
     expect(component.find(List)).toHaveProp({
@@ -60,7 +60,7 @@ describe('Menulist Stateless Component', () => {
       },
     };
     // $FlowFixMe
-    const component = mount(<Menulist {...props} />);
+    const component = mount(<Menu {...props} />);
     expect(component.find(ListItem)).not.toExist();
     expect(component.find(NewListItem)).toExist();
   });
diff --git a/src/components/menulist/__tests__/stateful-container.test.js b/src/components/menu/__tests__/stateful-container.test.js
similarity index 99%
rename from src/components/menulist/__tests__/stateful-container.test.js
rename to src/components/menu/__tests__/stateful-container.test.js
index 54bd98e0f..9af316ad3 100644
--- a/src/components/menulist/__tests__/stateful-container.test.js
+++ b/src/components/menu/__tests__/stateful-container.test.js
@@ -28,7 +28,7 @@ function getSharedProps() {
   };
 }
 
-describe('Menulist StatefulContainer', () => {
+describe('Menu StatefulContainer', () => {
   beforeAll(() => {
     // $FlowFixMe
     document.addEventListener = jest.fn();
diff --git a/src/components/menulist/__tests__/stateful-menulist.test.js b/src/components/menu/__tests__/stateful-menu.test.js
similarity index 58%
rename from src/components/menulist/__tests__/stateful-menulist.test.js
rename to src/components/menu/__tests__/stateful-menu.test.js
index 274488a05..73996b1d1 100644
--- a/src/components/menulist/__tests__/stateful-menulist.test.js
+++ b/src/components/menu/__tests__/stateful-menu.test.js
@@ -1,18 +1,18 @@
 // @flow
 import React from 'react';
 import {mount} from 'enzyme';
-import StatefulMenulist from '../stateful-menulist';
+import StatefulMenu from '../stateful-menu';
 import StatefulContainer from '../stateful-container';
-import Menulist from '../menulist';
+import Menu from '../menu';
 
-describe('Menulist StatefulMenulist', () => {
+describe('Menu StatefulMenu', () => {
   test('renders with props', () => {
     const props = {
       items: [{label: 'item1'}, {label: 'item2'}],
       getItemLabel: item => item.label,
     };
-    const component = mount(<StatefulMenulist {...props} />);
+    const component = mount(<StatefulMenu {...props} />);
     expect(component.find(StatefulContainer).length).toBe(1);
-    expect(component.find(Menulist).length).toBe(1);
+    expect(component.find(Menu).length).toBe(1);
   });
 });
diff --git a/src/components/menulist/__tests__/styled-components.test.js b/src/components/menu/__tests__/styled-components.test.js
similarity index 94%
rename from src/components/menulist/__tests__/styled-components.test.js
rename to src/components/menu/__tests__/styled-components.test.js
index dbc32829e..2ea5e170c 100644
--- a/src/components/menulist/__tests__/styled-components.test.js
+++ b/src/components/menu/__tests__/styled-components.test.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {List, ListItem} from '../styled-components';
 
-describe('Menulist Styled Components', () => {
+describe('Menu Styled Components', () => {
   test('ListItem - basic render', () => {
     const component = shallow(<ListItem>This is a list item</ListItem>);
     expect(component.instance().getStyles()).toMatchSnapshot(
diff --git a/src/components/menulist/__tests__/utils.test.js b/src/components/menu/__tests__/utils.test.js
similarity index 96%
rename from src/components/menulist/__tests__/utils.test.js
rename to src/components/menu/__tests__/utils.test.js
index 1acd420d9..9afc009a9 100644
--- a/src/components/menulist/__tests__/utils.test.js
+++ b/src/components/menu/__tests__/utils.test.js
@@ -1,7 +1,7 @@
 // @flow
 import * as Utils from '../utils';
 
-describe('Menulist Utils - mapStyletronProps', () => {
+describe('Menu Utils - mapStyletronProps', () => {
   test('successfully maps', () => {
     const props = {
       someStyletronProps: 'styletron',
@@ -17,7 +17,7 @@ describe('Menulist Utils - mapStyletronProps', () => {
   });
 });
 
-describe('Menulist Utils - scrollItemIntoView', () => {
+describe('Menu Utils - scrollItemIntoView', () => {
   test('scrolling down', () => {
     const mockNode = {
       current: {