feat(apollo-vertex): update Alert and Sonner styles and docs

Author: KokoMilev

apps/apollo-vertex/app/patterns/notifications/in-product/notification-examples.tsx

@@ -76,20 +76,11 @@ export function SonnerExamples() {
 export function AlertExamples() {
   return (
     <div className="space-y-3">
-      <Alert status="info" visual="tinted">
+      <Alert status="default" visual="tinted">
         <InfoIcon className="h-4 w-4" />
         <AlertTitle>New version available</AlertTitle>
         <AlertDescription>
-          A new version of the platform is ready. Review the changelog for
-          details.
-        </AlertDescription>
-      </Alert>
-
-      <Alert status="success" visual="tinted">
-        <CircleCheckIcon className="h-4 w-4" />
-        <AlertTitle>Changes saved</AlertTitle>
-        <AlertDescription>
-          Your configuration has been updated successfully.
+          A new version of the platform is ready. Review the changelog for details.
         </AlertDescription>
       </Alert>
 
@@ -120,7 +111,7 @@ function DismissibleAlert({
   visual = "outline",
 }: {
   children: ReactNode;
-  status: "info" | "success" | "warning" | "error";
+  status: "default" | "warning" | "error";
   visual?: "outline" | "tinted" | "subtle";
 }) {
   const [visible, setVisible] = useState(true);
@@ -147,7 +138,7 @@ export function AlertOutlineExamples() {
 
   return (
     <div className="space-y-3" key={resetKey}>
-      <DismissibleAlert status="info">
+      <DismissibleAlert status="default">
         <InfoIcon className="h-4 w-4" />
         <AlertTitle>New version available</AlertTitle>
         <AlertDescription>
@@ -156,14 +147,6 @@ export function AlertOutlineExamples() {
         </AlertDescription>
       </DismissibleAlert>
 
-      <DismissibleAlert status="success">
-        <CircleCheckIcon className="h-4 w-4" />
-        <AlertTitle>Changes saved</AlertTitle>
-        <AlertDescription>
-          Your configuration has been updated successfully.
-        </AlertDescription>
-      </DismissibleAlert>
-
       <DismissibleAlert status="warning">
         <TriangleAlertIcon className="h-4 w-4" />
         <AlertTitle>API rate limit approaching</AlertTitle>
@@ -193,55 +176,6 @@ export function AlertOutlineExamples() {
   );
 }
 
-// Docs-only: subtle alerts use bg-secondary in light mode to distinguish from the page background
-const alertSubtleBgStyles = `
-  :root:not(.dark) .alert-subtle-bg [data-slot="alert"] {
-    background-color: var(--secondary) !important;
-  }
-`;
-
-export function AlertDefaultExamples() {
-  return (
-    <div className="alert-subtle-bg space-y-3">
-      <style>{alertSubtleBgStyles}</style>
-      <Alert status="info" visual="subtle">
-        <InfoIcon className="h-4 w-4" />
-        <AlertTitle>New version available</AlertTitle>
-        <AlertDescription>
-          A new version of the platform is ready. Review the changelog for
-          details.
-        </AlertDescription>
-      </Alert>
-
-      <Alert status="success" visual="subtle">
-        <CircleCheckIcon className="h-4 w-4" />
-        <AlertTitle>Changes saved</AlertTitle>
-        <AlertDescription>
-          Your configuration has been updated successfully.
-        </AlertDescription>
-      </Alert>
-
-      <Alert status="warning" visual="subtle">
-        <TriangleAlertIcon className="h-4 w-4" />
-        <AlertTitle>API rate limit approaching</AlertTitle>
-        <AlertDescription>
-          You have used 90% of your monthly API quota. Consider upgrading your
-          plan.
-        </AlertDescription>
-      </Alert>
-
-      <Alert status="error" visual="subtle">
-        <OctagonXIcon className="h-4 w-4" />
-        <AlertTitle>Connection failed</AlertTitle>
-        <AlertDescription>
-          Unable to reach the server. Check your network connection and try
-          again.
-        </AlertDescription>
-      </Alert>
-    </div>
-  );
-}
-
 const missingDocs = [
   "W-9 Form",
   "Proof of Address",
@@ -323,7 +257,7 @@ export function CollapsibleAlertExample() {
 
 export function ActionAlertExample() {
   return (
-    <Alert status="info" visual="outline">
+    <Alert status="default" visual="outline">
       <InfoIcon className="h-4 w-4" />
       <AlertTitle>12 documents unclassified</AlertTitle>
       <AlertDescription>

apps/apollo-vertex/app/patterns/notifications/in-product/page.mdx

@@ -1,4 +1,4 @@
-import { SonnerExamples, AlertExamples, AlertOutlineExamples, AlertDefaultExamples, CollapsibleAlertExample, ActionAlertExample } from './notification-examples'
+import { SonnerExamples, AlertExamples, AlertOutlineExamples, CollapsibleAlertExample, ActionAlertExample } from './notification-examples'
 import { LayoutDiagram } from './layout-diagram'
 
 # In-product notification
@@ -123,22 +123,21 @@ Inline notifications may be persistent or dismissible depending on priority.
 
 ### Choosing a visual style
 
-Inline alerts support three visual styles. Choose based on the urgency and importance of the message — not personal preference. Do not mix styles within the same context.
+Inline alerts support two visual styles. Choose based on the urgency and importance of the message — not personal preference. Do not mix styles within the same context.
 
 | Style | Variant | When to use | Dismissible |
 |---|---|---|---|
-| Default | Subtle | Routine info, background updates, non-disruptive confirmations | Optional |
+| Default | Tinted | Routine info, background updates, blocking errors, unresolved issues | No |
 | Accent | Outline | Contextual warnings, guidance, acknowledged states, unresolved requirements | Context-dependent |
-| Bold | Tinted | Critical issues, blocking errors, authentication failures | No |
 
-> When unsure, start with **default**. Escalate only when the message demands immediate attention or blocks progress.
+> When unsure, start with **default**. Use Accent only when the message needs a distinct visual call-out.
 
-#### Default (subtle)
+#### Default (tinted)
 
-Neutral background with status color on the title and icon. Description text uses the standard muted color. Use for routine information, background updates, and non-disruptive feedback.
+Low-opacity status background with neutral title text. Use for critical messages that demand immediate attention or block progress.
 
 <div className="p-4 border rounded-lg mt-4">
-  <AlertDefaultExamples />
+  <AlertExamples />
 </div>
 
 #### Accent (outline)
@@ -149,14 +148,6 @@ Status color on the border and icon, with default text colors. Use for contextua
   <AlertOutlineExamples />
 </div>
 
-#### Bold (tinted)
-
-Full status-colored background with white text in dark mode. Use for critical messages that demand immediate attention or block progress.
-
-<div className="p-4 border rounded-lg mt-4">
-  <AlertExamples />
-</div>
-
 ### Complex alert patterns (edge cases)
 
 The patterns above cover the majority of notification needs. The following compositions are reserved for complex workflows where a standard alert is not sufficient. Do not use these as defaults — reach for them only when the workflow genuinely requires inline items or embedded actions.
@@ -241,15 +232,15 @@ Each notification has a status that communicates tone and urgency through color
 
 Notification statuses align with the [Badge](/shadcn-components/badge) status system for consistent semantic meaning across the design system.
 
-| Status | Usage | Token | Color | Inline notes |
-|---|---|---|---|---|
-| `info` | General updates, FYIs | `--info` | `oklch(0.60 0.125 210)` | Best for passive or contextual information |
-| `success` | Confirmation of completed tasks | `--success` | `oklch(0.57 0.105 152)` | Inline only when tied to direct user action |
-| `warning` | Potential issues or unintended consequences | `--warning` | `oklch(0.80 0.1401 80.82)` | Appropriate for both persistent and action-related messages |
-| `error` | Failures, blockers, critical issues | `--destructive` | `oklch(0.62 0.150 18)` | Inline only when tied to validation or error resolution |
+| Status | Usage | Token | Color | Sonner | Alert |
+|---|---|---|---|---|---|
+| `info` | General updates, FYIs | `--info` | `oklch(0.60 0.125 210)` | `toast.info()` | Use `status="default"` |
+| `success` | Confirmation of completed tasks | `--success` | `oklch(0.57 0.105 152)` | `toast.success()` | Not available — Sonner only |
+| `warning` | Potential issues or unintended consequences | `--warning` | `oklch(0.80 0.1401 80.82)` | `toast.warning()` | `status="warning"` |
+| `error` | Failures, blockers, critical issues | `--destructive` | `oklch(0.62 0.150 18)` | `toast.error()` | `status="error"` |
 
-> Inline notifications should use **success** or **error** only when tied to a user-initiated action.
-> For persistent system guidance or background alerts, use **info** or **warning**.
+> The Alert component supports `status="default"`, `status="warning"`, and `status="error"`. Use Sonner for success confirmations.
+> For persistent system guidance or background alerts, use `default` or `warning` in Alert.
 
 ---
 
@@ -341,8 +332,7 @@ Avoid driving users away from their workflow unless necessary.
 
 | Question | Answer | Style |
 |---|---|---|
-| Is the message routine, informational, or non-disruptive? | Yes | Default (subtle) |
+| Is the message routine, informational, or requires immediate attention? | Yes | Default (tinted) |
 | Is the message contextual, a warning, or an unresolved requirement? | Yes | Accent (outline) |
-| Does the message block progress or require immediate action? | Yes | Bold (tinted) |
 
-> When unsure, start with **default** and escalate only if the message demands it.
+> When unsure, use **default**. Use Accent only when the message needs a distinct visual call-out.

apps/apollo-vertex/app/shadcn-components/alert/page.mdx

@@ -1,5 +1,5 @@
 import { Callout } from 'nextra/components'
-import { AlertDefaultExamples, AlertOutlineExamples, AlertExamples, CollapsibleAlertExample, ActionAlertExample } from '@/app/patterns/notifications/in-product/notification-examples'
+import { AlertOutlineExamples, AlertExamples, CollapsibleAlertExample, ActionAlertExample } from '@/app/patterns/notifications/in-product/notification-examples'
 
 # Alert
 
@@ -9,12 +9,12 @@ Displays a callout for user attention.
   For guidance on when to use Alert vs. Sonner, visual style selection, and content guidelines, see the [In-product notification](/patterns/notifications/in-product) pattern.
 </Callout>
 
-### Default (subtle)
+### Default (tinted)
 
-Neutral background with status color on the title and icon. Description text uses the standard muted color. Use for routine information, background updates, and non-disruptive feedback.
+Low-opacity status background with neutral title text. Use for critical messages that demand immediate attention.
 
 <div className="p-4 border rounded-lg mt-4">
-  <AlertDefaultExamples />
+  <AlertExamples />
 </div>
 
 ### Accent (outline)
@@ -25,14 +25,6 @@ Status-colored border and icon with default text. Dismissible. Use for contextua
   <AlertOutlineExamples />
 </div>
 
-### Bold (tinted)
-
-Full status-colored background. Use for critical messages that demand immediate attention.
-
-<div className="p-4 border rounded-lg mt-4">
-  <AlertExamples />
-</div>
-
 ## Installation
 
 ```bash
@@ -45,14 +37,14 @@ npx shadcn@latest add @uipath/alert
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 ```
 
-### Subtle (default)
+### Tinted (default)
 
 ```tsx
-<Alert status="info" visual="subtle">
-  <InfoIcon className="h-4 w-4" />
-  <AlertTitle>New version available</AlertTitle>
+<Alert status="error" visual="tinted">
+  <OctagonXIcon className="h-4 w-4" />
+  <AlertTitle>Connection failed</AlertTitle>
   <AlertDescription>
-    A new version of the platform is ready. Review the changelog for details.
+    Unable to reach the server. Check your network connection and try again.
   </AlertDescription>
 </Alert>
 ```
@@ -69,104 +61,19 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 </Alert>
 ```
 
-### Tinted
-
-```tsx
-<Alert status="error" visual="tinted">
-  <OctagonXIcon className="h-4 w-4" />
-  <AlertTitle>Connection failed</AlertTitle>
-  <AlertDescription>
-    Unable to reach the server. Check your network connection and try again.
-  </AlertDescription>
-</Alert>
-```
-
 ### Props
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `status` | `"info" \| "success" \| "warning" \| "error"` | — | Sets the semantic status color |
+| `status` | `"default" \| "warning" \| "error"` | — | Sets the semantic status color |
 | `visual` | `"outline" \| "tinted" \| "subtle"` | — | Sets the visual treatment |
 | `variant` | `"default" \| "destructive"` | `"default"` | Legacy shadcn variant (use `status` + `visual` instead) |
 
 ## Complex alert patterns (edge cases)
 
-The following patterns are for workflows that need inline items or embedded actions inside an alert. Use sparingly — standard alerts cover most cases.
-
-### Collapsible content
+For guidance on when and how to use these patterns, see [In-product notification](/patterns/notifications/in-product#complex-alert-patterns-edge-cases).
 
-When an alert references a list of items, show them as inline chips. If they overflow a single row, clip to one row and show a "Show all" link. Any `status` can be used with this pattern.
-
-<div className="p-4 border rounded-lg mt-4">
+<div className="p-4 border rounded-lg mt-4 space-y-3">
   <CollapsibleAlertExample />
-</div>
-
-```tsx
-import { useState, useRef, useEffect } from "react"
-import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
-import { Badge } from "@/components/ui/badge"
-
-export function CollapsibleAlertExample() {
-  const [expanded, setExpanded] = useState(false)
-  const [overflows, setOverflows] = useState(false)
-  const [rowHeight, setRowHeight] = useState(0)
-  const measureRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const el = measureRef.current
-    if (!el) return
-    const firstChild = el.firstElementChild as HTMLElement | null
-    if (!firstChild) return
-    const singleRow = firstChild.offsetHeight + 6
-    setRowHeight(singleRow)
-    setOverflows(el.scrollHeight > singleRow)
-  }, [])
-
-  return (
-    <Alert status="warning" visual="outline">
-      <TriangleAlertIcon className="h-4 w-4" />
-      <AlertTitle className="line-clamp-none">
-        {items.length} required documents missing
-      </AlertTitle>
-      <AlertDescription>
-        <p>Upload these documents before completing quality check.</p>
-        <div ref={measureRef} style={{ position: "absolute", visibility: "hidden", left: 0, right: 0 }}
-          className="flex flex-wrap gap-1.5 mt-2">
-          {items.map((item) => <Badge key={item} variant="secondary" status="warning">{item}</Badge>)}
-        </div>
-        <div style={!expanded && overflows && rowHeight ? { maxHeight: rowHeight, overflow: "hidden" } : {}}
-          className="flex flex-wrap gap-1.5 mt-2">
-          {items.map((item) => <Badge key={item} variant="secondary" status="warning">{item}</Badge>)}
-        </div>
-        {overflows && (
-          <button type="button" onClick={() => setExpanded(!expanded)}
-            className="mt-1.5 text-xs font-medium text-primary hover:underline">
-            {expanded ? "Show less" : "Show all"}
-          </button>
-        )}
-      </AlertDescription>
-    </Alert>
-  )
-}
-```
-
-### Action button
-
-When an alert can trigger a direct action, place a single button inside the description area. Limit to one action per alert. Any `status` can be used with this pattern.
-
-<div className="p-4 border rounded-lg mt-4">
   <ActionAlertExample />
 </div>
-
-```tsx
-<Alert status="info" visual="outline">
-  <InfoIcon className="h-4 w-4" />
-  <AlertTitle>12 documents unclassified</AlertTitle>
-  <AlertDescription>
-    <p>Some documents could not be automatically classified.</p>
-    <Button variant="outline" size="sm" className="mt-1.5">
-      Filter unclassified
-    </Button>
-  </AlertDescription>
-</Alert>
-```