diff --git a/packages/code-studio/src/styleguide/CheckboxGroups.tsx b/packages/code-studio/src/styleguide/CheckboxGroups.tsx new file mode 100644 index 000000000..ebe8cd3c9 --- /dev/null +++ b/packages/code-studio/src/styleguide/CheckboxGroups.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { CheckboxGroup, Flex, Text } from '@deephaven/components'; +// eslint-disable-next-line no-restricted-imports +import { Checkbox } from '@adobe/react-spectrum'; +import SampleSection from './SampleSection'; + +export function CheckboxGroups(): JSX.Element { + return ( + +

Checkbox Groups

+ + + Single Child + + Aaa + + + + + Multiple Children + + Aaa + Bbb + Ccc + + + + + Mixed Children Types + + {/* eslint-disable react/jsx-curly-brace-presence */} + {'String 1'} + {'String 2'} + {444} + {999} + {true} + {false} + Aaa + + + +
+ ); +} + +export default CheckboxGroups; diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx index 04851ff66..a950ee7df 100644 --- a/packages/code-studio/src/styleguide/StyleGuide.tsx +++ b/packages/code-studio/src/styleguide/StyleGuide.tsx @@ -40,6 +40,7 @@ import Pickers from './Pickers'; import ListViews from './ListViews'; import ErrorViews from './ErrorViews'; import XComponents from './XComponents'; +import CheckboxGroups from './CheckboxGroups'; const stickyProps = { position: 'sticky', @@ -118,6 +119,7 @@ function StyleGuide(): React.ReactElement { + diff --git a/packages/components/src/spectrum/CheckboxGroup.tsx b/packages/components/src/spectrum/CheckboxGroup.tsx new file mode 100644 index 000000000..2cfd701c8 --- /dev/null +++ b/packages/components/src/spectrum/CheckboxGroup.tsx @@ -0,0 +1,43 @@ +/* eslint-disable react/no-array-index-key */ +import { isElementOfType } from '@deephaven/react-hooks'; +import React, { type ReactNode, useMemo } from 'react'; +import { + Checkbox, + CheckboxGroup as SpectrumCheckboxGroup, + type SpectrumCheckboxGroupProps, +} from '@adobe/react-spectrum'; +import { ensureArray } from '@deephaven/utils'; + +export type CheckboxGroupProps = { + children: ReactNode; +} & Omit; + +/** + * Augmented version of the Spectrum CheckboxGroup component that supports + * primitive item children. + */ +export function CheckboxGroup({ + children, + ...props +}: CheckboxGroupProps): JSX.Element { + const wrappedChildren = useMemo( + () => + ensureArray(children).map(child => + isElementOfType(child, Checkbox) ? ( + child + ) : ( + + {String(child)} + + ) + ), + [children] + ); + + return ( + // eslint-disable-next-line react/jsx-props-no-spreading + {wrappedChildren} + ); +} + +export default CheckboxGroup; diff --git a/packages/components/src/spectrum/forms.ts b/packages/components/src/spectrum/forms.ts index 3c8d54c01..d8048f396 100644 --- a/packages/components/src/spectrum/forms.ts +++ b/packages/components/src/spectrum/forms.ts @@ -1,8 +1,6 @@ export { Checkbox as SpectrumCheckbox, type SpectrumCheckboxProps, - CheckboxGroup, - type SpectrumCheckboxGroupProps as CheckboxGroupProps, Form, type SpectrumFormProps as FormProps, NumberField, diff --git a/packages/components/src/spectrum/index.ts b/packages/components/src/spectrum/index.ts index 28630b2da..6b4f5a84f 100644 --- a/packages/components/src/spectrum/index.ts +++ b/packages/components/src/spectrum/index.ts @@ -26,6 +26,7 @@ export * from './picker'; export * from './Heading'; export * from './Text'; export * from './View'; +export * from './CheckboxGroup'; /** * Custom DH spectrum utils diff --git a/tests/styleguide.spec.ts b/tests/styleguide.spec.ts index cedd9f6a6..cfd883727 100644 --- a/tests/styleguide.spec.ts +++ b/tests/styleguide.spec.ts @@ -48,6 +48,7 @@ const sampleSectionIds: string[] = [ 'sample-section-spectrum-forms', 'sample-section-spectrum-overlays', 'sample-section-spectrum-well', + 'sample-section-checkbox-groups', ]; const buttonSectionIds: string[] = [ 'sample-section-buttons-regular', diff --git a/tests/styleguide.spec.ts-snapshots/checkbox-groups-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/checkbox-groups-chromium-linux.png new file mode 100644 index 000000000..6e8e7e9e0 Binary files /dev/null and b/tests/styleguide.spec.ts-snapshots/checkbox-groups-chromium-linux.png differ diff --git a/tests/styleguide.spec.ts-snapshots/checkbox-groups-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/checkbox-groups-firefox-linux.png new file mode 100644 index 000000000..8759cf8fe Binary files /dev/null and b/tests/styleguide.spec.ts-snapshots/checkbox-groups-firefox-linux.png differ diff --git a/tests/styleguide.spec.ts-snapshots/checkbox-groups-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/checkbox-groups-webkit-linux.png new file mode 100644 index 000000000..cbfacc3df Binary files /dev/null and b/tests/styleguide.spec.ts-snapshots/checkbox-groups-webkit-linux.png differ