diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index a7395aff7703..bdd5de9de3b8 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -7207,6 +7207,9 @@ Map { }, "StaticNotification" => Object { "propTypes": Object { + "actionButtonLabel": Object { + "type": "string", + }, "children": Object { "type": "node", }, @@ -7229,6 +7232,9 @@ Map { "lowContrast": Object { "type": "bool", }, + "onActionButtonClick": Object { + "type": "func", + }, "statusIconDescription": Object { "type": "string", }, diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx index 43ec2e6b9441..221e5cf6aaba 100644 --- a/packages/react/src/components/Notification/Notification.tsx +++ b/packages/react/src/components/Notification/Notification.tsx @@ -1182,6 +1182,11 @@ ActionableNotification.propTypes = { export interface StaticNotificationProps extends HTMLAttributes { + /** + * Pass in the action button label that will be rendered within the ActionableNotification. + */ + actionButtonLabel?: string; + /** * Specify the content */ @@ -1208,6 +1213,11 @@ export interface StaticNotificationProps */ lowContrast?: boolean; + /** + * Provide a function that is called when the action is clicked + */ + onActionButtonClick?(): void; + /** * Provide a description for "status" icon that can be read by screen readers */ @@ -1230,7 +1240,9 @@ export interface StaticNotificationProps } export function StaticNotification({ + actionButtonLabel, children, + onActionButtonClick, title, titleId, subtitle, @@ -1242,10 +1254,10 @@ export function StaticNotification({ }: StaticNotificationProps) { const prefix = usePrefix(); const containerClassName = cx(className, { - [`${prefix}--inline-notification`]: true, - [`${prefix}--inline-notification--low-contrast`]: lowContrast, - [`${prefix}--inline-notification--${kind}`]: kind, - [`${prefix}--inline-notification--hide-close-button`]: true, + [`${prefix}--actionable-notification`]: true, + [`${prefix}--actionable-notification--low-contrast`]: lowContrast, + [`${prefix}--actionable-notification--${kind}`]: kind, + [`${prefix}--actionable-notification--hide-close-button`]: true, }); const ref = useRef(null); @@ -1256,36 +1268,48 @@ export function StaticNotification({ return (
-
+
-
+
{title && ( + className={`${prefix}--actionable-notification__title`}> {title} )} {subtitle && ( + className={`${prefix}--actionable-notification__subtitle`}> {subtitle} )} {children}
+
+ {actionButtonLabel && ( + + {actionButtonLabel} + + )} +
); } StaticNotification.propTypes = { + /** + * Pass in the action button label that will be rendered within the ActionableNotification. + */ + actionButtonLabel: PropTypes.string, + /** * Specify the content */ @@ -1313,6 +1337,11 @@ StaticNotification.propTypes = { */ lowContrast: PropTypes.bool, + /** + * Provide a function that is called when the action is clicked + */ + onActionButtonClick: PropTypes.func, + /** * Provide a description for "status" icon that can be read by screen readers */ diff --git a/packages/react/src/components/Notification/stories/StaticNotification.stories.js b/packages/react/src/components/Notification/stories/StaticNotification.stories.js index 13ad6b18603c..12efd46dd2b3 100644 --- a/packages/react/src/components/Notification/stories/StaticNotification.stories.js +++ b/packages/react/src/components/Notification/stories/StaticNotification.stories.js @@ -48,6 +48,27 @@ export const WithInteractiveElements = () => ( ); +export const WithActionButton = () => ( + +
+ + Create + {' '} + or{' '} + + register + {' '} + a cluster before creating a Configuration. Some additional info could go + here to show that this notification subtitle goes below the title. +
+
+); + export const Playground = (args) => ; Playground.argTypes = {