Inline Alert: <Link>-components used within avoids re-colororing (#…

…3461) * 💄 Avoid coloring links whe used in Inline Alert * 📝 Alert changeset * Update .changeset/eleven-gorillas-scream.md Co-authored-by: Halvor Haugan <[email protected]> * 📝 Added link-demo to inline-story --------- Co-authored-by: Halvor Haugan <[email protected]>
navikt · Dec 17, 2024 · 06193ae · 06193ae
1 parent b6db2c4
commit 06193ae
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/eleven-gorillas-scream.md b/.changeset/eleven-gorillas-scream.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Alert: Link-components used within Alert variant='inline' now preserves default coloring
diff --git a/@navikt/core/css/darkside/link.darkside.css b/@navikt/core/css/darkside/link.darkside.css
@@ -43,7 +43,7 @@
   }
 }
 
-.navds-alert,
+.navds-alert:not(.navds-alert--inline),
 .navds-confirmation-panel {
   & .navds-link {
     color: var(--ax-text-default);

diff --git a/@navikt/core/css/link.css b/@navikt/core/css/link.css
@@ -30,7 +30,7 @@
   text-decoration: underline;
 }
 
-.navds-alert .navds-link,
+.navds-alert:not(.navds-alert--inline) .navds-link,
 .navds-confirmation-panel .navds-link {
   color: var(--a-text-default);
 }

diff --git a/@navikt/core/react/src/alert/alert.stories.tsx b/@navikt/core/react/src/alert/alert.stories.tsx
@@ -96,17 +96,17 @@ export const Inline: StoryFn = () => {
       <Alert variant="info" inline>
         Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
         enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
-        enim nisi veniam nostrud.
+        reprehenderit enim nisi veniam nostrud.{" "}
+        <Link href="#">Id elit esse enim reprehenderit</Link>
       </Alert>
       <Alert variant="info" size="small" inline>
         Id elit esse enim reprehenderit enim nisi veniam nostrud.
       </Alert>
       <Alert variant="info" size="small" inline>
         Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
         enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
-        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
-        enim nisi veniam nostrud.
+        reprehenderit enim nisi veniam nostrud.{" "}
+        <Link href="#">Id elit esse enim reprehenderit</Link>
       </Alert>
     </VStack>
   );