Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Darkside] Warning triangle icon in error messages #3445

Merged
merged 23 commits into from
Dec 19, 2024
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
2a85732
change: support icon in ErrorMessage + warning icon for textarea error
JulianNymark Dec 9, 2024
b274888
change: ignore icon on old CSS + tweaks
JulianNymark Dec 10, 2024
e1b6d12
Merge branch 'main' into darkside-potential-fixes
JulianNymark Dec 10, 2024
db98b9d
change: do not nest in old css
JulianNymark Dec 10, 2024
1a7568f
Merge branch 'main' into darkside-potential-fixes
JulianNymark Dec 18, 2024
b2cc53f
wip commit (works nicely)
JulianNymark Dec 18, 2024
f39ca8f
clean up css for errormessage, remove it from form.css
JulianNymark Dec 18, 2024
832b8c0
:bug: tweaks + use icon in Search
JulianNymark Dec 18, 2024
465824e
use icon for the rest of our form components
JulianNymark Dec 18, 2024
4395e28
backport new css to old form.css
JulianNymark Dec 18, 2024
595bda5
:fire: remove unnecessary specification bump
JulianNymark Dec 18, 2024
0d6b00b
cleaner example story
JulianNymark Dec 18, 2024
1a7d96c
changeset
JulianNymark Dec 18, 2024
8302304
:recycle: icon -> showIcon
JulianNymark Dec 18, 2024
5eddff8
make flex & gap opt-in with 'icon'
JulianNymark Dec 19, 2024
13fed06
change: inline ErrorMessageIcon
JulianNymark Dec 19, 2024
1e07e11
change: nest css more
JulianNymark Dec 19, 2024
dc58c0d
revert test changes (utility in multiple variants on one for DOM diff…
JulianNymark Dec 19, 2024
499220e
debloat changeset
JulianNymark Dec 19, 2024
5d27908
Merge branch 'main' into darkside-potential-fixes
JulianNymark Dec 19, 2024
a058f4e
mention form components in changeset
JulianNymark Dec 19, 2024
7d7b100
change: typo in changeset
JulianNymark Dec 19, 2024
6646541
change: typo in changeset
JulianNymark Dec 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .changeset/six-islands-exercise.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
"@navikt/ds-react": minor
"@navikt/ds-css": minor
---

ErrorSummary: :sparkles: new prop to prefix error with a warning icon.
Typography: replace warning dot with warning icon
DateInput: replace warning dot with warning icon
Combobox: replace warning dot with warning icon
Combobox: replace warning dot with warning icon
ConfirmationPanel: replace warning dot with warning icon
Fieldset: replace warning dot with warning icon
DropZone: replace warning dot with warning icon
Search: replace warning dot with warning icon
Select: replace warning dot with warning icon
Textarea: replace warning dot with warning icon
TextField: replace warning dot with warning icon
JulianNymark marked this conversation as resolved.
Show resolved Hide resolved
13 changes: 0 additions & 13 deletions @navikt/core/css/darkside/form/form.darkside.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,6 @@
color: var(--ax-text-subtle);
}

.navds-form-field .navds-error-message,
.navds-fieldset .navds-error-message,
.navds-file-item .navds-error-message {
display: flex;
gap: var(--ax-spacing-2);
}

.navds-form-field .navds-error-message::before,
.navds-fieldset .navds-error-message::before,
.navds-file-item .navds-error-message::before {
content: "•";
}

.navds-form-field--disabled {
opacity: var(--ax-opacity-disabled);
cursor: not-allowed;
Expand Down
12 changes: 12 additions & 0 deletions @navikt/core/css/darkside/typography.darkside.css
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,18 @@

.navds-error-message {
color: var(--ax-text-danger);

&.navds-error-message--show-icon {
display: flex;
gap: var(--ax-spacing-1);
}

&.navds-error-message--show-icon svg {
JulianNymark marked this conversation as resolved.
Show resolved Hide resolved
margin-top: 0.15em;
flex: 0 0 auto;
width: 1em;
height: 1em;
}
}

/* -------------------------------- Utilities ------------------------------- */
Expand Down
13 changes: 0 additions & 13 deletions @navikt/core/css/form/form.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,6 @@
color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
}

.navds-form-field .navds-error-message,
.navds-fieldset .navds-error-message,
.navds-file-item .navds-error-message {
display: flex;
gap: var(--a-spacing-2);
}

.navds-form-field .navds-error-message::before,
.navds-fieldset .navds-error-message::before,
.navds-file-item .navds-error-message::before {
content: "•";
}

.navds-form-field--disabled {
opacity: 0.3;
cursor: not-allowed;
Expand Down
12 changes: 12 additions & 0 deletions @navikt/core/css/typography.css
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,18 @@
color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger)));
}

.navds-error-message.navds-error-message--show-icon {
display: flex;
gap: var(--a-spacing-1);
}

.navds-error-message.navds-error-message--show-icon svg {
margin-top: 0.15em;
flex: 0 0 auto;
width: 1em;
height: 1em;
}

.navds-typo--truncate {
overflow: hidden;
white-space: nowrap;
Expand Down
6 changes: 5 additions & 1 deletion @navikt/core/react/src/date/parts/DateInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,11 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
aria-relevant="additions removals"
aria-live="polite"
>
{showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
{showErrorMsg && (
<ErrorMessage size={size} showIcon>
{props.error}
</ErrorMessage>
)}
</div>
</div>
);
Expand Down
6 changes: 5 additions & 1 deletion @navikt/core/react/src/form/combobox/Combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,11 @@ export const Combobox = forwardRef<
aria-relevant="additions removals"
aria-live="polite"
>
{showErrorMsg && <ErrorMessage size={size}>{error}</ErrorMessage>}
{showErrorMsg && (
<ErrorMessage size={size} showIcon>
{error}
</ErrorMessage>
)}
</div>
</ComboboxWrapper>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,11 @@ export const ConfirmationPanel = forwardRef<
</Checkbox>
</div>
<div className="navds-form-field__error" id={errorId} role="alert">
{showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
{showErrorMsg && (
<ErrorMessage size={size} showIcon>
{props.error}
</ErrorMessage>
)}
</div>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion @navikt/core/react/src/form/fieldset/Fieldset.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,9 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
className="navds-fieldset__error"
>
{showErrorMsg && (
<ErrorMessage size={size}>{props.error}</ErrorMessage>
<ErrorMessage size={size} showIcon>
{props.error}
</ErrorMessage>
)}
</div>
</fieldset>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
aria-relevant="additions removals"
aria-live="polite"
>
{showErrorMsg && <ErrorMessage>{error}</ErrorMessage>}
{showErrorMsg && <ErrorMessage showIcon>{error}</ErrorMessage>}
</div>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion @navikt/core/react/src/form/search/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,9 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
aria-live="polite"
>
{showErrorMsg && (
<ErrorMessage size={size}>{props.error}</ErrorMessage>
<ErrorMessage size={size} showIcon>
{props.error}
</ErrorMessage>
)}
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion @navikt/core/react/src/form/select/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,9 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
aria-live="polite"
>
{showErrorMsg && (
<ErrorMessage size={size}>{props.error}</ErrorMessage>
<ErrorMessage size={size} showIcon>
{props.error}
</ErrorMessage>
)}
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion @navikt/core/react/src/form/textarea/Textarea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
aria-live="polite"
>
{showErrorMsg && (
<ErrorMessage size={size}>{props.error}</ErrorMessage>
<ErrorMessage size={size} showIcon>
{props.error}
</ErrorMessage>
)}
</div>
</div>
Expand Down
19 changes: 19 additions & 0 deletions @navikt/core/react/src/form/textarea/textarea.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Meta, StoryFn, StoryObj } from "@storybook/react";
import { expect, userEvent, within } from "@storybook/test";
import React, { useState } from "react";
import { Button } from "../../button";
import { VStack } from "../../layout/stack";
import { Modal } from "../../modal";
import { Textarea } from "./index";

Expand Down Expand Up @@ -74,6 +75,24 @@ export const WithError: StoryFn = () => {
size="small"
/>

<VStack
style={{
maxWidth: "400px",
}}
gap="4"
>
<Textarea
label="Ipsum enim quis culpa"
error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
/>

<Textarea
label="Ipsum enim quis culpa"
error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
size="small"
/>
</VStack>

<Textarea
label="Ipsum enim quis culpa"
error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
Expand Down
4 changes: 3 additions & 1 deletion @navikt/core/react/src/form/textfield/TextField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
aria-live="polite"
>
{showErrorMsg && (
<ErrorMessage size={size}>{props.error}</ErrorMessage>
<ErrorMessage size={size} showIcon>
{props.error}
</ErrorMessage>
)}
</div>
</div>
Expand Down
25 changes: 23 additions & 2 deletions @navikt/core/react/src/typography/ErrorMessage.tsx
JulianNymark marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import cl from "clsx";
import React, { forwardRef } from "react";
import { OverridableComponent } from "../util/types";
import { ErrorMessageIcon } from "./ErrorMessageIcon";
import { TypoProps } from "./types";
import { typoClassNames } from "./util";

Expand All @@ -16,6 +17,11 @@ export interface ErrorMessageProps
* Error text.
*/
children: React.ReactNode;

/**
* Render a triangular warning icon.
*/
showIcon?: boolean;
}

/**
Expand All @@ -36,7 +42,18 @@ export const ErrorMessage: OverridableComponent<
ErrorMessageProps,
HTMLParagraphElement
> = forwardRef(
({ className, size, spacing, as: Component = "p", ...rest }, ref) => (
(
{
children,
className,
size,
spacing,
as: Component = "p",
showIcon = false,
...rest
},
ref,
) => (
<Component
{...rest}
ref={ref}
Expand All @@ -49,9 +66,13 @@ export const ErrorMessage: OverridableComponent<
}),
{
"navds-label--small": size === "small",
"navds-error-message--show-icon": showIcon,
},
)}
/>
>
{showIcon && <ErrorMessageIcon />}
{children}
</Component>
),
);

Expand Down
19 changes: 19 additions & 0 deletions @navikt/core/react/src/typography/ErrorMessageIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from "react";

export const ErrorMessageIcon = ({ ...props }) => (
<svg
viewBox="0 0 17 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
focusable={false}
aria-hidden
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.49209 11.534L8.11398 2.7594C8.48895 2.04752 9.50833 2.04743 9.88343 2.75924L14.5073 11.5339C14.8582 12.1998 14.3753 13 13.6226 13H4.37685C3.6242 13 3.14132 12.1999 3.49209 11.534ZM9.74855 10.495C9.74855 10.9092 9.41276 11.245 8.99855 11.245C8.58433 11.245 8.24855 10.9092 8.24855 10.495C8.24855 10.0808 8.58433 9.74497 8.99855 9.74497C9.41276 9.74497 9.74855 10.0808 9.74855 10.495ZM9.49988 5.49997C9.49988 5.22383 9.27602 4.99997 8.99988 4.99997C8.72373 4.99997 8.49988 5.22383 8.49988 5.49997V7.99997C8.49988 8.27611 8.72373 8.49997 8.99988 8.49997C9.27602 8.49997 9.49988 8.27611 9.49988 7.99997V5.49997Z"
fill="currentColor"
/>
</svg>
);
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,21 @@ export const OverrideTag: Story = {
},
};

export const WithAndWithoutIcon: Story = {
render: () => (
<VStack gap="2">
<ErrorMessage size="medium" showIcon>
{lorem}
</ErrorMessage>
<ErrorMessage size="small" showIcon>
{lorem}
</ErrorMessage>
<ErrorMessage size="medium">{lorem}</ErrorMessage>
<ErrorMessage size="small">{lorem}</ErrorMessage>
</VStack>
),
};

export const Chromatic: Story = {
render: (...props) => (
<div>
Expand All @@ -114,6 +129,10 @@ export const Chromatic: Story = {
<h2>Override Tag</h2>
{OverrideTag.render?.(...props)}
</div>
<div>
<h2>With Icon</h2>
{WithIcon.render?.(...props)}
</div>
</div>
),
parameters: {
Expand Down
Loading