feat(CAlert): add transition, onClosed and ariaCloseLabel (#491)

* feat(CAlert): add transition prop and onClosed callback

Adds a `transition` prop (default true, matching CModal) that controls the fade
animation, decoupling `fade` from `dismissible` — a non-dismissible alert now
fades by default, and `transition={false}` renders it without animation. Adds an
`onClosed` callback fired after the close transition completes (React `onExited`),
mirroring Bootstrap's `closed.coreui.alert` event.

Part of the cross-framework alert test-parity work; ports the same API to Vue.

* feat(CAlert): add ariaCloseLabel prop

Makes the dismissible close button's aria-label configurable (default "Close")
via a new ariaCloseLabel prop, forwarded to CCloseButton.

Author: mrholek

packages/coreui-react/src/components/alert/CAlert.tsx

@@ -10,6 +10,12 @@ import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
 export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Sets the `aria-label` of the dismissible close button.
+   *
+   * @since 5.13.0
+   */
+  ariaCloseLabel?: string
   /**
    * A string of all className you want applied to the component.
    */
@@ -28,6 +34,18 @@ export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
    * Callback fired when the component requests to be closed.
    */
   onClose?: () => void
+  /**
+   * Callback fired when the component has been closed and the CSS transition has completed.
+   *
+   * @since 5.13.0
+   */
+  onClosed?: () => void
+  /**
+   * Set whether the alert fades in and out when it is shown and hidden. Set to `false` to make it appear and disappear without a fade animation.
+   *
+   * @since 5.13.0
+   */
+  transition?: boolean
   /**
    * Set the alert variant to a solid.
    */
@@ -42,12 +60,15 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
   (
     {
       children,
+      ariaCloseLabel = 'Close',
       className,
       color = 'primary',
       dismissible,
+      transition = true,
       variant,
       visible = true,
       onClose,
+      onClosed,
       ...rest
     },
     ref
@@ -66,7 +87,8 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
         mountOnEnter
         nodeRef={alertRef}
         onExit={onClose}
-        timeout={150}
+        onExited={onClosed}
+        timeout={transition ? 150 : 0}
         unmountOnExit
       >
         {(state) => (
@@ -75,7 +97,8 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
               'alert',
               variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
               {
-                'alert-dismissible fade': dismissible,
+                'alert-dismissible': dismissible,
+                fade: transition,
                 show: state === 'entered',
               },
               className
@@ -85,7 +108,9 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
             ref={forkedRef}
           >
             {children}
-            {dismissible && <CCloseButton onClick={() => setVisible(false)} />}
+            {dismissible && (
+              <CCloseButton aria-label={ariaCloseLabel} onClick={() => setVisible(false)} />
+            )}
           </div>
         )}
       </Transition>
@@ -94,11 +119,14 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
 )
 
 CAlert.propTypes = {
+  ariaCloseLabel: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType.isRequired,
   dismissible: PropTypes.bool,
   onClose: PropTypes.func,
+  onClosed: PropTypes.func,
+  transition: PropTypes.bool,
   variant: PropTypes.string,
   visible: PropTypes.bool,
 }

packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { act, render, fireEvent } from '@testing-library/react'
+import { act, render, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CAlert } from '../index'
 
@@ -45,6 +45,15 @@ describe('CAlert', () => {
       expect(container.querySelector('.btn-close')).toBeInTheDocument()
     })
 
+    it('should set a custom close button label', () => {
+      const { container } = render(
+        <CAlert color="primary" dismissible ariaCloseLabel="Zamknij">
+          Test
+        </CAlert>
+      )
+      expect(container.querySelector('.btn-close')).toHaveAttribute('aria-label', 'Zamknij')
+    })
+
     it('should close an alert', () => {
       vi.useFakeTimers()
       const onClose = vi.fn()
@@ -62,6 +71,35 @@ describe('CAlert', () => {
       expect(onClose).toHaveBeenCalledTimes(1)
       vi.useRealTimers()
     })
+
+    it('should emit closed after the transition', async () => {
+      const onClosed = vi.fn()
+      const { container } = render(
+        <CAlert color="primary" dismissible onClosed={onClosed}>
+          Test
+        </CAlert>
+      )
+
+      fireEvent.click(container.querySelector('.btn-close')!)
+
+      await waitFor(() => expect(onClosed).toHaveBeenCalledTimes(1))
+    })
+  })
+
+  describe('transition', () => {
+    it('should apply the fade class', () => {
+      const { container } = render(<CAlert color="primary">Test</CAlert>)
+      expect(container.firstChild).toHaveClass('fade')
+    })
+
+    it('should not apply the fade class when transition is disabled', () => {
+      const { container } = render(
+        <CAlert color="primary" transition={false}>
+          Test
+        </CAlert>
+      )
+      expect(container.firstChild).not.toHaveClass('fade')
+    })
   })
 
   describe('visibility', () => {

packages/docs/src/api/CAlert.api.json

@@ -1,6 +1,14 @@
 {
   "name": "CAlert",
   "props": [
+    {
+      "name": "ariaCloseLabel",
+      "type": "string | undefined",
+      "default": "Close",
+      "description": "Sets the `aria-label` of the dismissible close button.",
+      "since": "5.13.0",
+      "deprecated": null
+    },
     {
       "name": "className",
       "type": "string | undefined",
@@ -33,6 +41,22 @@
       "since": null,
       "deprecated": null
     },
+    {
+      "name": "onClosed",
+      "type": "(() => void) | undefined",
+      "default": null,
+      "description": "Callback fired when the component has been closed and the CSS transition has completed.",
+      "since": "5.13.0",
+      "deprecated": null
+    },
+    {
+      "name": "transition",
+      "type": "boolean | undefined",
+      "default": true,
+      "description": "Set whether the alert fades in and out when it is shown and hidden. Set to `false` to make it appear and disappear without a fade animation.",
+      "since": "5.13.0",
+      "deprecated": null
+    },
     {
       "name": "variant",
       "type": "string | undefined",