Merge pull request #30006 from awanlin/topic/customizable-homepage-usable-welcome-title

Added a `variant` prop to the `WelcomeTitle` component

.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 `<WelcomeTitle variant='h1' />` to the list of items under `CustomHomepageGrid` will allow it to render with a size that works well.

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 = () => {
         </Grid>
 
         <CustomHomepageGrid config={defaultConfig}>
+          <WelcomeTitle variant="h1" />
           <HomePageSearchBar />
           <HomePageRecentlyVisited />
           <HomePageTopVisited />

plugins/home/report.api.md

@@ -23,6 +23,7 @@ import { ReactNode } from 'react';
 import { RendererProps as RendererProps_2 } from '@backstage/plugin-home-react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { StorageApi } from '@backstage/core-plugin-api';
+import { Variant } from '@material-ui/core/styles/createTypography';
 
 // @public
 export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -336,10 +337,12 @@ export type VisitsWebStorageApiOptions = {
 // @public
 export const WelcomeTitle: ({
   language,
+  variant,
 }: WelcomeTitleLanguageProps) => JSX_2.Element;
 
 // @public (undocumented)
 export type WelcomeTitleLanguageProps = {
   language?: string[];
+  variant?: Variant | 'inherit';
 };
 ```

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 (
     <Tooltip title={greeting.language}>
-      <Typography component="span" variant="inherit">{`${greeting.greeting}${
+      <Typography component="span" variant={variant}>{`${greeting.greeting}${
         profile?.displayName ? `, ${profile?.displayName}` : ''
       }!`}</Typography>
     </Tooltip>