refactor(ErrorMessage): ♻️ Move styling to error-message.css (#1919)

digdir · Apr 30, 2024 · 7f13236 · 7f13236
1 parent 23df24d
commit 7f13236
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 60 deletions.
diff --git a/...aphy/ErrorMessage/ErrorMessage.module.css → packages/css/error-message.css b/...aphy/ErrorMessage/ErrorMessage.module.css → packages/css/error-message.css
@@ -1,40 +1,40 @@
-@layer fds.errormessage {
-  .errorMessage {
+@layer fds.typography.error-message {
+  .fds-error-message {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     margin: 0;
   }
 
-  .errorMessage.error {
+  .fds-error-message--error {
     color: var(--fds-semantic-text-danger-default);
   }
 
-  .errorMessage.spacing {
+  .fds-error-message--spacing {
     margin-bottom: var(--fdsc-bottom-spacing);
   }
 
-  .errorMessage.large {
+  .fds-error-message--large {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-error_message-large);
     font-family: inherit;
   }
 
-  .errorMessage.medium {
+  .fds-error-message--medium {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-error_message-medium);
     font-family: inherit;
   }
 
-  .errorMessage.small {
+  .fds-error-message--small {
     --fdsc-bottom-spacing: var(--fds-spacing-4);
 
     font: var(--fds-typography-error_message-small);
     font-family: inherit;
   }
 
-  .errorMessage.xsmall {
+  .fds-error-message--xsmall {
     --fdsc-bottom-spacing: var(--fds-spacing-3);
 
     font: var(--fds-typography-error_message-xsmall);

diff --git a/packages/css/index.css b/packages/css/index.css
@@ -13,6 +13,7 @@
 @import url('./accordion.css');
 @import url('./switch.css');
 @import url('./checkbox.css');
+@import url('./error-message.css');
 @import url('./label.css');
 @import url('./heading.css');
 @import url('./paragraph.css');

diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
@@ -1,47 +1,3 @@
-@layer fds.errormessage {
-  .fds-errormessage-errorMessage-6fddd5b1 {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
-
-    margin: 0;
-  }
-
-  .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-error-6fddd5b1 {
-    color: var(--fds-semantic-text-danger-default);
-  }
-
-  .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-spacing-6fddd5b1 {
-    margin-bottom: var(--fdsc-bottom-spacing);
-  }
-
-  .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-large-6fddd5b1 {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
-
-    font: var(--fds-typography-error_message-large);
-    font-family: inherit;
-  }
-
-  .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-medium-6fddd5b1 {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
-
-    font: var(--fds-typography-error_message-medium);
-    font-family: inherit;
-  }
-
-  .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-small-6fddd5b1 {
-    --fdsc-bottom-spacing: var(--fds-spacing-4);
-
-    font: var(--fds-typography-error_message-small);
-    font-family: inherit;
-  }
-
-  .fds-errormessage-errorMessage-6fddd5b1.fds-errormessage-xsmall-6fddd5b1 {
-    --fdsc-bottom-spacing: var(--fds-spacing-3);
-
-    font: var(--fds-typography-error_message-xsmall);
-    font-family: inherit;
-  }
-}
-
 @layer fds.popover {
   .fds-popover-popover-16833383 {
     --border: 1px solid;

diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
@@ -3,8 +3,6 @@ import { forwardRef } from 'react';
 import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 
-import classes from './ErrorMessage.module.css';
-
 export type ErrorMessageProps = {
   /** Changes text sizing */
   size?: 'xsmall' | 'small' | 'medium' | 'large';
@@ -31,12 +29,10 @@ export const ErrorMessage = forwardRef<HTMLParagraphElement, ErrorMessageProps>(
       <Component
         ref={ref}
         className={cl(
-          classes.errorMessage,
-          classes[size],
-          {
-            [classes.spacing]: !!spacing,
-          },
-          error && classes.error,
+          'fds-error-message',
+          `fds-error-message--${size}`,
+          spacing && 'fds-error-message--spacing',
+          error && 'fds-error-message--error',
           className,
         )}
         {...rest}