fix(Fieldset): css alignments (#2447)

Part of #2295

Author: eirikbacker

.changeset/three-ducks-chew.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Fieldset: Style using css attributes

packages/css/fieldset.css

@@ -1,43 +1,44 @@
 .ds-fieldset {
+  --dsc-fieldset-icon-size: 1.2em;
+  --dsc-fieldset-gap: var(--ds-spacing-2);
+
   margin: 0;
   padding: 0;
   border: 0;
   min-width: 0;
-}
-
-.ds-fieldset--spacing {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-fieldset__description {
-  color: var(--ds-color-neutral-text-subtle);
-  margin-bottom: var(--ds-spacing-2);
-}
-
-.ds-fieldset__legend {
-  display: contents;
-}
-
-.ds-fieldset--readonly .ds-fieldset__legend__content {
-  display: inline-flex;
-}
-
-.ds-fieldset:not(:has(.ds-fieldset__description)) .ds-fieldset__legend__content {
-  margin-bottom: var(--ds-spacing-2);
-}
-
-.ds-fieldset--readonly .ds-fieldset__readonly__icon {
-  height: 1.2em;
-  width: 1.2em;
-}
-
-.ds-fieldset:disabled .ds-fieldset__legend,
-.ds-fieldset:disabled .ds-fieldset__description {
-  color: var(--ds-color-neutral-border-subtle);
-}
 
-.ds-fieldset__error-message {
-  display: contents;
+  & > :not(:last-child) {
+    margin-bottom: var(--ds-spacing-2); /* Use margin as fieldset does not play nice with display: flex */
+  }
+
+  & > legend {
+    display: inline-flex;
+  }
+
+  & > legend:empty {
+    display: none;
+  }
+
+  &[data-hidelegend] > legend,
+  &[data-hidelegend] > legend + p {
+    @composes ds-sr-only from '../css/utilities.css';
+  }
+
+  &[data-readonly] > legend::before {
+    content: '';
+    background: currentcolor;
+    height: var(--dsc-fieldset-icon-size);
+    mask: center/contain no-repeat
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25A4.75 4.75 0 0 0 7.25 7v2.25H7A1.75 1.75 0 0 0 5.25 11v9c0 .41.34.75.75.75h12a.75.75 0 0 0 .75-.75v-9A1.75 1.75 0 0 0 17 9.25h-.25V7A4.75 4.75 0 0 0 12 2.25m3.25 7V7a3.25 3.25 0 0 0-6.5 0v2.25zM12 13a1.5 1.5 0 0 0-.75 2.8V17a.75.75 0 0 0 1.5 0v-1.2A1.5 1.5 0 0 0 12 13'/%3E%3C/svg%3E");
+    width: var(--dsc-fieldset-icon-size);
+  }
+
+  & > legend + p {
+    color: var(--ds-color-neutral-text-subtle);
+  }
+
+  &:disabled > legend,
+  &:disabled > legend + p {
+    color: var(--ds-color-neutral-border-subtle);
+  }
 }

packages/react/src/components/form/Fieldset/Fieldset.tsx

@@ -1,13 +1,11 @@
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 import type { FieldsetHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useContext } from 'react';
 
 import { ErrorMessage, Label, Paragraph } from '../../Typography';
-import type { FormFieldProps } from '../useFormField';
+import { type FormFieldProps, useFormField } from '../useFormField';
 
 import { FieldsetContext } from './FieldsetContext';
-import { useFieldset } from './useFieldset';
 
 export type FieldsetProps = {
   /** A description of the fieldset. This will appear below the legend. */
@@ -27,7 +25,7 @@ export type FieldsetProps = {
   FieldsetHTMLAttributes<HTMLFieldSetElement>;
 
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
-  (props, ref) => {
+  function Fieldset(props, ref) {
     const {
       children,
       legend,
@@ -38,71 +36,43 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       ...rest
     } = props;
 
-    const { fieldsetProps, size, readOnly, errorId, hasError, descriptionId } =
-      useFieldset(props);
-
     const fieldset = useContext(FieldsetContext);
+    const { inputProps, size, readOnly, errorId, hasError, descriptionId } =
+      useFormField(props, 'fieldset');
 
     return (
       <FieldsetContext.Provider
         value={{
+          disabled: props?.disabled,
           error: error ?? fieldset?.error,
           errorId: hasError ? errorId : undefined,
-          size,
-          disabled: props?.disabled,
           readOnly,
+          size,
         }}
       >
         <fieldset
-          {...fieldsetProps}
-          className={cl(
-            'ds-fieldset',
-            !hideLegend && 'ds-fieldset--spacing',
-            readOnly && 'ds-fieldset--readonly',
-            className,
-          )}
+          aria-describedby={inputProps['aria-describedby']}
+          aria-invalid={inputProps['aria-invalid']}
+          className={cl('ds-fieldset', className)}
+          data-hidelegend={hideLegend || undefined}
+          data-readonly={readOnly || undefined}
           disabled={props?.disabled}
           ref={ref}
           {...rest}
         >
           <Label asChild size={size}>
-            <legend className={'ds-fieldset__legend'}>
-              <span
-                className={cl(
-                  'ds-fieldset__legend__content',
-                  hideLegend && `ds-sr-only`,
-                )}
-              >
-                {readOnly && (
-                  <PadlockLockedFillIcon
-                    className={'ds-fieldset__readonly__icon'}
-                    aria-hidden
-                  />
-                )}
-                {legend}
-              </span>
-            </legend>
+            <legend>{legend}</legend>
           </Label>
-          {description && (
-            <Paragraph size={size} variant='short' asChild>
-              <div
-                id={descriptionId}
-                className={cl(
-                  'ds-fieldset__description',
-                  'ds-font-weight--regular',
-                  hideLegend && `ds-sr-only`,
-                )}
-              >
-                {description}
-              </div>
+          {!!description && (
+            <Paragraph id={descriptionId} size={size} variant='short'>
+              {description}
             </Paragraph>
           )}
           {children}
           <div
-            id={errorId}
             aria-live='polite'
             aria-relevant='additions removals'
-            className={'ds-fieldset__error-message'}
+            id={errorId}
           >
             {hasError && <ErrorMessage size={size}>{error}</ErrorMessage>}
           </div>
@@ -111,5 +81,3 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
     );
   },
 );
-
-Fieldset.displayName = 'Fieldset';