Rename Popover to Popover.Root

digdir · Jun 18, 2024 · 1ad6452 · 1ad6452
1 parent 6f181b6
commit 1ad6452
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 46 deletions.
diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
@@ -4,7 +4,7 @@ import cl from 'clsx/lite';
 import type { Placement } from '@floating-ui/utils';
 
 import { Popover, Paragraph } from '../';
-import type { PopoverProps } from '../Popover/Popover';
+import type { PopoverRootProps } from '../Popover/PopoverRoot';
 import type { PortalProps } from '../../types/Portal';
 
 import { HelpTextIcon } from './HelpTextIcon';
@@ -18,7 +18,7 @@ export type HelpTextProps = {
    * Size of the helptext
    * @default md
    */
-  size?: PopoverProps['size'];
+  size?: PopoverRootProps['size'];
   /**
    * Placement of the Popover.
    * @default 'right'
@@ -40,7 +40,7 @@ const HelpText = ({
 
   return (
     <>
-      <Popover
+      <Popover.Root
         variant='info'
         placement={placement}
         size={size}
@@ -87,7 +87,7 @@ const HelpText = ({
             {children}
           </Popover.Content>
         </Paragraph>
-      </Popover>
+      </Popover.Root>
     </>
   );
 };

diff --git a/packages/react/src/components/Popover/Popover.mdx b/packages/react/src/components/Popover/Popover.mdx
@@ -14,7 +14,7 @@ import * as PopoverStories from './Popover.stories.tsx';
 ```tsx
 import { Popover } from '@digdir/designsystemet-react';
 
-<Popover>
+<Popover.Root>
   <Popover.Trigger>Trigger</Popover.Trigger>
   <Popover.Content>Content</Popover.Content>
 </Popover.Trigger>

diff --git a/packages/react/src/components/Popover/Popover.stories.tsx b/packages/react/src/components/Popover/Popover.stories.tsx
@@ -13,15 +13,15 @@ const marginDecorator = (Story: StoryFn) => (
 
 export default {
   title: 'Komponenter/Popover',
-  component: Popover,
+  component: Popover.Root,
 } as Meta;
 
-export const Preview: StoryFn<typeof Popover> = (args) => {
+export const Preview: StoryFn<typeof Popover.Root> = (args) => {
   return (
-    <Popover {...args}>
+    <Popover.Root {...args}>
       <Popover.Trigger>My trigger!</Popover.Trigger>
       <Popover.Content>popover content</Popover.Content>
-    </Popover>
+    </Popover.Root>
   );
 };
 
@@ -34,7 +34,7 @@ Preview.args = {
 
 Preview.decorators = [marginDecorator];
 
-export const Variants: StoryFn<typeof Popover> = () => {
+export const Variants: StoryFn<typeof Popover.Root> = () => {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
@@ -43,37 +43,37 @@ export const Variants: StoryFn<typeof Popover> = () => {
 
   return (
     <div style={{ display: 'flex', gap: 'var(--ds-spacing-2)' }}>
-      <Popover
+      <Popover.Root
         open={open}
         placement='top'
       >
         <Popover.Trigger>popover</Popover.Trigger>
         <Popover.Content>default</Popover.Content>
-      </Popover>
-      <Popover
+      </Popover.Root>
+      <Popover.Root
         open={open}
         placement='bottom'
         variant='danger'
       >
         <Popover.Trigger>popover</Popover.Trigger>
         <Popover.Content>danger</Popover.Content>
-      </Popover>
-      <Popover
+      </Popover.Root>
+      <Popover.Root
         open={open}
         placement='top'
         variant='info'
       >
         <Popover.Trigger>popover</Popover.Trigger>
         <Popover.Content>info</Popover.Content>
-      </Popover>
-      <Popover
+      </Popover.Root>
+      <Popover.Root
         open={open}
         placement='bottom'
         variant='warning'
       >
         <Popover.Trigger>popover</Popover.Trigger>
         <Popover.Content>warning</Popover.Content>
-      </Popover>
+      </Popover.Root>
     </div>
   );
 };
@@ -85,7 +85,7 @@ export const Controlled: StoryFn<typeof Popover> = () => {
 
   return (
     <>
-      <Popover
+      <Popover.Root
         open={open}
         onClose={() => setOpen(false)}
       >
@@ -105,7 +105,7 @@ export const Controlled: StoryFn<typeof Popover> = () => {
             Slett
           </Button>
         </Popover.Content>
-      </Popover>
+      </Popover.Root>
     </>
   );
 };
@@ -114,9 +114,9 @@ Controlled.decorators = [marginDecorator];
 
 export const InPortal = () => {
   return (
-    <Popover portal>
+    <Popover.Root portal>
       <Popover.Trigger>My trigger</Popover.Trigger>
       <Popover.Content>popover content</Popover.Content>
-    </Popover>
+    </Popover.Root>
   );
 };
diff --git a/packages/react/src/components/Popover/Popover.test.tsx b/packages/react/src/components/Popover/Popover.test.tsx
@@ -1,22 +1,22 @@
 import { act, render as renderRtl, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import type { PopoverProps } from './Popover';
+import type { PopoverRootProps } from './PopoverRoot';
 
 import { Popover } from './';
 
 const contentText = 'popover content';
 
-const Comp = (args: Partial<PopoverProps>) => {
+const Comp = (args: Partial<PopoverRootProps>) => {
   return (
-    <Popover {...args}>
+    <Popover.Root {...args}>
       <Popover.Trigger>trigger</Popover.Trigger>
       <Popover.Content>{contentText}</Popover.Content>
-    </Popover>
+    </Popover.Root>
   );
 };
 
-const render = async (props: Partial<PopoverProps> = {}) => {
+const render = async (props: Partial<PopoverRootProps> = {}) => {
   /* Flush microtasks */
   await act(async () => {});
   const user = userEvent.setup();

diff --git a/packages/react/src/components/Popover/PopoverContent.tsx b/packages/react/src/components/Popover/PopoverContent.tsx
@@ -20,7 +20,7 @@ import cl from 'clsx/lite';
 import { Paragraph } from '../Typography';
 import { useIsomorphicLayoutEffect } from '../../hooks';
 
-import { PopoverContext } from './Popover';
+import { PopoverContext } from './PopoverRoot';
 
 const ARROW_HEIGHT = 7;
 const ARROW_GAP = 4;

diff --git a/.../react/src/components/Popover/Popover.tsx → ...ct/src/components/Popover/PopoverRoot.tsx b/.../react/src/components/Popover/Popover.tsx → ...ct/src/components/Popover/PopoverRoot.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import type { PortalProps } from '../../types/Portal';
 
-export type PopoverProps = {
+export type PopoverRootProps = {
   /**
    * Placement of the tooltip on the trigger.
    * @default top
@@ -34,7 +34,7 @@ export type PopoverProps = {
   children: React.ReactNode;
 } & PortalProps;
 
-export const Popover = ({
+export const PopoverRoot = ({
   children,
   placement = 'top',
   open,
@@ -43,7 +43,7 @@ export const Popover = ({
   size = 'md',
   onOpenChange,
   onClose,
-}: PopoverProps) => {
+}: PopoverRootProps) => {
   const triggerRef = useRef<Element>(null);
   const [internalOpen, setInternalOpen] = useState(open ?? false);
 
@@ -94,11 +94,11 @@ export const PopoverContext = React.createContext<{
   triggerId?: string;
   isControlled?: boolean;
   internalOpen: boolean;
-  size: NonNullable<PopoverProps['size']>;
-  variant: NonNullable<PopoverProps['variant']>;
+  size: NonNullable<PopoverRootProps['size']>;
+  variant: NonNullable<PopoverRootProps['variant']>;
   placement: Placement;
-  onOpenChange?: PopoverProps['onOpenChange'];
-  onClose?: PopoverProps['onClose'];
+  onOpenChange?: PopoverRootProps['onOpenChange'];
+  onClose?: PopoverRootProps['onClose'];
   setPopoverId?: (id: string) => void;
   setTriggerId?: (id: string) => void;
   setInternalOpen: (open: boolean) => void;
@@ -112,4 +112,4 @@ export const PopoverContext = React.createContext<{
   setInternalOpen: () => {},
 });
 
-Popover.displayName = 'Popover';
+PopoverRoot.displayName = 'Popover.Root';
diff --git a/packages/react/src/components/Popover/PopoverTrigger.tsx b/packages/react/src/components/Popover/PopoverTrigger.tsx
@@ -5,7 +5,7 @@ import { Slot } from '@radix-ui/react-slot';
 
 import { Button } from '../Button';
 
-import { PopoverContext } from './Popover';
+import { PopoverContext } from './PopoverRoot';
 
 export type PopoverTriggerProps = React.ComponentPropsWithRef<typeof Button>;
 

diff --git a/packages/react/src/components/Popover/index.ts b/packages/react/src/components/Popover/index.ts
@@ -1,22 +1,21 @@
-import { Popover as PopoverRoot } from './Popover';
+import { PopoverRoot } from './PopoverRoot';
 import type { PopoverContentProps } from './PopoverContent';
 import { PopoverContent } from './PopoverContent';
 import type { PopoverTriggerProps } from './PopoverTrigger';
 import { PopoverTrigger } from './PopoverTrigger';
-import type { PopoverProps } from './Popover';
+import type { PopoverRootProps } from './PopoverRoot';
 
-type PopoverComponent = typeof PopoverRoot & {
+type PopoverComponent = {
+  Root: typeof PopoverRoot;
   Content: typeof PopoverContent;
   Trigger: typeof PopoverTrigger;
 };
 
-const Popover = PopoverRoot as PopoverComponent;
+const Popover = {} as PopoverComponent;
 
+Popover.Root = PopoverRoot;
 Popover.Content = PopoverContent;
 Popover.Trigger = PopoverTrigger;
 
-Popover.Content.displayName = 'Popover.Content';
-Popover.Trigger.displayName = 'Popover.Trigger';
-
-export type { PopoverProps, PopoverContentProps, PopoverTriggerProps };
-export { Popover, PopoverContent, PopoverTrigger };
+export type { PopoverRootProps, PopoverContentProps, PopoverTriggerProps };
+export { Popover, PopoverRoot, PopoverContent, PopoverTrigger };