Revert "(Form): apply form type to each form element"

This reverts commit c563045.

Author: msmx-mnakagawa

src/scripts/CheckboxGroup.tsx

@@ -8,7 +8,6 @@ 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';
@@ -64,7 +63,6 @@ export const CheckboxGroup = createFC<
       children,
       ...rprops
     } = props;
-    const type = useContext(FormTypeContext);
     const { totalCols } = useContext(FieldSetColumnContext);
     const controlElRef = useRef<HTMLDivElement | null>(null);
 
@@ -90,7 +88,6 @@ 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,10 +3,8 @@ import React, {
   HTMLAttributes,
   ReactNode,
   useMemo,
-  useContext,
 } from 'react';
 import classnames from 'classnames';
-import { FormTypeContext } from './Form';
 import { FormElement } from './FormElement';
 import { createFC } from './common';
 
@@ -77,12 +75,10 @@ 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_${type}`
+      'slds-form-element_compound'
     );
     const legendClassNames = classnames(
       'slds-form-element__legend',

src/scripts/Form.tsx

@@ -9,32 +9,23 @@ 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 (
-    <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>
+    <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>
   );
 };

src/scripts/FormElement.tsx

@@ -8,7 +8,6 @@ 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';
@@ -32,7 +31,6 @@ export type FormElementProps = {
   children?: ReactNode;
   tooltip?: ReactNode;
   tooltipIcon?: string;
-  type?: 'stacked' | 'horizontal' | 'inline' | 'compound';
 };
 
 /**
@@ -58,12 +56,8 @@ 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);
@@ -78,7 +72,6 @@ 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,7 +7,6 @@ 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';
@@ -61,12 +60,10 @@ 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,