diff --git a/.changeset/lovely-houses-argue.md b/.changeset/lovely-houses-argue.md index ab105970a2..cfd902a958 100644 --- a/.changeset/lovely-houses-argue.md +++ b/.changeset/lovely-houses-argue.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Added optional vertical and horizontal alignment props to AlertDisplay +Added optional anchorOrigin alignment prop to AlertDisplay diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index a54219af56..a195d62496 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -51,12 +51,17 @@ import { Theme } from '@material-ui/core/styles'; import { TooltipProps } from '@material-ui/core/Tooltip'; import { WithStyles } from '@material-ui/core/styles'; -// Warning: (ae-forgotten-export) The symbol "AlertDisplayProps" needs to be exported by the entry point index.d.ts -// Warning: (ae-missing-release-tag) "AlertDisplay" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export function AlertDisplay(props: AlertDisplayProps): JSX.Element | null; +// @public +export type AlertDisplayProps = { + anchorOrigin?: { + vertical: 'top' | 'bottom'; + horizontal: 'left' | 'center' | 'right'; + }; +}; + // @public enum Alignment { DOWN_LEFT = 'DL', diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index a2a809bae6..3af261da23 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -34,15 +34,18 @@ import pluralize from 'pluralize'; // TODO: improve on this and promote to a shared component for use by all apps. export type AlertDisplayProps = { - vertical?: 'top' | 'bottom'; - horizontal?: 'left' | 'center' | 'right'; + anchorOrigin?: { + vertical: 'top' | 'bottom'; + horizontal: 'left' | 'center' | 'right'; + }; }; +/** @public */ export function AlertDisplay(props: AlertDisplayProps) { const [messages, setMessages] = useState>([]); const alertApi = useApi(alertApiRef); - const { vertical = 'top', horizontal = 'center' } = props; + const { anchorOrigin = { vertical: 'top', horizontal: 'center' } } = props; useEffect(() => { const subscription = alertApi @@ -65,7 +68,7 @@ export function AlertDisplay(props: AlertDisplayProps) { }; return ( - +