fix(Alert): adjust styles when closable is true and inlineActions is set

kiwicom · Aug 6, 2024 · afa48cb · afa48cb
1 parent 8718b59
commit afa48cb
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 7 deletions.
diff --git a/packages/orbit-components/src/Alert/Alert.ct-story.tsx b/packages/orbit-components/src/Alert/Alert.ct-story.tsx
@@ -1,9 +1,11 @@
 import * as React from "react";
 
 import * as Icons from "../icons";
+import TextLink from "../TextLink";
 import type { Type } from "./types";
+import { TYPE_OPTIONS } from "./consts";
 
-import { AlertButton } from ".";
+import Alert, { AlertButton } from ".";
 
 export function TestLeftIcon({ type }: { type: Type }) {
   return (
@@ -14,3 +16,98 @@ export function TestLeftIcon({ type }: { type: Type }) {
     </div>
   );
 }
+
+export function TestAlert() {
+  return (
+    <div className="gap-md p-xxs flex flex-col items-stretch">
+      <h2>Only title, icon and inline button</h2>
+      <div className="gap-md flex flex-col items-stretch">
+        {Object.values(TYPE_OPTIONS).map(type => {
+          const Icon = typeof type === "string" && Icons[type];
+
+          return (
+            <Alert
+              title="You can change the title by changing the Title control"
+              type={type}
+              icon={Icon ? <Icon /> : true}
+              inlineActions={
+                <AlertButton type={type} href="#">
+                  Link
+                </AlertButton>
+              }
+            />
+          );
+        })}
+      </div>
+      <h2>Title and text, closable and inline button</h2>
+      <div className="gap-md flex flex-col items-stretch">
+        {Object.values(TYPE_OPTIONS).map(type => (
+          <Alert
+            title="You can change the title by changing the Title control"
+            type={type}
+            icon={false}
+            closable
+            inlineActions={
+              <AlertButton type={type} href="#">
+                Link
+              </AlertButton>
+            }
+          >
+            <p>The quick, brown fox jumps over a lazy dog.</p>
+          </Alert>
+        ))}
+      </div>
+      <h2>Title and text, icon, closable and inline button</h2>
+      <div className="gap-md flex flex-col items-stretch">
+        {Object.values(TYPE_OPTIONS).map(type => (
+          <Alert
+            title="You can change the title by changing the Title control"
+            type={type}
+            icon={<Icons.Ai />}
+            closable
+            inlineActions={
+              <AlertButton type={type} href="#">
+                Link
+              </AlertButton>
+            }
+          >
+            <p>The quick, brown fox jumps over a lazy dog.</p>
+          </Alert>
+        ))}
+      </div>
+      <h2>With custom icon</h2>
+      <div className="gap-md flex flex-col items-stretch">
+        {Object.values(TYPE_OPTIONS).map(type => (
+          <Alert
+            title="You can change the title by changing the Title control"
+            type={type}
+            icon={<Icons.Ai />}
+          >
+            The quick, brown fox jumps over a lazy dog.
+          </Alert>
+        ))}
+      </div>
+      <h2>With multiline text, closable, without icon</h2>
+      <div className="gap-md flex flex-col items-stretch">
+        {Object.values(TYPE_OPTIONS).map(type => (
+          <Alert type={type} closable icon={false}>
+            <p>
+              <TextLink type="primary">This is</TextLink> a primary textlink.
+              <br />
+              <TextLink type="secondary">This is</TextLink> a secondary textlink.
+            </p>
+          </Alert>
+        ))}
+      </div>
+      <h2>Suppressed</h2>
+      <div className="gap-md flex flex-col items-stretch">
+        <Alert
+          title="You can change the title by changing the Title control"
+          type="info"
+          suppressed
+          icon
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx b/packages/orbit-components/src/Alert/Alert.ct.tsx
@@ -2,7 +2,8 @@ import * as React from "react";
 import { test, expect } from "@playwright/experimental-ct-react";
 
 import { TYPE_OPTIONS } from "./consts";
-import { TestLeftIcon } from "./Alert.ct-story";
+import { TestLeftIcon, TestAlert } from "./Alert.ct-story";
+import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 test.describe("visual AlertButton", () => {
   Object.values(TYPE_OPTIONS).forEach(type => {
@@ -34,3 +35,21 @@ test.describe("visual AlertButton", () => {
     });
   });
 });
+
+test.describe("visual Alert", () => {
+  test("Alert component", async ({ mount }) => {
+    const component = await mount(<TestAlert />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("Alert component RTL", async ({ mount }) => {
+    const component = await mount(
+      <RenderInRtl>
+        <TestAlert />
+      </RenderInRtl>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/packages/orbit-components/src/Alert/index.tsx b/packages/orbit-components/src/Alert/index.tsx
@@ -74,7 +74,7 @@ const ContentWrapper = ({
   return (
     <div
       className={cx(
-        "flex min-h-[20px] items-center",
+        "min-h-icon-medium flex items-center",
         !inlineActions && "w-full",
         "[&_.orbit-list-item]:text-ink-dark [&_.orbit-text]:text-ink-dark [&_.orbit-heading]:text-ink-dark",
         ...alertDescendantClasses[type],
@@ -99,7 +99,7 @@ const AlertCloseButton = ({
   icon: React.ReactNode;
 }) => {
   return (
-    <div className={cx("absolute end-0", hasChildren ? "top-0" : "me-xs top-1/2 -translate-y-1/2")}>
+    <div className={cx("end-0", hasChildren && "top-0")}>
       <ButtonLink
         dataTest={dataTest}
         onClick={onClick}
@@ -131,9 +131,9 @@ const Alert = (props: Props) => {
     <div
       className={cx(
         "rounded-large text-ink-dark font-base text-normal p-sm relative box-border flex w-full border border-t-[3px] leading-normal",
-        closable && "pe-lg",
         "lm:border-s-[3px] lm:border-t",
         "tb:rounded-normal",
+        inlineActions && "items-center",
         suppressed ? "bg-cloud-light border-cloud-normal lm:border-t-cloud-normal" : COLORS[type],
         ACCENT_BORDER[type],
         spaceAfter && spaceAfterClasses[spaceAfter],
@@ -145,7 +145,7 @@ const Alert = (props: Props) => {
         <div
           className={cx(
             "me-xs m-0 shrink-0 leading-none",
-            inlineActions && "flex items-center",
+            inlineActions && "lm:mt-[6px] flex items-center self-baseline", // TODO: [6px] can be replaced by space tokens
             ICON_COLOR[type],
             "tb:me-xs tb:[&_svg]:size-icon-medium",
           )}
@@ -164,8 +164,9 @@ const Alert = (props: Props) => {
         {title && (
           <div
             className={cx(
-              "text-ink-dark flex min-h-[20px] items-center font-bold",
+              "text-ink-dark min-h-icon-medium flex items-center font-bold",
               !!children && (inlineActions ? "mb-0" : "mb-xxs"),
+              inlineActions && "grow basis-0",
             )}
           >
             {title}