From 1d5ff7784f5f3ad782fb285a51117283c4809a10 Mon Sep 17 00:00:00 2001 From: Yuvraj Dhakate Date: Fri, 4 Jan 2019 18:01:50 +0530 Subject: [PATCH 1/8] feat(button component): added primary buttons as per ux pin --- src/components/Buttons/Buttons.examples.md | 17 ++++++++++++ src/components/Buttons/Buttons.jsx | 1 + src/styles/components/buttons.css | 32 ++++++++++++++++++++++ 3 files changed, 50 insertions(+) create mode 100644 src/components/Buttons/Buttons.examples.md create mode 100644 src/components/Buttons/Buttons.jsx create mode 100644 src/styles/components/buttons.css diff --git a/src/components/Buttons/Buttons.examples.md b/src/components/Buttons/Buttons.examples.md new file mode 100644 index 0000000..344d349 --- /dev/null +++ b/src/components/Buttons/Buttons.examples.md @@ -0,0 +1,17 @@ +#### Primary Button +```js +Button = require('semantic-ui-react').Button; +Icon = require('semantic-ui-react').Icon; + +
+ + + + + +
+``` + diff --git a/src/components/Buttons/Buttons.jsx b/src/components/Buttons/Buttons.jsx new file mode 100644 index 0000000..2c2a7b6 --- /dev/null +++ b/src/components/Buttons/Buttons.jsx @@ -0,0 +1 @@ +import '../../styles/components/buttons.css' diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css new file mode 100644 index 0000000..c424fb5 --- /dev/null +++ b/src/styles/components/buttons.css @@ -0,0 +1,32 @@ +@import '../../styles/variables.css'; + +button.button.octagoan{ + background: var(--peterriverBlue); + color: var(--white); + border-radius: 2px; + border:2px solid var(--peterriverBlue); + min-width:100px; + height: 40px; + + &:hover,&:active,&:focus,&.active,&.active:hover{ + background:var(--denimBlue); + border-color:var(--denimBlue); + color: var(--white); + } + + &:hover,&:active,&.active{ + box-shadow: none; + } + + &:focus{ + box-shadow: 0px 0px 1px 3px var(--silverGray); + } + + &:disabled{ + background : var(--lightgray); + color : var(--gray); + border:2px solid var(--lightgray); + cursor:not-allowed; + } + +} \ No newline at end of file From 832d615ea80a97ea0a1e6d845bb6c0d7dc5ec4a7 Mon Sep 17 00:00:00 2001 From: Yuvraj Dhakate Date: Mon, 7 Jan 2019 15:10:42 +0530 Subject: [PATCH 2/8] feat(button component): added text button and icon button --- src/components/Buttons/Buttons.examples.md | 55 ++++++++++++++++++ src/styles/components/buttons.css | 65 +++++++++++++++++++++- 2 files changed, 118 insertions(+), 2 deletions(-) diff --git a/src/components/Buttons/Buttons.examples.md b/src/components/Buttons/Buttons.examples.md index 344d349..b9a2ddf 100644 --- a/src/components/Buttons/Buttons.examples.md +++ b/src/components/Buttons/Buttons.examples.md @@ -15,3 +15,58 @@ Icon = require('semantic-ui-react').Icon; ``` +#### Text Button +```js +Button = require('semantic-ui-react').Button; +Icon = require('semantic-ui-react').Icon; + +
+ + + + + +
+``` + +#### Icon Button with Text +```js +Button = require('semantic-ui-react').Button; +Icon = require('semantic-ui-react').Icon; + +
+ + + +
+``` + +#### Icon Button +```js +Button = require('semantic-ui-react').Button; +Icon = require('semantic-ui-react').Icon; + +
+ + + +
+``` diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css index c424fb5..5e3267e 100644 --- a/src/styles/components/buttons.css +++ b/src/styles/components/buttons.css @@ -1,6 +1,6 @@ @import '../../styles/variables.css'; -button.button.octagoan{ +button.ui.button.octagoan{ background: var(--peterriverBlue); color: var(--white); border-radius: 2px; @@ -29,4 +29,65 @@ button.button.octagoan{ cursor:not-allowed; } -} \ No newline at end of file + &.textbutton{ + background: transparent; + color: var(--peterriverBlue); + border-radius: none; + border:none; + min-width:100px; + height: 40px; + &:hover,&:active,&:focus,&.active,&.active:hover,&:hover,&:active,&.active{ + background:transparent; + border-color:none; + color: var(--denimBlue); + } + + &:focus{ + border-radius: 2px; + border: 2px solid var(--silverGray); + box-shadow: none; + } + + &:disabled{ + background : transparent; + color : var(--gray); + cursor:not-allowed; + } + + } + + &.iconbutton{ + color :var(--darkgray); + background: transparent; + border:none; + height:auto; + + & .icon{ + display: block; + width: 100%; + text-align: center; + margin: 0 0 5px 0; + } + + &:not(.icon) > .icon:not(.button):not(.dropdown) { + margin: 0 0 5px 0; + } + + &:hover,&:active,&:focus,&.active,&.active:hover,&:hover,&:active,&.active{ + color:var(--peterriverBlue); + background: transparent; + } + + &:focus{ + border-radius: 2px; + border: 2px solid var(--silverGray); + box-shadow: none; + } + + &:disabled{ + background : transparent; + color : var(--gray); + cursor:not-allowed; + } + } +} From 1d49ddddc8dbd0aa3a7d79936ae9e209d1aadaba Mon Sep 17 00:00:00 2001 From: gsarbhukan Date: Tue, 8 Jan 2019 14:48:53 +0530 Subject: [PATCH 3/8] feat(button component): added action button component --- .../ActionListButton/ActionListButton.jsx | 26 +++++++++ src/components/Buttons/Buttons.examples.md | 42 ++++++++------ .../RolesActionList/RolesActionList.jsx | 34 +++++++++++ src/styles/components/buttons.css | 56 +++++++++++++++++-- 4 files changed, 138 insertions(+), 20 deletions(-) create mode 100644 src/components/ActionListButton/ActionListButton.jsx create mode 100644 src/components/RolesActionList/RolesActionList.jsx diff --git a/src/components/ActionListButton/ActionListButton.jsx b/src/components/ActionListButton/ActionListButton.jsx new file mode 100644 index 0000000..3fd2f44 --- /dev/null +++ b/src/components/ActionListButton/ActionListButton.jsx @@ -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 ( + + + + + ) + } + + return ( + + ) +} diff --git a/src/components/Buttons/Buttons.examples.md b/src/components/Buttons/Buttons.examples.md index b9a2ddf..d94e13e 100644 --- a/src/components/Buttons/Buttons.examples.md +++ b/src/components/Buttons/Buttons.examples.md @@ -4,11 +4,11 @@ Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - - - - + + + + @@ -21,11 +21,11 @@ Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - - - - + + + + @@ -38,15 +38,15 @@ Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - - @@ -59,14 +59,24 @@ Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - -
``` + +### Action Menu +```js +const Button = require('semantic-ui-react').Button; + +
+ + + +
diff --git a/src/components/RolesActionList/RolesActionList.jsx b/src/components/RolesActionList/RolesActionList.jsx new file mode 100644 index 0000000..545a0fb --- /dev/null +++ b/src/components/RolesActionList/RolesActionList.jsx @@ -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 ( + + {' '} + + + } + > + {!disabled ? ( + + Export + Delete + + ) : null} + + ) +} + +export default RolesActionList diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css index 5e3267e..1e74135 100644 --- a/src/styles/components/buttons.css +++ b/src/styles/components/buttons.css @@ -1,6 +1,6 @@ @import '../../styles/variables.css'; -button.ui.button.octagoan{ +button.ui.button.octagon{ background: var(--peterriverBlue); color: var(--white); border-radius: 2px; @@ -33,13 +33,15 @@ button.ui.button.octagoan{ background: transparent; color: var(--peterriverBlue); border-radius: none; - border:none; + border-width:2px; + border-color:transparent; min-width:100px; height: 40px; &:hover,&:active,&:focus,&.active,&.active:hover,&:hover,&:active,&.active{ background:transparent; border-color:none; color: var(--denimBlue); + border-color:transparent; } &:focus{ @@ -53,15 +55,17 @@ button.ui.button.octagoan{ color : var(--gray); cursor:not-allowed; } - } &.iconbutton{ color :var(--darkgray); background: transparent; - border:none; + border-width:2px; + border-color:transparent; + padding: 6px 10px; height:auto; + min-width:auto; & .icon{ display: block; width: 100%; @@ -76,6 +80,7 @@ button.ui.button.octagoan{ &:hover,&:active,&:focus,&.active,&.active:hover,&:hover,&:active,&.active{ color:var(--peterriverBlue); background: transparent; + border-color:transparent; } &:focus{ @@ -90,4 +95,47 @@ button.ui.button.octagoan{ cursor:not-allowed; } } + + + &.actionbutton{ + color :var(--darkgray); + background: transparent; + border-width:2px; + border-color:transparent; + height:auto; + min-width:auto; + padding: 4px 6px; + + & svg{ + fill:var(--darkgray); + } + + &:hover,&:active,&:focus,&.active,&.active:hover,&:hover,&:active,&.active{ + background: transparent; + border-color:transparent; + & svg{ + fill:var(--peterriverBlue); + } + } + + &:focus{ + border-radius: 2px; + border-color:var(--silverGray); + box-shadow: none; + } + + &:disabled{ + background : transparent; + color : var(--silverGray); + cursor:not-allowed; + & svg{ + fill:var(--silverGray); + } + } + } } + +.visible.transition.disabled{ + display: none !important; +} + From 2c8150ad7510e2639b06a3c6a3abcb467c56957c Mon Sep 17 00:00:00 2001 From: pakumar Date: Wed, 9 Jan 2019 18:04:21 +0530 Subject: [PATCH 4/8] feat(button component): added secondary and default buttons --- src/components/Buttons/Buttons.examples.md | 64 ++++++++++++++++++++++ src/styles/components/buttons.css | 57 +++++++++++++++++++ 2 files changed, 121 insertions(+) diff --git a/src/components/Buttons/Buttons.examples.md b/src/components/Buttons/Buttons.examples.md index d94e13e..9c82f7b 100644 --- a/src/components/Buttons/Buttons.examples.md +++ b/src/components/Buttons/Buttons.examples.md @@ -15,6 +15,70 @@ Icon = require('semantic-ui-react').Icon;
``` +#### Secondary Button +```js +Button = require('semantic-ui-react').Button; +Icon = require('semantic-ui-react').Icon; + +
+ + + + + +
+``` + +#### Default Button +```js +Button = require('semantic-ui-react').Button; +Icon = require('semantic-ui-react').Icon; + +
+ + + + + +
+``` + + +#### Default Button with icon +```js +Button = require('semantic-ui-react').Button; +Icon = require('semantic-ui-react').Icon; + +
+ + + + + +
+``` + #### Text Button ```js Button = require('semantic-ui-react').Button; diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css index 1e74135..fe1e1c8 100644 --- a/src/styles/components/buttons.css +++ b/src/styles/components/buttons.css @@ -133,6 +133,63 @@ button.ui.button.octagon{ } } } + + &.secondarybutton{ + background: var(--white); + color: var(--charcoalGray); + border-radius: 2px; + border:2px solid var(--silverGray); + min-width:100px; + height: 40px; + + &:hover,&:active,&:focus,&.active,&.active:hover,&:hover,&:active,&.active{ + background:var(--silverGray); + border-color:var(--silverGray); + color: var(--charcoalGray); + } + + &:focus{ + border-radius: 2px; + border: 2px solid var(--silverGray); + box-shadow: 0px 0px 1px 3px var(--silverGray); + } + + &:disabled{ + background : transparent; + color : var(--silverGray); + cursor:not-allowed; + } + } + + &.defaultbutton { + background: var(--white); + color: var(--peterriverBlue); + border-radius: 2px; + border: 2px solid var(--peterriverBlue); + min-width: 100px; + height: 40px; + + &:hover,&:active,&:focus,&.active,&.active:hover{ + background:var(--denimBlue); + border-color:var(--denimBlue); + color: var(--white); + } + + &:hover,&:active,&.active{ + box-shadow: none; + } + + &:focus{ + box-shadow: 0px 0px 1px 3px var(--silverGray); + } + + &:disabled{ + background : var(--white); + color : var(--gray); + border:2px solid var(--lightgray); + cursor:not-allowed; + } + } } .visible.transition.disabled{ From 196cdb8f90b2110e410bc7931e1d69bd574d7858 Mon Sep 17 00:00:00 2001 From: gsarbhukan Date: Wed, 23 Jan 2019 14:43:53 +0530 Subject: [PATCH 5/8] feat(button-component): changes for button component as per code review --- .../ActionListButton/ActionListButton.jsx | 30 +++++++++---------- .../RolesActionList/RolesActionList.jsx | 9 +++--- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/components/ActionListButton/ActionListButton.jsx b/src/components/ActionListButton/ActionListButton.jsx index 3fd2f44..ab850f0 100644 --- a/src/components/ActionListButton/ActionListButton.jsx +++ b/src/components/ActionListButton/ActionListButton.jsx @@ -1,22 +1,22 @@ import React from 'react' import '../../styles/components/buttons.css' -const Button = require('semantic-ui-react').Button +import { Button } from 'semantic-ui-react' -export const ActionListButton = props => { - const gearDownIcon = () => { - return ( - - - - - ) - } +const gearDownIcon = () => { + return ( + + + + + ) +} +export const ActionListButton = props => { return ( - - - - + + + + +
``` @@ -21,14 +21,14 @@ Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - - - - + + + + +
``` @@ -38,58 +38,52 @@ Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - - - - + + + + +
``` - #### Default Button with icon ```js Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - - - - + + + +
``` -#### Text Button +#### Text Button with Icon ```js Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - - - - + + + + @@ -102,15 +96,15 @@ Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - - @@ -123,14 +117,14 @@ Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - -
``` @@ -138,9 +132,20 @@ Icon = require('semantic-ui-react').Icon; ### Action Menu ```js const Button = require('semantic-ui-react').Button; +const menuList =[ + {'id':1,'Name':'Export', 'icon':'ei icon_cog'}, + {'id':2,'Name':'Delete', 'icon':'ei icon_info'}, + {'id':3,'Name':'Copy', 'icon':'save outline'}, + {'id':4,'Name':'Settings', 'icon':'ei icon_cog'} +] + +initialState = { + actionMenuList:menuList +};
- - - + + +
+``` \ No newline at end of file diff --git a/src/components/RolesActionList/RolesActionList.jsx b/src/components/RolesActionList/RolesActionList.jsx deleted file mode 100644 index d4f6d11..0000000 --- a/src/components/RolesActionList/RolesActionList.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import { ActionListButton } from '../ActionListButton/ActionListButton' -import { Menu, Popup } from 'semantic-ui-react' -import classNames from 'classnames' - -const RolesActionList = props => { - const { disabled } = props - const btnClass = classNames('action-list', { disabled: disabled }) - - return ( - - - - } - > - {!disabled && ( - - Export - Delete - - )} - - ) -} - -export default RolesActionList diff --git a/src/styles/components/buttons.css b/src/styles/components/buttons.css index fe1e1c8..7bb8a3c 100644 --- a/src/styles/components/buttons.css +++ b/src/styles/components/buttons.css @@ -1,35 +1,96 @@ @import '../../styles/variables.css'; -button.ui.button.octagon{ - background: var(--peterriverBlue); - color: var(--white); +button.ui.button{ + background: var(--white); + color: var(--peterriverBlue); border-radius: 2px; - border:2px solid var(--peterriverBlue); - min-width:100px; + border: 2px solid var(--peterriverBlue); + min-width: 100px; height: 40px; - &:hover,&:active,&:focus,&.active,&.active:hover{ - background:var(--denimBlue); - border-color:var(--denimBlue); - color: var(--white); - } - &:hover,&:active,&.active{ box-shadow: none; } + &:hover,&:active,&:focus,&.active,&.active:hover{ + background:var(--denimBlue); + border-color:var(--denimBlue); + color: var(--white); + } + &:focus{ - box-shadow: 0px 0px 1px 3px var(--silverGray); + box-shadow: 0 0 0 1px var(--white), 0px 0px 1px 3px var(--silverGray); } &:disabled{ - background : var(--lightgray); + background : var(--white); color : var(--gray); border:2px solid var(--lightgray); cursor:not-allowed; } - &.textbutton{ + &.positive { + background: var(--peterriverBlue); + color: var(--white); + border-radius: 2px; + border:2px solid var(--peterriverBlue); + min-width:100px; + height: 40px; + + &:hover,&:active,&.active{ + box-shadow: none; + } + + &:hover,&:active,&:focus,&.active,&.active:hover{ + background:var(--denimBlue); + border-color:var(--denimBlue); + color: var(--white); + } + + &:focus{ + box-shadow: 0 0 0 1px var(--white), 0px 0px 1px 3px var(--silverGray); + } + + &:disabled{ + background : var(--lightgray); + color : var(--gray); + border:2px solid var(--lightgray); + cursor:not-allowed; + } + } + + &.negative{ + background: var(--white); + color: var(--charcoalGray); + border-radius: 2px; + border:2px solid var(--silverGray); + min-width:100px; + height: 40px; + + &:hover,&:active,&.active{ + box-shadow: none; + } + + &:hover,&:active,&:focus,&.active,&.active:hover{ + background:var(--silverGray); + border-color:var(--silverGray); + color: var(--charcoalGray); + } + + &:focus{ + border-radius: 2px; + border: 2px solid var(--silverGray); + box-shadow: 0 0 0 1px var(--white), 0px 0px 1px 3px var(--silverGray); + } + + &:disabled{ + background : transparent; + color : var(--silverGray); + cursor:not-allowed; + } + } + + &.textButton{ background: transparent; color: var(--peterriverBlue); border-radius: none; @@ -37,7 +98,8 @@ button.ui.button.octagon{ border-color:transparent; min-width:100px; height: 40px; - &:hover,&:active,&:focus,&.active,&.active:hover,&:hover,&:active,&.active{ + + &:hover,&:active,&:focus,&.active,&.active:hover{ background:transparent; border-color:none; color: var(--denimBlue); @@ -45,9 +107,9 @@ button.ui.button.octagon{ } &:focus{ - border-radius: 2px; - border: 2px solid var(--silverGray); - box-shadow: none; + border-radius: 2px; + border: 2px solid var(--silverGray); + box-shadow: none; } &:disabled{ @@ -55,17 +117,17 @@ button.ui.button.octagon{ color : var(--gray); cursor:not-allowed; } - } + } - &.iconbutton{ + &.iconButton{ color :var(--darkgray); background: transparent; - border-width:2px; - border-color:transparent; - padding: 6px 10px; + border-width:2px; + border-color:transparent; + padding: 6px 10px; height:auto; + min-width:auto; - min-width:auto; & .icon{ display: block; width: 100%; @@ -96,8 +158,7 @@ button.ui.button.octagon{ } } - - &.actionbutton{ + &.actionButton{ color :var(--darkgray); background: transparent; border-width:2px; @@ -113,83 +174,28 @@ button.ui.button.octagon{ &:hover,&:active,&:focus,&.active,&.active:hover,&:hover,&:active,&.active{ background: transparent; border-color:transparent; + & svg{ fill:var(--peterriverBlue); } } &:focus{ - border-radius: 2px; - border-color:var(--silverGray); - box-shadow: none; - } + border-radius: 2px; + border-color:var(--silverGray); + box-shadow: none; + } &:disabled{ - background : transparent; - color : var(--silverGray); - cursor:not-allowed; + background : transparent; + color : var(--silverGray); + cursor:not-allowed; + & svg{ fill:var(--silverGray); } - } - } - - &.secondarybutton{ - background: var(--white); - color: var(--charcoalGray); - border-radius: 2px; - border:2px solid var(--silverGray); - min-width:100px; - height: 40px; - - &:hover,&:active,&:focus,&.active,&.active:hover,&:hover,&:active,&.active{ - background:var(--silverGray); - border-color:var(--silverGray); - color: var(--charcoalGray); - } - - &:focus{ - border-radius: 2px; - border: 2px solid var(--silverGray); - box-shadow: 0px 0px 1px 3px var(--silverGray); - } - - &:disabled{ - background : transparent; - color : var(--silverGray); - cursor:not-allowed; - } + } } - - &.defaultbutton { - background: var(--white); - color: var(--peterriverBlue); - border-radius: 2px; - border: 2px solid var(--peterriverBlue); - min-width: 100px; - height: 40px; - - &:hover,&:active,&:focus,&.active,&.active:hover{ - background:var(--denimBlue); - border-color:var(--denimBlue); - color: var(--white); - } - - &:hover,&:active,&.active{ - box-shadow: none; - } - - &:focus{ - box-shadow: 0px 0px 1px 3px var(--silverGray); - } - - &:disabled{ - background : var(--white); - color : var(--gray); - border:2px solid var(--lightgray); - cursor:not-allowed; - } - } } .visible.transition.disabled{ From 9e42c9fa7bb664e44333479d5262b6234a3e75c3 Mon Sep 17 00:00:00 2001 From: gsarbhukan Date: Sat, 9 Feb 2019 23:36:36 +0530 Subject: [PATCH 7/8] feat(button-component): review comment --- src/components/ActionListButton/ActionListButton.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ActionListButton/ActionListButton.jsx b/src/components/ActionListButton/ActionListButton.jsx index ab850f0..b84158a 100644 --- a/src/components/ActionListButton/ActionListButton.jsx +++ b/src/components/ActionListButton/ActionListButton.jsx @@ -2,7 +2,7 @@ import React from 'react' import '../../styles/components/buttons.css' import { Button } from 'semantic-ui-react' -const gearDownIcon = () => { +const GearDownIcon = () => { return ( { return ( ) } From 1e2cc265db45387c03f3eb704cc1cdaff4c470f5 Mon Sep 17 00:00:00 2001 From: gsarbhukan Date: Mon, 11 Feb 2019 14:02:52 +0530 Subject: [PATCH 8/8] feat(button-component): renaming of classes --- src/components/ActionList/ActionList.jsx | 8 +++--- src/components/Buttons/Buttons.examples.md | 26 +++++++++---------- src/styles/components/buttons.css | 29 ++++++++++++++++------ 3 files changed, 38 insertions(+), 25 deletions(-) diff --git a/src/components/ActionList/ActionList.jsx b/src/components/ActionList/ActionList.jsx index 77c7699..befd2fb 100644 --- a/src/components/ActionList/ActionList.jsx +++ b/src/components/ActionList/ActionList.jsx @@ -4,7 +4,7 @@ import { ActionListButton } from '../ActionListButton/ActionListButton' import classNames from 'classnames' const ActionList = props => { - const { disabled, actionMenuList } = props + const { disabled, actionmenulist } = props return ( { } > {!disabled && - actionMenuList != null && - actionMenuList.length > 0 && ( + actionmenulist != null && + actionmenulist.length > 0 && ( - {actionMenuList.map(el => ( + {actionmenulist.map(el => ( {el.Name} diff --git a/src/components/Buttons/Buttons.examples.md b/src/components/Buttons/Buttons.examples.md index 3449587..d438642 100644 --- a/src/components/Buttons/Buttons.examples.md +++ b/src/components/Buttons/Buttons.examples.md @@ -4,11 +4,11 @@ Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - - - - + + + + @@ -21,10 +21,10 @@ Button = require('semantic-ui-react').Button; Icon = require('semantic-ui-react').Icon;
- - - - + + + +