Rename toggleOpen to onToggle

sumup-oss · Jul 1, 2021 · d9fbd6a · d9fbd6a
1 parent 359305b
commit d9fbd6a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/packages/circuit-ui/components/Popover/Popover.spec.tsx b/packages/circuit-ui/components/Popover/Popover.spec.tsx
@@ -86,6 +86,10 @@ describe('PopoverItem', () => {
 });
 
 describe('Popover', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   const renderPopover = (props: Omit<PopoverProps, 'component'>) =>
     render(
       <Popover
@@ -104,7 +108,7 @@ describe('Popover', () => {
       { type: 'divider' },
     ],
     isOpen: true,
-    toggleOpen: jest.fn(),
+    onToggle: jest.fn(),
   };
 
   describe('styles', () => {
@@ -144,7 +148,7 @@ describe('Popover', () => {
 
       userEvent.click(document.body);
 
-      expect(baseProps.toggleOpen).toHaveBeenCalled();
+      expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
     });
 
     it('should close popover when clicking the trigger element', async () => {
@@ -158,7 +162,7 @@ describe('Popover', () => {
 
       userEvent.click(popoverTrigger);
 
-      expect(baseProps.toggleOpen).toHaveBeenCalled();
+      expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
     });
 
     it('should close popover when clicking the ESC key', async () => {
@@ -172,7 +176,7 @@ describe('Popover', () => {
         key: 'Escape',
       });
 
-      expect(baseProps.toggleOpen).toHaveBeenCalled();
+      expect(baseProps.onToggle).toHaveBeenCalledTimes(1);
     });
 
     /**

diff --git a/packages/circuit-ui/components/Popover/Popover.stories.tsx b/packages/circuit-ui/components/Popover/Popover.stories.tsx
@@ -56,16 +56,13 @@ const actions = [
 ];
 
 export const Base = (args: PopoverProps): JSX.Element => {
-  const [isOpen, setOpen] = useState(false);
-  const handleClick = () => {
-    setOpen((prev) => !prev);
-  };
+  const [isOpen, setOpen] = useState(true);
 
   return (
     <Popover
       {...args}
       isOpen={isOpen}
-      toggleOpen={handleClick}
+      onToggle={setOpen}
       component={(props) => (
         <Button size="kilo" variant="primary" {...props}>
           Open popover

diff --git a/packages/circuit-ui/components/Popover/Popover.tsx b/packages/circuit-ui/components/Popover/Popover.tsx
@@ -188,7 +188,7 @@ export interface PopoverProps {
   /**
    * Function that is called when toggles the Popover.
    */
-  toggleOpen: (open: boolean | ((prevOpen: boolean) => boolean)) => void;
+  onToggle: (open: boolean | ((prevOpen: boolean) => boolean)) => void;
   /**
    * An array of PopoverItem or Divider.
    */
@@ -221,7 +221,7 @@ export interface PopoverProps {
 
 export const Popover = ({
   isOpen = false,
-  toggleOpen,
+  onToggle,
   actions,
   placement = 'bottom',
   fallbackPlacements = ['top', 'right', 'left'],
@@ -288,15 +288,15 @@ export const Popover = ({
     }
     const handleEscapePress = (event: Event) => {
       if (isEscape(event)) {
-        toggleOpen(false);
+        onToggle(false);
       }
     };
 
     document.addEventListener('keydown', handleEscapePress);
     return () => {
       document.removeEventListener('keydown', handleEscapePress);
     };
-  }, [isOpen, toggleOpen]);
+  }, [isOpen, onToggle]);
 
   useClickAway(popperRef, (event) => {
     // The reference element has its own click handler to toggle the popover.
@@ -306,7 +306,7 @@ export const Popover = ({
     ) {
       return;
     }
-    toggleOpen(false);
+    onToggle(false);
   });
 
   return (
@@ -317,7 +317,7 @@ export const Popover = ({
           aria-haspopup={true}
           aria-controls={id}
           aria-expanded={isOpen}
-          onClick={() => toggleOpen((prev) => !prev)}
+          onClick={() => onToggle((prev) => !prev)}
         />
       </div>
       {isOpen && (