feat(filterspopover): add filters popover

src/components/Filters/Filters.stories.tsx

@@ -39,6 +39,7 @@ export default {
         />
       </Filters.FiltersCheckboxField>
     ),
+    variant: 'drawer',
   },
   decorators: [
     (Story) => (
@@ -141,6 +142,7 @@ const OverflowCheckboxFields = () => {
       onClear={onClear}
       onClose={onClose}
       triggerText={triggerText}
+      variant="popover"
     >
       <Filters.FiltersCheckboxField legend="Filters Segment 1">
         <Checkbox

src/components/Filters/Filters.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import styles from './Filters.module.css';
 import Button from '../Button';
-import { FiltersCheckboxField } from '../FiltersCheckboxField/FiltersCheckboxField';
-import { FiltersDrawer } from '../FiltersDrawer/FiltersDrawer';
+import FiltersCheckboxField from '../FiltersCheckboxField';
+import FiltersDrawer from '../FiltersDrawer';
+import FiltersPopover from '../FiltersPopover';
 import Icon from '../Icon';
+import Popover from '../Popover';
 
 export type Props = {
   /**
@@ -31,13 +33,18 @@ export type Props = {
    */
   footerButtonGroupClassName?: string;
   /**
-   * Callback called when filters drawer is closed.
+   * Callback called when filters are closed.
+   * Currently only works with the 'drawer' variant.
    */
   onClose?: () => void;
   /**
    * Callback called when the apply button is called.
    */
   onApply?: () => void;
+  /**
+   * Which filters variant to render.
+   */
+  variant: 'drawer' | 'popover';
 };
 
 /**
@@ -58,6 +65,7 @@ export const Filters = ({
   onClear,
   onClose,
   onApply,
+  variant,
 }: Props) => {
   /**
    * Manages the active state of the filters drawer.
@@ -88,25 +96,51 @@ export const Filters = ({
 
   return (
     <div>
-      <Button
-        className={styles['filters__button']}
-        onClick={() => setIsActive(true)}
-        status={buttonStatus}
-        variant={buttonVariant}
-      >
-        <Icon name="filter-list" purpose="decorative" size="1.5rem" />
-        {triggerText}
-      </Button>
-      <FiltersDrawer
-        className={className}
-        footerButtonGroupClassName={footerButtonGroupClassName}
-        isActive={isActive}
-        onApply={onApply ? applyFilters : undefined}
-        onClear={onClear ? clearFilters : undefined}
-        onClose={closeFilters}
-      >
-        {children}
-      </FiltersDrawer>
+      {variant === 'popover' && (
+        <Popover placement="bottom-start">
+          <Popover.Button as={React.Fragment}>
+            <Button
+              className={styles['filters__button']}
+              onClick={() => setIsActive(true)}
+              status={buttonStatus}
+              variant={buttonVariant}
+            >
+              <Icon name="filter-list" purpose="decorative" size="1.5rem" />
+              {triggerText}
+            </Button>
+          </Popover.Button>
+          <FiltersPopover
+            className={className}
+            onApply={onApply ? applyFilters : undefined}
+            onClear={onClear ? clearFilters : undefined}
+          >
+            {children}
+          </FiltersPopover>
+        </Popover>
+      )}
+      {variant === 'drawer' && (
+        <>
+          <Button
+            className={styles['filters__button']}
+            onClick={() => setIsActive(true)}
+            status={buttonStatus}
+            variant={buttonVariant}
+          >
+            <Icon name="filter-list" purpose="decorative" size="1.5rem" />
+            {triggerText}
+          </Button>
+          <FiltersDrawer
+            className={className}
+            footerButtonGroupClassName={footerButtonGroupClassName}
+            isActive={isActive}
+            onApply={onApply ? applyFilters : undefined}
+            onClear={onClear ? clearFilters : undefined}
+            onClose={closeFilters}
+          >
+            {children}
+          </FiltersDrawer>
+        </>
+      )}
     </div>
   );
 };

src/components/FiltersDrawer/FiltersDrawer.tsx

@@ -7,7 +7,7 @@ import ButtonGroup from '../ButtonGroup';
 import Drawer from '../Drawer';
 import Heading from '../Heading';
 
-export type Props = {
+export type FiltersDrawerProps = {
   /**
    * Form controls, form fields, or other relevant information that will be displayed in the filters drawer.
    */
@@ -55,7 +55,7 @@ export const FiltersDrawer = ({
   onApply,
   onClose,
   isActive,
-}: Props) => {
+}: FiltersDrawerProps) => {
   /**
    * Manages overflow state.
    */

src/components/FiltersPopover/FiltersPopover.stories.tsx

@@ -0,0 +1,19 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { FiltersPopover } from './FiltersPopover';
+
+export default {
+  title: 'PleaseUpdateThisToADifferentFolder/FiltersPopover',
+  component: FiltersPopover,
+  parameters: {
+    badges: [BADGE.BETA],
+  },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof FiltersPopover>;
+
+export const Default: StoryObj<Args> = {
+  args: {},
+};

src/components/FiltersPopover/FiltersPopover.test.tsx

@@ -0,0 +1,6 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import * as stories from './FiltersPopover.stories';
+
+describe('<FiltersPopover />', () => {
+  generateSnapshots(stories);
+});

src/components/FiltersPopover/FiltersPopover.tsx

@@ -0,0 +1,76 @@
+import clsx from 'clsx';
+import React from 'react';
+import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
+import Popover from '../Popover';
+
+export type FiltersPopoverProps = {
+  /**
+   * Form controls, form fields, or other relevant information that will be displayed in the filters popover.
+   */
+  children: React.ReactNode;
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  /**
+   * Callback called when the clear button is called.
+   */
+  onClear?: () => void;
+  /**
+   * Callback called when filters drawer is closed.
+   */
+  onClose?: () => void;
+  /**
+   * Callback called when the apply button is called.
+   */
+  onApply?: () => void;
+};
+
+/**
+ * BETA: This component is still a work in progress and is subject to change.
+ *
+ * ```ts
+ * import {FiltersPopover} from "@chanzuckerberg/eds";
+ * ```
+ *
+ * TODO: update this comment with a description of the component.
+ */
+export const FiltersPopover = ({
+  children,
+  className,
+  onApply,
+  onClear,
+  ...other
+}: FiltersPopoverProps) => {
+  const componentClassName = clsx(styles['filters-popover'], className);
+
+  return (
+    <Popover.Content className={componentClassName} {...other}>
+      <div>{children}</div>
+      {(onClear || onApply) && (
+        <div className={styles['filters-popover__footer']}>
+          <ButtonGroup className={styles['filters-popover__button-group']}>
+            {onClear && (
+              <Button
+                className={styles['footer__button']}
+                onClick={() => onClear()}
+              >
+                Clear All
+              </Button>
+            )}
+            {onApply && (
+              <Button
+                className={styles['footer__button']}
+                onClick={() => onApply()}
+                variant="primary"
+              >
+                Apply
+              </Button>
+            )}
+          </ButtonGroup>
+        </div>
+      )}
+    </Popover.Content>
+  );
+};

src/components/FiltersPopover/index.ts

@@ -0,0 +1 @@
+export { FiltersPopover as default } from './FiltersPopover';

src/components/PopoverButton/PopoverButton.tsx

@@ -37,3 +37,5 @@ export const PopoverButton = (props: PopoverButtonProps) => {
   const { setReferenceElement } = useContext(PopoverContext);
   return <HeadlessPopover.Button {...props} ref={setReferenceElement} />;
 };
+
+PopoverButton.displayName = 'PopoverButton';

src/index.ts

@@ -31,6 +31,7 @@ export { default as FieldsetLegend } from './components/FieldsetLegend';
 export { default as Filters } from './components/Filters';
 export { default as FiltersCheckboxField } from './components/FiltersCheckboxField';
 export { default as FiltersDrawer } from './components/FiltersDrawer';
+export { default as FiltersPopover } from './components/FiltersPopover';
 export { default as Grid } from './components/Grid';
 export { default as GridItem } from './components/GridItem';
 export { default as Heading } from './components/Heading';