feat(callout): move to stable (#18586)

* feat(callout): move to stable

* fix(callout): tests and story formatting

* fix: story title/name

* fix(notification): test formatting

---------

Co-authored-by: Preeti Bansal <146315451+preetibansalui@users.noreply.github.com>

Author: tay1orjones

e2e/components/Notifications/Notifications-test.avt.e2e.js

@@ -257,4 +257,15 @@ test.describe('@avt Notifications', () => {
     });
     await expect(page).toHaveNoACViolations('Notifications toast');
   });
+
+  test('@avt-advanced-states callout', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Notifications',
+      id: 'components-notifications-callout--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('Notifications callout');
+  });
 });

e2e/components/Notifications/Notifications-test.e2e.js

@@ -37,6 +37,14 @@ test.describe('Notifications', () => {
           theme,
         });
       });
+
+      test('callout @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Callout',
+          id: 'components-notifications-callout--default',
+          theme,
+        });
+      });
     });
   });
 });

packages/react/code-connect/Notification/Notification.figma.tsx

@@ -11,7 +11,7 @@ import {
   InlineNotification,
   ToastNotification,
   ActionableNotification,
-  unstable__Callout as Callout,
+  Callout,
 } from '@carbon/react';
 import figma from '@figma/code-connect';
 

packages/react/src/components/Notification/Notification.mdx

@@ -26,7 +26,7 @@ import { Canvas, ArgTypes, Meta } from '@storybook/blocks';
 
 There are 4 different types of notification components:
 `ActionableNotification`, `InlineNotification`, `ToastNotification`, and
-`unstable__Callout`.
+`Callout`.
 
 ### ActionableNotification
 
@@ -43,10 +43,10 @@ focus until the action is acted upon or the notification is dismissed.
 elements or rich text. These are announced by screenreaders when rendered. They
 don't grab focus. Use them to provide the user with an alert, status, or log.
 
-### unstable\_\_Callout (previously StaticNotification)
+### Callout (previously StaticNotification)
 
-`unstable__Callout` is non-modal and should only be used inline with content on
-the initial render of the page or modal because it will not be announced to
+`Callout` is non-modal and should only be used inline with content on the
+initial render of the page or modal because it will not be announced to
 screenreader users like the other notification components.
 
 As such, this should not be used for real-time notifications or notifications

packages/react/src/components/Notification/Notification.tsx

@@ -1316,21 +1316,23 @@ export function Callout({
     [`${prefix}--actionable-notification--hide-close-button`]: true,
   });
 
-  const ref = useRef(null);
+  const childrenContainer = useRef(null);
   useInteractiveChildrenNeedDescription(
-    ref,
+    childrenContainer,
     `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``
   );
 
   return (
-    <div ref={ref} {...rest} className={containerClassName}>
+    <div {...rest} className={containerClassName}>
       <div className={`${prefix}--actionable-notification__details`}>
         <NotificationIcon
           notificationType="inline"
           kind={kind}
           iconDescription={statusIconDescription || `${kind} icon`}
         />
-        <div className={`${prefix}--actionable-notification__text-wrapper`}>
+        <div
+          ref={childrenContainer}
+          className={`${prefix}--actionable-notification__text-wrapper`}>
           {title && (
             <Text
               as="div"

packages/react/src/components/Notification/__tests__/Notification-test.js

@@ -343,8 +343,7 @@ describe('ActionableNotification', () => {
   });
 });
 
-// TODO: Remove StaticNotification tests when Callout moves to stable OR in
-// v12, whichever is first. Ensure test parity on Callout.
+// TODO: Remove StaticNotification tests when StaticNotification is removed (v12)
 describe('StaticNotification', () => {
   it('logs a deprecation notice when used', () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
@@ -363,6 +362,83 @@ describe('StaticNotification', () => {
 });
 
 describe('Callout', () => {
+  it('should place the `className` prop on the outermost DOM node', () => {
+    const { container } = render(<Callout className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('calls `onActionButtonClick` when action button is clicked', async () => {
+    const onActionButtonClick = jest.fn();
+    render(
+      <Callout
+        title="Notification title"
+        actionButtonLabel="action-button"
+        onActionButtonClick={onActionButtonClick}
+      />
+    );
+
+    const closeButton = screen.queryByRole('button', {
+      name: 'action-button',
+      hidden: true,
+    });
+    await userEvent.click(closeButton);
+    expect(onActionButtonClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('interpolates matching className based on kind prop', () => {
+    const { rerender, container } = render(
+      <Callout title="Notification title" />
+    );
+    const kinds = ['info', 'warning'];
+    kinds.forEach((kind) => {
+      rerender(<Callout title="Notification title" kind={kind} />);
+      expect(container.firstChild).toHaveClass(
+        `${prefix}--actionable-notification--${kind}`
+      );
+    });
+  });
+
+  it('places low contrast class based on lowContrast prop', () => {
+    const { container } = render(
+      <Callout title="Notification title" lowContrast />
+    );
+    expect(container.firstChild).toHaveClass(
+      `${prefix}--actionable-notification--low-contrast`
+    );
+  });
+
+  it('allows non-interactive elements as children', () => {
+    render(
+      <Callout title="Notification title">
+        <p>Sample text</p>
+      </Callout>
+    );
+    // eslint-disable-next-line testing-library/prefer-presence-queries
+    expect(screen.queryByText(/Sample text/i)).toBeInTheDocument();
+  });
+
+  it('allows interactive elements as children', () => {
+    render(
+      <Callout title="Notification title" titleId="interactive-test">
+        <button aria-describedby="interactive-test">Sample text</button>
+      </Callout>
+    );
+    // eslint-disable-next-line testing-library/prefer-presence-queries
+    expect(screen.queryByText(/Sample text/i)).toBeInTheDocument();
+  });
+
+  it('supports `title`, `subtitle`, `titleId` props', () => {
+    const { container } = render(
+      <Callout title="A title" subtitle="A subtitle" titleId="aTitleID">
+        <p>Sample text</p>
+      </Callout>
+    );
+    // eslint-disable-next-line testing-library/prefer-presence-queries
+    expect(screen.queryByText(/A title/i)).toBeInTheDocument();
+    expect(screen.queryByText(/A subtitle/i)).toBeInTheDocument();
+    expect(screen.queryByText(/A title/i)).toHaveAttribute('id', 'aTitleID');
+  });
+
   it('enforces aria-describedby on interactive children elements', () => {
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
 

packages/react/src/components/Notification/stories/Callout.stories.js

@@ -11,7 +11,7 @@ import { Link } from '../../Link';
 import mdx from '../Notification.mdx';
 
 export default {
-  title: 'Experimental/unstable__Callout',
+  title: 'Components/Notifications/Callout',
   component: Callout,
   parameters: {
     docs: {
@@ -23,11 +23,22 @@ export default {
     lowContrast: false,
     statusIconDescription: 'notification',
   },
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
-// export const Default = () => (
-//   <Callout title="Notification title" subtitle="Subtitle text goes here" />
-// );
+export const Default = (args) => (
+  <Callout
+    title="Notification title"
+    subtitle="Subtitle text goes here"
+    {...args}
+  />
+);
 
 export const WithInteractiveElements = () => (
   <Callout
@@ -44,14 +55,6 @@ export const WithInteractiveElements = () => (
   </Callout>
 );
 
-export const Default = (args) => (
-  <Callout
-    title="Notification title"
-    subtitle="Subtitle text goes here"
-    {...args}
-  />
-);
-
 Default.argTypes = {
   children: {
     table: {

packages/react/src/components/Notification/stories/StaticNotification.stories.js

@@ -12,7 +12,7 @@ import { CodeSnippet } from '../../CodeSnippet';
 import mdx from './StaticNotification.mdx';
 
 export default {
-  title: 'Experimental/unstable__StaticNotification',
+  title: 'Deprecated/unstable__StaticNotification',
   component: StaticNotification,
   parameters: {
     docs: {

packages/react/src/index.js

@@ -106,8 +106,9 @@ export {
   InlineNotification,
   NotificationActionButton,
   NotificationButton,
-  Callout as unstable__Callout,
-  Callout as unstable__StaticNotification,
+  Callout,
+  Callout as unstable__Callout, // TODO remove when telemetry shows zero usage, or in v12
+  Callout as unstable__StaticNotification, // TODO remove when telemetry shows zero usage, or in v12
 } from './components/Notification';
 export { NumberInput, NumberInputSkeleton } from './components/NumberInput';
 export { OrderedList } from './components/OrderedList';