rename css

digdir · May 2, 2024 · d288961 · d288961
1 parent 2fe2c3a
commit d288961
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/packages/css/fieldset.css b/packages/css/fieldset.css
@@ -1,41 +1,41 @@
 @layer fds.fieldset {
-  .fieldset {
+  .fds-fieldset {
     margin: 0;
     padding: 0;
     border: 0;
     min-width: 0;
   }
 
-  .withSpacing {
+  .fds-fieldset--spacing {
     display: flex;
     flex-direction: column;
     gap: var(--fds-spacing-2);
   }
 
-  .description {
+  .fds-fieldset__description {
     color: var(--fds-semantic-text-neutral-subtle);
     font-weight: 400;
   }
 
-  .legend {
+  .fds-fieldset__legend {
     display: contents;
   }
 
-  .readonly .legendContent {
+  .fds-fieldset--readonly .fds-fieldset__legend__content {
     display: inline-flex;
   }
 
-  .readonly .padlock {
+  .fds-fieldset--readonly .fds-fieldset__padlock {
     height: 1.2em;
     width: 1.2em;
   }
 
-  .disabled .legend,
-  .disabled .description {
+  .fds-fieldset--disabled .fds-fieldset__legend,
+  .fds-fieldset--disabled .fds-fieldset__description {
     color: var(--fds-semantic-border-neutral-subtle);
   }
 
-  .errorWrapper {
+  .fds-fieldset__error {
     display: contents;
   }
 }
diff --git a/packages/react/src/components/form/Fieldset/Fieldset.tsx b/packages/react/src/components/form/Fieldset/Fieldset.tsx
@@ -7,7 +7,6 @@ import { Label, Paragraph, ErrorMessage } from '../../Typography';
 import type { FormFieldProps } from '../useFormField';
 
 import { useFieldset } from './useFieldset';
-import classes from './Fieldset.module.css';
 import { FieldsetContext } from './FieldsetContext';
 
 export type FieldsetProps = {
@@ -57,10 +56,10 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
         <fieldset
           {...fieldsetProps}
           className={cl(
-            classes.fieldset,
-            !hideLegend && classes.withSpacing,
-            readOnly && classes.readonly,
-            props?.disabled && classes.disabled,
+            'fds-fieldset',
+            !hideLegend && 'fds-fieldset--spacing',
+            readOnly && 'fds-fieldset--readonly',
+            props?.disabled && 'fds-fieldset--disabled',
             className,
           )}
           ref={ref}
@@ -70,16 +69,16 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             asChild
             size={size}
           >
-            <legend className={classes.legend}>
+            <legend className={'fds-fieldset__legend'}>
               <span
                 className={cl(
-                  classes.legendContent,
+                  'fds-fieldset__legend__content',
                   hideLegend && `fds-sr-only`,
                 )}
               >
                 {readOnly && (
                   <PadlockLockedFillIcon
-                    className={classes.padlock}
+                    className={'fds-fieldset__padlock'}
                     aria-hidden
                   />
                 )}
@@ -95,7 +94,10 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             >
               <div
                 id={descriptionId}
-                className={cl(classes.description, hideLegend && `fds-sr-only`)}
+                className={cl(
+                  'fds-fieldset__description',
+                  hideLegend && `fds-sr-only`,
+                )}
               >
                 {description}
               </div>
@@ -106,7 +108,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             id={errorId}
             aria-live='polite'
             aria-relevant='additions removals'
-            className={classes.errorWrapper}
+            className={'fds-fieldset__error'}
           >
             {hasError && <ErrorMessage size={size}>{error}</ErrorMessage>}
           </div>