Erstattet Radix togglegroup med intern implementasjon

.changeset/grumpy-pugs-buy.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+ToggleGroup: La til ny prop `fill` som strekker ToggleGroup til å ta opp all tilgjengelig bredde.

.changeset/polite-rockets-raise.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+ToggleGroup: Erstattet bruk av dependency `@radix-ui/react-toggle-group` med egen implementasjon.

@navikt/core/css/toggle-group.css

@@ -4,6 +4,10 @@
   gap: var(--a-spacing-2);
 }
 
+.navds-toggle-group__wrapper--fill {
+  justify-items: initial;
+}
+
 .navds-toggle-group {
   border-radius: var(--a-border-radius-medium);
   background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));

@navikt/core/react/package.json

@@ -564,7 +564,6 @@
     "@floating-ui/react": "0.25.4",
     "@navikt/aksel-icons": "^6.4.1",
     "@navikt/ds-tokens": "^6.4.1",
-    "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"

@navikt/core/react/src/toggle-group/ToggleGroup.context.ts

@@ -0,0 +1,31 @@
+import { createContext as ReactCreateContext } from "react";
+import { createContext } from "../util/create-context";
+import { createDescendantContext } from "../util/hooks/descendants/useDescendant";
+import { ToggleGroupProps } from "./ToggleGroup.types";
+import { useToggleGroup } from "./useToggleGroup";
+
+interface ToggleContextProps {
+  size: "medium" | "small";
+}
+
+export const ToggleGroupContext = ReactCreateContext<ToggleContextProps | null>(
+  null,
+);
+
+export const [
+  ToggleGroupDescendantsProvider,
+  useToggleGroupDescendantsContext,
+  useToggleGroupDescendants,
+  useToggleGroupDescendant,
+] = createDescendantContext<HTMLButtonElement, { value: string }>();
+
+type ToggleGroupProviderProps = ReturnType<typeof useToggleGroup> &
+  Pick<ToggleGroupProps, "size">;
+
+/* State context */
+export const [ToggleGroupProvider, useToggleGroupContext] =
+  createContext<ToggleGroupProviderProps>({
+    name: "ToggleGroupContext",
+    hookName: "useToggleGroupContext",
+    providerName: "ToggleGroupProvider",
+  });

@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx

@@ -5,6 +5,7 @@ import {
   EnvelopeOpenIcon,
   InboxUpIcon,
 } from "@navikt/aksel-icons";
+import { VStack } from "../layout/stack";
 import ToggleGroup from "./ToggleGroup";
 
 const meta: Meta<typeof ToggleGroup> = {
@@ -22,7 +23,11 @@ const meta: Meta<typeof ToggleGroup> = {
       control: { type: "radio" },
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
+
 export default meta;
 
 const Items = (icon?: boolean, both?: boolean) => (
@@ -71,6 +76,7 @@ export const Default = (props) => {
     </ToggleGroup>
   );
 };
+
 Default.args = {
   icon: true,
   text: true,
@@ -81,7 +87,7 @@ export const Compositions = () => {
   const [activeValue, setActiveValue] = useState("ulest");
 
   return (
-    <div className="colgap">
+    <VStack gap="6">
       <ToggleGroup value={activeValue} onChange={setActiveValue}>
         {Items()}
       </ToggleGroup>
@@ -91,15 +97,18 @@ export const Compositions = () => {
       <ToggleGroup value={activeValue} onChange={setActiveValue}>
         {Items(true)}
       </ToggleGroup>
-    </div>
+      <ToggleGroup fill value={activeValue} onChange={setActiveValue}>
+        {Items(true)}
+      </ToggleGroup>
+    </VStack>
   );
 };
 
 export const Variants = () => {
   const [activeValue, setActiveValue] = useState("ulest");
 
   return (
-    <div className="colgap">
+    <VStack gap="6">
       <ToggleGroup
         variant="action"
         value={activeValue}
@@ -114,15 +123,15 @@ export const Variants = () => {
       >
         {Items(true, true)}
       </ToggleGroup>
-    </div>
+    </VStack>
   );
 };
 
 export const Small = () => {
   const [activeValue, setActiveValue] = useState("ulest");
 
   return (
-    <div className="colgap">
+    <VStack gap="6">
       <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
         {Items()}
       </ToggleGroup>
@@ -132,6 +141,58 @@ export const Small = () => {
       <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
         {Items(true)}
       </ToggleGroup>
-    </div>
+    </VStack>
   );
 };
+
+export const Chromatic = {
+  render: () => (
+    <VStack gap="6">
+      <div>
+        <h2>Text</h2>
+        <ToggleGroup value="ulest" onChange={console.log}>
+          {Items()}
+        </ToggleGroup>
+      </div>
+      <div>
+        <h2>Icon</h2>
+        <ToggleGroup value="ulest" onChange={console.log}>
+          {Items(true)}
+        </ToggleGroup>
+      </div>
+      <div>
+        <h2>Text + icon</h2>
+        <ToggleGroup value="ulest" onChange={console.log}>
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+      <div style={{ minWidth: 600 }}>
+        <h2>Fill</h2>
+        <ToggleGroup value="ulest" onChange={console.log} fill>
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+      <div>
+        <h2>Small</h2>
+        <ToggleGroup value="ulest" onChange={console.log} size="small">
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+      <div>
+        <h2>Small + fill</h2>
+        <ToggleGroup value="ulest" onChange={console.log} size="small" fill>
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+      <div>
+        <h2>Neutral</h2>
+        <ToggleGroup value="ulest" onChange={console.log} variant="neutral">
+          {Items(true, true)}
+        </ToggleGroup>
+      </div>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

@navikt/core/react/src/toggle-group/ToggleGroup.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test } from "vitest";
 import { ToggleGroup } from "./ToggleGroup";
@@ -20,36 +21,76 @@ const TestToggleGroup = ({ value, onChange, defaultValue }: any) => (
 describe("ToggleGroup", () => {
   test("sets default value correctly", () => {
     render(<TestToggleGroup defaultValue="toggle2" />);
-    const toggle = screen.getByTestId("toggle2");
+    const toggle2 = screen.getByTestId("toggle2");
 
-    expect(toggle).toHaveAttribute("aria-checked", "true");
+    expect(toggle2).toHaveAttribute("aria-checked", "true");
   });
 
   test("sets correct attributes on active toggle", () => {
     render(<TestToggleGroup defaultValue="toggle2" />);
-    const toggle = screen.getByTestId("toggle2");
+    const toggle2 = screen.getByTestId("toggle2");
 
-    expect(toggle).toHaveAttribute("aria-checked", "true");
-    expect(toggle).toHaveAttribute("role", "radio");
-    expect(toggle).toHaveAttribute("type", "button");
-    expect(toggle).toHaveAttribute("tabindex", "-1");
+    expect(toggle2).toHaveAttribute("aria-checked", "true");
+    expect(toggle2).toHaveAttribute("role", "radio");
+    expect(toggle2).toHaveAttribute("type", "button");
+    expect(toggle2).toHaveAttribute("tabindex", "0");
   });
 
   test("sets correct attributes on idle toggle", () => {
     render(<TestToggleGroup defaultValue="toggle1" />);
-    const toggle = screen.getByTestId("toggle2");
+    const toggle2 = screen.getByTestId("toggle2");
 
-    expect(toggle).toHaveAttribute("aria-checked", "false");
-    expect(toggle).toHaveAttribute("role", "radio");
-    expect(toggle).toHaveAttribute("type", "button");
-    expect(toggle).toHaveAttribute("tabindex", "-1");
+    expect(toggle2).toHaveAttribute("aria-checked", "false");
+    expect(toggle2).toHaveAttribute("role", "radio");
+    expect(toggle2).toHaveAttribute("type", "button");
+    expect(toggle2).toHaveAttribute("tabindex", "-1");
   });
 
   test("sets tabindex to 0 when focused", () => {
     render(<TestToggleGroup defaultValue="toggle2" />);
-    const toggle = screen.getByTestId("toggle2");
+    const toggle2 = screen.getByTestId("toggle2");
 
-    fireEvent.focus(toggle);
-    expect(toggle).toHaveAttribute("tabindex", "0");
+    fireEvent.focus(toggle2);
+    expect(toggle2).toHaveAttribute("tabindex", "0");
+  });
+
+  test("roving tabindex keydown moves focus", () => {
+    render(<TestToggleGroup defaultValue="toggle1" />);
+    const toggle1 = screen.getByTestId("toggle1");
+
+    expect(toggle1).toHaveAttribute("tabindex", "0");
+    fireEvent.keyDown(toggle1, { key: "ArrowRight" });
+
+    expect(toggle1).toHaveAttribute("tabindex", "-1");
+    expect(screen.getByTestId("toggle2")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByTestId("toggle2")).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+  });
+
+  test("Space selects focused toggle-item", async () => {
+    render(<TestToggleGroup defaultValue="toggle1" />);
+    const toggle1 = screen.getByTestId("toggle1");
+
+    expect(toggle1).toHaveAttribute("tabindex", "0");
+    fireEvent.keyDown(toggle1, { key: "ArrowRight" });
+
+    expect(toggle1).toHaveAttribute("tabindex", "-1");
+    expect(screen.getByTestId("toggle2")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByTestId("toggle2")).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      await userEvent.keyboard(" ");
+    });
+
+    expect(screen.getByTestId("toggle2")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
   });
 });