fix(Compass): get props tables rendering correctly (#12142)

Author: nicolethoen

packages/react-core/src/components/Compass/Compass.tsx

@@ -52,7 +52,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   backgroundSrcLight,
   backgroundSrcDark,
   ...props
-}) => {
+}: CompassProps) => {
   const hasDrawer = drawerContent !== undefined;
 
   const backgroundImageStyles: { [key: string]: string } = {};

packages/react-core/src/components/Compass/CompassContent.tsx

@@ -19,7 +19,7 @@ export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
   drawerProps,
   drawerContent,
   ...props
-}) => {
+}: CompassContentProps) => {
   const hasDrawer = drawerContent !== undefined;
 
   const compassContent = (

packages/react-core/src/components/Compass/CompassHeader.tsx

@@ -10,7 +10,11 @@ export interface CompassHeaderProps {
   profile?: React.ReactNode;
 }
 
-export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({ logo, nav, profile }) => (
+export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({
+  logo,
+  nav,
+  profile
+}: CompassHeaderProps) => (
   <>
     <div className={css(`${styles.compass}__logo`)}>{logo}</div>
     <div className={css(styles.compassNav)}>{nav}</div>

packages/react-core/src/components/Compass/CompassHero.tsx

@@ -9,7 +9,11 @@ export interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>,
   className?: string;
 }
 
-export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({ className, children, ...props }) => (
+export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({
+  className,
+  children,
+  ...props
+}: CompassHeroProps) => (
   <div className={css(`${styles.compass}__hero`, className)} {...props}>
     {children}
   </div>

packages/react-core/src/components/Compass/CompassMainHeader.tsx

@@ -31,7 +31,7 @@ export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>
   children,
   compassPanelProps,
   ...props
-}) => {
+}: CompassMainHeaderProps) => {
   const _content =
     title !== undefined || toolbar !== undefined ? (
       <CompassPanel {...compassPanelProps}>

packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx

@@ -16,7 +16,7 @@ export const CompassMainHeaderContent: React.FunctionComponent<CompassMainHeader
   children,
   className,
   ...props
-}) => (
+}: CompassMainHeaderContentProps) => (
   <div className={css(styles.compassMainHeaderContent, className)} {...props}>
     {children}
   </div>

packages/react-core/src/components/Compass/CompassMainHeaderTitle.tsx

@@ -16,7 +16,7 @@ export const CompassMainHeaderTitle: React.FunctionComponent<CompassMainHeaderTi
   children,
   className,
   ...props
-}) => (
+}: CompassMainHeaderTitleProps) => (
   <div className={css(`${styles.compass}__main-header-title`, className)} {...props}>
     {children}
   </div>

packages/react-core/src/components/Compass/CompassMainHeaderToolbar.tsx

@@ -16,7 +16,7 @@ export const CompassMainHeaderToolbar: React.FunctionComponent<CompassMainHeader
   children,
   className,
   ...props
-}) => (
+}: CompassMainHeaderToolbarProps) => (
   <div className={css(`${styles.compass}__main-header-toolbar`, className)} {...props}>
     {children}
   </div>

packages/react-core/src/components/Compass/CompassMessageBar.tsx

@@ -12,7 +12,7 @@ export const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps>
   children,
   className,
   ...props
-}) => (
+}: CompassMessageBarProps) => (
   <div className={css(styles.compassMessageBar, className)} {...props}>
     {children}
   </div>

packages/react-core/src/components/Compass/CompassPanel.tsx

@@ -30,7 +30,7 @@ export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
   isFullHeight,
   isScrollable,
   ...props
-}) => (
+}: CompassPanelProps) => (
   <div
     className={css(
       styles.compassPanel,