diff --git a/.changeset/odd-goats-kiss.md b/.changeset/odd-goats-kiss.md new file mode 100644 index 0000000000..0f199c1a1e --- /dev/null +++ b/.changeset/odd-goats-kiss.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Added `titleComponent` prop to `SignInPage` component to allow further customization of the title using `ReactNode` diff --git a/packages/core-components/src/layout/SignInPage/SignInPage.tsx b/packages/core-components/src/layout/SignInPage/SignInPage.tsx index 95d96b701a..fb8f804d5e 100644 --- a/packages/core-components/src/layout/SignInPage/SignInPage.tsx +++ b/packages/core-components/src/layout/SignInPage/SignInPage.tsx @@ -24,7 +24,7 @@ import { UserIdentity } from './UserIdentity'; import Button from '@material-ui/core/Button'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; -import React, { useState } from 'react'; +import React, { ReactNode, useState } from 'react'; import { useMountEffect } from '@react-hookz/web'; import { Progress } from '../../components/Progress'; import { Content } from '../Content/Content'; @@ -41,6 +41,7 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; type MultiSignInPageProps = SignInPageProps & { providers: IdentityProviders; title?: string; + titleComponent?: ReactNode; align?: 'center' | 'left'; }; @@ -55,6 +56,7 @@ export const MultiSignInPage = ({ onSignInSuccess, providers = [], title, + titleComponent, align = 'left', }: MultiSignInPageProps) => { const configApi = useApi(configApiRef); @@ -74,7 +76,13 @@ export const MultiSignInPage = ({
- {title && } + {(title || titleComponent) && ( + + )}