From 41d677570d61d717571895300ab831b4a98f974a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Mall=C4=B1?= Date: Mon, 25 Apr 2022 18:01:37 +0300 Subject: [PATCH 1/7] Added anchorOrigin props to AlertDisplay MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı --- .../src/components/AlertDisplay/AlertDisplay.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index 5d90979557..6be2fcda49 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -31,10 +31,18 @@ import pluralize from 'pluralize'; * Shown as SnackBar at the top of the page */ // TODO: improve on this and promote to a shared component for use by all apps. -export function AlertDisplay(_props: {}) { + +type Props = { + vertical?: 'top' | 'bottom'; + horizontal?: 'left' | 'center' | 'right'; +} + +export function AlertDisplay(props: Props) { const [messages, setMessages] = useState>([]); const alertApi = useApi(alertApiRef); + const { vertical = 'top', horizontal = 'center' } = props; + useEffect(() => { const subscription = alertApi .alert$() @@ -56,7 +64,7 @@ export function AlertDisplay(_props: {}) { }; return ( - + Date: Mon, 25 Apr 2022 18:31:45 +0300 Subject: [PATCH 2/7] Changed comment to conform to the updates. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı --- .../src/components/AlertDisplay/AlertDisplay.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index 6be2fcda49..a16d29e038 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -28,14 +28,15 @@ 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. type Props = { vertical?: 'top' | 'bottom'; horizontal?: 'left' | 'center' | 'right'; -} +}; export function AlertDisplay(props: Props) { const [messages, setMessages] = useState>([]); @@ -64,7 +65,7 @@ export function AlertDisplay(props: Props) { }; return ( - + Date: Mon, 25 Apr 2022 18:32:32 +0300 Subject: [PATCH 3/7] Added changeset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı --- .changeset/lovely-houses-argue.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lovely-houses-argue.md diff --git a/.changeset/lovely-houses-argue.md b/.changeset/lovely-houses-argue.md new file mode 100644 index 0000000000..ab105970a2 --- /dev/null +++ b/.changeset/lovely-houses-argue.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Added optional vertical and horizontal alignment props to AlertDisplay From f720944acd1a11832dfd008ce85af01e25251983 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Mall=C4=B1?= Date: Mon, 25 Apr 2022 18:52:35 +0300 Subject: [PATCH 4/7] updated api-report MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı --- packages/core-components/api-report.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 3b3a589ecb..409ab5682b 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -52,7 +52,13 @@ import { TooltipProps } from '@material-ui/core/Tooltip'; import { WithStyles } from '@material-ui/core/styles'; // @public -export function AlertDisplay(_props: {}): JSX.Element | null; +export type AlertDisplayProps = { + vertical?: 'top' | 'bottom'; + horizontal?: 'left' | 'center' | 'right'; +}; + +// @public +export function AlertDisplay(props: AlertDisplayProps): JSX.Element | null; // @public enum Alignment { From b785ebfeb9c69a0f467ee0dec156659072e50b33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Mall=C4=B1?= Date: Mon, 25 Apr 2022 18:52:56 +0300 Subject: [PATCH 5/7] changed prop type name MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı --- .../src/components/AlertDisplay/AlertDisplay.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index a16d29e038..a2a809bae6 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -33,12 +33,12 @@ import pluralize from 'pluralize'; // TODO: improve on this and promote to a shared component for use by all apps. -type Props = { +export type AlertDisplayProps = { vertical?: 'top' | 'bottom'; horizontal?: 'left' | 'center' | 'right'; }; -export function AlertDisplay(props: Props) { +export function AlertDisplay(props: AlertDisplayProps) { const [messages, setMessages] = useState>([]); const alertApi = useApi(alertApiRef); From c33e5d9de3f26b224a64c76db7a46d6dd749836e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Mall=C4=B1?= Date: Mon, 25 Apr 2022 19:16:05 +0300 Subject: [PATCH 6/7] generated api-report MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı Signed-off-by: Mehmet Mallı --- packages/core-components/api-report.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 409ab5682b..a54219af56 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -51,13 +51,10 @@ import { Theme } from '@material-ui/core/styles'; import { TooltipProps } from '@material-ui/core/Tooltip'; import { WithStyles } from '@material-ui/core/styles'; -// @public -export type AlertDisplayProps = { - vertical?: 'top' | 'bottom'; - horizontal?: 'left' | 'center' | 'right'; -}; - -// @public +// 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 From 545ce687a3521a9e5f267fb23a4574d22f79b0af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Mall=C4=B1?= Date: Thu, 28 Apr 2022 23:56:03 +0300 Subject: [PATCH 7/7] changed alignment props to anchorOrigin and fixed api-report.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Mehmet Mallı --- .changeset/lovely-houses-argue.md | 2 +- packages/core-components/api-report.md | 11 ++++++++--- .../src/components/AlertDisplay/AlertDisplay.tsx | 11 +++++++---- .../src/components/AlertDisplay/index.ts | 2 +- 4 files changed, 17 insertions(+), 9 deletions(-) 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 ( - +