diff --git a/.changeset/happy-worms-applaud.md b/.changeset/happy-worms-applaud.md new file mode 100644 index 0000000000..9e2085886d --- /dev/null +++ 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 new file mode 100644 index 0000000000..f35296cae3 --- /dev/null +++ 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 index 37d1c25ceb..e86b5debce 100644 --- 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 index a9e96c4557..72d3424bb1 100644 --- 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 deleted file mode 100644 index c05808bda6..0000000000 --- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { Slot } from '@radix-ui/react-slot'; -import cl from 'clsx/lite'; -import type { HTMLAttributes } from 'react'; -import { forwardRef } from 'react'; - -export type ErrorMessageProps = { - /** - * 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; - -/** Use `ErrorMessage` to display text as error message. */ -export const ErrorMessage = forwardRef( - ( - { size = 'md', className, spacing, asChild, error = true, ...rest }, - ref, - ) => { - const Component = asChild ? Slot : 'div'; - - return ( - - ); - }, -); - -ErrorMessage.displayName = 'ErrorMessage'; diff --git a/packages/react/src/components/Typography/ErrorMessage/index.ts b/packages/react/src/components/Typography/ErrorMessage/index.ts deleted file mode 100644 index 3dee9621e8..0000000000 --- a/packages/react/src/components/Typography/ErrorMessage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ErrorMessage'; diff --git a/packages/react/src/components/Typography/Typography.mdx b/packages/react/src/components/Typography/Typography.mdx index a5080d000f..31141f7f4c 100644 --- 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'; @@ -69,10 +69,10 @@ Brukes når det trengs tekst over flere linjer. Mesteparten av teksten på et ne -## ErrorMessage +## ValidationMessage - - + + ## Eksempel diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.stories.tsx similarity index 52% rename from packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx rename to packages/react/src/components/Typography/ValidationMessage/ValidationMessage.stories.tsx index e6f49b3f1e..3dfc6c7245 100644 --- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.stories.tsx +++ b/packages/react/src/components/Typography/ValidationMessage/ValidationMessage.stories.tsx @@ -1,15 +1,15 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { ErrorMessage } from './'; +import { ValidationMessage } from '.'; -const meta: Meta = { - title: 'Komponenter/Typography/ErrorMessage', - component: ErrorMessage, +const meta: Meta = { + title: 'Komponenter/Typography/ValidationMessage', + component: ValidationMessage, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; 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 new file mode 100644 index 0000000000..205d3eb9f7 --- /dev/null +++ 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; + +/** 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 ( + + ); +}); diff --git a/packages/react/src/components/Typography/ValidationMessage/index.ts b/packages/react/src/components/Typography/ValidationMessage/index.ts new file mode 100644 index 0000000000..836f460c6e --- /dev/null +++ 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 index ed590f04cf..4f7f7c992b 100644 --- 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 index bd1a902c53..a9ac047cdf 100644 --- 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 = ({ {srLabel} - + {label(currentCount)} - + ); }; diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxError.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxError.tsx index 2de7506119..118d642de5 100644 --- 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 && {error}} + {error && {error}} ); }; diff --git a/packages/react/src/components/form/Fieldset/Fieldset.tsx b/packages/react/src/components/form/Fieldset/Fieldset.tsx index 08b718c28e..bcdfad8e38 100644 --- 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( aria-relevant='additions removals' id={errorId} > - {hasError && {error}} + {hasError && ( + {error} + )} diff --git a/packages/react/src/components/form/Select/Select.tsx b/packages/react/src/components/form/Select/Select.tsx index 5c57855886..e5469776ad 100644 --- 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( aria-live='polite' aria-relevant='additions removals' > - {error} + {error} )} diff --git a/packages/react/src/components/form/Textarea/Textarea.tsx b/packages/react/src/components/form/Textarea/Textarea.tsx index 7a62223373..65493777ff 100644 --- 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( aria-live='polite' aria-relevant='additions removals' > - {hasError && {props.error}} + {hasError && ( + {props.error} + )} diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx index 3aeeb983ef..3e0f7c035f 100644 --- 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( aria-live='polite' aria-relevant='additions removals' > - {hasError && {props.error}} + {hasError && ( + {props.error} + )}