✨ Added darkmode support for Helptext

navikt · Nov 15, 2024 · 7147980 · 7147980
1 parent f7db3b7
commit 7147980
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 42 deletions.
diff --git a/@navikt/core/css/darkside/help-text.darkside.css b/@navikt/core/css/darkside/help-text.darkside.css
@@ -3,44 +3,30 @@
   border: 0;
   cursor: pointer;
   background-color: transparent;
-  border-radius: var(--a-border-radius-full);
+  border-radius: var(--ax-border-radius-full);
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--ac-help-text-button-color, var(--a-surface-action));
+  color: var(--ax-bg-accent-strong);
   font-size: 1.25rem;
-  padding: calc(var(--a-spacing-1) / 2);
-}
-
-.navds-help-text__button:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow:
-    0 0 0 1px var(--a-border-focus),
-    inset 0 0 0 1px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-help-text__button:focus {
-    outline: 2px solid transparent;
-    box-shadow:
-      0 0 0 1px var(--a-border-focus),
-      inset 0 0 0 1px var(--a-border-focus);
-  }
+  padding: calc(var(--ax-spacing-1) / 2);
 }
 
 .navds-help-text__icon {
-  border-radius: var(--a-border-radius-full);
-}
-
-.navds-help-text__popover > .navds-popover__arrow {
-  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
+  border-radius: var(--ax-border-radius-full);
 }
 
 .navds-help-text__popover.navds-popover {
-  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
-  max-width: min(65ch, calc(100vw - 1.5rem));
-
-  --ac-popover-border: var(--a-border-info);
+  background-color: var(--ax-bg-info-moderate);
+  max-width: min(65ch, calc(100vw - var(--ax-spacing-6)));
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-info);
+  box-shadow:
+    0 0 1px 0 rgba(7 9 13/ 0.15),
+    0 1px 3px 0 rgba(7 9 13/ 0.1),
+    0 5px 12px 0 rgba(7 9 13/ 0.13),
+    0 0.5px 0 0 rgba(255 255 255/ 0) inset,
+    0 0 1px 0 rgba(255 255 255/ 0) inset;
 }
 
 .navds-help-text__icon--filled {
@@ -53,21 +39,11 @@
 
 .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
-  color: var(--ac-help-text-button-hover-color, var(--a-surface-action-hover));
+  color: var(--ax-bg-accent-strong-hover);
 }
 
 .navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
-  color: var(--ac-help-text-button-active-color, var(--a-surface-action-active));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-help-text__button:where(:focus) > .navds-help-text__icon {
-    display: none;
-  }
-
-  .navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
-    display: inherit;
-  }
+  color: var(--ax-bg-accent-strong-pressed);
 }
 
 @media (forced-colors: active) {

diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
 import { Popover, PopoverProps } from "../popover";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { HelpTextIcon } from "./HelpTextIcon";
@@ -52,6 +53,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
 
     const [open, setOpen] = useState(false);
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     return (
       <div className={cl("navds-help-text", wrapperClassName)}>
         <button
@@ -72,7 +75,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
-          offset={12}
+          offset={themeContext ? 8 : 12}
+          arrow={!themeContext}
         >
           <Popover.Content className="navds-body-short">
             {children}

diff --git a/@navikt/core/react/src/help-text/HelpTextIcon.tsx b/@navikt/core/react/src/help-text/HelpTextIcon.tsx
@@ -38,7 +38,11 @@ export const HelpTextIcon = ({
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.75 9C9.75 7.75736 10.7574 6.75 12 6.75H12.1716C13.3195 6.75 14.25 7.68054 14.25 8.82843C14.25 9.37966 14.031 9.90832 13.6412 10.2981L12.6412 11.2981C11.7504 12.1889 11.25 13.3971 11.25 14.6569C11.25 15.0711 11.5858 15.4069 12 15.4069C12.4142 15.4069 12.75 15.0711 12.75 14.6569C12.75 13.7949 13.0924 12.9682 13.7019 12.3588L14.7019 11.3588C15.373 10.6877 15.75 9.77748 15.75 8.82843C15.75 6.85212 14.1479 5.25 12.1716 5.25H12C9.92893 5.25 8.25 6.92893 8.25 9V9.5C8.25 9.91421 8.58579 10.25 9 10.25C9.41421 10.25 9.75 9.91421 9.75 9.5V9ZM12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5Z"
-        fill={filled ? "var(--a-surface-default)" : "currentColor"}
+        fill={
+          filled
+            ? "var(--ax-text-accent-contrast, var(--a-surface-default))"
+            : "currentColor"
+        }
       />
     </svg>
   );