From 043277f79bfa05bb7413168c4c1ff10b334ce719 Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:16:03 +0100
Subject: [PATCH] [Darkside] :lipstick: New ToggleGroup design (#3460)

* :lipstick: New ToggleGroup design

* :bug: Removed hover-state from selected togglegroup in forced-colors mode

* :lipstick: Add px-gap to elements

* :bug: Hide divider on both sides when selected
---
 .../css/darkside/toggle-group.darkside.css    | 28 +++++++++++++------
 .../src/toggle-group/ToggleGroup.stories.tsx  |  6 ++++
 .../src/toggle-group/parts/ToggleItem.tsx     |  1 +
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/@navikt/core/css/darkside/toggle-group.darkside.css b/@navikt/core/css/darkside/toggle-group.darkside.css
index 5fbf427d2a..804881c02b 100644
--- a/@navikt/core/css/darkside/toggle-group.darkside.css
+++ b/@navikt/core/css/darkside/toggle-group.darkside.css
@@ -13,11 +13,10 @@
   border-radius: var(--ax-border-radius-medium);
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--ax-border-default);
-  padding: var(--ax-spacing-1);
-  gap: var(--ax-spacing-1);
   display: inline-grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
+  gap: 1px;
 }
 
 /* Button */
@@ -26,13 +25,14 @@
   align-items: center;
   justify-content: center;
   padding: var(--ax-spacing-1) var(--ax-spacing-3);
-  min-height: 2.5rem;
+  min-height: 3rem;
   border: none;
   cursor: pointer;
   background-color: transparent;
   color: var(--ax-text-default);
-  border-radius: var(--ax-border-radius-small);
+  border-radius: var(--ax-border-radius-medium);
   min-width: fit-content;
+  position: relative;
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
@@ -42,12 +42,23 @@
   &:focus-visible {
     outline: 2px solid var(--ax-border-focus);
     outline-offset: 2px;
+    z-index: 1;
   }
 
-  &[aria-checked="true"] {
+  &[data-selected="true"] {
     background-color: var(--ax-bg-accent-strong-pressed);
     color: var(--ax-text-accent-contrast);
   }
+
+  &:not([data-selected="true"], :first-child, &[data-selected="true"] + &)::before {
+    content: "";
+    display: block;
+    width: 1px;
+    height: 50%;
+    background-color: var(--ax-border-subtleA);
+    left: -1px;
+    position: absolute;
+  }
 }
 
 .navds-toggle-group__button-inner {
@@ -70,7 +81,7 @@
     background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
-  &[aria-checked="true"] {
+  &[data-selected="true"] {
     background-color: var(--ax-bg-neutral-strong-pressed);
     color: var(--ax-text-neutral-contrast);
   }
@@ -80,7 +91,7 @@
 .navds-toggle-group--small {
   & .navds-toggle-group__button {
     padding: var(--ax-spacing-05) var(--ax-spacing-3);
-    min-height: 1.5rem;
+    min-height: 2rem;
   }
 
   & .navds-toggle-group__button-inner > svg {
@@ -94,14 +105,13 @@
     border: 2px solid transparent;
   }
 
-  .navds-toggle-group__button[aria-checked="true"]:hover,
   .navds-toggle-group__button:hover {
     background-color: highlighttext;
     color: highlight;
     outline: 1px solid highlight;
   }
 
-  .navds-toggle-group__button[aria-checked="true"] {
+  .navds-toggle-group__button[data-selected="true"] {
     background-color: selecteditem;
     color: selecteditemtext;
     forced-color-adjust: none;
diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
index 45389279b1..5011530751 100644
--- a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
+++ b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
@@ -4,6 +4,7 @@ import {
   EnvelopeClosedIcon,
   EnvelopeOpenIcon,
   InboxUpIcon,
+  SparklesIcon,
 } from "@navikt/aksel-icons";
 import { VStack } from "../layout/stack";
 import ToggleGroup from "./ToggleGroup";
@@ -44,6 +45,11 @@ const Items = (icon?: boolean, both?: boolean) => {
         icon={(both ?? icon) && <EnvelopeClosedIcon {...iconProps} />}
         label={hasLabel && "Uleste"}
       />
+      <ToggleGroup.Item
+        value="ny"
+        icon={(both ?? icon) && <SparklesIcon {...iconProps} />}
+        label={hasLabel && "Ny"}
+      />
       <ToggleGroup.Item
         value="lest"
         icon={(both ?? icon) && <EnvelopeOpenIcon {...iconProps} />}
diff --git a/@navikt/core/react/src/toggle-group/parts/ToggleItem.tsx b/@navikt/core/react/src/toggle-group/parts/ToggleItem.tsx
index 43b8d2998a..514c30ff2a 100644
--- a/@navikt/core/react/src/toggle-group/parts/ToggleItem.tsx
+++ b/@navikt/core/react/src/toggle-group/parts/ToggleItem.tsx
@@ -76,6 +76,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
         type="button"
         role="radio"
         aria-checked={itemCtx.isSelected}
+        data-selected={itemCtx.isSelected}
         tabIndex={itemCtx.isFocused ? 0 : -1}
         onClick={itemCtx.onClick}
         onFocus={itemCtx.onFocus}