Alert: Misc. adjustments (#3007)

navikt · Jun 20, 2024 · 23ea323 · 23ea323
1 parent b38789b
commit 23ea323
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 191 deletions.
diff --git a/.changeset/perfect-dolphins-breathe.md b/.changeset/perfect-dolphins-breathe.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Alert: Fix alignment, add prop for toggling content max-width, and adjust title on close icon.
diff --git a/@navikt/core/css/alert.css b/@navikt/core/css/alert.css
@@ -7,7 +7,11 @@
   align-items: center;
 }
 
-.navds-alert__wrapper {
+.navds-alert--small.navds-alert--close-button {
+  align-items: flex-start;
+}
+
+.navds-alert__wrapper--maxwidth {
   max-width: 43.5rem;
 }
 

diff --git a/@navikt/core/react/src/alert/Alert.tsx b/@navikt/core/react/src/alert/Alert.tsx
@@ -29,6 +29,11 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    */
   fullWidth?: boolean;
+  /**
+   * Sets max-width on the content to 43.5rem.
+   * @default true
+   */
+  contentMaxWidth?: boolean;
   /**
    * Removes background from Alert.
    * @default false
@@ -85,6 +90,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       variant,
       size = "medium",
       fullWidth = false,
+      contentMaxWidth = true,
       inline = false,
       closeButton = false,
       onClose,
@@ -109,7 +115,14 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         )}
       >
         <Icon variant={variant} className="navds-alert__icon" />
-        <BodyLong as="div" size={size} className="navds-alert__wrapper">
+        <BodyLong
+          as="div"
+          size={size}
+          className={cl(
+            "navds-alert__wrapper",
+            contentMaxWidth && "navds-alert__wrapper--maxwidth",
+          )}
+        >
           {children}
         </BodyLong>
         {closeButton && !inline && (
@@ -120,7 +133,15 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
               variant="tertiary-neutral"
               onClick={onClose}
               type="button"
-              icon={<XMarkIcon title="Lukk Alert" />}
+              icon={
+                <XMarkIcon
+                  title={
+                    ["error", "warning"].includes(variant)
+                      ? "Lukk varsel"
+                      : "Lukk melding"
+                  }
+                />
+              }
             />
           </div>
         )}