[Darkside] 💄 New ToggleGroup design (#3460)

* 💄 New ToggleGroup design * 🐛 Removed hover-state from selected togglegroup in forced-colors mode * 💄 Add px-gap to elements * 🐛 Hide divider on both sides when selected
navikt · Dec 19, 2024 · 043277f · 043277f
1 parent a2b3936
commit 043277f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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}