(Form): apply form type to each form element

Author: msmx-mnakagawa

src/scripts/CheckboxGroup.tsx

@@ -8,6 +8,7 @@ import React, {
   ReactNode,
 } from 'react';
 import classnames from 'classnames';
+import { FormTypeContext } from './Form';
 import { FormElementProps } from './FormElement';
 import { FieldSetColumnContext } from './FieldSet';
 import { TooltipContent } from './TooltipContent';
@@ -63,6 +64,7 @@ export const CheckboxGroup = createFC<
       children,
       ...rprops
     } = props;
+    const type = useContext(FormTypeContext);
     const { totalCols } = useContext(FieldSetColumnContext);
     const controlElRef = useRef<HTMLDivElement | null>(null);
 
@@ -88,6 +90,7 @@ export const CheckboxGroup = createFC<
     const grpClassNames = classnames(
       className,
       'slds-form-element',
+      type ? `slds-form-element_${type}` : null,
       {
         'slds-has-error': error,
         'slds-is-required': required,

src/scripts/FieldSet.tsx

@@ -3,8 +3,10 @@ import React, {
   HTMLAttributes,
   ReactNode,
   useMemo,
+  useContext,
 } from 'react';
 import classnames from 'classnames';
+import { FormTypeContext } from './Form';
 import { FormElement } from './FormElement';
 import { createFC } from './common';
 
@@ -75,10 +77,12 @@ export const FieldSet = createFC<
   { isFormElement: boolean; Row: typeof FieldSetRow }
 >(
   ({ className, label, children, ...props }) => {
+    const type = useContext(FormTypeContext) ?? 'compound';
+
     const fsClassNames = classnames(
       className,
       'slds-form-element',
-      'slds-form-element_compound'
+      `slds-form-element_${type}`
     );
     const legendClassNames = classnames(
       'slds-form-element__legend',

src/scripts/Form.tsx

@@ -9,23 +9,32 @@ export type FormProps = {
   type?: 'stacked' | 'horizontal' | 'inline' | 'compound';
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ *
+ */
+export const FormTypeContext =
+  React.createContext<FormProps['type']>(undefined);
+
 /**
  *
  */
 export const Form: FC<FormProps> = (props) => {
   const { className, type = 'stacked', children, ...rprops } = props;
   const formClassNames = classnames(className, `slds-form_${type}`);
   return (
-    <div className={formClassNames} {...rprops}>
-      {React.Children.map(children, (child) => {
-        if (
-          React.isValidElement(child) &&
-          !(child.type as unknown as { isFormElement?: boolean }).isFormElement
-        ) {
-          return <FormElement>{child}</FormElement>;
-        }
-        return child;
-      })}
-    </div>
+    <FormTypeContext.Provider value={type === 'compound' ? 'stacked' : type}>
+      <div className={formClassNames} {...rprops}>
+        {React.Children.map(children, (child) => {
+          if (
+            React.isValidElement(child) &&
+            !(child.type as unknown as { isFormElement?: boolean })
+              .isFormElement
+          ) {
+            return <FormElement>{child}</FormElement>;
+          }
+          return child;
+        })}
+      </div>
+    </FormTypeContext.Provider>
   );
 };

src/scripts/FormElement.tsx

@@ -8,6 +8,7 @@ import React, {
   useCallback,
 } from 'react';
 import classnames from 'classnames';
+import { FormTypeContext } from './Form';
 import { FieldSetColumnContext } from './FieldSet';
 import { createFC } from './common';
 import { TooltipContent } from './TooltipContent';
@@ -31,6 +32,7 @@ export type FormElementProps = {
   children?: ReactNode;
   tooltip?: ReactNode;
   tooltipIcon?: string;
+  type?: 'stacked' | 'horizontal' | 'inline' | 'compound';
 };
 
 /**
@@ -56,8 +58,12 @@ export const FormElement = createFC<
       readOnly,
       tooltip,
       tooltipIcon,
+      type: propsType,
     } = props;
 
+    const contextType = useContext(FormTypeContext);
+    const type = propsType ?? contextType;
+
     const controlElRef = useRef<HTMLDivElement>(null);
 
     const { totalCols } = useContext(FieldSetColumnContext);
@@ -72,6 +78,7 @@ export const FormElement = createFC<
 
     const formElementClassNames = classnames(
       'slds-form-element',
+      type ? `slds-form-element_${type}` : null,
       readOnly ? 'slds-form-element_readonly' : null,
       error ? 'slds-has-error' : null,
       typeof totalCols === 'number'

src/scripts/RadioGroup.tsx

@@ -7,6 +7,7 @@ import React, {
   ReactNode,
 } from 'react';
 import classnames from 'classnames';
+import { FormTypeContext } from './Form';
 import { FieldSetColumnContext } from './FieldSet';
 import { TooltipContent } from './TooltipContent';
 import { createFC } from './common';
@@ -60,10 +61,12 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
       onValueChange,
       ...rprops
     } = props;
+    const type = useContext(FormTypeContext);
     const { totalCols } = useContext(FieldSetColumnContext);
     const grpClassNames = classnames(
       className,
       'slds-form-element',
+      type ? `slds-form-element_${type}` : null,
       {
         'slds-has-error': error,
         'slds-is-required': required,