diff --git a/.changeset/many-beans-write.md b/.changeset/many-beans-write.md new file mode 100644 index 0000000000..4aad579daf --- /dev/null +++ b/.changeset/many-beans-write.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-home': patch +--- + +Added a `variant` prop to the `WelcomeTitle` component making it work with the Customizable Home page feature. Adding it like this `` to the list of items under `CustomHomepageGrid` will allow it to render with a size that works well. diff --git a/packages/app/src/components/home/CustomizableHomePage.tsx b/packages/app/src/components/home/CustomizableHomePage.tsx index 8998538e54..b592490f2e 100644 --- a/packages/app/src/components/home/CustomizableHomePage.tsx +++ b/packages/app/src/components/home/CustomizableHomePage.tsx @@ -28,6 +28,7 @@ import { HomePageSearchBar } from '@backstage/plugin-search'; import Grid from '@material-ui/core/Grid'; import { tools, useLogoStyles } from './shared'; +import { WelcomeTitle } from '@backstage/plugin-home'; const defaultConfig = [ { @@ -81,6 +82,7 @@ export const CustomizableHomePage = () => { + diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx index 686d13a748..fddd621b92 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx +++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx @@ -23,13 +23,18 @@ import Typography from '@material-ui/core/Typography'; import { useEffect, useMemo } from 'react'; import useAsync from 'react-use/esm/useAsync'; import { getTimeBasedGreeting } from './timeUtil'; +import { Variant } from '@material-ui/core/styles/createTypography'; /** @public */ export type WelcomeTitleLanguageProps = { language?: string[]; + variant?: Variant | 'inherit'; }; -export const WelcomeTitle = ({ language }: WelcomeTitleLanguageProps) => { +export const WelcomeTitle = ({ + language, + variant, +}: WelcomeTitleLanguageProps) => { const identityApi = useApi(identityApiRef); const alertApi = useApi(alertApiRef); const greeting = useMemo(() => getTimeBasedGreeting(language), [language]); @@ -49,7 +54,7 @@ export const WelcomeTitle = ({ language }: WelcomeTitleLanguageProps) => { return ( - {`${greeting.greeting}${ + {`${greeting.greeting}${ profile?.displayName ? `, ${profile?.displayName}` : '' }!`}