diff --git a/.changeset/lovely-houses-argue.md b/.changeset/lovely-houses-argue.md new file mode 100644 index 0000000000..cfd902a958 --- /dev/null +++ b/.changeset/lovely-houses-argue.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Added optional anchorOrigin alignment prop to AlertDisplay diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 3b3a589ecb..a195d62496 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -51,8 +51,16 @@ import { Theme } from '@material-ui/core/styles'; import { TooltipProps } from '@material-ui/core/Tooltip'; import { WithStyles } from '@material-ui/core/styles'; +// @public (undocumented) +export function AlertDisplay(props: AlertDisplayProps): JSX.Element | null; + // @public -export function AlertDisplay(_props: {}): JSX.Element | null; +export type AlertDisplayProps = { + anchorOrigin?: { + vertical: 'top' | 'bottom'; + horizontal: 'left' | 'center' | 'right'; + }; +}; // @public enum Alignment { diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index 5d90979557..3af261da23 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -28,13 +28,25 @@ import pluralize from 'pluralize'; * @public * @remarks * - * Shown as SnackBar at the top of the page + * Shown as SnackBar at the center top of the page by default. Configurable with props. */ + // TODO: improve on this and promote to a shared component for use by all apps. -export function AlertDisplay(_props: {}) { + +export type AlertDisplayProps = { + anchorOrigin?: { + vertical: 'top' | 'bottom'; + horizontal: 'left' | 'center' | 'right'; + }; +}; + +/** @public */ +export function AlertDisplay(props: AlertDisplayProps) { const [messages, setMessages] = useState>([]); const alertApi = useApi(alertApiRef); + const { anchorOrigin = { vertical: 'top', horizontal: 'center' } } = props; + useEffect(() => { const subscription = alertApi .alert$() @@ -56,7 +68,7 @@ export function AlertDisplay(_props: {}) { }; return ( - +