Merge a0e86e2 into ec205fb

navikt · Oct 17, 2023 · 4d8ea74 · 4d8ea74
2 parents ec205fb + a0e86e2
commit 4d8ea74
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/.changeset/wild-rice-arrive.md b/.changeset/wild-rice-arrive.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+HelpText: Knapp er visuelt mindre. Klikkflate er fortsatt 24px
diff --git a/@navikt/core/css/help-text.css b/@navikt/core/css/help-text.css
@@ -1,6 +1,5 @@
 .navds-help-text__button {
   margin: 0;
-  padding: 0;
   border: 0;
   cursor: pointer;
   background-color: transparent;
@@ -9,17 +8,19 @@
   justify-content: center;
   align-items: center;
   color: var(--ac-help-text-button-color, var(--a-surface-action));
-  font-size: 1.5rem;
+  font-size: 1.25rem;
+  padding: calc(var(--a-spacing-1) / 2);
 }
 
 .navds-help-text__button:focus-visible {
-  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  outline: none;
+  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: none;
-    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+    box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
   }
 }
 

diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx
@@ -90,6 +90,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
+          offset={12}
         >
           <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
@@ -30,7 +30,7 @@ export const HelpTextIcon = ({
         cx="12"
         cy="12"
         r="11"
-        strokeWidth="2"
+        strokeWidth="1.5"
         stroke="currentColor"
         fill={filled ? "currentColor" : "transparent"}
       />