From d5af8033ef406a3855e6b9eb01aeb9594cfe4dd2 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Mon, 17 Jul 2023 15:52:38 -0500 Subject: [PATCH] feat(Fieldset)!: remove top-level sub-component(s) --- src/components/Fieldset/Fieldset.module.css | 36 +++++++++ src/components/Fieldset/Fieldset.stories.tsx | 9 ++- src/components/Fieldset/Fieldset.tsx | 79 ++++++++++++++++++- .../FieldsetItems/FieldsetItems.module.css | 10 --- .../FieldsetItems/FieldsetItems.tsx | 45 ----------- src/components/FieldsetItems/index.ts | 2 - .../FieldsetLegend/FieldsetLegend.module.css | 26 ------ .../FieldsetLegend/FieldsetLegend.tsx | 40 ---------- src/components/FieldsetLegend/index.ts | 2 - .../FiltersCheckboxField.tsx | 3 +- src/index.ts | 2 - 11 files changed, 118 insertions(+), 136 deletions(-) delete mode 100644 src/components/FieldsetItems/FieldsetItems.module.css delete mode 100644 src/components/FieldsetItems/FieldsetItems.tsx delete mode 100644 src/components/FieldsetItems/index.ts delete mode 100644 src/components/FieldsetLegend/FieldsetLegend.module.css delete mode 100644 src/components/FieldsetLegend/FieldsetLegend.tsx delete mode 100644 src/components/FieldsetLegend/index.ts diff --git a/src/components/Fieldset/Fieldset.module.css b/src/components/Fieldset/Fieldset.module.css index be7979214..86f06fbe9 100644 --- a/src/components/Fieldset/Fieldset.module.css +++ b/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 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); +} diff --git a/src/components/Fieldset/Fieldset.stories.tsx b/src/components/Fieldset/Fieldset.stories.tsx index 001a4b3da..7f8538d2c 100644 --- a/src/components/Fieldset/Fieldset.stories.tsx +++ b/src/components/Fieldset/Fieldset.stories.tsx @@ -1,10 +1,8 @@ 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', @@ -12,7 +10,10 @@ export default { parameters: { badges: ['1.0'], }, - subcomponents: { FieldsetLegend, FieldsetItems }, + subcomponents: { + FieldsetLegend: Fieldset.Legend, + FieldsetItems: Fieldset.Items, + }, argTypes: { children: { control: { diff --git a/src/components/Fieldset/Fieldset.tsx b/src/components/Fieldset/Fieldset.tsx index 5e6ea0cd7..24ed10843 100644 --- a/src/components/Fieldset/Fieldset.tsx +++ b/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; +export type FieldsetItemsProps = { + /** + * 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
{children}
; } +/** + * Helper sub-component for styling the control elements in the component. + */ +export const FieldsetItems = ({ + children, + as, + className, + ...props +}: FieldsetItemsProps & + Omit, keyof FieldsetItemsProps>) => { + 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 ( + + {children} + + ); +}; + +/** + * 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 ( + + {text}{' '} + {optionalLabel && ( + {optionalLabel} + )} + + ); +}; + Fieldset.Items = FieldsetItems; Fieldset.Legend = FieldsetLegend; diff --git a/src/components/FieldsetItems/FieldsetItems.module.css b/src/components/FieldsetItems/FieldsetItems.module.css deleted file mode 100644 index 0c77e693d..000000000 --- a/src/components/FieldsetItems/FieldsetItems.module.css +++ /dev/null @@ -1,10 +0,0 @@ -/*------------------------------------*\ - # FIELDSET ITEMS -\*------------------------------------*/ - -/** - * The contents of the fieldset. Spaces them apart. - */ -.fieldset-items > :not(:last-child) { - margin-bottom: var(--eds-size-1-and-half); -} diff --git a/src/components/FieldsetItems/FieldsetItems.tsx b/src/components/FieldsetItems/FieldsetItems.tsx deleted file mode 100644 index eb74c66ca..000000000 --- a/src/components/FieldsetItems/FieldsetItems.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import clsx from 'clsx'; -import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'; -import React from 'react'; -import styles from './FieldsetItems.module.css'; - -export type FieldsetItemsProps = { - /** - * 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; -}; - -/** - * `import {FieldsetItems} from "@chanzuckerberg/eds";` - * - * Helper sub-component for styling the control elements in the component. - */ -export const FieldsetItems = ({ - children, - as, - className, - ...props -}: FieldsetItemsProps & - Omit, keyof FieldsetItemsProps>) => { - 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 ( - - {children} - - ); -}; diff --git a/src/components/FieldsetItems/index.ts b/src/components/FieldsetItems/index.ts deleted file mode 100644 index c1ea1b7ea..000000000 --- a/src/components/FieldsetItems/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { FieldsetItems as default } from './FieldsetItems'; -export type { FieldsetItemsProps } from './FieldsetItems'; diff --git a/src/components/FieldsetLegend/FieldsetLegend.module.css b/src/components/FieldsetLegend/FieldsetLegend.module.css deleted file mode 100644 index 22c6a5ad7..000000000 --- a/src/components/FieldsetLegend/FieldsetLegend.module.css +++ /dev/null @@ -1,26 +0,0 @@ -@import '../../design-tokens/mixins.css'; - -/*------------------------------------*\ - # FIELDSET LEGEND -\*------------------------------------*/ - -/** - * A label that's rendered as a 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); -} diff --git a/src/components/FieldsetLegend/FieldsetLegend.tsx b/src/components/FieldsetLegend/FieldsetLegend.tsx deleted file mode 100644 index 96568bd22..000000000 --- a/src/components/FieldsetLegend/FieldsetLegend.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import clsx from 'clsx'; -import React from 'react'; -import styles from './FieldsetLegend.module.css'; - -export interface 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 {FieldsetLegend} from "@chanzuckerberg/eds";` - * - * Helper sub-component for styling the legend in a fieldset. - */ -export const FieldsetLegend = ({ - className, - optionalLabel, - text, - ...other -}: FieldsetLegendProps) => { - const componentClassName = clsx(styles['fieldset-legend'], className); - return ( - - {text}{' '} - {optionalLabel && ( - {optionalLabel} - )} - - ); -}; diff --git a/src/components/FieldsetLegend/index.ts b/src/components/FieldsetLegend/index.ts deleted file mode 100644 index 4c6a074b1..000000000 --- a/src/components/FieldsetLegend/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { FieldsetLegend as default } from './FieldsetLegend'; -export type { FieldsetLegendProps } from './FieldsetLegend'; diff --git a/src/components/FiltersCheckboxField/FiltersCheckboxField.tsx b/src/components/FiltersCheckboxField/FiltersCheckboxField.tsx index 2a6b7ab3b..7088ce203 100644 --- a/src/components/FiltersCheckboxField/FiltersCheckboxField.tsx +++ b/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 (
{legend && ( - diff --git a/src/index.ts b/src/index.ts index 02512c0ef..5c589b18d 100644 --- a/src/index.ts +++ b/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';