Skip to content
This repository was archived by the owner on Aug 18, 2020. It is now read-only.

Feat/button component #357

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Feat/button component #357

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1d5ff77
feat(button component): added primary buttons as per ux pin
Jan 4, 2019
832d615
feat(button component): added text button and icon button
Jan 7, 2019
1d49ddd
feat(button component): added action button component
Jan 8, 2019
2c8150a
feat(button component): added secondary and default buttons
Jan 9, 2019
196cdb8
feat(button-component): changes for button component as per code review
Jan 23, 2019
44c66fe
feat(button-component): incorporated code review comments
Feb 8, 2019
9e42c9f
feat(button-component): review comment
Feb 9, 2019
1e2cc26
feat(button-component): renaming of classes
Feb 11, 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
26 changes: 26 additions & 0 deletions src/components/ActionListButton/ActionListButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react'
import '../../styles/components/buttons.css'
const Button = require('semantic-ui-react').Button

export const ActionListButton = props => {
const gearDownIcon = () => {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='-171 262.2 390.6 268.8'
>
<path d='M96.9,381.7c-0.4-3.8-4.8-6.6-8.6-6.6c-12.3,0-23.2-7.2-27.8-18.4c-4.7-11.5-1.7-24.8,7.5-33.2 c2.9-2.6,3.2-7.1,0.8-10.1c-6.3-8-13.5-15.2-21.3-21.5c-3.1-2.5-7.6-2.1-10.2,0.8c-8,8.9-22.4,12.2-33.5,7.5 c-11.6-4.9-18.9-16.6-18.2-29.2c0.2-4-2.7-7.4-6.6-7.8c-10-1.2-20.2-1.2-30.2-0.1c-3.9,0.4-6.8,3.8-6.7,7.7 c0.4,12.5-6.9,24-18.4,28.7c-11,4.5-25.3,1.2-33.3-7.6c-2.6-2.9-7.1-3.3-10.1-0.9c-8.1,6.3-15.4,13.6-21.7,21.5 c-2.5,3.1-2.1,7.6,0.8,10.2c9.4,8.5,12.4,21.9,7.5,33.5c-4.6,11-16.1,18.2-29.2,18.2c-4.3-0.1-7.3,2.7-7.8,6.6 c-1.2,10.1-1.2,20.4-0.1,30.6c0.4,3.8,5,6.6,8.8,6.6c11.7-0.3,22.9,6.9,27.6,18.4c4.7,11.5,1.7,24.8-7.5,33.2 c-2.9,2.6-3.2,7.1-0.8,10.1c6.2,8,13.4,15.2,21.3,21.5c3.1,2.5,7.6,2.1,10.2-0.8c8-8.9,22.4-12.2,33.5-7.5 c11.6,4.9,18.9,16.6,18.2,29.2c-0.2,4,2.7,7.4,6.6,7.9c5.1,0.6,10.3,0.9,15.5,0.9c4.9,0,9.8-0.3,14.8-0.8c3.9-0.4,6.8-3.8,6.7-7.7 c-0.5-12.5,6.9-24,18.4-28.7c11.1-4.5,25.3-1.2,33.3,7.6c2.7,2.9,7,3.2,10.1,0.8c8-6.3,15.3-13.5,21.7-21.5 c2.5-3.1,2.1-7.6-0.8-10.2C58,462.1,55,448.6,59.8,437c4.6-10.9,15.6-18.2,27.5-18.2l1.7,0c3.9,0.3,7.4-2.7,7.9-6.6 C98,402.2,98.1,391.9,96.9,381.7z M-36.4,441.7c-24.7,0-44.8-20.1-44.8-44.8c0-24.7,20.1-44.8,44.8-44.8 c24.7,0,44.8,20.1,44.8,44.8C8.4,421.6-11.7,441.7-36.4,441.7z' />
<polygon points='207.7,372.9 168.3,412.3 129,372.9 117,384.9 168.3,436.2 219.6,384.9' />
</svg>
)
}

return (
<Button {...props}>
&nbsp;
{gearDownIcon()}
</Button>
)
}
146 changes: 146 additions & 0 deletions src/components/Buttons/Buttons.examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
#### Primary Button
```js
Button = require('semantic-ui-react').Button;
Icon = require('semantic-ui-react').Icon;

<div>
<Button className='octagon'>Save</Button>
<Button className='octagon active'>Save</Button>
<Button className='octagon' loading>Save</Button>
<Button disabled className='octagon'>Save</Button>
<Button className='octagon'>
<Icon className='check circle outline' />
Save
</Button>
</div>
```

#### Secondary Button
```js
Button = require('semantic-ui-react').Button;
Icon = require('semantic-ui-react').Icon;

<div>
<Button className='octagon secondarybutton'>Save</Button>
<Button className='octagon secondarybutton active'>Save</Button>
<Button className='octagon secondarybutton' loading>Save</Button>
<Button disabled className='octagon secondarybutton'>Save</Button>
<Button className='octagon secondarybutton'>
<Icon className='check circle outline' />
Save
</Button>
</div>
```

#### Default Button
```js
Button = require('semantic-ui-react').Button;
Icon = require('semantic-ui-react').Icon;

<div>
<Button className='octagon defaultbutton'>Save</Button>
<Button className='octagon defaultbutton active'>Save</Button>
<Button className='octagon defaultbutton' loading>Save</Button>
<Button disabled className='octagon defaultbutton'>Save</Button>
<Button className='octagon defaultbutton'>
<Icon className='check circle outline' />
Save
</Button>
</div>
```


#### Default Button with icon
```js
Button = require('semantic-ui-react').Button;
Icon = require('semantic-ui-react').Icon;

<div>
<Button className='octagon defaultbutton'>
<Icon className='copy outline' />
Save
</Button>
<Button className='octagon defaultbutton active'>
<Icon className='copy outline' />
Save
</Button>
<Button className='octagon defaultbutton' loading>
<Icon className='copy outline' />
Save
</Button>
<Button disabled className='octagon defaultbutton'>
<Icon className='copy outline' />
Save
</Button>
<Button className='octagon defaultbutton'>
<Icon className='copy outline' />
Save
</Button>
</div>
```

#### Text Button
```js
Button = require('semantic-ui-react').Button;
Icon = require('semantic-ui-react').Icon;

<div>
<Button className='octagon textbutton'>Button</Button>
<Button className='octagon textbutton active'>Button</Button>
<Button className='octagon textbutton' loading>Button</Button>
<Button disabled className='octagon textbutton'>Button</Button>
<Button className='octagon textbutton'>
<Icon className='check circle outline' />
Button
</Button>
</div>
```

#### Icon Button with Text
```js
Button = require('semantic-ui-react').Button;
Icon = require('semantic-ui-react').Icon;

<div>
<Button className='octagon iconbutton'>
<Icon className='save outline' size='large' />
Save
</Button>
<Button className='octagon iconbutton active'>
<Icon className='save outline' size='large' />
Save
</Button>
<Button disabled className='octagon iconbutton'>
<Icon className='save outline' size='large' />
Save
</Button>
</div>
```

#### Icon Button
```js
Button = require('semantic-ui-react').Button;
Icon = require('semantic-ui-react').Icon;

<div>
<Button className='octagon iconbutton'>
<Icon className='close' size='large' />
</Button>
<Button className='octagon iconbutton active'>
<Icon className='close' size='large' />
</Button>
<Button disabled className='octagon iconbutton'>
<Icon className='close' size='large' />
</Button>
</div>
```

### Action Menu
```js
const Button = require('semantic-ui-react').Button;

<div>
<RolesActionList className='octagon actionbutton'/>
<RolesActionList className='octagon actionbutton active'/>
<RolesActionList disabled className='octagon actionbutton'/>
</div>
1 change: 1 addition & 0 deletions src/components/Buttons/Buttons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import '../../styles/components/buttons.css'
34 changes: 34 additions & 0 deletions src/components/RolesActionList/RolesActionList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react'
import { ActionListButton } from '../ActionListButton/ActionListButton'
import { Menu, Popup } from 'semantic-ui-react'

const RolesActionList = props => {
const { disabled } = props

return (
<Popup
className={`action-list ${disabled ? 'disabled' : null}`}
on='click'
hoverable
closeOnTriggerMouseLeave
closeOnPortalMouseLeave
position='bottom left'
style={{ padding: 0 }}
trigger={
<span>
{' '}
<ActionListButton {...props} />
</span>
}
>
{!disabled ? (
<Menu vertical>
<Menu.Item name='edit'>Export</Menu.Item>
<Menu.Item name='delete'>Delete</Menu.Item>
</Menu>
) : null}
</Popup>
)
}

export default RolesActionList
Loading