feat: rename ErrorMessage to ValidationMessage (#2473)

part of #2444 This does not include the `invalid` prop mentioned, and does not rename CSS vars, as this will be done in separate PRs
digdir · Sep 20, 2024 · f794c60 · f794c60
1 parent 0e4faee
commit f794c60
Show file tree

Hide file tree

Showing 17 changed files with 94 additions and 79 deletions.
diff --git a/.changeset/happy-worms-applaud.md b/.changeset/happy-worms-applaud.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Rename classes from `ds-error-message*` to `ds-validation-message*`
diff --git a/.changeset/plenty-parents-rest.md b/.changeset/plenty-parents-rest.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Rename `ErrorMessage` to `ValidationMessage`
diff --git a/apps/storefront/app/grunnleggende/designelementer/typografi/page.mdx b/apps/storefront/app/grunnleggende/designelementer/typografi/page.mdx
@@ -77,7 +77,7 @@ Vi har totalt 10 størrelser i designsystemet. 12, 14, 16, 18, 21, 24, 30, 36, 4
 | f6     | 48px / 3.00rem     |             |         | xlarge  |
 | f7     | 60px / 3.75rem     |             |         | xxlarge |
 
-\*`Paragraph`-størrelsene brukes også på `Label` og `ErrorMessage`.
+\*`Paragraph`-størrelsene brukes også på `Label` og `ValidationMessage`.
 
 ### Hva med dynamiske tekststørrelser?
 

diff --git a/packages/css/baseline/typography.css b/packages/css/baseline/typography.css
@@ -352,21 +352,21 @@
 
 /** Error message */
 
-.ds-error-message {
+.ds-validation-message {
   --dsc-bottom-spacing: var(--ds-spacing-5);
 
   margin: 0;
 }
 
-.ds-error-message--error {
+.ds-validation-message--error {
   color: var(--ds-color-danger-text-subtle);
 }
 
-.ds-error-message--spacing {
+.ds-validation-message--spacing {
   margin-bottom: var(--dsc-bottom-spacing);
 }
 
-.ds-error-message--xs {
+.ds-validation-message--xs {
   --dsc-bottom-spacing: var(--ds-spacing-3);
 
   font-weight: var(--ds-error_message-xs-font-weight);
@@ -375,7 +375,7 @@
   letter-spacing: var(--ds-error_message-xs-letter-spacing);
 }
 
-.ds-error-message--sm {
+.ds-validation-message--sm {
   --dsc-bottom-spacing: var(--ds-spacing-4);
 
   font-weight: var(--ds-error_message-sm-font-weight);
@@ -384,7 +384,7 @@
   letter-spacing: var(--ds-error_message-sm-letter-spacing);
 }
 
-.ds-error-message--md {
+.ds-validation-message--md {
   --dsc-bottom-spacing: var(--ds-spacing-5);
 
   font-weight: var(--ds-error_message-md-font-weight);
@@ -393,7 +393,7 @@
   letter-spacing: var(--ds-error_message-md-letter-spacing);
 }
 
-.ds-error-message--lg {
+.ds-validation-message--lg {
   --dsc-bottom-spacing: var(--ds-spacing-5);
 
   font-weight: var(--ds-error_message-lg-font-weight);

diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
diff --git a/packages/react/src/components/Typography/ErrorMessage/index.ts b/packages/react/src/components/Typography/ErrorMessage/index.ts
diff --git a/packages/react/src/components/Typography/Typography.mdx b/packages/react/src/components/Typography/Typography.mdx
@@ -5,7 +5,7 @@ import * as HeadingStories from './Heading/Heading.stories';
 import * as ParagraphStories from './Paragraph/Paragraph.stories';
 import * as LabelStories from './Label//Label.stories';
 import * as IngressStories from './Ingress/Ingress.stories';
-import * as ErrorMessageStories from './ErrorMessage/ErrorMessage.stories';
+import * as ValidationMessageStories from './ValidationMessage/ValidationMessage.stories';
 
 <Meta of={typographyStories} />
 
@@ -69,10 +69,10 @@ Brukes når det trengs tekst over flere linjer. Mesteparten av teksten på et ne
 <Canvas of={LabelStories.Preview} />
 <Controls of={LabelStories.Preview} />
 
-## ErrorMessage
+## ValidationMessage
 
-<Canvas of={ErrorMessageStories.Preview} />
-<Controls of={ErrorMessageStories.Preview} />
+<Canvas of={ValidationMessageStories.Preview} />
+<Controls of={ValidationMessageStories.Preview} />
 
 ## Eksempel
 

diff --git a/...phy/ErrorMessage/ErrorMessage.stories.tsx → ...tionMessage/ValidationMessage.stories.tsx b/...phy/ErrorMessage/ErrorMessage.stories.tsx → ...tionMessage/ValidationMessage.stories.tsx
@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ErrorMessage } from './';
+import { ValidationMessage } from '.';
 
-const meta: Meta<typeof ErrorMessage> = {
-  title: 'Komponenter/Typography/ErrorMessage',
-  component: ErrorMessage,
+const meta: Meta<typeof ValidationMessage> = {
+  title: 'Komponenter/Typography/ValidationMessage',
+  component: ValidationMessage,
 };
 
 export default meta;
 
-type Story = StoryObj<typeof ErrorMessage>;
+type Story = StoryObj<typeof ValidationMessage>;
 
 export const Preview: Story = {
   args: {

diff --git a/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.tsx
@@ -0,0 +1,46 @@
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export type ValidationMessageProps = {
+  /**
+   * Changes text sizing
+   * @default md
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** Adds margin-bottom */
+  spacing?: boolean;
+  /** Toggle error color */
+  error?: boolean;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLParagraphElement>;
+
+/** Use `ValidationMessage` to display validation text */
+export const ValidationMessage = forwardRef<
+  HTMLParagraphElement,
+  ValidationMessageProps
+>(function ValidationMessage(
+  { size = 'md', className, spacing, asChild, error = true, ...rest },
+  ref,
+) {
+  const Component = asChild ? Slot : 'div';
+
+  return (
+    <Component
+      ref={ref}
+      className={cl(
+        'ds-validation-message',
+        `ds-error_message--${size}`,
+        spacing && 'ds-validation-message--spacing',
+        error && 'ds-validation-message--error',
+        className,
+      )}
+      {...rest}
+    />
+  );
+});
diff --git a/packages/react/src/components/Typography/ValidationMessage/index.ts b/packages/react/src/components/Typography/ValidationMessage/index.ts
@@ -0,0 +1 @@
+export * from './ValidationMessage';
diff --git a/packages/react/src/components/Typography/index.ts b/packages/react/src/components/Typography/index.ts
@@ -2,4 +2,4 @@ export * from './Paragraph';
 export * from './Heading';
 export * from './Ingress';
 export * from './Label';
-export * from './ErrorMessage';
+export * from './ValidationMessage';
diff --git a/packages/react/src/components/form/CharacterCounter.tsx b/packages/react/src/components/form/CharacterCounter.tsx
@@ -1,4 +1,4 @@
-import { ErrorMessage } from '../Typography';
+import { ValidationMessage } from '../Typography';
 
 import type { TextfieldProps } from './Textfield';
 
@@ -45,11 +45,11 @@ export const CharacterCounter = ({
       <span className={`ds-sr-only`} id={id}>
         {srLabel}
       </span>
-      <ErrorMessage asChild size={size} error={hasExceededLimit}>
+      <ValidationMessage asChild size={size} error={hasExceededLimit}>
         <span aria-live={hasExceededLimit ? 'polite' : 'off'}>
           {label(currentCount)}
         </span>
-      </ErrorMessage>
+      </ValidationMessage>
     </>
   );
 };

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxError.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxError.tsx
@@ -1,4 +1,4 @@
-import { ErrorMessage } from '../../../Typography';
+import { ValidationMessage } from '../../../Typography';
 import type { useFormField } from '../../useFormField';
 import type { ComboboxProps } from '../Combobox';
 
@@ -16,7 +16,7 @@ const ComboboxError = ({ size, error, formFieldProps }: ComboboxErrorProps) => {
       aria-live='polite'
       aria-relevant='additions removals'
     >
-      {error && <ErrorMessage size={size}>{error}</ErrorMessage>}
+      {error && <ValidationMessage size={size}>{error}</ValidationMessage>}
     </div>
   );
 };

diff --git a/packages/react/src/components/form/Fieldset/Fieldset.tsx b/packages/react/src/components/form/Fieldset/Fieldset.tsx
@@ -2,7 +2,7 @@ import cl from 'clsx/lite';
 import type { FieldsetHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useContext } from 'react';
 
-import { ErrorMessage, Label, Paragraph } from '../../Typography';
+import { Label, Paragraph, ValidationMessage } from '../../Typography';
 import { type FormFieldProps, useFormField } from '../useFormField';
 
 import { FieldsetContext } from './FieldsetContext';
@@ -74,7 +74,9 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             aria-relevant='additions removals'
             id={errorId}
           >
-            {hasError && <ErrorMessage size={size}>{error}</ErrorMessage>}
+            {hasError && (
+              <ValidationMessage size={size}>{error}</ValidationMessage>
+            )}
           </div>
         </fieldset>
       </FieldsetContext.Provider>

diff --git a/packages/react/src/components/form/Select/Select.tsx b/packages/react/src/components/form/Select/Select.tsx
@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import type { ForwardedRef, ReactNode, SelectHTMLAttributes } from 'react';
 
 import { omit } from '../../../utilities';
-import { ErrorMessage, Label, Paragraph } from '../../Typography';
+import { Label, Paragraph, ValidationMessage } from '../../Typography';
 
 import { useSelect } from './useSelect';
 
@@ -126,7 +126,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
               aria-live='polite'
               aria-relevant='additions removals'
             >
-              <ErrorMessage size={size}>{error}</ErrorMessage>
+              <ValidationMessage size={size}>{error}</ValidationMessage>
             </div>
           )}
         </div>

diff --git a/packages/react/src/components/form/Textarea/Textarea.tsx b/packages/react/src/components/form/Textarea/Textarea.tsx
@@ -4,7 +4,7 @@ import type { ReactNode, TextareaHTMLAttributes } from 'react';
 import { forwardRef, useState } from 'react';
 
 import { omit } from '../../../utilities';
-import { ErrorMessage, Label, Paragraph } from '../../Typography';
+import { Label, Paragraph, ValidationMessage } from '../../Typography';
 import type { CharacterLimitProps } from '../CharacterCounter';
 import { CharacterCounter } from '../CharacterCounter';
 import type { FormFieldProps } from '../useFormField';
@@ -134,7 +134,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             aria-live='polite'
             aria-relevant='additions removals'
           >
-            {hasError && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+            {hasError && (
+              <ValidationMessage size={size}>{props.error}</ValidationMessage>
+            )}
           </div>
         </div>
       </Paragraph>

diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -4,7 +4,7 @@ import type { InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useId, useState } from 'react';
 
 import { omit } from '../../../utilities';
-import { ErrorMessage, Label, Paragraph } from '../../Typography';
+import { Label, Paragraph, ValidationMessage } from '../../Typography';
 import type { CharacterLimitProps } from '../CharacterCounter';
 import { CharacterCounter } from '../CharacterCounter';
 import type { FormFieldProps } from '../useFormField';
@@ -203,7 +203,9 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
             aria-live='polite'
             aria-relevant='additions removals'
           >
-            {hasError && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+            {hasError && (
+              <ValidationMessage size={size}>{props.error}</ValidationMessage>
+            )}
           </div>
         </div>
       </Paragraph>