[Alert] `LocalAlert`, `GlobalAlert`, `InfoCard` and `InlineMessage` components #4186

KenAJoh · 2025-10-14T12:49:27Z

Description

Extracted from #4085

Component Checklist 📝

changeset-bot · 2025-10-14T12:49:32Z

🦋 Changeset detected

Latest commit: a74c07e

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copilot

Pull Request Overview

This PR introduces a new BaseAlert utility component designed to be shared across LocalAlert, GlobalAlert, and InfoCard components. The implementation provides a composable alert system with consistent styling and behavior patterns.

Key changes:

New BaseAlert compound component with Header, Title, Content, and Close subcomponents
i18n support for announcement variant across Norwegian Bokmål, Nynorsk, and English
Comprehensive CSS styling with support for moderate/strong intensity types and global positioning
Typography line-height corrections for large body-short text

Reviewed Changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 1 comment.

File	Description
`@navikt/core/react/src/util/i18n/locales/`	Adds "announcement" translation keys for nb, nn, and en locales
`@navikt/core/react/src/alert/base-alert/`	Complete BaseAlert component implementation with context, utils, and subcomponents
`@navikt/core/css/`	CSS styling for BaseAlert with color variants, sizing, and darkside theme support
`@navikt/core/react/src/alert/alert.stories.tsx`	Updates legacy Alert stories title to distinguish from new BaseAlert

@navikt/core/react/src/alert/base-alert/BaseAlert.stories.tsx

github-actions · 2025-10-14T12:53:35Z

Storybook demo / Chromatic

📝 Changes to review: 16

56150700d | 102 components | 165 stories

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

@navikt/core/css/darkside/alert.darkside.css

HalvorHaugan · 2025-10-21T11:35:32Z

@navikt/core/css/darkside/typography.darkside.css

  font-size: var(--ax-font-size-xlarge);
  letter-spacing: -0.0013em;
-  line-height: var(--ax-font-line-height-large);
+  line-height: var(--ax-font-line-height-xlarge);


Was this intended? 😱 If yes, it should be in a separate PR with changeset.

Yes, seems code is out of sync with Figma. Ill make a PR 👍

https://github.com/navikt/aksel/pull/4213/files

@navikt/core/css/darkside/alert.darkside.css

@navikt/core/react/src/alert/base-alert/close/BaseAlertClose.tsx

@navikt/core/react/src/alert/base-alert/root/BaseAlertRoot.tsx

@navikt/core/react/src/alert/base-alert/BaseAlert.stories.tsx

HalvorHaugan · 2025-10-21T13:14:31Z

@navikt/core/react/src/alert/base-alert/BaseAlert.stories.tsx

+  OnlyHeader,
+  CloseButton,
+  WrappingTitle,
+});


Not all possible permutations are included, but i guess it will be covered by the components that will be using BaseAlert anyways. (Maybe we don't need Chromatic stories here at all?)

Can consider removing the chromatic stories after merging the other alert variants.

@navikt/core/react/src/alert/base-alert/root/BaseAlertRoot.tsx

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

…text.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

…ls.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

* 🚚 Extracted LocalAlert from #4085 * 🏷️ Rename root * 📝 Doc changes * 🐛 Add button do depdendency mapping * Update @navikt/core/react/src/alert/local-alert/close/LocalAlertClose.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/alert/local-alert/root/LocalAlertRoot.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/alert/local-alert/root/LocalAlertRoot.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/alert/local-alert/root/LocalAlertRoot.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🔊 LocalAlert now always an alert * 🐛 revert closebutton change --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

HalvorHaugan · 2025-10-23T08:42:06Z

@navikt/core/css/darkside/alert.darkside.css

+
+.aksel-base-alert__icon {
+  font-size: 1.5rem;
+  margin-top: var(--ax-space-4);


This might just be me, but I think the icon looks more centered with margin-top: 3px 😅

Think it varies a little icon by icon 🔎

* 🚚 Extracted InfoCard from #4085 * Update .changeset/quiet-lions-serve.md Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/css/config/_mappings.js Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

@HalvorHaugan

* 🚚 Extracted GlobalAlert from #4085 * 📝 Changeset * 🏷️ Rename root * 🔊 GlobalAlert now always an alert * Apply suggestion from @HalvorHaugan Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 📝 Add button css to global alert mappings * Apply suggestion from @HalvorHaugan Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 📝 Docs * Apply suggestion from @HalvorHaugan Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Apply suggestion from @HalvorHaugan Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * ♻️ Remove prop-destructuring --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* 🚚 Move InlineMessage PR out of #4085 * 📝 Changeset * Update @navikt/core/react/src/inline-message/root/InlineMessage.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * 📝 Jsdoc update * Update @navikt/core/react/src/inline-message/root/InlineMessage.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * 🔥 Removed flex-start alignment * Update @navikt/core/react/src/inline-message/root/InlineMessage.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/inline-message/root/InlineMessage.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/inline-message/root/InlineMessage.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/inline-message/root/InlineMessage.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * ♻️ Inline color-definitions * ♻️ Clean up css use * Update @navikt/core/react/src/inline-message/icon/InlineMessageIcon.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🔥 Remove redundant display-flex --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

KenAJoh and others added 30 commits August 8, 2025 13:20

✨ InfoCard boilerplate

5aea653

✨ Add context provider and size handling in InfoCard component

b176531

Merge branch 'main' into infopanel-comp

612e702

🎉 Added expand-button

f206249

🎉 Added animation utils

7380abe

📝 More todos

70d9b41

🎉 Can now transition between height auto

d07c074

♻️ Clean up css

a2d21af

🎉 New hooks and utilities

9f9edfd

♻️ Added controlled state handler

3e6082c

⚡ Move root-function into callback

9b33e2b

🎉 Handle initial mount transition

19725f5

🧪 Added hiddenUntilFound experiment

6401d95

🔥 Removed discarded API

47b1f84

📝 Added mdn docs

f216e54

📝 Aria tests

37a5fc9

♻️ Use variables in info-card css

776107a

📝 Updated stories

1275025

♻️ Extracted icon into a separate component, refactored stories

0a31a1e

🐛 Reset color inside content

a1c27af

♻️ Re-add icon-prop instead of component

b686216

✨ InfoCard build output setup

51c00b6

📝 jsdoc cleanup

2b8012c

📝 Dynamic stories for all colors

d0a393f

💄 Added legacy-support

1d59508

📝 Added CSS mappings

f3c111a

🔥 Removed todo

502f1e4

Apply suggestion from @KenAJoh

9a58955

Apply suggestion from @KenAJoh

8745152

Merge branch 'main' into infocard

4bf499f

KenAJoh added 3 commits October 14, 2025 14:46

🔥 Removed inlinemessage leftovers

25f7c40

🔥 Removed inlinemessage

7dce99a

⬅️ revert effect change

8a16c6f

KenAJoh requested a review from Copilot October 14, 2025 12:49

Copilot AI reviewed Oct 14, 2025

View reviewed changes

@navikt/core/react/src/alert/base-alert/BaseAlert.stories.tsx Outdated Show resolved Hide resolved

Update @navikt/core/react/src/alert/base-alert/BaseAlert.stories.tsx

592b776

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

HalvorHaugan reviewed Oct 21, 2025

View reviewed changes

@navikt/core/react/src/alert/base-alert/root/BaseAlertRoot.tsx Outdated Show resolved Hide resolved

KenAJoh and others added 15 commits October 21, 2025 19:43

Update @navikt/core/react/src/alert/base-alert/root/BaseAlertRoot.tsx

bf1d3ad

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

🔥 Removed position relative

a387c20

🔥 Removed z-index

cce0c91

Update @navikt/core/react/src/alert/base-alert/close/BaseAlertClose.tsx

349c57d

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

Update @navikt/core/react/src/alert/base-alert/root/BaseAlertRoot.tsx

fc41197

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

♻️ Allow overriding button type

f485f58

♻️ Temp remove aria-hidden from header icon

744198d

🐛 Fix nullish icon

4a2e5ee

Update @navikt/core/react/src/alert/base-alert/root/BaseAlertRoot.con…

d05a92a

…text.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

Update @navikt/core/react/src/alert/base-alert/root/BaseAlertRoot.uti…

cf98072

…ls.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

Update @navikt/core/react/src/alert/base-alert/BaseAlert.stories.tsx

a029c44

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

🧪 Predefined story-selections for type and statusType

c46f9ed

🧪 Replace default story for chromatic

2010e6a

Merge branch 'main' into base-alert

6cb7583

HalvorHaugan reviewed Oct 23, 2025

View reviewed changes

KenAJoh and others added 3 commits October 23, 2025 12:47

KenAJoh changed the title ~~[BaseAlert] Utility component meant used by LocalAlert, GlobalAlert and InfoCard~~ [Alert] LocalAlert, GlobalAlert, InfoCard and InlineMessage components Oct 29, 2025

[Alert] LocalAlert, GlobalAlert, InfoCard and InlineMessage components #4186

Are you sure you want to change the base?

[Alert] LocalAlert, GlobalAlert, InfoCard and InlineMessage components #4186

Uh oh!

Conversation

KenAJoh commented Oct 14, 2025

Description

Component Checklist 📝

Uh oh!

changeset-bot bot commented Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

github-actions bot commented Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Storybook demo / Chromatic

📝 Changes to review: 16

Uh oh!

Uh oh!

Uh oh!

HalvorHaugan Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

KenAJoh Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

KenAJoh Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

HalvorHaugan Oct 21, 2025

Choose a reason for hiding this comment

Uh oh!

KenAJoh Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

HalvorHaugan Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

KenAJoh Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[Alert] `LocalAlert`, `GlobalAlert`, `InfoCard` and `InlineMessage` components #4186

[Alert] `LocalAlert`, `GlobalAlert`, `InfoCard` and `InlineMessage` components #4186

changeset-bot bot commented Oct 14, 2025 •

edited

Loading

github-actions bot commented Oct 14, 2025 •

edited

Loading