fix(HelpText): css alignments (#2438)

Part of #2295 --------- Co-authored-by: Tobias Barsnes <[email protected]>
digdir · Sep 20, 2024 · 0e4faee · 0e4faee
1 parent 69e7988
commit 0e4faee
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 223 deletions.
diff --git a/.changeset/tame-rats-mix.md b/.changeset/tame-rats-mix.md
@@ -0,0 +1,9 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+HelpText: 
+- Use Popover API
+- Remove `portal` prop
+- Render icon with pseudo element and require aria-label
diff --git a/packages/css/button.css b/packages/css/button.css
@@ -142,8 +142,8 @@
     */
 
   @media (hover: hover) and (pointer: fine) {
-    /* Only use hover for non-touch devices to prevent sticky-hovering */
-    &:not(:disabled, [aria-disabled='true'], [aria-busy='true']):hover {
+    /* Only use hover for non-touch devices to prevent sticky-hovering, using :where to prevent adding specificity */
+    &:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):hover {
       background: var(--dsc-button-background--hover);
     }
   }
@@ -157,7 +157,8 @@
     opacity: var(--ds-disabled-opacity);
   }
 
-  &:not(:disabled, [aria-disabled='true'], [aria-busy='true']):active {
+  /* Using :where to prevent adding specificity */
+  &:where(:not(:disabled, [aria-disabled='true'], [aria-busy='true'])):active {
     background-color: var(--dsc-button-background--active);
   }
 }
diff --git a/packages/css/helptext.css b/packages/css/helptext.css
@@ -1,60 +1,48 @@
-.ds-helptext__button {
-  --dsc-helptext-color: var(--ds-color-neutral-text-default);
-  --dsc-helptext-icon-color: var(--ds-color-accent-base-default);
-  --dsc-helptext-icon-width: var(--ds-sizing-7);
-  --dsc-helptext-icon-height: var(--ds-sizing-7);
+.ds-helptext {
+  --dsc-helptext-icon-size: 65%;
+  --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  --dsc-helptext-size: var(--ds-sizing-7);
 
-  background-color: transparent;
-  border-radius: 50px;
-  padding: 0 !important;
-  cursor: pointer;
-  display: flex;
-  border: none;
-  min-width: 0;
-  min-height: 0;
-}
+  @composes ds-focus from '../css/utilities.css';
 
-@media print {
-  .ds-helptext__button {
-    display: none;
+  border-radius: var(--ds-border-radius-full);
+  border: 2px solid;
+  height: var(--dsc-helptext-size);
+  min-height: 0;
+  min-width: 0;
+  padding: 0;
+  position: relative;
+  width: var(--dsc-helptext-size);
+
+  &::before {
+    content: '';
+    border-radius: inherit;
+    background: currentcolor;
+    mask-composite: exclude;
+    mask-image: var(--dsc-helptext-icon-url);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size:
+      var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),
+      cover;
+    scale: 1.1; /* Hide tiny half pixel rendeing bug */
+    width: 100%;
+    height: 100%;
   }
-}
-
-.ds-helptext__icon--filled {
-  display: none;
-}
 
-.ds-helptext__icon {
-  color: var(--dsc-helptext-icon-color);
-  width: var(--dsc-helptext-icon-width);
-  height: var(--dsc-helptext-icon-height);
-}
-
-.ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon {
-  display: none;
-}
-
-.ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon--filled {
-  display: inline-block;
-}
-
-.ds-helptext__content {
-  color: var(--dsc-helptext-color);
-  width: fit-content;
-  max-width: 700px;
-}
+  &:has(+ :popover-open)::before {
+    mask-image: var(--dsc-helptext-icon-url), linear-gradient(currentcolor, currentcolor); /* Cut icon out of currentcolor surface */
+  }
 
-.ds-helptext--sm .ds-helptext__icon {
-  --dsc-helptext-icon-width: var(--ds-sizing-6);
-  --dsc-helptext-icon-height: var(--ds-sizing-6);
-}
+  &[data-size='sm'] {
+    --dsc-helptext-size: var(--ds-sizing-6);
+  }
 
-.ds-helptext--md .ds-helptext__icon {
-  --dsc-helptext-icon-width: var(--ds-sizing-7);
-  --dsc-helptext-icon-height: var(--ds-sizing-7);
-}
+  &[data-size='lg'] {
+    --dsc-helptext-size: var(--ds-sizing-8);
+  }
 
-.ds-helptext--lg .ds-helptext__icon {
-  --dsc-helptext-icon-width: var(--ds-sizing-8);
-  --dsc-helptext-icon-height: var(--ds-sizing-8);
+  @media print {
+    display: none;
+  }
 }
diff --git a/packages/react/src/components/HelpText/HelpText.mdx b/packages/react/src/components/HelpText/HelpText.mdx
@@ -8,9 +8,3 @@ import * as HelpTextStories from './HelpText.stories.tsx';
 
 <Primary />
 <Controls />
-
-## Portal
-
-Aktiver `portal` dersom innholdet blir klippet av andre elementer for at `Popover` skal vises øverst.
-
-<Canvas of={HelpTextStories.Portal} />
diff --git a/packages/react/src/components/HelpText/HelpText.stories.tsx b/packages/react/src/components/HelpText/HelpText.stories.tsx
@@ -19,18 +19,9 @@ export default {
 
 export const Preview: Story = {
   args: {
-    title: 'Help text title',
+    'aria-label': 'Help text title',
     children: 'Help text content',
     size: 'md',
   },
   decorators,
 };
-
-export const Portal: Story = {
-  args: {
-    title: 'Help text title',
-    children: 'Help text content',
-    size: 'md',
-    placement: 'top',
-  },
-};
diff --git a/packages/react/src/components/HelpText/HelpText.test.tsx b/packages/react/src/components/HelpText/HelpText.test.tsx
@@ -10,7 +10,7 @@ const render = (props: Partial<HelpTextProps> = {}) => {
     ...props,
   };
   renderRtl(
-    <HelpText title={'Helptext for test'} {...allProps}>
+    <HelpText aria-label={'Helptext for test'} {...allProps}>
       Help
     </HelpText>,
   );

diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
@@ -1,18 +1,15 @@
 import type { Placement } from '@floating-ui/utils';
 import cl from 'clsx/lite';
-import { forwardRef, useId, useState } from 'react';
+import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
 
 import { Popover, type PopoverProps } from '../Popover';
-import { Paragraph } from '../Typography/Paragraph';
-
-import { HelpTextIcon } from './HelpTextIcon';
 
 export type HelpTextProps = {
   /**
-   * Title for screen readers.
+   * Required descriptive label for screen readers.
    **/
-  title: string;
+  'aria-label': string;
   /**
    * Size of the helptext
    * @default md
@@ -23,68 +20,26 @@ export type HelpTextProps = {
    * @default 'right'
    */
   placement?: Placement;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
 
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   function HelpText(
-    {
-      title,
-      placement = 'right',
-      size = 'md',
-      className,
-      children,
-      ...rest
-    }: HelpTextProps,
+    { placement = 'right', size = 'md', className, children, ...rest },
     ref,
   ) {
-    const [open, setOpen] = useState(false);
-    const randomId = useId();
-
     return (
-      <>
-        <button
-          className={cl(
-            `ds-helptext--${size}`,
-            'ds-helptext__button',
-            `ds-focus`,
-            className,
-          )}
-          onClick={() => setOpen(!open)}
-          // @ts-ignore
-          popovertarget={randomId}
+      <Popover.Context>
+        <Popover.Trigger
+          className={cl('ds-helptext', className)}
           ref={ref}
+          size={size}
+          variant='tertiary'
           {...rest}
-        >
-          <HelpTextIcon
-            filled
-            className={cl(
-              `ds-helptext__icon`,
-              `ds-helptext__icon--filled`,
-              className,
-            )}
-            openState={open}
-          />
-          <HelpTextIcon
-            className={cl(`ds-helptext__icon`, className)}
-            openState={open}
-          />
-          <span className={`ds-sr-only`}>{title}</span>
-        </button>
-        {/* TODO: Why is popover wrapped in paragraph here? */}
-        <Paragraph size='md' asChild>
-          <Popover
-            id={randomId}
-            className='ds-helptext__content'
-            onClose={() => setOpen(false)}
-            open={open}
-            placement={placement}
-            size={size}
-            variant='info'
-          >
-            {children}
-          </Popover>
-        </Paragraph>
-      </>
+        />
+        <Popover placement={placement} size={size} variant='info'>
+          {children}
+        </Popover>
+      </Popover.Context>
     );
   },
 );
diff --git a/packages/react/src/components/HelpText/HelpTextIcon.test.tsx b/packages/react/src/components/HelpText/HelpTextIcon.test.tsx
diff --git a/packages/react/src/components/HelpText/HelpTextIcon.tsx b/packages/react/src/components/HelpText/HelpTextIcon.tsx