Skip to content

Commit ecc8af3

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #813 from rvsia/properFormStyling
fix(carbon): fix spacing for form template
2 parents 5af9f5d + 0be757a commit ecc8af3

File tree

8 files changed

+67
-12
lines changed

8 files changed

+67
-12
lines changed

‎packages/carbon-component-mapper/src/files/form-template.js‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import clsx from 'clsx';
34

45
import { Form as CarbonForm, Button as CarbonButton, ButtonSet } from 'carbon-components-react';
56

67
import FormTemplate from '@data-driven-forms/common/src/form-template';
78

9+
import './form-template.scss';
10+
811
export const Button = ({ label, buttonType, ...props }) => (
912
<CarbonButton kind={buttonType === 'submit' ? 'primary' : 'secondary'} {...props}>
1013
{label}
@@ -16,13 +19,18 @@ Button.propTypes = {
1619
buttonType: PropTypes.string
1720
};
1821

19-
export const ButtonGroup = ({ children, ...props }) => <ButtonSet {...props}>{children}</ButtonSet>;
22+
export const ButtonGroup = ({ children, className, ...props }) => (
23+
<ButtonSet {...props} className={clsx('ddorg__carbon-form-template-buttons', className)}>
24+
{children}
25+
</ButtonSet>
26+
);
2027

2128
ButtonGroup.propTypes = {
22-
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
29+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
30+
className: PropTypes.string
2331
};
2432

25-
export const Title = ({ children }) => <h1>{children}</h1>;
33+
export const Title = ({ children }) => <h3>{children}</h3>;
2634

2735
Title.propTypes = {
2836
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
@@ -34,16 +42,19 @@ Description.propTypes = {
3442
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
3543
};
3644

37-
export const Form = ({ children, ...props }) => (
38-
<CarbonForm noValidate {...props}>
45+
export const Form = ({ children, className, ...props }) => (
46+
<CarbonForm noValidate {...props} className={clsx('ddorg__carbon-form-template-form', className)}>
3947
{children}
4048
</CarbonForm>
4149
);
4250

4351
Form.propTypes = {
44-
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
52+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
53+
className: PropTypes.string
4554
};
4655

56+
export const Header = (props) => <div className="ddorg__carbon-form-template-header" {...props} />;
57+
4758
const WrappedFormTemplate = (props) => (
4859
<FormTemplate
4960
FormWrapper={Form}
@@ -52,6 +63,7 @@ const WrappedFormTemplate = (props) => (
5263
Title={Title}
5364
Description={Description}
5465
buttonOrder={['cancel', 'reset', 'submit']}
66+
Header={Header}
5567
{...props}
5668
/>
5769
);

‎packages/carbon-component-mapper/src/files/form-template.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.ddorg__carbon-form-template-buttons {
2+
margin-top: 48px;
3+
}
4+
5+
.ddorg__carbon-form-template-form {
6+
>:not(:last-child) {
7+
margin-bottom: 32px;
8+
}
9+
10+
.ddorg__carbon-form-template-header {
11+
margin-bottom: 40px;
12+
13+
div {
14+
margin-top: 8px;
15+
}
16+
}
17+
}

‎packages/common/src/form-template.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,9 @@ const FormTemplate = ({
104104
Button,
105105
ButtonGroup,
106106
formWrapperProps,
107-
showFormControls = true,
108-
disableSubmit = [],
107+
showFormControls,
108+
disableSubmit,
109+
Header,
109110
...rest
110111
}) => {
111112
const {
@@ -116,8 +117,12 @@ const FormTemplate = ({
116117

117118
return (
118119
<FormWrapper onSubmit={handleSubmit} {...formWrapperProps}>
119-
{(title || label) && <Title>{title || label}</Title>}
120-
{description && <Description>{description}</Description>}
120+
{(title || label || description) && (
121+
<Header>
122+
{(title || label) && <Title>{title || label}</Title>}
123+
{description && <Description>{description}</Description>}
124+
</Header>
125+
)}
121126
{formFields}
122127
{showFormControls && (
123128
<FormSpy>
@@ -147,12 +152,14 @@ FormTemplate.propTypes = {
147152
ButtonGroup: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]).isRequired,
148153
formWrapperProps: PropTypes.object,
149154
showFormControls: PropTypes.bool,
150-
disableSubmit: PropTypes.arrayOf(PropTypes.string)
155+
disableSubmit: PropTypes.arrayOf(PropTypes.string),
156+
Header: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element, PropTypes.oneOf([React.Fragment])])
151157
};
152158

153159
FormTemplate.defaultProps = {
154160
showFormControls: true,
155-
disableSubmit: []
161+
disableSubmit: [],
162+
Header: React.Fragment
156163
};
157164

158165
export default FormTemplate;

‎packages/pf3-component-mapper/src/tests/__snapshots__/input-addon.test.js.snap‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,7 @@ exports[`<Input Addon> should render group button before input addon correctly 1
245245
ButtonGroup={[Function]}
246246
Description={[Function]}
247247
FormWrapper={[Function]}
248+
Header={Symbol(react.fragment)}
248249
Title={[Function]}
249250
disableSubmit={Array []}
250251
formFields={
@@ -948,6 +949,7 @@ exports[`<Input Addon> should render group mixed before input addon correctly 1`
948949
ButtonGroup={[Function]}
949950
Description={[Function]}
950951
FormWrapper={[Function]}
952+
Header={Symbol(react.fragment)}
951953
Title={[Function]}
952954
disableSubmit={Array []}
953955
formFields={
@@ -1621,6 +1623,7 @@ exports[`<Input Addon> should render single after input addon correctly 1`] = `
16211623
ButtonGroup={[Function]}
16221624
Description={[Function]}
16231625
FormWrapper={[Function]}
1626+
Header={Symbol(react.fragment)}
16241627
Title={[Function]}
16251628
disableSubmit={Array []}
16261629
formFields={
@@ -2068,6 +2071,7 @@ exports[`<Input Addon> should render single before input addon correctly 1`] = `
20682071
ButtonGroup={[Function]}
20692072
Description={[Function]}
20702073
FormWrapper={[Function]}
2074+
Header={Symbol(react.fragment)}
20712075
Title={[Function]}
20722076
disableSubmit={Array []}
20732077
formFields={
@@ -2510,6 +2514,7 @@ exports[`<Input Addon> should render single button after input addon correctly 1
25102514
ButtonGroup={[Function]}
25112515
Description={[Function]}
25122516
FormWrapper={[Function]}
2517+
Header={Symbol(react.fragment)}
25132518
Title={[Function]}
25142519
disableSubmit={Array []}
25152520
formFields={
@@ -2986,6 +2991,7 @@ exports[`<Input Addon> should render single button before input addon correctly
29862991
ButtonGroup={[Function]}
29872992
Description={[Function]}
29882993
FormWrapper={[Function]}
2994+
Header={Symbol(react.fragment)}
29892995
Title={[Function]}
29902996
disableSubmit={Array []}
29912997
formFields={
@@ -3706,6 +3712,7 @@ exports[`<Input Addon> should render the ultimate input addon correctly 1`] = `
37063712
ButtonGroup={[Function]}
37073713
Description={[Function]}
37083714
FormWrapper={[Function]}
3715+
Header={Symbol(react.fragment)}
37093716
Title={[Function]}
37103717
disableSubmit={Array []}
37113718
formFields={

‎packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ exports[`<MultipleChoiceList /> should render correctly 1`] = `
111111
ButtonGroup={[Function]}
112112
Description={[Function]}
113113
FormWrapper={[Function]}
114+
Header={Symbol(react.fragment)}
114115
Title={[Function]}
115116
disableSubmit={Array []}
116117
formFields={
@@ -893,6 +894,7 @@ exports[`<MultipleChoiceList /> should render in error state 1`] = `
893894
ButtonGroup={[Function]}
894895
Description={[Function]}
895896
FormWrapper={[Function]}
897+
Header={Symbol(react.fragment)}
896898
Title={[Function]}
897899
disableSubmit={Array []}
898900
formFields={

‎packages/pf3-component-mapper/src/tests/__snapshots__/wizard.test.js.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ exports[`<Wizard /> should render Wizard correctly 1`] = `
185185
ButtonGroup={[Function]}
186186
Description={[Function]}
187187
FormWrapper={[Function]}
188+
Header={Symbol(react.fragment)}
188189
Title={[Function]}
189190
disableSubmit={Array []}
190191
formFields={
@@ -876,6 +877,7 @@ exports[`<Wizard /> should render Wizard with conditional steps correctly 1`] =
876877
ButtonGroup={[Function]}
877878
Description={[Function]}
878879
FormWrapper={[Function]}
880+
Header={Symbol(react.fragment)}
879881
Title={[Function]}
880882
disableSubmit={Array []}
881883
formFields={
@@ -1685,6 +1687,7 @@ exports[`<Wizard /> should render Wizard with stepsInfo correctly 1`] = `
16851687
ButtonGroup={[Function]}
16861688
Description={[Function]}
16871689
FormWrapper={[Function]}
1690+
Header={Symbol(react.fragment)}
16881691
Title={[Function]}
16891692
disableSubmit={Array []}
16901693
formFields={
@@ -2508,6 +2511,7 @@ exports[`<Wizard /> should render Wizard with title correctly 1`] = `
25082511
ButtonGroup={[Function]}
25092512
Description={[Function]}
25102513
FormWrapper={[Function]}
2514+
Header={Symbol(react.fragment)}
25112515
Title={[Function]}
25122516
disableSubmit={Array []}
25132517
formFields={

‎packages/pf4-component-mapper/src/tests/__snapshots__/form-template-common.test.js.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ exports[`FormTemplate PF4 Common should add missing buttons if not defined in bu
3737
ButtonGroup={[Function]}
3838
Description={[Function]}
3939
FormWrapper={[Function]}
40+
Header={Symbol(react.fragment)}
4041
Title={[Function]}
4142
buttonOrder={Array []}
4243
canReset={true}
@@ -270,6 +271,7 @@ exports[`FormTemplate PF4 Common should render all controls and with default lab
270271
ButtonGroup={[Function]}
271272
Description={[Function]}
272273
FormWrapper={[Function]}
274+
Header={Symbol(react.fragment)}
273275
Title={[Function]}
274276
disableSubmit={Array []}
275277
formFields={
@@ -485,6 +487,7 @@ exports[`FormTemplate PF4 Common should render buttons in correct order 1`] = `
485487
ButtonGroup={[Function]}
486488
Description={[Function]}
487489
FormWrapper={[Function]}
490+
Header={Symbol(react.fragment)}
488491
Title={[Function]}
489492
buttonOrder={
490493
Array [
@@ -731,6 +734,7 @@ exports[`FormTemplate PF4 Common should render only submit button 1`] = `
731734
ButtonGroup={[Function]}
732735
Description={[Function]}
733736
FormWrapper={[Function]}
737+
Header={Symbol(react.fragment)}
734738
Title={[Function]}
735739
canReset={false}
736740
disableSubmit={Array []}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,7 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
234234
ButtonGroup={[Function]}
235235
Description={[Function]}
236236
FormWrapper={[Function]}
237+
Header={Symbol(react.fragment)}
237238
Title={[Function]}
238239
disableSubmit={Array []}
239240
formFields={
@@ -1285,6 +1286,7 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
12851286
ButtonGroup={[Function]}
12861287
Description={[Function]}
12871288
FormWrapper={[Function]}
1289+
Header={Symbol(react.fragment)}
12881290
Title={[Function]}
12891291
disableSubmit={Array []}
12901292
formFields={

0 commit comments

Comments
 (0)