Skip to content

fix: CORUI-6264: One component per file Menu #434

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

Merged
cjskillingstad merged 16 commits into from
Feb 27, 2019
Merged

fix: CORUI-6264: One component per file Menu #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
2da826e
Rename file
cjskillingstad Feb 22, 2019
645d8d0
Rename temp
cjskillingstad Feb 22, 2019
7132953
Merge temp branch
cjskillingstad Feb 22, 2019
1c4b546
Restore original
cjskillingstad Feb 22, 2019
b1e1c19
Rename file
cjskillingstad Feb 22, 2019
837ddc6
Rename temp
cjskillingstad Feb 22, 2019
b3f8a5e
Merge temp branch
cjskillingstad Feb 22, 2019
624f5e9
Restore original
cjskillingstad Feb 22, 2019
5cf9a27
Rename file
cjskillingstad Feb 22, 2019
114c1fe
Rename temp
cjskillingstad Feb 22, 2019
7a830e0
Merge temp branch
cjskillingstad Feb 22, 2019
f5d1880
Restore original
cjskillingstad Feb 22, 2019
ca213e8
Separate components
cjskillingstad Feb 22, 2019
8127fcc
Move Menu subcomponents
cjskillingstad Feb 26, 2019
f7957e9
Update snapshot with correct on click function
cjskillingstad Feb 26, 2019
b7ed6cd
Merge branch 'master' into fix/one_comp_menu
cjskillingstad Feb 26, 2019
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
74 changes: 37 additions & 37 deletions src/ActionBar/ActionBar.Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import path from 'path';
import React from 'react';
import { ActionBar, Button, Menu, MenuItem, MenuList, Popover } from '../';
import { ActionBar, Button, Menu, Popover } from '../';
import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';

export const ActionBarComponent = () => {
Expand Down Expand Up @@ -32,12 +32,12 @@ const clickBackBtn = () => {
control={<Button option="light" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url="/">Option 1</Menu.Item>
<Menu.Item url="/">Option 2</Menu.Item>
<Menu.Item url="/">Option 3</Menu.Item>
<Menu.Item url="/">Option 4</Menu.Item>
</Menu.List>
</Menu>
}
/>
Expand All @@ -52,12 +52,12 @@ const clickBackBtn = () => {
control={<Button option="light" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url="/">Option 1</Menu.Item>
<Menu.Item url="/">Option 2</Menu.Item>
<Menu.Item url="/">Option 3</Menu.Item>
<Menu.Item url="/">Option 4</Menu.Item>
</Menu.List>
</Menu>
}
/>
Expand All @@ -72,12 +72,12 @@ const clickBackBtn = () => {
control={<Button type="secondary" glyph="vertical-grip" />}
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url="/">Option 1</Menu.Item>
<Menu.Item url="/">Option 2</Menu.Item>
<Menu.Item url="/">Option 3</Menu.Item>
<Menu.Item url="/">Option 4</Menu.Item>
</Menu.List>
</Menu>
}
/>
Expand Down Expand Up @@ -145,12 +145,12 @@ const clickBackBtn = () => {
<Popover
body={
<Menu>
<MenuList>
<MenuItem url='/'>Option 1</MenuItem>
<MenuItem url='/'>Option 2</MenuItem>
<MenuItem url='/'>Option 3</MenuItem>
<MenuItem url='/'>Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url='/'>Option 1</Menu.Item>
<Menu.Item url='/'>Option 2</Menu.Item>
<Menu.Item url='/'>Option 3</Menu.Item>
<Menu.Item url='/'>Option 4</Menu.Item>
</Menu.List>
</Menu>
}
control={<Button glyph='vertical-grip' option='light' />} />
Expand All @@ -172,12 +172,12 @@ const clickBackBtn = () => {
<Popover
body={
<Menu>
<MenuList>
<MenuItem url='/'>Option 1</MenuItem>
<MenuItem url='/'>Option 2</MenuItem>
<MenuItem url='/'>Option 3</MenuItem>
<MenuItem url='/'>Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url='/'>Option 1</Menu.Item>
<Menu.Item url='/'>Option 2</Menu.Item>
<Menu.Item url='/'>Option 3</Menu.Item>
<Menu.Item url='/'>Option 4</Menu.Item>
</Menu.List>
</Menu>
}
control={<Button glyph='vertical-grip' option='light' />} />
Expand All @@ -199,12 +199,12 @@ const clickBackBtn = () => {
<Popover
body={
<Menu>
<MenuList>
<MenuItem url='/'>Option 1</MenuItem>
<MenuItem url='/'>Option 2</MenuItem>
<MenuItem url='/'>Option 3</MenuItem>
<MenuItem url='/'>Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url='/'>Option 1</Menu.Item>
<Menu.Item url='/'>Option 2</Menu.Item>
<Menu.Item url='/'>Option 3</Menu.Item>
<Menu.Item url='/'>Option 4</Menu.Item>
</Menu.List>
</Menu>
}
control={<Button glyph='vertical-grip' option='light' />} />
Expand Down
58 changes: 29 additions & 29 deletions src/ComboboxInput/ComboboxInput.Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import path from 'path';
import React from 'react';
import { ComboboxInput, Menu, MenuItem, MenuList } from '../';
import { ComboboxInput, Menu } from '../';
import { DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';

export const ComboboxInputComponent = () => {
const comboboxInputCode = `<ComboboxInput
placeholder="Select Fruit"
menu={
<Menu>
<MenuList>
<MenuItem url="/">Pear</MenuItem>
<MenuItem url="/">Strawberry</MenuItem>
<MenuItem url="/">Raspberry</MenuItem>
<MenuItem url="/" isLink>
<Menu.List>
<Menu.Item url="/">Pear</Menu.Item>
<Menu.Item url="/">Strawberry</Menu.Item>
<Menu.Item url="/">Raspberry</Menu.Item>
<Menu.Item url="/" isLink>
+ New Item
</MenuItem>
</MenuList>
</Menu.Item>
</Menu.List>
</Menu>
}
/>
Expand All @@ -25,14 +25,14 @@ export const ComboboxInputComponent = () => {
compact
menu={
<Menu>
<MenuList>
<MenuItem url="/">Pear</MenuItem>
<MenuItem url="/">Strawberry</MenuItem>
<MenuItem url="/">Raspberry</MenuItem>
<MenuItem url="/" isLink>
<Menu.List>
<Menu.Item url="/">Pear</Menu.Item>
<Menu.Item url="/">Strawberry</Menu.Item>
<Menu.Item url="/">Raspberry</Menu.Item>
<Menu.Item url="/" isLink>
+ New Item
</MenuItem>
</MenuList>
</Menu.Item>
</Menu.List>
</Menu>
}
/>`;
Expand All @@ -54,14 +54,14 @@ export const ComboboxInputComponent = () => {
<ComboboxInput
menu={
<Menu>
<MenuList>
<MenuItem url='/'>Pear</MenuItem>
<MenuItem url='/'>Strawberry</MenuItem>
<MenuItem url='/'>Raspberry</MenuItem>
<MenuItem isLink url='/'>
<Menu.List>
<Menu.Item url='/'>Pear</Menu.Item>
<Menu.Item url='/'>Strawberry</Menu.Item>
<Menu.Item url='/'>Raspberry</Menu.Item>
<Menu.Item isLink url='/'>
+ New Item
</MenuItem>
</MenuList>
</Menu.Item>
</Menu.List>
</Menu>
}
placeholder='Select Fruit' />
Expand All @@ -72,14 +72,14 @@ export const ComboboxInputComponent = () => {
compact
menu={
<Menu>
<MenuList>
<MenuItem url='/'>Pear</MenuItem>
<MenuItem url='/'>Strawberry</MenuItem>
<MenuItem url='/'>Raspberry</MenuItem>
<MenuItem isLink url='/'>
<Menu.List>
<Menu.Item url='/'>Pear</Menu.Item>
<Menu.Item url='/'>Strawberry</Menu.Item>
<Menu.Item url='/'>Raspberry</Menu.Item>
<Menu.Item isLink url='/'>
+ New Item
</MenuItem>
</MenuList>
</Menu.Item>
</Menu.List>
</Menu>
}
placeholder='Select Fruit' />
Expand Down
16 changes: 8 additions & 8 deletions src/ComboboxInput/ComboboxInput.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { ComboboxInput } from './ComboboxInput';
import Menu from '../Menu/Menu';
import { mount } from 'enzyme';
import React from 'react';
import renderer from 'react-test-renderer';
import { Menu, MenuItem, MenuList } from '../Menu/Menu';

describe('<ComboboxInput />', () => {
const defaultMenu = (
<Menu>
<MenuList>
<MenuItem url='/'>Pear</MenuItem>
<MenuItem url='/'>Strawberry</MenuItem>
<MenuItem url='/'>Raspberry</MenuItem>
<MenuItem isLink url='/'>
<Menu.List>
<Menu.Item url='/'>Pear</Menu.Item>
<Menu.Item url='/'>Strawberry</Menu.Item>
<Menu.Item url='/'>Raspberry</Menu.Item>
<Menu.Item isLink url='/'>
+ New Item
</MenuItem>
</MenuList>
</Menu.Item>
</Menu.List>
</Menu>
);

Expand Down
74 changes: 37 additions & 37 deletions src/ContextualMenu/ContextualMenu.Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Button, Menu, MenuItem, MenuList, Popover } from '../';
import { Button, Menu, Popover } from '../';
import { Description, DocsText, DocsTile, Header, Separator } from '../_playground';

export const ContextualMenuComponent = () => {
Expand All @@ -8,12 +8,12 @@ export const ContextualMenuComponent = () => {
noArrow
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url="/">Option 1</Menu.Item>
<Menu.Item url="/">Option 2</Menu.Item>
<Menu.Item url="/">Option 3</Menu.Item>
<Menu.Item url="/">Option 4</Menu.Item>
</Menu.List>
</Menu>
}
/>`;
Expand All @@ -23,12 +23,12 @@ export const ContextualMenuComponent = () => {
noArrow
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url="/">Option 1</Menu.Item>
<Menu.Item url="/">Option 2</Menu.Item>
<Menu.Item url="/">Option 3</Menu.Item>
<Menu.Item url="/">Option 4</Menu.Item>
</Menu.List>
</Menu>
}
/>
Expand All @@ -38,12 +38,12 @@ export const ContextualMenuComponent = () => {
noArrow
body={
<Menu>
<MenuList>
<MenuItem url="/">Option 1</MenuItem>
<MenuItem url="/">Option 2</MenuItem>
<MenuItem url="/">Option 3</MenuItem>
<MenuItem url="/">Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url="/">Option 1</Menu.Item>
<Menu.Item url="/">Option 2</Menu.Item>
<Menu.Item url="/">Option 3</Menu.Item>
<Menu.Item url="/">Option 4</Menu.Item>
</Menu.List>
</Menu>
}
/>`;
Expand All @@ -67,12 +67,12 @@ This component is completely composed from other components CSS and doesn’t ha
<Popover
body={
<Menu>
<MenuList>
<MenuItem url='/'>Option 1</MenuItem>
<MenuItem url='/'>Option 2</MenuItem>
<MenuItem url='/'>Option 3</MenuItem>
<MenuItem url='/'>Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url='/'>Option 1</Menu.Item>
<Menu.Item url='/'>Option 2</Menu.Item>
<Menu.Item url='/'>Option 3</Menu.Item>
<Menu.Item url='/'>Option 4</Menu.Item>
</Menu.List>
</Menu>
}
control={<Button glyph='vertical-grip' option='light' />}
Expand All @@ -86,12 +86,12 @@ This component is completely composed from other components CSS and doesn’t ha
<Popover
body={
<Menu>
<MenuList>
<MenuItem url='/'>Option 1</MenuItem>
<MenuItem url='/'>Option 2</MenuItem>
<MenuItem url='/'>Option 3</MenuItem>
<MenuItem url='/'>Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url='/'>Option 1</Menu.Item>
<Menu.Item url='/'>Option 2</Menu.Item>
<Menu.Item url='/'>Option 3</Menu.Item>
<Menu.Item url='/'>Option 4</Menu.Item>
</Menu.List>
</Menu>
}
control={<Button>More</Button>}
Expand All @@ -100,12 +100,12 @@ This component is completely composed from other components CSS and doesn’t ha
<Popover
body={
<Menu>
<MenuList>
<MenuItem url='/'>Option 1</MenuItem>
<MenuItem url='/'>Option 2</MenuItem>
<MenuItem url='/'>Option 3</MenuItem>
<MenuItem url='/'>Option 4</MenuItem>
</MenuList>
<Menu.List>
<Menu.Item url='/'>Option 1</Menu.Item>
<Menu.Item url='/'>Option 2</Menu.Item>
<Menu.Item url='/'>Option 3</Menu.Item>
<Menu.Item url='/'>Option 4</Menu.Item>
</Menu.List>
</Menu>
}
control={<Button option='light'>More</Button>}
Expand Down
Loading