diff --git a/.changeset/dull-buttons-argue.md b/.changeset/dull-buttons-argue.md new file mode 100644 index 0000000000..2a767e211a --- /dev/null +++ b/.changeset/dull-buttons-argue.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-react": patch +--- + +Dropdown: Rename `DropdownContext` to `DropdownTriggerContext` diff --git a/.changeset/fluffy-coins-run.md b/.changeset/fluffy-coins-run.md new file mode 100644 index 0000000000..d05c68dc63 --- /dev/null +++ b/.changeset/fluffy-coins-run.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-react": patch +--- + +Modal: Rename `ModalContext` to `ModalTriggerContext` diff --git a/.changeset/violet-steaks-repeat.md b/.changeset/violet-steaks-repeat.md new file mode 100644 index 0000000000..e982c50ca2 --- /dev/null +++ b/.changeset/violet-steaks-repeat.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-react": patch +--- + +Popover: Rename `PopoverContext` to `PopoverTriggerContext` diff --git a/apps/_components/src/ColorModal/ColorModal.tsx b/apps/_components/src/ColorModal/ColorModal.tsx index 3953845126..e6707a42c0 100644 --- a/apps/_components/src/ColorModal/ColorModal.tsx +++ b/apps/_components/src/ColorModal/ColorModal.tsx @@ -52,59 +52,52 @@ export const ColorModal = ({ weight, }: ColorModalProps) => { return ( - - - - - {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`} - - - -
- {getColorDescription({ - weight, - namespace, - })} -
-
-
- - - + + + + {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`} + + + +
+ {getColorDescription({ + weight, + namespace, + })} +
+
+
+ + + - {weight !== 9 && weight !== 10 && weight !== 11 && ( - - )} -
-
+ {weight !== 9 && weight !== 10 && weight !== 11 && ( + + )}
- {/*
+
+ {/* @@ -123,8 +116,7 @@ export const ColorModal = ({ */} - - - + + ); }; diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.tsx b/apps/storefront/components/Tokens/TokenList/TokenList.tsx index 9ae8ebbc66..0a18aa2824 100644 --- a/apps/storefront/components/Tokens/TokenList/TokenList.tsx +++ b/apps/storefront/components/Tokens/TokenList/TokenList.tsx @@ -220,7 +220,7 @@ const TokenList = ({ {(showThemePicker || showModeSwitcher) && (
{showModeSwitcher && ( - + Mode: {capitalizeString(mode)} @@ -238,7 +238,7 @@ const TokenList = ({ - + )}
)} diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx index de904bd7f8..99c9778a15 100644 --- a/apps/theme/components/Previews/Components/Components.tsx +++ b/apps/theme/components/Previews/Components/Components.tsx @@ -394,7 +394,7 @@ export const Components = () => {
- + Velg språk @@ -413,7 +413,7 @@ export const Components = () => { Velg språk for å endre innholdet på siden - +
diff --git a/apps/theme/components/TokenModal/TokenModal.tsx b/apps/theme/components/TokenModal/TokenModal.tsx index 7c6626c2fd..cbd6d587a3 100644 --- a/apps/theme/components/TokenModal/TokenModal.tsx +++ b/apps/theme/components/TokenModal/TokenModal.tsx @@ -103,7 +103,7 @@ export const TokenModal = ({ }; return ( - + { @@ -213,6 +213,6 @@ export const TokenModal = ({
- + ); }; diff --git a/packages/react/src/components/Avatar/Avatar.stories.tsx b/packages/react/src/components/Avatar/Avatar.stories.tsx index 80fcfca455..e0ad93fa3f 100644 --- a/packages/react/src/components/Avatar/Avatar.stories.tsx +++ b/packages/react/src/components/Avatar/Avatar.stories.tsx @@ -79,7 +79,7 @@ export const WithImage: Story = () => ( ); export const InDropdown: Story = () => ( - + ON @@ -108,7 +108,7 @@ export const InDropdown: Story = () => ( - + ); InDropdown.parameters = { layout: 'fullscreen', diff --git a/packages/react/src/components/Dropdown/Dropdown.mdx b/packages/react/src/components/Dropdown/Dropdown.mdx index 29a1e587f7..f9faf26129 100644 --- a/packages/react/src/components/Dropdown/Dropdown.mdx +++ b/packages/react/src/components/Dropdown/Dropdown.mdx @@ -18,7 +18,7 @@ import { Dropdown } from './'; import { Dropdown } from '@digdir/designsystemet-react'; // med context - + Trigger Heading @@ -28,7 +28,7 @@ import { Dropdown } from '@digdir/designsystemet-react'; - + // uten context diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.tsx b/packages/react/src/components/Dropdown/Dropdown.stories.tsx index 3e52739990..fad088c9e9 100644 --- a/packages/react/src/components/Dropdown/Dropdown.stories.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.stories.tsx @@ -35,7 +35,7 @@ export default { export const Preview: StoryFn = (args) => { return ( - + Dropdown First heading @@ -57,7 +57,7 @@ export const Preview: StoryFn = (args) => { - + ); }; @@ -68,7 +68,7 @@ Preview.args = { export const Icons: StoryFn = (args) => { return ( - + Dropdown @@ -98,7 +98,7 @@ export const Icons: StoryFn = (args) => { - + ); }; @@ -106,7 +106,7 @@ export const Controlled: StoryFn = () => { const [open, setOpen] = useState(false); return ( - + setOpen(!open)}> Dropdown {open ? : } @@ -139,7 +139,7 @@ export const Controlled: StoryFn = () => { - + ); }; diff --git a/packages/react/src/components/Dropdown/Dropdown.test.tsx b/packages/react/src/components/Dropdown/Dropdown.test.tsx index 2b312e4d4c..553fdce9c0 100644 --- a/packages/react/src/components/Dropdown/Dropdown.test.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.test.tsx @@ -2,13 +2,13 @@ import { render as renderRtl, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { act } from 'react'; -import type { DropdownContextProps } from './DropdownContext'; +import type { DropdownTriggerContextProps } from './DropdownTriggerContext'; import { Dropdown } from '.'; -const Comp = (args: Partial) => { +const Comp = (args: Partial) => { return ( - + Dropdown Links @@ -19,11 +19,11 @@ const Comp = (args: Partial) => { {args.children} - + ); }; -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/Dropdown/DropdownContext.tsx b/packages/react/src/components/Dropdown/DropdownContext.tsx deleted file mode 100644 index 398f8ba74b..0000000000 --- a/packages/react/src/components/Dropdown/DropdownContext.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type { ReactNode } from 'react'; - -import { PopoverContext } from '../Popover'; - -export type DropdownContextProps = { - children: ReactNode; -}; - -/** - * DropdownContext is the root component for the Dropdown component. - * @example - * - * Dropdown - * - * Heading - * - * Button 1 - * - * - * - */ -export const DropdownContext = ({ children }: DropdownContextProps) => { - return {children}; -}; - -DropdownContext.displayName = 'DropdownContext'; diff --git a/packages/react/src/components/Dropdown/DropdownTriggerContext.tsx b/packages/react/src/components/Dropdown/DropdownTriggerContext.tsx new file mode 100644 index 0000000000..4963e78baa --- /dev/null +++ b/packages/react/src/components/Dropdown/DropdownTriggerContext.tsx @@ -0,0 +1,28 @@ +import type { ReactNode } from 'react'; + +import { PopoverTriggerContext } from '../Popover'; + +export type DropdownTriggerContextProps = { + children: ReactNode; +}; + +/** + * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component. + * @example + * + * Dropdown + * + * Heading + * + * Button 1 + * + * + * + */ +export const DropdownTriggerContext = ({ + children, +}: DropdownTriggerContextProps) => { + return {children}; +}; + +DropdownTriggerContext.displayName = 'DropdownTriggerContext'; diff --git a/packages/react/src/components/Dropdown/index.ts b/packages/react/src/components/Dropdown/index.ts index d9d7203cfc..632e81438f 100644 --- a/packages/react/src/components/Dropdown/index.ts +++ b/packages/react/src/components/Dropdown/index.ts @@ -1,14 +1,14 @@ import { Dropdown as DropdownRoot } from './Dropdown'; import { DropdownButton } from './DropdownButton'; -import { DropdownContext } from './DropdownContext'; import { DropdownHeading } from './DropdownHeading'; import { DropdownItem } from './DropdownItem'; import { DropdownList } from './DropdownList'; import { DropdownTrigger } from './DropdownTrigger'; +import { DropdownTriggerContext } from './DropdownTriggerContext'; /** * @example - * + * * Dropdown * * Heading @@ -18,10 +18,10 @@ import { DropdownTrigger } from './DropdownTrigger'; * * * - * + * */ const Dropdown = Object.assign(DropdownRoot, { - Context: DropdownContext, + TriggerContext: DropdownTriggerContext, Heading: DropdownHeading, List: DropdownList, Item: DropdownItem, @@ -29,14 +29,14 @@ const Dropdown = Object.assign(DropdownRoot, { Trigger: DropdownTrigger, }); -Dropdown.Context.displayName = 'Dropdown.Context'; +Dropdown.TriggerContext.displayName = 'Dropdown.TriggerContext'; Dropdown.List.displayName = 'Dropdown.List'; Dropdown.Heading.displayName = 'Dropdown.Heading'; Dropdown.Item.displayName = 'Dropdown.Item'; Dropdown.Button.displayName = 'Dropdown.Button'; Dropdown.Trigger.displayName = 'Dropdown.Trigger'; -export type { DropdownContextProps } from './DropdownContext'; +export type { DropdownTriggerContextProps } from './DropdownTriggerContext'; export type { DropdownListProps } from './DropdownList'; export type { DropdownHeadingProps } from './DropdownHeading'; export type { DropdownItemProps } from './DropdownItem'; @@ -44,7 +44,7 @@ export type { DropdownButtonProps } from './DropdownButton'; export type { DropdownProps } from './Dropdown'; export { Dropdown, - DropdownContext, + DropdownTriggerContext, DropdownList, DropdownHeading, DropdownItem, diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx index 69f180a878..59e2a7a2ef 100644 --- a/packages/react/src/components/HelpText/HelpText.tsx +++ b/packages/react/src/components/HelpText/HelpText.tsx @@ -28,7 +28,7 @@ export const HelpText = forwardRef( ref, ) { return ( - + ( {children} - + ); }, ); diff --git a/packages/react/src/components/Modal/Modal.mdx b/packages/react/src/components/Modal/Modal.mdx index 51a1dff1a9..74f059a5db 100644 --- a/packages/react/src/components/Modal/Modal.mdx +++ b/packages/react/src/components/Modal/Modal.mdx @@ -21,7 +21,7 @@ Les [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) ## Slik bruker du `Modal` ```tsx - + Open Modal @@ -30,7 +30,7 @@ Les [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) Content Footer - + ``` ## Bruk med eksten trigger @@ -50,7 +50,7 @@ const modalRef = useRef(null); ### Med bruk av `ref` - + ### Close on backdrop click diff --git a/packages/react/src/components/Modal/Modal.stories.tsx b/packages/react/src/components/Modal/Modal.stories.tsx index c62d8bc1ad..0ccd82aa9e 100644 --- a/packages/react/src/components/Modal/Modal.stories.tsx +++ b/packages/react/src/components/Modal/Modal.stories.tsx @@ -51,7 +51,7 @@ export default { } satisfies Meta; export const Preview: StoryFn = (args) => ( - + Open Modal @@ -63,10 +63,10 @@ export const Preview: StoryFn = (args) => ( Modal footer - + ); -export const WithoutModalContext: StoryFn = (args) => { +export const WithoutModalTriggerContext: StoryFn = (args) => { const modalRef = useRef(null); return ( @@ -91,7 +91,7 @@ export const BackdropClose: StoryFn = () => { const modalRef = useRef(null); return ( - + Open Modal Modal med backdropClose og en veldig lang tittel @@ -101,12 +101,12 @@ export const BackdropClose: StoryFn = () => { Modal footer - + ); }; export const WithHeaderAndFooter: StoryFn = () => ( - + Open Modal @@ -139,7 +139,7 @@ export const WithHeaderAndFooter: StoryFn = () => ( Og over footer - + ); export const ModalWithForm: StoryFn = () => { @@ -147,7 +147,7 @@ export const ModalWithForm: StoryFn = () => { const [input, setInput] = useState(''); return ( - + Open Modal setInput('')} backdropClose> @@ -180,12 +180,12 @@ export const ModalWithForm: StoryFn = () => { - + ); }; export const ModalWithMaxWidth: StoryFn = () => ( - + Open Modal @@ -196,7 +196,7 @@ export const ModalWithMaxWidth: StoryFn = () => ( doloremque obcaecati assumenda odio ducimus sunt et. - + ); export const ModalWithCombobox: StoryFn = () => { @@ -204,7 +204,7 @@ export const ModalWithCombobox: StoryFn = () => { return ( <> - + Open Modal @@ -232,7 +232,7 @@ export const ModalWithCombobox: StoryFn = () => { - + ); }; diff --git a/packages/react/src/components/Modal/Modal.test.tsx b/packages/react/src/components/Modal/Modal.test.tsx index f331de1371..9933701148 100644 --- a/packages/react/src/components/Modal/Modal.test.tsx +++ b/packages/react/src/components/Modal/Modal.test.tsx @@ -12,10 +12,10 @@ const OPEN_MODAL = 'Open Modal'; const Comp = (args: Partial) => { return ( <> - + {OPEN_MODAL} - + ); }; diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx index bf58a7d6eb..e05165526b 100644 --- a/packages/react/src/components/Modal/Modal.tsx +++ b/packages/react/src/components/Modal/Modal.tsx @@ -5,7 +5,7 @@ import type { DialogHTMLAttributes } from 'react'; import { forwardRef, useContext, useEffect, useRef } from 'react'; import { Button } from '../Button'; -import { Context } from './ModalContext'; +import { Context } from './ModalTriggerContext'; export type ModalProps = { /** @@ -39,7 +39,7 @@ export const Modal = forwardRef(function Modal( ref, ) { const contextRef = useContext(Context); - const modalRef = useRef(null); // This local ref is used to make sure the modal works without a ModalContext + const modalRef = useRef(null); // This local ref is used to make sure the modal works without a ModalTriggerContext const Component = asChild ? Slot : 'dialog'; const mergedRefs = useMergeRefs([contextRef, ref, modalRef]); diff --git a/packages/react/src/components/Modal/ModalTrigger.tsx b/packages/react/src/components/Modal/ModalTrigger.tsx index 390413f994..fded97ac32 100644 --- a/packages/react/src/components/Modal/ModalTrigger.tsx +++ b/packages/react/src/components/Modal/ModalTrigger.tsx @@ -3,7 +3,7 @@ import { forwardRef, useContext } from 'react'; import type { ComponentPropsWithRef } from 'react'; import { Button } from '../Button/Button'; -import { Context } from './ModalContext'; +import { Context } from './ModalTriggerContext'; export type ModalTriggerProps = ComponentPropsWithRef; diff --git a/packages/react/src/components/Modal/ModalContext.tsx b/packages/react/src/components/Modal/ModalTriggerContext.tsx similarity index 61% rename from packages/react/src/components/Modal/ModalContext.tsx rename to packages/react/src/components/Modal/ModalTriggerContext.tsx index 6312da4c86..c05ec16975 100644 --- a/packages/react/src/components/Modal/ModalContext.tsx +++ b/packages/react/src/components/Modal/ModalTriggerContext.tsx @@ -5,12 +5,12 @@ export const Context = createContext>({ current: null, }); -export type ModalContextProps = { children: ReactNode }; +export type ModalTriggerContextProps = { children: ReactNode }; -export const ModalContext = ({ children }: ModalContextProps) => { +export const ModalTriggerContext = ({ children }: ModalTriggerContextProps) => { const contextRef = useRef(null); return {children}; }; -ModalContext.displayName = 'ModalContext'; +ModalTriggerContext.displayName = 'ModalTriggerContext'; diff --git a/packages/react/src/components/Modal/index.ts b/packages/react/src/components/Modal/index.ts index 9dfbff06ef..5e420e8800 100644 --- a/packages/react/src/components/Modal/index.ts +++ b/packages/react/src/components/Modal/index.ts @@ -1,20 +1,20 @@ import { Modal as ModalParent } from './Modal'; import { ModalBlock } from './ModalBlock'; -import { ModalContext } from './ModalContext'; import { ModalTrigger } from './ModalTrigger'; +import { ModalTriggerContext } from './ModalTriggerContext'; const Modal = Object.assign(ModalParent, { Block: ModalBlock, - Context: ModalContext, + TriggerContext: ModalTriggerContext, Trigger: ModalTrigger, }); Modal.Block.displayName = 'Modal.Block'; -Modal.Context.displayName = 'Modal.Context'; +Modal.TriggerContext.displayName = 'Modal.TriggerContext'; Modal.Trigger.displayName = 'Modal.Trigger'; export type { ModalBlockProps } from './ModalBlock'; -export type { ModalContextProps } from './ModalContext'; +export type { ModalTriggerContextProps } from './ModalTriggerContext'; export type { ModalProps } from './Modal'; export type { ModalTriggerProps } from './ModalTrigger'; -export { Modal, ModalBlock, ModalContext, ModalTrigger }; +export { Modal, ModalBlock, ModalTriggerContext, ModalTrigger }; diff --git a/packages/react/src/components/Popover/Popover.mdx b/packages/react/src/components/Popover/Popover.mdx index bbbb12e2ed..0063127cd3 100644 --- a/packages/react/src/components/Popover/Popover.mdx +++ b/packages/react/src/components/Popover/Popover.mdx @@ -16,10 +16,10 @@ import * as PopoverStories from './Popover.stories.tsx'; import { Popover } from '@digdir/designsystemet-react'; // med context - + Trigger Content - + // uten context med egen trigger @@ -51,7 +51,7 @@ Standard oppførsel er at `Popover` alltid vil prøve å være i viewporten, men Det er innebygd tilgjengelighet i [Popover APIet](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) i henhold til åpne/lukket tilstand og tastatur navigasjon. ## React og `popovertarget` -Når du bruker `Popover` uten `Popover.Context`, kobler du selv sammen utløseren og `Popover`. +Når du bruker `Popover` uten `Popover.TriggerContext`, kobler du selv sammen utløseren og `Popover`. Da brukes `popovertarget` i små bokstaver, slik at alle versjoner av React korrekt gjengir attributtet. Når du bruker `@digdir/designsystemet-react` utvider vi `@types/react-dom` til å akseptere dette. diff --git a/packages/react/src/components/Popover/Popover.stories.tsx b/packages/react/src/components/Popover/Popover.stories.tsx index adc01ad0dc..9ec21e6594 100644 --- a/packages/react/src/components/Popover/Popover.stories.tsx +++ b/packages/react/src/components/Popover/Popover.stories.tsx @@ -30,10 +30,10 @@ export default { export const Preview: StoryFn = (args) => { return ( - + My trigger! popover content - + ); }; @@ -70,13 +70,13 @@ export const Variants: StoryFn = () => { width: '100%', }} > - + popover default - - + + popover = () => { > danger - - + + popover = () => { > info - - + + popover = () => { > warning - + ); @@ -124,7 +124,7 @@ export const Controlled: StoryFn = () => { const [open, setOpen] = useState(false); return ( - + setOpen(!open)}> My trigger @@ -139,7 +139,7 @@ export const Controlled: StoryFn = () => { Slett - + ); }; Controlled.parameters = { diff --git a/packages/react/src/components/Popover/Popover.test.tsx b/packages/react/src/components/Popover/Popover.test.tsx index f825301164..adbcff868c 100644 --- a/packages/react/src/components/Popover/Popover.test.tsx +++ b/packages/react/src/components/Popover/Popover.test.tsx @@ -33,10 +33,10 @@ const render = async (props: PopoverProps = {}) => { return { user, ...renderRtl( - + trigger {contentText} - , + , ), }; }; diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx index d57eb49e46..175b444b15 100644 --- a/packages/react/src/components/Popover/Popover.tsx +++ b/packages/react/src/components/Popover/Popover.tsx @@ -13,7 +13,7 @@ import { forwardRef, useContext, useRef, useState } from 'react'; import type { HTMLAttributes } from 'react'; import { useEffect } from 'react'; import type { DefaultProps } from '../../types'; -import { Context } from './PopoverContext'; +import { Context } from './PopoverTriggerContext'; // Make React support popovertarget attribute // https://github.com/facebook/react/issues/27479 @@ -32,7 +32,7 @@ declare global { export type PopoverProps = { /** - * id to connect the trigger with the popover - required when used without Popover.Context. + * id to connect the trigger with the popover - required when used without Popover.TriggerContext. */ id?: string; /** diff --git a/packages/react/src/components/Popover/PopoverTrigger.tsx b/packages/react/src/components/Popover/PopoverTrigger.tsx index 3b56d0d41d..985514dcd7 100644 --- a/packages/react/src/components/Popover/PopoverTrigger.tsx +++ b/packages/react/src/components/Popover/PopoverTrigger.tsx @@ -2,7 +2,7 @@ import { Slot } from '@radix-ui/react-slot'; import { forwardRef, useContext } from 'react'; import type { ComponentPropsWithRef } from 'react'; import { Button } from '../Button/Button'; -import { Context } from './PopoverContext'; +import { Context } from './PopoverTriggerContext'; export type PopoverTriggerProps = ComponentPropsWithRef; diff --git a/packages/react/src/components/Popover/PopoverContext.tsx b/packages/react/src/components/Popover/PopoverTriggerContext.tsx similarity index 70% rename from packages/react/src/components/Popover/PopoverContext.tsx rename to packages/react/src/components/Popover/PopoverTriggerContext.tsx index 6347dbc173..8c71713dc0 100644 --- a/packages/react/src/components/Popover/PopoverContext.tsx +++ b/packages/react/src/components/Popover/PopoverTriggerContext.tsx @@ -1,11 +1,13 @@ import { createContext, useId, useState } from 'react'; import type { ReactNode } from 'react'; -export type PopoverContextProps = { +export type PopoverTriggerContextProps = { children: ReactNode; }; -export const PopoverContext = ({ children }: PopoverContextProps) => { +export const PopoverTriggerContext = ({ + children, +}: PopoverTriggerContextProps) => { const randomPopoverId = useId(); const [popoverId, setPopoverId] = useState(randomPopoverId); @@ -16,7 +18,7 @@ export const PopoverContext = ({ children }: PopoverContextProps) => { ); }; -PopoverContext.displayName = 'PopoverContext'; +PopoverTriggerContext.displayName = 'PopoverTriggerContext'; export const Context = createContext<{ popoverId?: string; diff --git a/packages/react/src/components/Popover/index.ts b/packages/react/src/components/Popover/index.ts index aa56bfe4dc..0125d3536f 100644 --- a/packages/react/src/components/Popover/index.ts +++ b/packages/react/src/components/Popover/index.ts @@ -1,21 +1,21 @@ import { Popover as PopoverParent } from './Popover'; -import { PopoverContext } from './PopoverContext'; import { PopoverTrigger } from './PopoverTrigger'; +import { PopoverTriggerContext } from './PopoverTriggerContext'; type PopoverComponent = typeof PopoverParent & { - Context: typeof PopoverContext; + TriggerContext: typeof PopoverTriggerContext; Trigger: typeof PopoverTrigger; }; const Popover = PopoverParent as PopoverComponent; -Popover.Context = PopoverContext; +Popover.TriggerContext = PopoverTriggerContext; Popover.Trigger = PopoverTrigger; -Popover.Context.displayName = 'Popover.Context'; +Popover.TriggerContext.displayName = 'Popover.TriggerContext'; Popover.Trigger.displayName = 'Popover.Trigger'; export type { PopoverProps } from './Popover'; -export type { PopoverContextProps } from './PopoverContext'; +export type { PopoverTriggerContextProps } from './PopoverTriggerContext'; export type { PopoverTriggerProps } from './PopoverTrigger'; -export { Popover, PopoverContext, PopoverTrigger }; +export { Popover, PopoverTriggerContext, PopoverTrigger }; diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx index 457d2acb33..b8ca3f6887 100644 --- a/packages/react/src/components/form/Combobox/Combobox.stories.tsx +++ b/packages/react/src/components/form/Combobox/Combobox.stories.tsx @@ -318,7 +318,7 @@ export const InModal: StoryFn = (args) => { const [value, setValue] = useState([]); return ( - + Open Modal @@ -343,7 +343,7 @@ export const InModal: StoryFn = (args) => { ))} - + ); }; InModal.play = async (ctx) => { diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx index f6fcb61eb3..a74e22669f 100644 --- a/packages/react/stories/testing.stories.tsx +++ b/packages/react/stories/testing.stories.tsx @@ -256,7 +256,7 @@ export const Sizes: StoryFn = () => { ))} {sizes.map((size) => (
- + Dropdown Heading 1 @@ -269,7 +269,7 @@ export const Sizes: StoryFn = () => { - +
))} {sizes.map((size) => ( @@ -339,7 +339,7 @@ export const Sizes: StoryFn = () => { ))} {sizes.map((size) => (
- + Open Modal @@ -350,7 +350,7 @@ export const Sizes: StoryFn = () => { Blanditiis doloremque obcaecati assumenda odio ducimus sunt et. - +
))} {sizes.map((size) => ( @@ -378,10 +378,10 @@ export const Sizes: StoryFn = () => { ))} {sizes.map((size) => (
- + My popup popover content - +
))} {sizes.map((size) => (