Skip to content
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

style(docs): update formatting of Menu and Table examples #1938

Merged
merged 1 commit into from
Aug 10, 2017
Merged

style(docs): update formatting of Menu and Table examples #1938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 10 additions & 12 deletions docs/app/Examples/collections/Menu/Content/MenuExampleButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import React from 'react'
import { Button, Menu } from 'semantic-ui-react'

const MenuExampleButtons = () => {
return (
<Menu>
<Menu.Item>
<Button primary>Sign up</Button>
</Menu.Item>
const MenuExampleButtons = () => (
<Menu>
<Menu.Item>
<Button primary>Sign up</Button>
</Menu.Item>

<Menu.Item>
<Button>Log-in</Button>
</Menu.Item>
</Menu>
)
}
<Menu.Item>
<Button>Log-in</Button>
</Menu.Item>
</Menu>
)

export default MenuExampleButtons
24 changes: 11 additions & 13 deletions docs/app/Examples/collections/Menu/Content/MenuExampleDropdownItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import React from 'react'
import { Dropdown, Menu } from 'semantic-ui-react'

const MenuExampleDropdownItem = () => {
return (
<Menu vertical>
<Dropdown item text='Categories'>
<Dropdown.Menu>
<Dropdown.Item>Electronics</Dropdown.Item>
<Dropdown.Item>Automotive</Dropdown.Item>
<Dropdown.Item>Home</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Menu>
)
}
const MenuExampleDropdownItem = () => (
<Menu vertical>
<Dropdown item text='Categories'>
<Dropdown.Menu>
<Dropdown.Item>Electronics</Dropdown.Item>
<Dropdown.Item>Automotive</Dropdown.Item>
<Dropdown.Item>Home</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Menu>
)

export default MenuExampleDropdownItem
2 changes: 1 addition & 1 deletion docs/app/Examples/collections/Menu/Content/MenuExampleHeaderVertical.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'

export default class MenuExampleHeaderVertical extends Component {
handleItemClick = (name) => this.setState({ activeItem: name })
handleItemClick = name => this.setState({ activeItem: name })

render() {
const { activeItem } = this.state || {}
Expand Down
22 changes: 10 additions & 12 deletions docs/app/Examples/collections/Menu/Content/MenuExampleInputs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import React from 'react'
import { Input, Menu } from 'semantic-ui-react'

const MenuExampleInputs = () => {
return (
<Menu>
<Menu.Item>
<Input className='icon' icon='search' placeholder='Search...' />
</Menu.Item>
const MenuExampleInputs = () => (
<Menu>
<Menu.Item>
<Input className='icon' icon='search' placeholder='Search...' />
</Menu.Item>

<Menu.Item position='right'>
<Input action={{ type: 'submit', content: 'Go' }} placeholder='Navigate to...' />
</Menu.Item>
</Menu>
)
}
<Menu.Item position='right'>
<Input action={{ type: 'submit', content: 'Go' }} placeholder='Navigate to...' />
</Menu.Item>
</Menu>
)

export default MenuExampleInputs
12 changes: 6 additions & 6 deletions docs/app/Examples/collections/Menu/Content/MenuExampleMenus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ export default class MenuExampleMenus extends Component {
Submit
</Menu.Item>

<Menu.Menu position='right'>
<Menu.Item name='signup' active={activeItem === 'signup'} onClick={this.handleItemClick}>
<Menu.Menu position='right'>
<Menu.Item name='signup' active={activeItem === 'signup'} onClick={this.handleItemClick}>
Sign Up
</Menu.Item>
</Menu.Item>

<Menu.Item name='help' active={activeItem === 'help'} onClick={this.handleItemClick}>
<Menu.Item name='help' active={activeItem === 'help'} onClick={this.handleItemClick}>
Help
</Menu.Item>
</Menu.Menu>
</Menu.Item>
</Menu.Menu>
</Menu>
)
}
Expand Down
112 changes: 55 additions & 57 deletions docs/app/Examples/collections/Menu/Content/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,71 +6,69 @@ import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
// TODO: Add example with <Popup> after it will be added
// TODO: Add example with <Search> after it will be added

const Content = () => {
return (
<ExampleSection title='Content'>
<ComponentExample
title='Header'
description='A menu item may include a header or may itself be a header.'
examplePath='collections/Menu/Content/MenuExampleHeader'
/>
<ComponentExample examplePath='collections/Menu/Content/MenuExampleHeaderVertical' />
const Content = () => (
<ExampleSection title='Content'>
<ComponentExample
title='Header'
description='A menu item may include a header or may itself be a header.'
examplePath='collections/Menu/Content/MenuExampleHeader'
/>
<ComponentExample examplePath='collections/Menu/Content/MenuExampleHeaderVertical' />

<ComponentExample
title='Text'
description='A vertical menu item can include any type of text content.'
examplePath='collections/Menu/Content/MenuExampleText'
/>
<ComponentExample
title='Text'
description='A vertical menu item can include any type of text content.'
examplePath='collections/Menu/Content/MenuExampleText'
/>

<ComponentExample
title='Input'
description='A menu item can contain an input inside of it.'
examplePath='collections/Menu/Content/MenuExampleInputs'
/>
<ComponentExample
title='Input'
description='A menu item can contain an input inside of it.'
examplePath='collections/Menu/Content/MenuExampleInputs'
/>

<ComponentExample
title='Button'
description='A menu item can contain a button inside of it.'
examplePath='collections/Menu/Content/MenuExampleButtons'
/>
<ComponentExample
title='Button'
description='A menu item can contain a button inside of it.'
examplePath='collections/Menu/Content/MenuExampleButtons'
/>

<ComponentExample
title='Link Item'
description='A menu may contain a link item, or an item formatted as if it is a link.'
examplePath='collections/Menu/Content/MenuExampleLinkItem'
/>
<ComponentExample
title='Link Item'
description='A menu may contain a link item, or an item formatted as if it is a link.'
examplePath='collections/Menu/Content/MenuExampleLinkItem'
/>

<ComponentExample
title='Dropdown Item'
description='An item may contain a nested menu in a dropdown.'
examplePath='collections/Menu/Content/MenuExampleDropdownItem'
/>
<ComponentExample
title='Dropdown Item'
description='An item may contain a nested menu in a dropdown.'
examplePath='collections/Menu/Content/MenuExampleDropdownItem'
/>

{/* <ComponentExample*/}
{/* title='Popup Menu'*/}
{/* description='A menu item may show a large menu, or additional content using a popup'*/}
{/* examplePath='collections/Menu/Content/Popups'*/}
{/* />*/}
{/* <ComponentExample */}
{/* title='Popup Menu' */}
{/* description='A menu item may show a large menu, or additional content using a popup' */}
{/* examplePath='collections/Menu/Content/Popups' */}
{/* /> */}

{/* <ComponentExample*/}
{/* title='Search'*/}
{/* description='A menu can contain a search input'*/}
{/* examplePath='collections/Menu/Content/Search'*/}
{/* />*/}
{/* <ComponentExample */}
{/* title='Search' */}
{/* description='A menu can contain a search input' */}
{/* examplePath='collections/Menu/Content/Search' */}
{/* /> */}

<ComponentExample
title='Menu'
description='A menu may contain another menu group in the same level as menu items.'
examplePath='collections/Menu/Content/MenuExampleMenus'
/>
<ComponentExample
title='Menu'
description='A menu may contain another menu group in the same level as menu items.'
examplePath='collections/Menu/Content/MenuExampleMenus'
/>

<ComponentExample
title='Sub Menu'
description='A menu item may contain another menu nested inside that acts as a grouped sub-menu.'
examplePath='collections/Menu/Content/MenuExampleSubMenu'
/>
</ExampleSection>
)
}
<ComponentExample
title='Sub Menu'
description='A menu item may contain another menu nested inside that acts as a grouped sub-menu.'
examplePath='collections/Menu/Content/MenuExampleSubMenu'
/>
</ExampleSection>
)

export default Content
14 changes: 6 additions & 8 deletions docs/app/Examples/collections/Menu/States/MenuExampleActive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React from 'react'
import { Menu } from 'semantic-ui-react'

const MenuExampleActive = () => {
return (
<Menu compact>
<Menu.Item active>
const MenuExampleActive = () => (
<Menu compact>
<Menu.Item active>
Link
</Menu.Item>
</Menu>
)
}
</Menu.Item>
</Menu>
)

export default MenuExampleActive
14 changes: 6 additions & 8 deletions docs/app/Examples/collections/Menu/States/MenuExampleDisabled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React from 'react'
import { Menu } from 'semantic-ui-react'

const MenuExampleDisabled = () => {
return (
<Menu compact>
<Menu.Item disabled>
const MenuExampleDisabled = () => (
<Menu compact>
<Menu.Item disabled>
Link
</Menu.Item>
</Menu>
)
}
</Menu.Item>
</Menu>
)

export default MenuExampleDisabled
14 changes: 6 additions & 8 deletions docs/app/Examples/collections/Menu/States/MenuExampleHover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React from 'react'
import { Menu } from 'semantic-ui-react'

const MenuExampleHover = () => {
return (
<Menu compact>
<Menu.Item as='a'>A link</Menu.Item>
<Menu.Item link>div Link</Menu.Item>
</Menu>
)
}
const MenuExampleHover = () => (
<Menu compact>
<Menu.Item as='a'>A link</Menu.Item>
<Menu.Item link>div Link</Menu.Item>
</Menu>
)

export default MenuExampleHover
40 changes: 19 additions & 21 deletions docs/app/Examples/collections/Menu/States/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,26 @@ import React from 'react'
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'

const States = () => {
return (
<ExampleSection title='States'>
<ComponentExample
title='Hover'
description='A menu item can be hovered.'
examplePath='collections/Menu/States/MenuExampleHover'
/>
const States = () => (
<ExampleSection title='States'>
<ComponentExample
title='Hover'
description='A menu item can be hovered.'
examplePath='collections/Menu/States/MenuExampleHover'
/>

<ComponentExample
title='Active'
description='A menu item can be active.'
examplePath='collections/Menu/States/MenuExampleActive'
/>
<ComponentExample
title='Active'
description='A menu item can be active.'
examplePath='collections/Menu/States/MenuExampleActive'
/>

<ComponentExample
title='Disabled'
description='A menu item can be disabled.'
examplePath='collections/Menu/States/MenuExampleDisabled'
/>
</ExampleSection>
)
}
<ComponentExample
title='Disabled'
description='A menu item can be disabled.'
examplePath='collections/Menu/States/MenuExampleDisabled'
/>
</ExampleSection>
)

export default States
Loading