feat(actionable-notifications): add caption prop (#19973)

* feat(actionable-notifications): add caption prop

* fix(controls): update

Author: ariellalgilmore

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -225,6 +225,9 @@ Map {
         "type": "string",
       },
       "ariaLabel": [Function],
+      "caption": Object {
+        "type": "string",
+      },
       "children": Object {
         "type": "node",
       },

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

@@ -826,6 +826,11 @@ export interface ActionableNotificationProps
    */
   'aria-label'?: string;
 
+  /**
+   * Specify the caption
+   */
+  caption?: string;
+
   /**
    * Specify the content
    */
@@ -918,6 +923,7 @@ export function ActionableNotification({
   ['aria-label']: ariaLabel,
   // @ts-expect-error: deprecated prop
   ariaLabel: deprecatedAriaLabel,
+  caption,
   children,
   role = 'alertdialog',
   onActionButtonClick,
@@ -1060,6 +1066,13 @@ export function ActionableNotification({
                 {subtitle}
               </Text>
             )}
+            {caption && (
+              <Text
+                as="div"
+                className={`${prefix}--actionable-notification__caption`}>
+                {caption}
+              </Text>
+            )}
             {children}
           </div>
         </div>
@@ -1116,6 +1129,11 @@ ActionableNotification.propTypes = {
     'This prop syntax has been deprecated. Please use the new `aria-label`.'
   ),
 
+  /**
+   * Specify the caption
+   */
+  caption: PropTypes.string,
+
   /**
    * Specify the content
    */

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

@@ -341,6 +341,20 @@ describe('ActionableNotification', () => {
       expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
     });
   });
+
+  it('supports `title`, `subtitle`, `caption` props', () => {
+    render(
+      <ActionableNotification
+        title="A title"
+        subtitle="A subtitle"
+        caption="00:00:00 AM"
+        actionButtonLabel="My custom action"></ActionableNotification>
+    );
+    // 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(/00:00:00 AM/i)).toBeInTheDocument();
+  });
 });
 
 // TODO: Remove StaticNotification tests when StaticNotification is removed (v12)

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

@@ -30,7 +30,9 @@ export default {
   },
 };
 
-export const Default = (args) => <ActionableNotification {...args} />;
+export const Default = (args) => (
+  <ActionableNotification {...args}></ActionableNotification>
+);
 
 Default.argTypes = {
   ['aria-label']: {

packages/styles/scss/components/notification/_actionable-notification.scss

@@ -280,6 +280,19 @@
     .#{$prefix}--actionable-notification__subtitle {
     color: $text-primary;
   }
+
+  .#{$prefix}--actionable-notification__caption {
+    @include type-style('body-compact-01');
+
+    color: $text-inverse;
+    padding-block-start: $spacing-06;
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__caption {
+    color: $text-primary;
+  }
+
   /* Ghost action button when inline */
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
     block-size: convert.to-rem(32px);

packages/web-components/src/components/notification/actionable-notification.stories.ts

@@ -37,6 +37,10 @@ const argTypes = {
     description:
       'Pass in the action button label that will be rendered within the ActionableNotification.',
   },
+  caption: {
+    control: 'text',
+    description: 'Specify the caption.',
+  },
   closeOnEscape: {
     control: 'boolean',
     description:
@@ -111,6 +115,7 @@ export const Playground = {
   render: (args) => {
     const {
       actionButtonLabel,
+      caption,
       closeOnEscape,
       hasFocus,
       kind,
@@ -135,6 +140,7 @@ export const Playground = {
       <cds-actionable-notification
         ?close-on-escape="${closeOnEscape}"
         ?has-focus="${hasFocus}"
+        caption="${ifDefined(caption)}"
         kind="${ifDefined(kind)}"
         title="${ifDefined(title)}"
         subtitle="${ifDefined(subtitle)}"

packages/web-components/src/components/notification/actionable-notification.ts

@@ -238,7 +238,7 @@ class CDSActionableNotification extends HostListenerMixin(
   }
 
   protected _renderText() {
-    const { subtitle, title, _type: type } = this;
+    const { caption, subtitle, title, _type: type } = this;
     return html`
       <div class="${prefix}--${type}-notification__text-wrapper">
         <div class="${prefix}--${type}-notification__content">
@@ -248,6 +248,10 @@ class CDSActionableNotification extends HostListenerMixin(
           <div class="${prefix}--${type}-notification__subtitle">
             ${subtitle}<slot name="subtitle"></slot>
           </div>
+          ${caption &&
+          html`<div class="${prefix}--${type}-notification__caption">
+            ${caption}<slot name="caption"></slot>
+          </div>`}
           <slot></slot>
         </div>
       </div>