feat(Fieldset)!: remove top-level sub-component(s) (#1695)

src/components/Fieldset/Fieldset.module.css

@@ -12,3 +12,39 @@
    /* Overrides default browser styling. */
   margin: var(--eds-size-2);
 }
+
+/*------------------------------------*\
+    # FIELDSET ITEMS
+\*------------------------------------*/
+
+/**
+ * The contents of the fieldset. Spaces them apart.
+ */
+ .fieldset-items > :not(:last-child) {
+  margin-bottom: var(--eds-size-1-and-half);
+}
+
+/*------------------------------------*\
+    # FIELDSET LEGEND
+\*------------------------------------*/
+
+/**
+ * A label that's rendered as a <legend> for fieldsets.
+ * It contains the same characteristics as a label (ability to add flag for optional field, etc),
+ * but semantically/stylistically a bit different.
+ */
+.fieldset-legend {
+  /* Removes some default browser styles. */
+  @mixin legendReset;
+  font: var(--eds-theme-typography-form-label);
+  /* Adjust margin between legend and option list */
+  margin-bottom: var(--eds-size-2);
+}
+
+/**
+ * Label flag to mark whether or not a field is required
+ * or optional. Currently a flag is only present for optional fields
+ */
+.fieldset-legend__flag {
+  font: var(--eds-theme-typography-body-sm);
+}

src/components/Fieldset/Fieldset.stories.tsx

@@ -1,18 +1,19 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React, { useState } from 'react';
 import { Fieldset } from './Fieldset';
+import type { FieldsetLegendProps } from './Fieldset';
 import Checkbox from '../Checkbox';
-import FieldsetItems from '../FieldsetItems';
-import type { FieldsetLegendProps } from '../FieldsetLegend';
-import FieldsetLegend from '../FieldsetLegend';
 
 export default {
   title: 'Components/Fieldset',
   component: Fieldset,
   parameters: {
     badges: ['1.0'],
   },
-  subcomponents: { FieldsetLegend, FieldsetItems },
+  subcomponents: {
+    FieldsetLegend: Fieldset.Legend,
+    FieldsetItems: Fieldset.Items,
+  },
   argTypes: {
     children: {
       control: {

src/components/Fieldset/Fieldset.tsx

@@ -1,8 +1,7 @@
 import clsx from 'clsx';
-import type { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+
 import React from 'react';
-import FieldsetItems from '../FieldsetItems';
-import FieldsetLegend from '../FieldsetLegend';
 import styles from './Fieldset.module.css';
 
 type FieldsetProps = {
@@ -20,6 +19,37 @@ type FieldsetProps = {
   className?: string;
 } & React.HTMLAttributes<HTMLFieldSetElement>;
 
+export type FieldsetItemsProps<T extends ElementType> = {
+  /**
+   * The content of the control elements in the fieldset.
+   */
+  children: ReactNode;
+  /**
+   * Type of element the immediate wrapper around the contents should be.
+   * @default 'div'
+   */
+  as?: T;
+  /**
+   * Additional classnames passed in for styling.
+   */
+  className?: string;
+};
+
+export type FieldsetLegendProps = {
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  /**
+   * String to indicate required or optional state.
+   */
+  optionalLabel?: '(required)' | '(optional)';
+  /**
+   * Legend text string that names the fieldset.
+   */
+  text: string;
+};
+
 /**
  * `import {Fieldset} from "@chanzuckerberg/eds";`
  *
@@ -30,5 +60,48 @@ export function Fieldset({ children, className }: FieldsetProps) {
   return <fieldset className={componentClassName}>{children}</fieldset>;
 }
 
+/**
+ * Helper sub-component for styling the control elements in the component.
+ */
+export const FieldsetItems = <T extends ElementType = 'div'>({
+  children,
+  as,
+  className,
+  ...props
+}: FieldsetItemsProps<T> &
+  Omit<ComponentPropsWithoutRef<T>, keyof FieldsetItemsProps<T>>) => {
+  const componentClassName = clsx(styles['fieldset-items'], className);
+  const Component = as || 'div';
+  // Disable this once EDS is updated to React 18+ or lib specifies version.
+  // There is a type mismatch betwwen what gets pulled in via react-beautiful-dnd
+  // and React 16. that library imports the latest react types regardless of
+  // installed version.
+  return (
+    <Component className={componentClassName} {...props}>
+      {children}
+    </Component>
+  );
+};
+
+/**
+ * Helper sub-component for styling the legend in a fieldset.
+ */
+const FieldsetLegend = ({
+  className,
+  optionalLabel,
+  text,
+  ...other
+}: FieldsetLegendProps) => {
+  const componentClassName = clsx(styles['fieldset-legend'], className);
+  return (
+    <legend className={componentClassName} {...other}>
+      {text}{' '}
+      {optionalLabel && (
+        <span className={styles['fieldset-legend__flag']}>{optionalLabel}</span>
+      )}
+    </legend>
+  );
+};
+
 Fieldset.Items = FieldsetItems;
 Fieldset.Legend = FieldsetLegend;

src/components/FiltersCheckboxField/FiltersCheckboxField.tsx

@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
 import Fieldset from '../Fieldset';
-import FieldsetLegend from '../FieldsetLegend';
 import styles from './FiltersCheckboxField.module.css';
 
 export type Props = {
@@ -40,7 +39,7 @@ export const FiltersCheckboxField = ({
   return (
     <Fieldset className={componentClassName}>
       {legend && (
-        <FieldsetLegend
+        <Fieldset.Legend
           className={styles['filters-fieldset__legend']}
           text={legend}
         />

src/index.ts

@@ -24,8 +24,6 @@ export { default as DropdownMenu } from './components/DropdownMenu';
 export { default as DropdownMenuItem } from './components/DropdownMenuItem';
 export { default as FieldNote } from './components/FieldNote';
 export { default as Fieldset } from './components/Fieldset';
-export { default as FieldsetItems } from './components/FieldsetItems';
-export { default as FieldsetLegend } from './components/FieldsetLegend';
 export { default as FiltersButton } from './components/FiltersButton';
 export { default as FiltersCheckboxField } from './components/FiltersCheckboxField';
 export { default as FiltersDrawer } from './components/FiltersDrawer';