Skip to content

Commit ae92d5e

Browse files
rvsiarvsia
authored
Merge pull request #226 from data-driven-forms/fix-pf4-buttons-spacing
fix(pf4): updated form buttons to fix spacing.
2 parents ccfb137 + dc40ea7 commit ae92d5e

File tree

5 files changed

+57
-88
lines changed

5 files changed

+57
-88
lines changed

‎packages/pf4-component-mapper/demo/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/patternfly@2.5.0/patternfly-base.css"/>
7+
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/patternfly@2.41.0/patternfly-base.css"/>
88
<title>Data driven forms</title>
99
</head>
1010
<body>

‎packages/pf4-component-mapper/src/form-fields/layout-components-styles.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,3 @@
1717
grid-column-end: 12;
1818
align-self: end;
1919
}
20-
21-
.data-driven-forms__pf4-button-group {
22-
margin-bottom: 16px
23-
}

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { layoutComponents } from '@data-driven-forms/react-form-renderer';
4-
import { Form, Toolbar, ToolbarGroup, ToolbarItem, Button, ActionGroup, TextContent, Text, TextVariants } from '@patternfly/react-core';
4+
import { Form, Button, ActionGroup, TextContent, Text, TextVariants } from '@patternfly/react-core';
55
import './layout-components-styles.scss';
66

77
const ButtonLayout = ({ label, bsStyle, children, ...props }) =>
8-
<ToolbarGroup className="data-driven-forms__pf4-button-group">
9-
<ToolbarItem>
10-
<Button variant={ bsStyle || 'secondary' } { ...props }>
11-
{ label }{ children }
12-
</Button>
13-
</ToolbarItem>
14-
</ToolbarGroup>;
8+
<Button variant={ bsStyle || 'secondary' } { ...props }>
9+
{ label }{ children }
10+
</Button>;
1511

1612
ButtonLayout.propTypes = {
1713
label: PropTypes.string.isRequired,
@@ -24,9 +20,7 @@ ButtonLayout.propTypes = {
2420

2521
const ButtonGroupLayout = ({ children, ...props }) =>
2622
<ActionGroup { ...props } >
27-
<Toolbar>
28-
{ children }
29-
</Toolbar>
23+
{ children }
3024
</ActionGroup>;
3125

3226
ButtonGroupLayout.propTypes = {

‎packages/pf4-component-mapper/src/tests/field-array/__snapshots__/field-array.test.js.snap

Lines changed: 50 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -660,80 +660,60 @@ exports[`FieldArray should render array field correctly 1`] = `
660660
<div
661661
className="pf-c-form__actions"
662662
>
663-
<Toolbar>
664-
<div
665-
className="pf-l-toolbar"
663+
<ButtonLayout
664+
key="form-submit"
665+
label="Submit"
666+
onClick={[Function]}
667+
type="button"
668+
variant="primary"
669+
>
670+
<Component
671+
onClick={[Function]}
672+
type="button"
673+
variant="primary"
666674
>
667-
<ButtonLayout
668-
key="form-submit"
669-
label="Submit"
670-
onClick={[Function]}
671-
type="button"
672-
variant="primary"
675+
<ComponentWithOuia
676+
component={[Function]}
677+
componentProps={
678+
Object {
679+
"children": Array [
680+
"Submit",
681+
undefined,
682+
],
683+
"disabled": undefined,
684+
"onClick": [Function],
685+
"type": "button",
686+
"variant": "primary",
687+
}
688+
}
689+
consumerContext={null}
673690
>
674-
<ToolbarGroup
675-
className="data-driven-forms__pf4-button-group"
691+
<Button
692+
onClick={[Function]}
693+
ouiaContext={
694+
Object {
695+
"isOuia": false,
696+
"ouiaId": null,
697+
}
698+
}
699+
type="button"
700+
variant="primary"
676701
>
677-
<div
678-
className="pf-l-toolbar__group data-driven-forms__pf4-button-group"
702+
<button
703+
aria-disabled={null}
704+
aria-label={null}
705+
className="pf-c-button pf-m-primary"
706+
disabled={false}
707+
onClick={[Function]}
708+
tabIndex={null}
709+
type="button"
679710
>
680-
<ToolbarItem>
681-
<div
682-
className="pf-l-toolbar__item"
683-
>
684-
<Component
685-
onClick={[Function]}
686-
type="button"
687-
variant="primary"
688-
>
689-
<ComponentWithOuia
690-
component={[Function]}
691-
componentProps={
692-
Object {
693-
"children": Array [
694-
"Submit",
695-
undefined,
696-
],
697-
"disabled": undefined,
698-
"onClick": [Function],
699-
"type": "button",
700-
"variant": "primary",
701-
}
702-
}
703-
consumerContext={null}
704-
>
705-
<Button
706-
onClick={[Function]}
707-
ouiaContext={
708-
Object {
709-
"isOuia": false,
710-
"ouiaId": null,
711-
}
712-
}
713-
type="button"
714-
variant="primary"
715-
>
716-
<button
717-
aria-disabled={null}
718-
aria-label={null}
719-
className="pf-c-button pf-m-primary"
720-
disabled={false}
721-
onClick={[Function]}
722-
tabIndex={null}
723-
type="button"
724-
>
725-
Submit
726-
</button>
727-
</Button>
728-
</ComponentWithOuia>
729-
</Component>
730-
</div>
731-
</ToolbarItem>
732-
</div>
733-
</ToolbarGroup>
734-
</ButtonLayout>
735-
</div>
736-
</Toolbar>
711+
Submit
712+
</button>
713+
</Button>
714+
</ComponentWithOuia>
715+
</Component>
716+
</ButtonLayout>
737717
</div>
738718
</div>
739719
</ActionGroup>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { mount } from 'enzyme';
2-
import { Toolbar, Button, ActionGroup, TextContent, Text } from '@patternfly/react-core';
2+
import { Button, ActionGroup, TextContent, Text } from '@patternfly/react-core';
33
import { layoutComponents } from '@data-driven-forms/react-form-renderer';
44
import layoutMapper from '../form-fields/layout-components';
55

@@ -9,7 +9,6 @@ describe('Layout mapper', () => {
99
});
1010

1111
it('should return PF4 ButtonGroup', () => {
12-
expect(mount(layoutMapper[layoutComponents.BUTTON_GROUP]({})).find(Toolbar)).toHaveLength(1);
1312
expect(mount(layoutMapper[layoutComponents.BUTTON_GROUP]({})).find(ActionGroup)).toHaveLength(1);
1413
});
1514

0 commit comments

Comments
 (0)