docs: improve popover

onfido · Oct 14, 2021 · e674159 · e674159
1 parent eaedb28
commit e674159
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/packages/react/src/components/popover/popover-props.ts b/packages/react/src/components/popover/popover-props.ts
@@ -8,7 +8,15 @@ export interface PopoverProps extends BaseProps, Omit<Div, 'ref'> {
    * screen is too small.
    */
   overlay?: boolean;
+  /**
+   * An event that notifies the intention to close the Popover, usually from an
+   * outside click.
+   */
   onClose?: () => void;
+  /**
+   * An event that notifies the initial rendering of the Popover has completed,
+   * provides the Popover element as argument.
+   */
   onRender?: (popover: HTMLDivElement | null) => void;
   /**
    * Ref to an element which the Popover should target for placement.

diff --git a/packages/react/src/components/popover/popover.stories.tsx b/packages/react/src/components/popover/popover.stories.tsx
@@ -2,7 +2,6 @@ import { Button, Popover, PopoverProps } from '@onfido/castor-react';
 import React, { Fragment, useRef } from 'react';
 import {
   Meta,
-  omit,
   optionsToSummary,
   reactMatrix,
   Story,
@@ -15,7 +14,13 @@ export default {
   title: 'React/Popover',
   component: Popover,
   argTypes: {
-    ...omit('onClose', 'target'),
+    withPortal: {
+      description: [
+        'Toggle between an example with and without `target` ref.',
+        'Specific to `react-dom`.',
+      ].join('\n\n'),
+      name: '[Story only] with portal',
+    },
     align: {
       control: { type: 'inline-radio', options: align },
       table: {
@@ -34,13 +39,10 @@ export default {
         type: { summary: optionsToSummary(position) },
       },
     },
-    withPortal: {
-      description: [
-        'Toggle between an example with and without `target` ref.',
-        'Specific to `react-dom`.',
-      ].join('\n\n'),
-      name: '[Story only] with portal',
-    },
+    overlay: { control: null },
+    onClose: {},
+    onRender: {},
+    target: { control: null },
   },
   args: {
     children: 'Popover content',

diff --git a/packages/react/src/components/tooltip/tooltip.stories.tsx b/packages/react/src/components/tooltip/tooltip.stories.tsx
@@ -14,6 +14,13 @@ export default {
   title: 'React/Tooltip',
   component: Tooltip,
   argTypes: {
+    withPortal: {
+      description: [
+        'Toggle between an example with and without `target` ref.',
+        'Specific to `react-dom`.',
+      ].join('\n\n'),
+      name: '[Story only] with portal',
+    },
     align: {
       control: { type: 'inline-radio', options: align },
       table: {
@@ -38,13 +45,6 @@ export default {
       table: { type: { summary: 'boolean | "on-hover"' } },
     },
     target: { control: { disable: true } },
-    withPortal: {
-      description: [
-        'Toggle between an example with and without `target` ref.',
-        'Specific to `react-dom`.',
-      ].join('\n\n'),
-      name: '[Story only] with portal',
-    },
   },
   args: {
     children: 'Tooltip',