Merge pull request #10860 from backstage/techdocs/addon-bug-fixes

plugins/techdocs/api-report.md

@@ -18,7 +18,6 @@ import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
-import { StyledComponentProps } from '@material-ui/core';
 import { TableColumn } from '@backstage/core-components';
 import { TableProps } from '@backstage/core-components';
 import { TechDocsEntityMetadata as TechDocsEntityMetadata_2 } from '@backstage/plugin-techdocs-react';
@@ -351,15 +350,11 @@ export type TechDocsReaderPageRenderFunction = ({
 }) => JSX.Element;
 
 // @public
-export const TechDocsReaderPageSubheader: React_2.ComponentType<
-  Pick<
-    {
-      toolbarProps?: ToolbarProps<'div', {}> | undefined;
-    },
-    'toolbarProps'
-  > &
-    StyledComponentProps<'root'>
->;
+export const TechDocsReaderPageSubheader: ({
+  toolbarProps,
+}: {
+  toolbarProps?: ToolbarProps<'div', {}> | undefined;
+}) => JSX.Element | null;
 
 // @public
 export const TechDocsReaderProvider: ({

plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx

@@ -97,11 +97,9 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
     });
 
     return (
-      (page as JSX.Element) || (
-        <TechDocsReaderPageProvider entityRef={entityRef}>
-          <TechDocsReaderLayout />
-        </TechDocsReaderPageProvider>
-      )
+      <TechDocsReaderPageProvider entityRef={entityRef}>
+        {(page as JSX.Element) || <TechDocsReaderLayout />}
+      </TechDocsReaderPageProvider>
     );
   }
 

plugins/techdocs/src/reader/components/TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.tsx

@@ -16,26 +16,33 @@
 
 import React from 'react';
 
-import { Box, Toolbar, ToolbarProps, withStyles } from '@material-ui/core';
+import { Box, makeStyles, Toolbar, ToolbarProps } from '@material-ui/core';
 
 import {
   TechDocsAddonLocations as locations,
   useTechDocsAddons,
 } from '@backstage/plugin-techdocs-react';
 
-/**
- * Renders the reader page subheader.
- * Please use the Tech Docs add-ons to customize it
- * @public
- */
-export const TechDocsReaderPageSubheader = withStyles(theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     gridArea: 'pageSubheader',
     flexDirection: 'column',
     minHeight: 'auto',
     padding: theme.spacing(3, 3, 0),
   },
-}))(({ toolbarProps }: { toolbarProps?: ToolbarProps }) => {
+}));
+
+/**
+ * Renders the reader page subheader.
+ * Please use the Tech Docs add-ons to customize it
+ * @public
+ */
+export const TechDocsReaderPageSubheader = ({
+  toolbarProps,
+}: {
+  toolbarProps?: ToolbarProps;
+}) => {
+  const classes = useStyles();
   const addons = useTechDocsAddons();
   const subheaderAddons = addons.renderComponentsByLocation(
     locations.Subheader,
@@ -44,7 +51,7 @@ export const TechDocsReaderPageSubheader = withStyles(theme => ({
   if (!subheaderAddons) return null;
 
   return (
-    <Toolbar {...toolbarProps}>
+    <Toolbar classes={classes} {...toolbarProps}>
       {subheaderAddons && (
         <Box
           display="flex"
@@ -57,4 +64,4 @@ export const TechDocsReaderPageSubheader = withStyles(theme => ({
       )}
     </Toolbar>
   );
-});
+};