fix(carbon): fix spacing for form template

Author: rvsia

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
 import { Form as CarbonForm, Button as CarbonButton, ButtonSet } from 'carbon-components-react';
 
 import FormTemplate from '@data-driven-forms/common/src/form-template';
 
+import './form-template.scss';
+
 export const Button = ({ label, buttonType, ...props }) => (
   <CarbonButton kind={buttonType === 'submit' ? 'primary' : 'secondary'} {...props}>
     {label}
@@ -16,13 +19,18 @@ Button.propTypes = {
   buttonType: PropTypes.string
 };
 
-export const ButtonGroup = ({ children, ...props }) => <ButtonSet {...props}>{children}</ButtonSet>;
+export const ButtonGroup = ({ children, className, ...props }) => (
+  <ButtonSet {...props} className={clsx('ddorg__carbon-form-template-buttons', className)}>
+    {children}
+  </ButtonSet>
+);
 
 ButtonGroup.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  className: PropTypes.string
 };
 
-export const Title = ({ children }) => <h1>{children}</h1>;
+export const Title = ({ children }) => <h3>{children}</h3>;
 
 Title.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
@@ -34,16 +42,19 @@ Description.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
-export const Form = ({ children, ...props }) => (
-  <CarbonForm noValidate {...props}>
+export const Form = ({ children, className, ...props }) => (
+  <CarbonForm noValidate {...props} className={clsx('ddorg__carbon-form-template-form', className)}>
     {children}
   </CarbonForm>
 );
 
 Form.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  className: PropTypes.string
 };
 
+export const Header = (props) => <div className="ddorg__carbon-form-template-header" {...props} />;
+
 const WrappedFormTemplate = (props) => (
   <FormTemplate
     FormWrapper={Form}
@@ -52,6 +63,7 @@ const WrappedFormTemplate = (props) => (
     Title={Title}
     Description={Description}
     buttonOrder={['cancel', 'reset', 'submit']}
+    Header={Header}
     {...props}
   />
 );

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

@@ -0,0 +1,17 @@
+.ddorg__carbon-form-template-buttons {
+    margin-top: 48px;
+}
+
+.ddorg__carbon-form-template-form {
+    >:not(:last-child) {
+        margin-bottom: 32px;
+    }
+
+    .ddorg__carbon-form-template-header {
+        margin-bottom: 40px;
+
+        div {
+            margin-top: 8px;
+        }
+    }
+}

packages/common/src/form-template.js

@@ -104,8 +104,9 @@ const FormTemplate = ({
   Button,
   ButtonGroup,
   formWrapperProps,
-  showFormControls = true,
-  disableSubmit = [],
+  showFormControls,
+  disableSubmit,
+  Header,
   ...rest
 }) => {
   const {
@@ -116,8 +117,12 @@ const FormTemplate = ({
 
   return (
     <FormWrapper onSubmit={handleSubmit} {...formWrapperProps}>
-      {(title || label) && <Title>{title || label}</Title>}
-      {description && <Description>{description}</Description>}
+      {(title || label || description) && (
+        <Header>
+          {(title || label) && <Title>{title || label}</Title>}
+          {description && <Description>{description}</Description>}
+        </Header>
+      )}
       {formFields}
       {showFormControls && (
         <FormSpy>
@@ -147,12 +152,14 @@ FormTemplate.propTypes = {
   ButtonGroup: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]).isRequired,
   formWrapperProps: PropTypes.object,
   showFormControls: PropTypes.bool,
-  disableSubmit: PropTypes.arrayOf(PropTypes.string)
+  disableSubmit: PropTypes.arrayOf(PropTypes.string),
+  Header: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element])
 };
 
 FormTemplate.defaultProps = {
   showFormControls: true,
-  disableSubmit: []
+  disableSubmit: [],
+  Header: React.Fragment
 };
 
 export default FormTemplate;