diff --git a/.changeset/strong-rice-warn.md b/.changeset/strong-rice-warn.md index c4fc28180b..30207e9d63 100644 --- a/.changeset/strong-rice-warn.md +++ b/.changeset/strong-rice-warn.md @@ -3,18 +3,18 @@ '@backstage/core-plugin-api': patch --- -Added option to allow the `AlertMessage` to be self-closing. This is done with a new `transient` boolean that is set on the `AlertMessage`. The length of time that these transient message stay open for can be set using the `transientTimeoutMs` prop on the `AlertDisplay` in the `App.tsx`. Here is an example: +Added an option to allow the `AlertMessage` to be self-closing. This is done with a new `display` property that is set to `transient` on the `AlertMessage`. The length of time that these transient message stay open for can be set using the `transientTimeoutMs` prop on the `AlertDisplay` in the `App.tsx`. Here is an example: ```diff - const App = () => ( - -+ - - - {routes} - - - ); + const App = () => ( + ++ + + + {routes} + + + ); ``` The above example will set the transient timeout to 2500ms from the default of 5000ms @@ -29,7 +29,7 @@ const exampleTransient = () => { alertApi.post({ message: 'Example of Transient Alert', severity: 'success', - transient: true, + display: 'transient', }); }; ``` diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index 3b9065b5dd..75cb2c78de 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -64,7 +64,7 @@ export function AlertDisplay(props: AlertDisplayProps) { useEffect(() => { const [current] = messages; - if (current && current.transient) + if (current && current.display === 'transient') setTimeout(() => { setMessages(msgs => msgs.filter(msg => msg !== current)); }, timeoutMs); diff --git a/packages/core-plugin-api/api-report.md b/packages/core-plugin-api/api-report.md index 3145f18e79..dff4f7e5a6 100644 --- a/packages/core-plugin-api/api-report.md +++ b/packages/core-plugin-api/api-report.md @@ -29,7 +29,7 @@ export const alertApiRef: ApiRef; export type AlertMessage = { message: string; severity?: 'success' | 'info' | 'warning' | 'error'; - transient?: boolean; + display?: 'permanent' | 'transient'; }; // @public diff --git a/packages/core-plugin-api/src/apis/definitions/AlertApi.ts b/packages/core-plugin-api/src/apis/definitions/AlertApi.ts index c9c731530f..afdcb6a617 100644 --- a/packages/core-plugin-api/src/apis/definitions/AlertApi.ts +++ b/packages/core-plugin-api/src/apis/definitions/AlertApi.ts @@ -26,7 +26,7 @@ export type AlertMessage = { message: string; // Severity will default to success since that is what material ui defaults the value to. severity?: 'success' | 'info' | 'warning' | 'error'; - transient?: boolean; + display?: 'permanent' | 'transient'; }; /**