diff --git a/packages/pf3-component-mapper/demo/index.js b/packages/pf3-component-mapper/demo/index.js index c5d122eff..74154a44e 100644 --- a/packages/pf3-component-mapper/demo/index.js +++ b/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')} /> diff --git a/packages/pf3-component-mapper/src/form-fields/layout-components.js b/packages/pf3-component-mapper/src/form-fields/layout-components.js index 975560db2..3db1ce6f4 100644 --- a/packages/pf3-component-mapper/src/form-fields/layout-components.js +++ b/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 }) => (
( - ( +
{ children } - +
); ButtonGroupWrapper.propTypes = { children: PropTypes.oneOfType([ PropTypes.node, PropTypes.arrayOf(PropTypes.node) ]).isRequired, + className: PropTypes.string, +}; + +ButtonGroupWrapper.defaultProps = { + className: '', }; const TitleWrapper = ({ children }) =>

{ children }

; diff --git a/packages/pf3-component-mapper/src/form-fields/layout-components.scss b/packages/pf3-component-mapper/src/form-fields/layout-components.scss new file mode 100644 index 000000000..c80a9e704 --- /dev/null +++ b/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 + } + } +} diff --git a/packages/pf3-component-mapper/src/tests/layout-components.test.js b/packages/pf3-component-mapper/src/tests/layout-components.test.js index 6e1ac5614..3bbb4c0ef 100644 --- a/packages/pf3-component-mapper/src/tests/layout-components.test.js +++ b/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); }); diff --git a/packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap b/packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap index 246e4498a..a57ad719b 100644 --- a/packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap +++ b/packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap @@ -780,65 +780,97 @@ exports[`FormFields should render Switch correctly 1`] = `
- - - + + + + + +
+ + + + +
@@ -1856,65 +1888,98 @@ exports[`FormFields should render disabled Switch correctly 1`] = `
- - - + + + + + +
+ + + + + @@ -1990,65 +2055,98 @@ exports[`FormFields should render disabled Switch correctly 2`] = `
- - - + + + + + +
+ + + + + diff --git a/packages/react-form-renderer/src/form-renderer/index.js b/packages/react-form-renderer/src/form-renderer/index.js index 9883ca74b..4bca7cde2 100644 --- a/packages/react-form-renderer/src/form-renderer/index.js +++ b/packages/react-form-renderer/src/form-renderer/index.js @@ -147,4 +147,5 @@ FormRenderer.defaultProps = { uiSchema: {}, showFormControls: true, clearOnUnmount: false, + buttonClassName: '', }; diff --git a/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/array-form-component.test.js.snap b/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/array-form-component.test.js.snap index d21afcf11..82b9abd30 100644 --- a/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/array-form-component.test.js.snap +++ b/packages/react-form-renderer/src/tests/form-renderer/__snapshots__/array-form-component.test.js.snap @@ -22,6 +22,7 @@ exports[`renderForm function should render array field correctly 1`] = ` } > - +
- +
should render with description 1`] = ` should render with description 1`] = `
should render with description 1`] = ` } } > - -
+ +
should render with description 1`] = ` exports[` should render with title 1`] = ` should render with title 1`] = `
should render with title 1`] = ` } } > - -
+ +
should render with title 1`] = ` exports[` should render with title and description 1`] = ` should render with title and description 1`] = `
should render with title and description 1`] = ` } } > - -
+ +
should render with title and description 1`] = ` exports[` should render without title and description 1`] = ` should render without title and description 1`] = `
should render without title and description 1`] = ` } } > - -
+ +
should render form from schema 1`] = ` should render form from schema 1`] = ` should render form from schema 1`] = ` } } > - +