chore: 📝 Rename trigger context (#2782)

resolves #2453 --------- Co-authored-by: Michael Marszalek <[email protected]>
digdir · Nov 15, 2024 · 436b876 · 436b876
1 parent f1424ff
commit 436b876
Show file tree

Hide file tree

Showing 31 changed files with 187 additions and 176 deletions.
diff --git a/.changeset/dull-buttons-argue.md 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
@@ -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
@@ -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
@@ -52,59 +52,52 @@ export const ColorModal = ({
   weight,
 }: ColorModalProps) => {
   return (
-    <Modal.Context>
-      <Modal
-        ref={colorModalRef}
-        style={{
-          maxWidth: '1050px',
-        }}
-        backdropClose
-      >
-        <Modal.Block>
-          <Heading data-size='xs'>
-            {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`}
-          </Heading>
-        </Modal.Block>
-        <Modal.Block className={classes.modalContent}>
-          <div className={classes.description}>
-            {getColorDescription({
-              weight,
-              namespace,
-            })}
-          </div>
-          <div className={classes.container}>
-            <div className={classes.left}>
-              <Field label='Hexkode:' value={hex} copyBtn />
-              <Field
-                label='HSLuv:'
-                value={
-                  hexToHsluv(hex)[0].toFixed(0) +
-                  '° ' +
-                  hexToHsluv(hex)[1].toFixed(0) +
-                  '% ' +
-                  hexToHsluv(hex)[2].toFixed(0) +
-                  '%'
-                }
-              />
-              <Field
-                label='CSS variabel:'
-                value={getCssVariable(namespace, weight)}
-                copyBtn
-              />
+    <Modal
+      ref={colorModalRef}
+      style={{
+        maxWidth: '1050px',
+      }}
+      backdropClose
+    >
+      <Modal.Block>
+        <Heading data-size='xs'>
+          {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`}
+        </Heading>
+      </Modal.Block>
+      <Modal.Block className={classes.modalContent}>
+        <div className={classes.description}>
+          {getColorDescription({
+            weight,
+            namespace,
+          })}
+        </div>
+        <div className={classes.container}>
+          <div className={classes.left}>
+            <Field label='Hexkode:' value={hex} copyBtn />
+            <Field
+              label='HSLuv:'
+              value={
+                hexToHsluv(hex)[0].toFixed(0) +
+                '° ' +
+                hexToHsluv(hex)[1].toFixed(0) +
+                '% ' +
+                hexToHsluv(hex)[2].toFixed(0) +
+                '%'
+              }
+            />
+            <Field
+              label='CSS variabel:'
+              value={getCssVariable(namespace, weight)}
+              copyBtn
+            />
 
-              {weight !== 9 && weight !== 10 && weight !== 11 && (
-                <Field
-                  label='Brukes mot:'
-                  value={getColorCombinations(weight)}
-                />
-              )}
-            </div>
-            <div
-              className={classes.right}
-              style={{ backgroundColor: hex }}
-            ></div>
+            {weight !== 9 && weight !== 10 && weight !== 11 && (
+              <Field label='Brukes mot:' value={getColorCombinations(weight)} />
+            )}
           </div>
-          {/* <Accordion.Root
+          <div className={classes.right} style={{ backgroundColor: hex }}></div>
+        </div>
+        {/* <Accordion.Root
             color='neutral'
             className={classes.accordion}
           >
@@ -123,8 +116,7 @@ export const ColorModal = ({
               </Accordion.Content>
             </Accordion.Item>
           </Accordion.Root> */}
-        </Modal.Block>
-      </Modal>
-    </Modal.Context>
+      </Modal.Block>
+    </Modal>
   );
 };
diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.tsx b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
@@ -220,7 +220,7 @@ const TokenList = ({
       {(showThemePicker || showModeSwitcher) && (
         <div className={classes.toggleGroup}>
           {showModeSwitcher && (
-            <Dropdown.Context>
+            <Dropdown.TriggerContext>
               <Dropdown.Trigger variant='secondary'>
                 Mode: {capitalizeString(mode)}
               </Dropdown.Trigger>
@@ -238,7 +238,7 @@ const TokenList = ({
                   </Dropdown.Item>
                 </Dropdown.List>
               </Dropdown>
-            </Dropdown.Context>
+            </Dropdown.TriggerContext>
           )}
         </div>
       )}

diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx
@@ -394,7 +394,7 @@ export const Components = () => {
         </Alert>
       </div>
       <div className={cl(classes.card, classes.dropdown)}>
-        <Dropdown.Context>
+        <Dropdown.TriggerContext>
           <Dropdown.Trigger data-size='sm'>Velg språk</Dropdown.Trigger>
           <Dropdown placement='top' data-size='sm'>
             <Dropdown.Item>
@@ -413,7 +413,7 @@ export const Components = () => {
           <HelpText aria-label='Du har ikke valgt språk'>
             Velg språk for å endre innholdet på siden
           </HelpText>
-        </Dropdown.Context>
+        </Dropdown.TriggerContext>
       </div>
       <div className={cl(classes.card, classes.loaders)}>
         <div className={classes.loadersRest}>

diff --git a/apps/theme/components/TokenModal/TokenModal.tsx b/apps/theme/components/TokenModal/TokenModal.tsx
@@ -103,7 +103,7 @@ export const TokenModal = ({
   };
 
   return (
-    <Modal.Context>
+    <Modal.TriggerContext>
       <Modal.Trigger
         className={classes.trigger}
         onClick={() => {
@@ -213,6 +213,6 @@ export const TokenModal = ({
           </div>
         </div>
       </Modal>
-    </Modal.Context>
+    </Modal.TriggerContext>
   );
 };
diff --git 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 = () => (
-  <Dropdown.Context>
+  <Dropdown.TriggerContext>
     <Dropdown.Trigger variant='tertiary'>
       <Avatar aria-label='Ola Nordmann' data-size='sm'>
         ON
@@ -108,7 +108,7 @@ export const InDropdown: Story = () => (
         </Dropdown.Item>
       </Dropdown.List>
     </Dropdown>
-  </Dropdown.Context>
+  </Dropdown.TriggerContext>
 );
 InDropdown.parameters = {
   layout: 'fullscreen',

diff --git 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
-<Dropdown.Context>
+<Dropdown.TriggerContext>
   <Dropdown.Trigger>Trigger</Dropdown.Trigger>
   <Dropdown>
     <Dropdown.Heading>Heading</Dropdown.Heading>
@@ -28,7 +28,7 @@ import { Dropdown } from '@digdir/designsystemet-react';
       </Dropdown.Item>
     </Dropdown.List>
   </Dropdown>
-</Dropdown.Context>
+</Dropdown.TriggerContext>
 
 // uten context
 <Button popovertarget="my-dropdown">Trigger</Button>

diff --git 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<typeof Dropdown> = (args) => {
   return (
-    <Dropdown.Context>
+    <Dropdown.TriggerContext>
       <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
       <Dropdown {...args}>
         <Dropdown.Heading>First heading</Dropdown.Heading>
@@ -57,7 +57,7 @@ export const Preview: StoryFn<typeof Dropdown> = (args) => {
           </Dropdown.Item>
         </Dropdown.List>
       </Dropdown>
-    </Dropdown.Context>
+    </Dropdown.TriggerContext>
   );
 };
 
@@ -68,7 +68,7 @@ Preview.args = {
 
 export const Icons: StoryFn<typeof Dropdown> = (args) => {
   return (
-    <Dropdown.Context>
+    <Dropdown.TriggerContext>
       <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
       <Dropdown {...args}>
         <Dropdown.List>
@@ -98,15 +98,15 @@ export const Icons: StoryFn<typeof Dropdown> = (args) => {
           </Dropdown.Item>
         </Dropdown.List>
       </Dropdown>
-    </Dropdown.Context>
+    </Dropdown.TriggerContext>
   );
 };
 
 export const Controlled: StoryFn<typeof Dropdown> = () => {
   const [open, setOpen] = useState(false);
 
   return (
-    <Dropdown.Context>
+    <Dropdown.TriggerContext>
       <Dropdown.Trigger onClick={() => setOpen(!open)}>
         Dropdown
         {open ? <ChevronDownIcon aria-hidden /> : <ChevronUpIcon aria-hidden />}
@@ -139,7 +139,7 @@ export const Controlled: StoryFn<typeof Dropdown> = () => {
           </Dropdown.Item>
         </Dropdown.List>
       </Dropdown>
-    </Dropdown.Context>
+    </Dropdown.TriggerContext>
   );
 };
 

diff --git 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<DropdownContextProps>) => {
+const Comp = (args: Partial<DropdownTriggerContextProps>) => {
   return (
-    <Dropdown.Context {...args}>
+    <Dropdown.TriggerContext {...args}>
       <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
       <Dropdown>
         <Dropdown.Heading>Links</Dropdown.Heading>
@@ -19,11 +19,11 @@ const Comp = (args: Partial<DropdownContextProps>) => {
           {args.children}
         </Dropdown.List>
       </Dropdown>
-    </Dropdown.Context>
+    </Dropdown.TriggerContext>
   );
 };
 
-const render = async (props: Partial<DropdownContextProps> = {}) => {
+const render = async (props: Partial<DropdownTriggerContextProps> = {}) => {
   /* 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
diff --git a/packages/react/src/components/Dropdown/DropdownTriggerContext.tsx 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.TriggerContext>
+ *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ *  <Dropdown>
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *    <Dropdown.List>
+ *      <Dropdown.Item>Button 1</Dropdown.Item>
+ *    </Dropdown.List>
+ *  </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
+export const DropdownTriggerContext = ({
+  children,
+}: DropdownTriggerContextProps) => {
+  return <PopoverTriggerContext>{children}</PopoverTriggerContext>;
+};
+
+DropdownTriggerContext.displayName = 'DropdownTriggerContext';