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) && } label={hasLabel && "Uleste"} /> + } + label={hasLabel && "Ny"} + /> } 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( type="button" role="radio" aria-checked={itemCtx.isSelected} + data-selected={itemCtx.isSelected} tabIndex={itemCtx.isFocused ? 0 : -1} onClick={itemCtx.onClick} onFocus={itemCtx.onFocus}