[Actionmenu] Updated examples for docs, removed flipAlignment-prop (#…

…3236) * change: Updated actionmenu examples * change: Removed flipAlignment prop for better alignment
navikt · Oct 17, 2024 · 1ed809c · 1ed809c
1 parent e2359dd
commit 1ed809c
Show file tree

Hide file tree

Showing 10 changed files with 316 additions and 300 deletions.
diff --git a/@navikt/core/react/src/overlays/floating-menu/Menu.tsx b/@navikt/core/react/src/overlays/floating-menu/Menu.tsx
@@ -205,7 +205,6 @@ const MenuRootContentNonModal = React.forwardRef<
       ref={ref}
       disableOutsidePointerEvents={false}
       onDismiss={() => context.onOpenChange(false)}
-      flipAlignment={false}
     />
   );
 });
@@ -232,7 +231,6 @@ const MenuRootContentModal = forwardRef<
         { checkForDefaultPrevented: false },
       )}
       onDismiss={() => context.onOpenChange(false)}
-      flipAlignment={false}
     />
   );
 });

diff --git a/@navikt/core/react/src/overlays/floating/Floating.tsx b/@navikt/core/react/src/overlays/floating/Floating.tsx
@@ -187,7 +187,6 @@ interface FloatingContentProps extends HTMLAttributes<HTMLDivElement> {
   collisionBoundary?: Boundary | Boundary[];
   collisionPadding?: number | Partial<Record<Side, number>>;
   hideWhenDetached?: boolean;
-  flipAlignment?: boolean;
   updatePositionStrategy?: "optimized" | "always";
   onPlaced?: () => void;
   arrow?: {
@@ -213,7 +212,6 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       updatePositionStrategy = "optimized",
       onPlaced,
       arrow: _arrow,
-      flipAlignment,
       ...contentProps
     }: FloatingContentProps,
     forwardedRef,
@@ -258,7 +256,6 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       altBoundary: hasExplicitBoundaries,
       /* https://floating-ui.com/docs/flip#fallbackaxissidedirection */
       fallbackAxisSideDirection: "end",
-      flipAlignment,
     };
 
     const { refs, floatingStyles, placement, isPositioned, middlewareData } =

diff --git a/aksel.nav.no/website/pages/eksempler/actionmenu/danger.tsx b/aksel.nav.no/website/pages/eksempler/actionmenu/danger.tsx
@@ -9,7 +9,7 @@ import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <ActionMenu defaultOpen>
+    <ActionMenu>
       <ActionMenu.Trigger>
         <Button
           variant="secondary-neutral"
@@ -42,7 +42,7 @@ const Example = () => {
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
+export default withDsExample(Example, { variant: "static" });
 
 /* Storybook story */
 export const Demo = {

diff --git a/aksel.nav.no/website/pages/eksempler/actionmenu/filter.tsx b/aksel.nav.no/website/pages/eksempler/actionmenu/filter.tsx
@@ -19,78 +19,80 @@ const Example = () => {
   };
 
   return (
-    <ActionMenu defaultOpen>
-      <ActionMenu.Trigger>
-        <Button
-          variant="secondary-neutral"
-          icon={<ChevronDownIcon aria-hidden />}
-          iconPosition="right"
-        >
-          Filter
-        </Button>
-      </ActionMenu.Trigger>
-      <ActionMenu.Content>
-        <ActionMenu.Group label="Kolonner">
-          <ActionMenu.CheckboxItem
-            checked={
-              Object.values(views).every(Boolean)
-                ? true
-                : Object.values(views).some(Boolean)
-                  ? "indeterminate"
-                  : false
-            }
-            onCheckedChange={() => {
-              const allChecked = Object.values(views).every(Boolean);
-              setViews((prevState) =>
-                Object.keys(prevState).reduce(
-                  (acc, key) => {
-                    acc[key] = !allChecked;
-                    return acc;
-                  },
-                  {} as typeof views,
-                ),
-              );
-            }}
+    <div style={{ minHeight: "28rem" }}>
+      <ActionMenu>
+        <ActionMenu.Trigger>
+          <Button
+            variant="secondary-neutral"
+            icon={<ChevronDownIcon aria-hidden />}
+            iconPosition="right"
           >
-            Velg alle
-          </ActionMenu.CheckboxItem>
-          <ActionMenu.CheckboxItem
-            checked={views.started}
-            onCheckedChange={() => handleCheckboxChange("started")}
+            Filter
+          </Button>
+        </ActionMenu.Trigger>
+        <ActionMenu.Content>
+          <ActionMenu.Group label="Kolonner">
+            <ActionMenu.CheckboxItem
+              checked={
+                Object.values(views).every(Boolean)
+                  ? true
+                  : Object.values(views).some(Boolean)
+                    ? "indeterminate"
+                    : false
+              }
+              onCheckedChange={() => {
+                const allChecked = Object.values(views).every(Boolean);
+                setViews((prevState) =>
+                  Object.keys(prevState).reduce(
+                    (acc, key) => {
+                      acc[key] = !allChecked;
+                      return acc;
+                    },
+                    {} as typeof views,
+                  ),
+                );
+              }}
+            >
+              Velg alle
+            </ActionMenu.CheckboxItem>
+            <ActionMenu.CheckboxItem
+              checked={views.started}
+              onCheckedChange={() => handleCheckboxChange("started")}
+            >
+              Oppfølging startet
+            </ActionMenu.CheckboxItem>
+            <ActionMenu.CheckboxItem
+              checked={views.fnr}
+              onCheckedChange={() => handleCheckboxChange("fnr")}
+            >
+              Fødselsnummer
+            </ActionMenu.CheckboxItem>
+            <ActionMenu.CheckboxItem
+              checked={views.tags}
+              onCheckedChange={() => handleCheckboxChange("tags")}
+            >
+              Tags
+            </ActionMenu.CheckboxItem>
+          </ActionMenu.Group>
+          <ActionMenu.Divider />
+          <ActionMenu.RadioGroup
+            onValueChange={setRows}
+            value={rows}
+            label="Rader per side"
           >
-            Oppfølging startet
-          </ActionMenu.CheckboxItem>
-          <ActionMenu.CheckboxItem
-            checked={views.fnr}
-            onCheckedChange={() => handleCheckboxChange("fnr")}
-          >
-            Fødselsnummer
-          </ActionMenu.CheckboxItem>
-          <ActionMenu.CheckboxItem
-            checked={views.tags}
-            onCheckedChange={() => handleCheckboxChange("tags")}
-          >
-            Tags
-          </ActionMenu.CheckboxItem>
-        </ActionMenu.Group>
-        <ActionMenu.Divider />
-        <ActionMenu.RadioGroup
-          onValueChange={setRows}
-          value={rows}
-          label="Rader per side"
-        >
-          <ActionMenu.RadioItem value="5">5</ActionMenu.RadioItem>
-          <ActionMenu.RadioItem value="10">10</ActionMenu.RadioItem>
-          <ActionMenu.RadioItem value="25">25</ActionMenu.RadioItem>
-          <ActionMenu.RadioItem value="50">50</ActionMenu.RadioItem>
-        </ActionMenu.RadioGroup>
-      </ActionMenu.Content>
-    </ActionMenu>
+            <ActionMenu.RadioItem value="5">5</ActionMenu.RadioItem>
+            <ActionMenu.RadioItem value="10">10</ActionMenu.RadioItem>
+            <ActionMenu.RadioItem value="25">25</ActionMenu.RadioItem>
+            <ActionMenu.RadioItem value="50">50</ActionMenu.RadioItem>
+          </ActionMenu.RadioGroup>
+        </ActionMenu.Content>
+      </ActionMenu>
+    </div>
   );
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
+export default withDsExample(Example, { variant: "static" });
 
 /* Storybook story */
 export const Demo = {

diff --git a/aksel.nav.no/website/pages/eksempler/actionmenu/groups.tsx b/aksel.nav.no/website/pages/eksempler/actionmenu/groups.tsx
@@ -11,56 +11,58 @@ import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <ActionMenu defaultOpen>
-      <ActionMenu.Trigger>
-        <Button
-          variant="secondary-neutral"
-          icon={<ChevronDownIcon aria-hidden />}
-          iconPosition="right"
-        >
-          Meny
-        </Button>
-      </ActionMenu.Trigger>
-      <ActionMenu.Content>
-        <ActionMenu.Group label="Gosys">
-          <ActionMenu.Item onSelect={console.info} icon={<PersonIcon />}>
-            Personoversikt
-          </ActionMenu.Item>
-          <ActionMenu.Item onSelect={console.info} icon={<PersonGroupIcon />}>
-            Arbeidsgiveroversikt
-          </ActionMenu.Item>
-          <ActionMenu.Item onSelect={console.info} icon={<HandshakeIcon />}>
-            Samhandlere
-          </ActionMenu.Item>
-          <ActionMenu.Item
-            onSelect={console.info}
-            disabled
-            icon={<BarChartIcon />}
+    <div style={{ minHeight: "28rem" }}>
+      <ActionMenu>
+        <ActionMenu.Trigger>
+          <Button
+            variant="secondary-neutral"
+            icon={<ChevronDownIcon aria-hidden />}
+            iconPosition="right"
           >
-            Oppgavestatistikk
-          </ActionMenu.Item>
-          <ActionMenu.Item
-            onSelect={console.info}
-            icon={<MagnifyingGlassIcon />}
-          >
-            Søk journalpost
-          </ActionMenu.Item>
-        </ActionMenu.Group>
-        <ActionMenu.Divider />
-        <ActionMenu.Group label="Systemer og oppslagsverk">
-          <ActionMenu.Item onSelect={console.info}>A-inntekt</ActionMenu.Item>
-          <ActionMenu.Item onSelect={console.info}>
-            Aa-registeret
-          </ActionMenu.Item>
-          <ActionMenu.Item onSelect={console.info}>Modia</ActionMenu.Item>
-        </ActionMenu.Group>
-      </ActionMenu.Content>
-    </ActionMenu>
+            Meny
+          </Button>
+        </ActionMenu.Trigger>
+        <ActionMenu.Content>
+          <ActionMenu.Group label="Gosys">
+            <ActionMenu.Item onSelect={console.info} icon={<PersonIcon />}>
+              Personoversikt
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={console.info} icon={<PersonGroupIcon />}>
+              Arbeidsgiveroversikt
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={console.info} icon={<HandshakeIcon />}>
+              Samhandlere
+            </ActionMenu.Item>
+            <ActionMenu.Item
+              onSelect={console.info}
+              disabled
+              icon={<BarChartIcon />}
+            >
+              Oppgavestatistikk
+            </ActionMenu.Item>
+            <ActionMenu.Item
+              onSelect={console.info}
+              icon={<MagnifyingGlassIcon />}
+            >
+              Søk journalpost
+            </ActionMenu.Item>
+          </ActionMenu.Group>
+          <ActionMenu.Divider />
+          <ActionMenu.Group label="Systemer og oppslagsverk">
+            <ActionMenu.Item onSelect={console.info}>A-inntekt</ActionMenu.Item>
+            <ActionMenu.Item onSelect={console.info}>
+              Aa-registeret
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={console.info}>Modia</ActionMenu.Item>
+          </ActionMenu.Group>
+        </ActionMenu.Content>
+      </ActionMenu>
+    </div>
   );
 };
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
-export default withDsExample(Example);
+export default withDsExample(Example, { variant: "static" });
 
 /* Storybook story */
 export const Demo = {