Remove wrapping form groups around fieldsets

Author: colinrotherham

src/components/form-elements/fieldset/Fieldset.tsx

@@ -1,23 +1,18 @@
-import React, { HTMLProps, MutableRefObject } from 'react';
+import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
 import Legend from '../legend/Legend';
-import FormGroup from '../../utils/FormGroup';
 
-export interface FieldsetProps extends HTMLProps<HTMLFieldSetElement> {
-  fieldsetRef?: MutableRefObject<HTMLFieldSetElement | null>;
-  disableErrorLine?: boolean;
-}
+export type FieldsetProps = HTMLProps<HTMLFieldSetElement>;
+
+const FieldsetComponent = ({ children, className, ...rest }: FieldsetProps) => {
+  if (!children) {
+    return null;
+  }
 
-const FieldsetComponent = ({
-  className,
-  fieldsetRef,
-  disableErrorLine,
-  ...rest
-}: FieldsetProps) => {
   return (
-    <FormGroup enableErrorLine={!disableErrorLine}>
-      <fieldset className={classNames('nhsuk-fieldset', className)} ref={fieldsetRef} {...rest} />
-    </FormGroup>
+    <fieldset className={classNames('nhsuk-fieldset', className)} {...rest}>
+      {children}
+    </fieldset>
   );
 };
 

src/components/form-elements/fieldset/__tests__/Fieldset.test.tsx

@@ -20,13 +20,9 @@ describe('Fieldset', () => {
     expect(container.textContent).toBe('Text');
   });
 
-  it('Wraps children in form group if the fieldset contains form elements', () => {
-    const { container } = render(
-      <Fieldset>
-        <TextInput />
-      </Fieldset>,
-    );
+  it('renders null with no children', () => {
+    const { container } = render(<Fieldset />);
 
-    expect(container.firstChild).toHaveClass('nhsuk-form-group');
+    expect(container.querySelector('fieldset')).toBeNull();
   });
 });

src/components/form-elements/fieldset/__tests__/__snapshots__/Fieldset.test.tsx.snap

@@ -2,23 +2,19 @@
 
 exports[`Fieldset matches snapshot: Fieldset 1`] = `
 <div>
-  <div
-    class="nhsuk-form-group"
+  <fieldset
+    class="nhsuk-fieldset"
   >
-    <fieldset
-      class="nhsuk-fieldset"
+    <div
+      class="nhsuk-form-group"
     >
-      <div
-        class="nhsuk-form-group"
-      >
-        <input
-          class="nhsuk-input"
-          id="test-input"
-          name="test-input"
-          type="text"
-        />
-      </div>
-    </fieldset>
-  </div>
+      <input
+        class="nhsuk-input"
+        id="test-input"
+        name="test-input"
+        type="text"
+      />
+    </div>
+  </fieldset>
 </div>
 `;

stories/Utils/FormGroup.stories.tsx

@@ -5,8 +5,6 @@ import HeadingLevel from '@components/utils/HeadingLevel';
 
 /**
  * This component is designed as a grouping wrapper around one or more inputs on a form.
- * Typically, a consumer would use the `Fieldset` component which uses `FormGroup`, but there
- * may be occassions where the same `FormGroup` functionality may be desired without rendering a `<fieldset />` element.
  *
  *  ## Usage
  *