From 1ad6452341b339731ae30b41a06cbf24ed7cbb42 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Tue, 18 Jun 2024 12:14:17 +0200 Subject: [PATCH] Rename `Popover` to `Popover.Root` --- .../src/components/HelpText/HelpText.tsx | 8 ++--- .../react/src/components/Popover/Popover.mdx | 2 +- .../components/Popover/Popover.stories.tsx | 34 +++++++++---------- .../src/components/Popover/Popover.test.tsx | 10 +++--- .../src/components/Popover/PopoverContent.tsx | 2 +- .../Popover/{Popover.tsx => PopoverRoot.tsx} | 16 ++++----- .../src/components/Popover/PopoverTrigger.tsx | 2 +- .../react/src/components/Popover/index.ts | 17 +++++----- 8 files changed, 45 insertions(+), 46 deletions(-) rename packages/react/src/components/Popover/{Popover.tsx => PopoverRoot.tsx} (88%) diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx index 021d8e1028..58ca91d481 100644 --- 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 ( <> - - + ); }; diff --git a/packages/react/src/components/Popover/Popover.mdx b/packages/react/src/components/Popover/Popover.mdx index 885bb271d6..a992fd2a8b 100644 --- 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'; - + Trigger Content diff --git a/packages/react/src/components/Popover/Popover.stories.tsx b/packages/react/src/components/Popover/Popover.stories.tsx index e1505e9daf..b739dc242d 100644 --- 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 = (args) => { +export const Preview: StoryFn = (args) => { return ( - + My trigger! popover content - + ); }; @@ -34,7 +34,7 @@ Preview.args = { Preview.decorators = [marginDecorator]; -export const Variants: StoryFn = () => { +export const Variants: StoryFn = () => { const [open, setOpen] = useState(false); useEffect(() => { @@ -43,37 +43,37 @@ export const Variants: StoryFn = () => { return (
- popover default - - + popover danger - - + popover info - - + popover warning - +
); }; @@ -85,7 +85,7 @@ export const Controlled: StoryFn = () => { return ( <> - setOpen(false)} > @@ -105,7 +105,7 @@ export const Controlled: StoryFn = () => { Slett - + ); }; @@ -114,9 +114,9 @@ Controlled.decorators = [marginDecorator]; export const InPortal = () => { return ( - + My trigger popover content - + ); }; diff --git a/packages/react/src/components/Popover/Popover.test.tsx b/packages/react/src/components/Popover/Popover.test.tsx index 27186187e5..d968c0a096 100644 --- 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) => { +const Comp = (args: Partial) => { return ( - + trigger {contentText} - + ); }; -const render = async (props: Partial = {}) => { +const render = async (props: Partial = {}) => { /* 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 index 81ecb915ad..70506fb91d 100644 --- 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/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/PopoverRoot.tsx similarity index 88% rename from packages/react/src/components/Popover/Popover.tsx rename to packages/react/src/components/Popover/PopoverRoot.tsx index 4a9a02f6fd..e4c8151f00 100644 --- a/packages/react/src/components/Popover/Popover.tsx +++ b/packages/react/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(null); const [internalOpen, setInternalOpen] = useState(open ?? false); @@ -94,11 +94,11 @@ export const PopoverContext = React.createContext<{ triggerId?: string; isControlled?: boolean; internalOpen: boolean; - size: NonNullable; - variant: NonNullable; + size: NonNullable; + variant: NonNullable; 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 index c94f310afc..8d1d219770 100644 --- 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; diff --git a/packages/react/src/components/Popover/index.ts b/packages/react/src/components/Popover/index.ts index 0a688a7245..19127e4152 100644 --- 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 };