feat(Button): add floated prop to Button.Group (#1246)

* feat(Button): add `floated` prop to Button.Group

* docs(Button): add example for `floated` Button.Group

Author: mohammedkhadar

docs/app/Examples/elements/Button/GroupVariations/ButtonExampleGroupFloated.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Button } from 'semantic-ui-react'
+
+const ButtonExampleGroupFloated = () => (
+  <div>
+    <Button.Group floated='left'>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </Button.Group>
+    <Button.Group floated='right'>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </Button.Group>
+  </div>
+)
+
+export default ButtonExampleGroupFloated

docs/app/Examples/elements/Button/GroupVariations/index.js

@@ -4,6 +4,11 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
 const ButtonGroupVariationsExamples = () => (
   <ExampleSection title='Group Variations'>
+    <ComponentExample
+      title='Floated Group'
+      description='Groups can be aligned to the left or right of its container.'
+      examplePath='elements/Button/GroupVariations/ButtonExampleGroupFloated'
+    />
     <ComponentExample
       title='Vertical Group'
       description='Groups can be formatted to appear vertically.'

src/elements/Button/ButtonGroup.js

@@ -23,6 +23,7 @@ function ButtonGroup(props) {
     className,
     color,
     compact,
+    floated,
     fluid,
     icon,
     inverted,
@@ -54,6 +55,7 @@ function ButtonGroup(props) {
     useKeyOnly(toggle, 'toggle'),
     useKeyOnly(vertical, 'vertical'),
     useValueAndKey(attached, 'attached'),
+    useValueAndKey(floated, 'floated'),
     useWidthProp(widths),
     'buttons',
     className,
@@ -92,6 +94,9 @@ ButtonGroup.propTypes = {
   /** Groups can reduce their padding to fit into tighter spaces. */
   compact: PropTypes.bool,
 
+  /** Groups can be aligned to the left or right of its container. */
+  floated: PropTypes.oneOf(SUI.FLOATS),
+
   /** Groups can take the width of their container. */
   fluid: PropTypes.bool,
 

test/specs/elements/Button/ButtonGroup-test.js

@@ -10,6 +10,7 @@ describe('ButtonGroup', () => {
   common.implementsWidthProp(ButtonGroup, { propKey: 'widths', widthClass: 'buttons', canEqual: false })
 
   common.propKeyAndValueToClassName(ButtonGroup, 'attached')
+  common.propKeyAndValueToClassName(ButtonGroup, 'floated')
 
   common.propKeyOnlyToClassName(ButtonGroup, 'basic')
   common.propKeyOnlyToClassName(ButtonGroup, 'compact')