Merge pull request #827 from rvsia/fixStylingCarbonComponents

fix(carbon): fix styles for wizard/subform/tabs

Author: Hyperkid123

packages/carbon-component-mapper/src/files/sub-form.d.ts

@@ -1,14 +1,15 @@
 import { Field, AnyObject } from "@data-driven-forms/react-form-renderer";
 import { ReactNode } from "react";
 
-export interface SubFormProps {
+export interface SubFormProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
   fields: Field | Field[];
   title?: ReactNode;
   description?: ReactNode;
   TitleElement?: string;
   DescriptionElement?: string;
   TitleProps?: AnyObject;
   DescriptionProps?: AnyObject;
+  HeaderProps?: React.HTMLProps<HTMLDivElement>;
 }
 
 declare const SubForm: React.ComponentType<SubFormProps>;

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

@@ -1,15 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
 import { useFormApi } from '@data-driven-forms/react-form-renderer';
 
-const SubForm = ({ fields, component, title, description, TitleElement, DescriptionElement, TitleProps, DescriptionProps, ...rest }) => {
+import './sub-form.scss';
+
+const SubForm = ({ fields, component, title, description, TitleElement, DescriptionElement, TitleProps, DescriptionProps, HeaderProps, ...rest }) => {
   const formOptions = useFormApi();
 
   return (
-    <div {...rest}>
-      {title && React.createElement(TitleElement, TitleProps, title)}
-      {description && React.createElement(DescriptionElement, DescriptionProps, description)}
+    <div {...rest} className={clsx('ddorg__carbon-sub-form', rest.className)}>
+      {(title || description) && (
+        <div {...HeaderProps}>
+          {title && React.createElement(TitleElement, TitleProps, title)}
+          {description && React.createElement(DescriptionElement, DescriptionProps, description)}
+        </div>
+      )}
       {formOptions.renderForm(fields, formOptions)}
     </div>
   );
@@ -23,7 +30,8 @@ SubForm.propTypes = {
   TitleElement: PropTypes.string,
   DescriptionElement: PropTypes.string,
   TitleProps: PropTypes.object,
-  DescriptionProps: PropTypes.object
+  DescriptionProps: PropTypes.object,
+  HeaderProps: PropTypes.object
 };
 
 SubForm.defaultProps = {

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

@@ -0,0 +1,5 @@
+.ddorg__carbon-sub-form {
+    >:not(:last-child) {
+        margin-bottom: 32px;
+    }
+}

packages/carbon-component-mapper/src/files/tabs.d.ts

@@ -12,6 +12,7 @@ export interface TabField extends TabProps {
 
 export interface TabsProps extends CarbonTabsProps {
   fields: TabField[];
+  TabWrapperProps?: React.HTMLProps<HTMLDivElement>;
 }
 
 declare const Tabs: React.ComponentType<TabsProps>;

packages/carbon-component-mapper/src/files/tabs.js

@@ -1,25 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 
 import { Tabs as CarbonTabs, Tab } from 'carbon-components-react';
 
 import { useFormApi } from '@data-driven-forms/react-form-renderer';
 
-const Tabs = ({ fields, component, name, ...props }) => {
+import './tabs.scss';
+
+const Tabs = ({ fields, component, name, TabWrapperProps, ...props }) => {
   const formOptions = useFormApi();
 
   return (
     <CarbonTabs {...props}>
       {fields.map(({ fields, name, label, title, ...rest }) => (
-        <Tab {...rest} id={name} key={name} label={label || title}>
-          {formOptions.renderForm(fields, formOptions)}
+        <Tab {...rest} className="pepa" id={name} key={name} label={label || title}>
+          <div {...TabWrapperProps} className={clsx('ddorg__carbon-form-template-tab', TabWrapperProps.className)}>
+            {formOptions.renderForm(fields, formOptions)}
+          </div>
         </Tab>
       ))}
     </CarbonTabs>
   );
 };
 
 Tabs.propTypes = {
+  TabWrapperProps: PropTypes.object,
   component: PropTypes.string,
   name: PropTypes.string,
   fields: PropTypes.arrayOf(
@@ -32,4 +38,8 @@ Tabs.propTypes = {
   )
 };
 
+Tabs.defaultProps = {
+  TabWrapperProps: {}
+};
+
 export default Tabs;

packages/carbon-component-mapper/src/files/tabs.scss

@@ -0,0 +1,5 @@
+.ddorg__carbon-form-template-tab {
+    >:not(:last-child) {
+        margin-bottom: 32px;
+    }
+}

packages/carbon-component-mapper/src/files/wizard.d.ts

@@ -50,6 +50,7 @@ export interface WizardProps {
   ProgressIndicatorProps?: ProgressIndicatorProps;
   vertical?: boolean;
   stepsInfo?: WizardNavItem[];
+  WizardBodyProps?: React.HTMLProps<HTMLDivElement>;
 }
 
 declare const Wizard: React.ComponentType<WizardProps>;

packages/carbon-component-mapper/src/files/wizard.js

@@ -39,32 +39,38 @@ const defaultLabels = {
   next: 'Next'
 };
 
-const Layout = ({ nav, fields }) => (
+const Layout = ({ nav, fields, WizardBodyProps }) => (
   <React.Fragment>
     {nav}
-    {fields}
+    <div {...WizardBodyProps} className={clsx('ddorg__carbon-wizard-body', WizardBodyProps?.className)}>
+      {fields}
+    </div>
   </React.Fragment>
 );
 
 Layout.propTypes = {
   nav: PropTypes.node,
-  fields: PropTypes.node
+  fields: PropTypes.node,
+  WizardBodyProps: PropTypes.object
 };
 
-const VerticalLayout = ({ nav, fields }) => (
+const VerticalLayout = ({ nav, fields, WizardBodyProps }) => (
   <Grid narrow>
     <Row>
       <Column sm={1} md={2} lg={3}>
         {nav}
       </Column>
-      <Column>{fields}</Column>
+      <Column {...WizardBodyProps} className={clsx('ddorg__carbon-wizard-body', WizardBodyProps?.className)}>
+        {fields}
+      </Column>
     </Row>
   </Grid>
 );
 
 VerticalLayout.propTypes = {
   nav: PropTypes.node,
-  fields: PropTypes.node
+  fields: PropTypes.node,
+  WizardBodyProps: PropTypes.object
 };
 
 const WizardInternal = ({
@@ -76,6 +82,7 @@ const WizardInternal = ({
   SubmitButtonProps,
   ProgressIndicatorProps,
   vertical,
+  WizardBodyProps,
   ...props
 }) => {
   const { formOptions, currentStep, handlePrev, onKeyDown, handleNext, activeStepIndex, selectNext, jumpToStep } = useContext(WizardContext);
@@ -94,7 +101,7 @@ const WizardInternal = ({
 
   return (
     <div onKeyDown={onKeyDown} {...props}>
-      <WizardLayout nav={nav ? nav : null} fields={fields} />
+      <WizardLayout nav={nav ? nav : null} fields={fields} WizardBodyProps={WizardBodyProps} />
       <FormSpy>
         {({ invalid, validating, submitting }) => (
           <div {...ButtonSetProps} className={clsx('ddorg__carbon-wizard-button-set', ButtonSetProps.className)}>
@@ -141,15 +148,17 @@ WizardInternal.propTypes = {
   SubmitButtonProps: PropTypes.object,
   ButtonSetProps: PropTypes.object,
   ProgressIndicatorProps: PropTypes.object,
-  vertical: PropTypes.bool
+  vertical: PropTypes.bool,
+  WizardBodyProps: PropTypes.object
 };
 
 WizardInternal.defaultProps = {
   BackButtonProps: {},
   NextButtonProps: {},
   SubmitButtonProps: {},
   ButtonSetProps: {},
-  ProgressIndicatorProps: {}
+  ProgressIndicatorProps: {},
+  WizardBodyProps: {}
 };
 
 const Wizard = (props) => <WizardCommon Wizard={WizardInternal} {...props} />;

packages/carbon-component-mapper/src/files/wizard.scss

@@ -7,3 +7,9 @@
     flex-direction: row-reverse;
     display: flex;
 }
+
+.ddorg__carbon-wizard-body {
+    >:not(:last-child) {
+        margin-bottom: 32px;
+    }
+}

packages/react-renderer-demo/src/doc-components/examples-texts/carbon/carbon-sub-form.md

@@ -6,3 +6,4 @@
 |TitleProps|Props passed to the element wrapping title|{}|
 |DescriptionElement|Element wrapping description|p|
 |DescriptionProps|Props passed to the element wrapping description|{}|
+|HeaderProps|Props passed to a div wrapping Title and Description|undefined|