fix(pf3): using flex-layout instead of float in pf3-form group.

packages/pf3-component-mapper/demo/index.js

@@ -23,6 +23,7 @@ class App extends React.Component {
             formFieldsMapper={formFieldsMapper}
             layoutMapper={layoutMapper}
             schema={sandbox}
+            onCancel={() => console.log('cancel')}
           />
         </Row>
       </Grid>

packages/pf3-component-mapper/src/form-fields/layout-components.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { layoutComponents } from '@data-driven-forms/react-form-renderer';
-import { FormGroup, ButtonGroup, Icon, HelpBlock, Form } from 'patternfly-react';
-import Button from './button';
+import { Button, FormGroup, Icon, HelpBlock, Form } from 'patternfly-react';
+import './layout-components.scss';
 
 const ArrayFieldWrapper = ({ children }) => (
   <div style={{
@@ -27,18 +27,20 @@ FormButton.propTypes = {
   children: PropTypes.oneOfType([ PropTypes.node, PropTypes.arrayOf(PropTypes.node) ]),
 };
 
-const ButtonGroupWrapper = ({ children, ...props }) => (
-  <ButtonGroup
-    className="pull-right"
-    style={{ display: 'inline-block' }}
-    { ...props }
+const ButtonGroupWrapper = ({ children, className, ...props }) => (
+  <div className={ `ddorg__pf3-layout-components__button-group ${className}` } { ...props }
   >
     { children }
-  </ButtonGroup>
+  </div>
 );
 
 ButtonGroupWrapper.propTypes = {
   children: PropTypes.oneOfType([ PropTypes.node, PropTypes.arrayOf(PropTypes.node) ]).isRequired,
+  className: PropTypes.string,
+};
+
+ButtonGroupWrapper.defaultProps = {
+  className: '',
 };
 
 const TitleWrapper = ({ children }) => <h3>{ children }</h3>;

packages/pf3-component-mapper/src/form-fields/layout-components.scss

@@ -0,0 +1,10 @@
+.ddorg__pf3-layout-components__button-group {
+  display: flex;
+  margin-bottom: 8px;
+  button {
+    margin-left: 4px;
+    &:first-child {
+      margin-left: auto
+    }
+  }
+}

packages/pf3-component-mapper/src/tests/layout-components.test.js

@@ -1,5 +1,5 @@
 import { mount } from 'enzyme';
-import { FormGroup, Button, ButtonGroup, Icon, HelpBlock, Form } from 'patternfly-react';
+import { FormGroup, Button, Icon, HelpBlock, Form } from 'patternfly-react';
 import { layoutComponents } from '@data-driven-forms/react-form-renderer';
 import layoutMapper from '../form-fields/layout-components';
 
@@ -20,10 +20,6 @@ describe('Layout mapper', () => {
     expect(layoutMapper[layoutComponents.FORM_GROUP]).toEqual(FormGroup);
   });
 
-  it('should return PF3 ButtonGroup', () => {
-    expect(mount(layoutMapper[layoutComponents.BUTTON_GROUP]({})).find(ButtonGroup)).toHaveLength(1);
-  });
-
   it('should return PF3 Icon', () => {
     expect(mount(layoutMapper[layoutComponents.ICON]({ name: 'Foo' })).find(Icon)).toHaveLength(1);
   });