fix: styled AlertRoot, fix alert.mdx

pavel-flexy · pavel-flexy · commit b0b743cb0a90 · 2025-05-16T19:42:49.000+04:00
diff --git a/apps/portal/src/content/docs/components/alert.mdx b/apps/portal/src/content/docs/components/alert.mdx
@@ -4,7 +4,7 @@ description: Alert component
 beta: true
 ---
 
-The `Alert` component provides a flexible UI element for displaying alert messages. It is composed of several subcomponents such as `AlertRoot`, `AlertTitle`, `AlertDescription`, and `AlertLink` to offer a structured and customizable interface.
+The `Alert` component provides a flexible UI element for displaying alert messages. It is composed of several subcomponents such as `Alert.Root`, `Alert.Title`, `Alert.Description`, and `Alert.Link` to offer a structured and customizable interface.
 
 import { DocsPage } from "@/components/docs-page";
 
@@ -16,7 +16,7 @@ import { DocsPage } from "@/components/docs-page";
     <Alert.Description>This is an alert description.</Alert.Description>
   </Alert.Root>
   <Alert.Root theme="danger" dismissible>
-    <Alert.Description >We couldn’t complete your request because it violates an Open Policy Agent (OPA) rule set by your organization. Please review the applicable policies or contact your administrator for clarification, then try creating the feature flag again.</Alert.Description>
+    <Alert.Description>We couldn’t complete your request because it violates an Open Policy Agent (OPA) rule set by your organization. Please review the applicable policies or contact your administrator for clarification, then try creating the feature flag again.</Alert.Description>
   </Alert.Root>
   <Alert.Root theme="warning" dismissible>
     <Alert.Title>Warning Alert</Alert.Title>
@@ -25,34 +25,41 @@ import { DocsPage } from "@/components/docs-page";
   <Alert.Root dismissible>
     <Alert.Title>Dismissible Alert</Alert.Title>
   </Alert.Root>
-  <Alert.Root >
+  <Alert.Root>
     <Alert.Title>Link Alert</Alert.Title>
     <Alert.Link to="/abc">Learn more</Alert.Link>
   </Alert.Root>
-  <Alert.Root >
+  <Alert.Root>
     <Alert.Title theme="warning">Link Alert as child</Alert.Title>
     <Alert.Link to="/abc" asChild><Button>Learn more</Button></Alert.Link>
   </Alert.Root>
   <Alert.Root theme="danger">
     <Alert.Title>Crowded Alert not expandable</Alert.Title>
-    <Alert.Description >LoremLorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestiae hic, iste nostrum, quia eaque amet autem optio rem earum nihil rerum illo! Possimus</Alert.Description>
+    <Alert.Description>LoremLorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestiae hic, iste nostrum, quia eaque amet autem optio rem earum nihil rerum illo! Possimus</Alert.Description>
   </Alert.Root>
   <Alert.Root expandable>
     <Alert.Title>Crowded Alert</Alert.Title>
-    <Alert.Description >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat magnam suscipit fugit officiis dignissimos iusto similique deleniti. Quod odio amet quisquam, blanditiis necessitatibus aliquam cumque beatae debitis sunt nemo perspiciatis a saepe enim voluptas? Incidunt vel officiis quam, corrupti ea aliquid nobis! Soluta accusantium ex, alias quod velit explicabo modi exercitationem eaque incidunt fuga, nihil fugiat voluptatum doloribus repudiandae atque.</Alert.Description>
+    <Alert.Description>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat magnam suscipit fugit officiis dignissimos iusto similique deleniti. Quod odio amet quisquam, blanditiis necessitatibus aliquam cumque beatae debitis sunt nemo perspiciatis a saepe enim voluptas? Incidunt vel officiis quam, corrupti ea aliquid nobis! Soluta accusantium ex, alias quod velit explicabo modi exercitationem eaque incidunt fuga, nihil fugiat voluptatum doloribus repudiandae atque.</Alert.Description>
     <Alert.Link to="/abc">Learn more</Alert.Link>
   </Alert.Root>
   <Alert.Root theme="danger" expandable>
     <Alert.Title>Crowded Alert</Alert.Title>
-    <Alert.Description >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat magnam suscipit fugit officiis dignissimos iusto similique deleniti. Quod odio amet quisquam, blanditiis necessitatibus aliquam cumque beatae debitis sunt nemo perspiciatis a saepe enim voluptas? Incidunt vel officiis quam, corrupti ea aliquid nobis! Soluta accusantium ex, alias quod velit explicabo modi exercitationem eaque incidunt fuga, nihil fugiat voluptatum doloribus repudiandae atque.</Alert.Description>
+    <Alert.Description>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat magnam suscipit fugit officiis dignissimos iusto similique deleniti. Quod odio amet quisquam, blanditiis necessitatibus aliquam cumque beatae debitis sunt nemo perspiciatis a saepe enim voluptas? Incidunt vel officiis quam, corrupti ea aliquid nobis! Soluta accusantium ex, alias quod velit explicabo modi exercitationem eaque incidunt fuga, nihil fugiat voluptatum doloribus repudiandae atque.</Alert.Description>
   </Alert.Root>
   <Alert.Root theme="warning" expandable>
     <Alert.Title>Crowded Alert</Alert.Title>
     <Alert.Description>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat magnam suscipit fugit officiis dignissimos iusto similique deleniti. Quod odio amet quisquam, blanditiis necessitatibus aliquam cumque beatae debitis sunt nemo perspiciatis a saepe enim voluptas? Incidunt vel officiis quam, corrupti ea aliquid nobis! Soluta accusantium ex, alias quod velit explicabo modi exercitationem eaque incidunt fuga, nihil fugiat voluptatum doloribus repudiandae atque.</Alert.Description>
   </Alert.Root>
   <Alert.Root expandable>
     <Alert.Title>Expandable but not crowded</Alert.Title>
-    <Alert.Description >LoremLorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestiae hic</Alert.Description>
+    <Alert.Description>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</Alert.Description>
+  </Alert.Root>
+  <Alert.Root theme="danger" expandable>
+    <Alert.Title>Crowded title Crowded title Crowded title Crowded title Crowded title Crowded title Crowded title Crowded title Crowded title Crowded title Crowded title</Alert.Title>
+    <Alert.Description>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat magnam suscipit fugit officiis dignissimos iusto similique deleniti. Quod odio amet quisquam, blanditiis necessitatibus aliquam cumque beatae debitis sunt nemo perspiciatis a saepe enim voluptas? Incidunt vel officiis quam, corrupti ea aliquid nobis! Soluta accusantium ex, alias quod velit explicabo modi exercitationem eaque incidunt fuga, nihil fugiat voluptatum doloribus repudiandae atque.</Alert.Description>
+  </Alert.Root>
+  <Alert.Root theme="warning" expandable>
+    <Alert.Description>Without Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat magnam suscipit fugit officiis dignissimos iusto similique deleniti. Quod odio amet quisquam, blanditiis necessitatibus aliquam cumque beatae debitis sunt nemo perspiciatis a saepe enim voluptas? Incidunt vel officiis quam, corrupti ea aliquid nobis! Soluta accusantium ex, alias quod velit explicabo modi exercitationem eaque incidunt fuga, nihil fugiat voluptatum doloribus repudiandae atque.</Alert.Description>
   </Alert.Root>
 </div>`}
 />
@@ -62,22 +69,19 @@ import { DocsPage } from "@/components/docs-page";
 ```typescript jsx
 import { Alert } from '@harnessio/ui/components'
 
+//...
+
 return (
   <Alert.Root
     theme="info"
     expandable
     dismissible
-    onDismiss={handleDismiss}
   >
     <Alert.Title>My Alert</Alert.Title>
 
     <Alert.Description>This is the description of the alert</Alert.Description>
 
-    <Alert.Link
-      to="someplace"
-      external
-      asChild
-    >
+    <Alert.Link to="/someplace">
       Learn more
     </Alert.Link>
   </Alert.Root>
@@ -92,12 +96,13 @@ All parts of the `Alert` component can be imported and composed as required.
 <Alert.Root>
   <Alert.Title />
   <Alert.Description />
+  <Alert.Link />
 </Alert.Root>
 ```
 
 ## API Reference
 
-### Root
+### `Root`
 
 The `Root` component serves as the main container for all alert elements.
 
@@ -106,54 +111,48 @@ The `Root` component serves as the main container for all alert elements.
     {
       name: "children",
       description:
-        "You can pass in your `Alert.Title` and `Alert.Description` as children",
+        "You can pass in your `Alert.Title`, `Alert.Description` and `Alert.Link` as children",
       required: true,
       value: "ReactNode",
-      defaultValue: "",
     },
     {
       name: "className",
       description: "Additional class names to apply to the alert container",
       required: false,
       value: "string",
-      defaultValue: "",
     },
     {
       name: "theme",
       description:
         "Theme of the alert. Can be one of 'info', 'warning', or 'danger'.",
       required: false,
       value: "'info' | 'warning' | 'danger'",
-      defaultValue: "'info'",
     },
     {
       name: "dismissible",
       description:
         "If true, the alert can be dismissed by the user. Default is false.",
       required: false,
       value: "boolean",
-      defaultValue: "false",
     },
     {
       name: "expandable",
       description:
         "If true, the alert can be expanded to show more content. Default is false.",
       required: false,
       value: "boolean",
-      defaultValue: "false",
     },
     {
       name: "onDismiss",
       description:
         "Callback function that is called when the alert is dismissed.",
       required: false,
       value: "() => void",
-      defaultValue: "",
     },
   ]}
 />
 
-### Title
+### `Title`
 
 The `Title` component displays the title of the alert.
 
@@ -178,7 +177,7 @@ The `Title` component displays the title of the alert.
   ]}
 />
 
-### Description
+### `Description`
 
 The `Description` component displays the description of the alert.
 
@@ -203,7 +202,7 @@ The `Description` component displays the description of the alert.
   ]}
 />
 
-### Link
+### `Link`
 
 The `Link` component is used to create a link within the alert.
 
diff --git a/packages/ui/config/vitest-setup.ts b/packages/ui/config/vitest-setup.ts
@@ -2,6 +2,14 @@ import { cleanup } from '@testing-library/react'
 
 import '@testing-library/jest-dom'
 
+beforeAll(() => {
+  global.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+})
+
 afterEach(() => {
   cleanup()
 })
diff --git a/packages/ui/src/components/alert/Alert.test.tsx b/packages/ui/src/components/alert/Alert.test.tsx
@@ -2,14 +2,6 @@ import { render, screen } from '@testing-library/react'
 
 import { Alert } from './'
 
-beforeAll(() => {
-  global.ResizeObserver = class {
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-  }
-})
-
 describe('Alert', () => {
   test('it should display the alert title and description', async () => {
     const title = 'TEST TITLE'
diff --git a/packages/ui/src/components/alert/AlertRoot.tsx b/packages/ui/src/components/alert/AlertRoot.tsx
@@ -1,11 +1,23 @@
-import { forwardRef, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react'
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  PropsWithChildren,
+  ReactNode,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
 
 import { Button } from '@components/button'
 import { Icon, IconNameMap } from '@components/icon'
 import { useResizeObserver } from '@hooks/use-resize-observer'
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
+import { AlertTitle } from './AlertTitle'
+
 const alertVariants = cva('cn-alert', {
   variants: {
     theme: {
@@ -25,7 +37,8 @@ const iconMap: Record<NonNullable<VariantProps<typeof alertVariants>['theme']>,
   warning: 'warning-triangle-outline'
 }
 
-const MAX_HEIGHT = 60
+const MAX_HEIGHT_WITH_TITLE = 70
+const MAX_HEIGHT_WITHOUT_TITLE = 60
 
 export interface AlertRootProps extends PropsWithChildren<VariantProps<typeof alertVariants>> {
   className?: string
@@ -52,6 +65,17 @@ export const AlertRoot = forwardRef<HTMLDivElement, AlertRootProps>(
 
     const shouldShowButton = expandable && isOverflowing
 
+    const hasTitle = Children.toArray(children).some(
+      (child: ReactNode) => isValidElement(child) && child?.type === AlertTitle
+    )
+
+    const minHContentClassName = useMemo(
+      () => (hasTitle ? 'cn-alert-min-h-content' : 'cn-alert-min-h-content-no-title'),
+      [hasTitle]
+    )
+
+    const MAX_HEIGHT = useMemo(() => (hasTitle ? MAX_HEIGHT_WITH_TITLE : MAX_HEIGHT_WITHOUT_TITLE), [hasTitle])
+
     useResizeObserver(
       contentRef,
       el => {
@@ -81,6 +105,7 @@ export const AlertRoot = forwardRef<HTMLDivElement, AlertRootProps>(
             variant="transparent"
             size="sm"
             iconOnly
+            aria-label="Close alert"
           >
             <Icon className="cn-alert-close-button-icon" name="close" skipSize />
           </Button>
@@ -92,13 +117,13 @@ export const AlertRoot = forwardRef<HTMLDivElement, AlertRootProps>(
           <div
             className={cn('cn-alert-content-box', {
               'cn-alert-content-expanded': isExpanded,
-              'cn-alert-overflow': shouldShowButton
+              'cn-alert-content-overflow': shouldShowButton
             })}
           >
             <div
               ref={contentRef}
               className={cn('cn-alert-content', {
-                'cn-alert-min-h-content': shouldShowButton
+                [minHContentClassName]: shouldShowButton
               })}
               role="region"
               aria-label="Alert content"
@@ -125,7 +150,9 @@ export const AlertRoot = forwardRef<HTMLDivElement, AlertRootProps>(
             >
               {isExpanded ? 'Show less' : 'Show more'}
               <Icon
-                className={cn('cn-alert-expand-button-icon', { 'cn-alert-rotate-180': isExpanded })}
+                className={cn('cn-alert-expand-button-icon', {
+                  'cn-alert-expand-button-icon-rotate-180': isExpanded
+                })}
                 name="chevron-down"
                 skipSize
               />
diff --git a/packages/ui/tailwind-utils-config/components/alert.ts b/packages/ui/tailwind-utils-config/components/alert.ts
@@ -57,14 +57,22 @@ export default {
     '&-content': {
       background: 'inherit',
       gap: 'var(--cn-spacing-1)',
-      '@apply grid relative': ''
+      '@apply grid relative': '',
+
+      '&-overflow': {
+        overflow: 'hidden'
+      }
     },
 
     '&-content-expanded': {
       '@apply grid-rows-[1fr]': ''
     },
 
     '&-min-h-content': {
+      '@apply min-h-[70px]': ''
+    },
+
+    '&-min-h-content-no-title': {
       '@apply min-h-[60px]': ''
     },
 
@@ -89,15 +97,6 @@ export default {
       }
     },
 
-    '&-rotate-180': {
-      transform: 'rotate(180deg)',
-      transition: 'transform 0.2s ease-out'
-    },
-
-    '&-overflow': {
-      overflow: 'hidden'
-    },
-
     '&-title': {
       '@apply font-body-strong': ''
     },
@@ -123,7 +122,12 @@ export default {
     '&-expand-button': {
       '&-icon': {
         width: 'var(--cn-icon-size-default)',
-        height: 'var(--cn-icon-size-default)'
+        height: 'var(--cn-icon-size-default)',
+
+        '&-rotate-180': {
+          transform: 'rotate(180deg)',
+          transition: 'transform 0.2s ease-out'
+        }
       }
     },
 
