rebase, add panel props, update CompassMainHeader panel props name

Author: kmcfaul

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

@@ -110,7 +110,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   );
 
   return (
-    <div className={css(styles.compass, dock !== undefined && styles.modifiers.docked, className)} {...props}>
+    <div className={css(styles.compass, dock && styles.modifiers.docked, className)} {...props}>
       {hasDrawer ? (
         <Drawer isPill {...drawerProps}>
           <DrawerContent panelContent={drawerContent}>

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

@@ -21,20 +21,20 @@ export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElem
   /** Additional props passed to the Panel that wraps the main header content when using the title or toolbar props. When using the
    * children prop, you should pass your own Panel.
    */
-  compassPanelProps?: Omit<PanelProps, 'children'>;
+  panelProps?: Omit<PanelProps, 'children'>;
 }
 
 export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps> = ({
   className,
   title,
   toolbar,
   children,
-  compassPanelProps,
+  panelProps,
   ...props
 }: CompassMainHeaderProps) => {
   const _content =
     title !== undefined || toolbar !== undefined ? (
-      <Panel {...compassPanelProps}>
+      <Panel {...panelProps}>
         <PanelMain>
           <PanelMainBody>
             <CompassMainHeaderContent>

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

@@ -100,19 +100,15 @@ test('Does not render Panel when children are passed', () => {
   expect(content).not.toHaveClass(panelStyles.panel);
 });
 
-test('Passes props to Panel when title and compassPanelProps is passed', () => {
-  render(
-    <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} title="Title text" />
-  );
+test('Passes props to Panel when title and panelProps is passed', () => {
+  render(<CompassMainHeader data-testid="test-id" panelProps={{ className: 'panel-class' }} title="Title text" />);
 
   const panel = screen.getByTestId('test-id').firstChild;
   expect(panel).toHaveClass('panel-class');
 });
 
-test('Passes props to Panel when toolbar and compassPanelProps is passed', () => {
-  render(
-    <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} toolbar="Toolbar text" />
-  );
+test('Passes props to Panel when toolbar and panelProps is passed', () => {
+  render(<CompassMainHeader data-testid="test-id" panelProps={{ className: 'panel-class' }} toolbar="Toolbar text" />);
 
   const panel = screen.getByTestId('test-id').firstChild;
   expect(panel).toHaveClass('panel-class');

packages/react-core/src/components/Compass/examples/Compass.md

@@ -35,7 +35,7 @@ In a basic Compass layout, content can be passed to the following props to popul
 - `sidebarEnd`: Content rendered at the horizontal end of the page (by default, the right side).
 - `footer`: Content rendered at the bottom of the page.
 
-The background image of `<Compass>` is set at a global level alongside the theme. You can customize the background image of `<CompassHero>` by using its `backgroundSrcLight` and `backgroundSrcDark` props, or you may set a gradient using the `gradientLight` and `gradientDark` props.
+The background image of `<Compass>` is set at a global level alongside the theme. You can customize the background image of the `<Hero>` inside `<CompassHero>` by using its `backgroundSrcLight` and `backgroundSrcDark` props, or you may set a gradient using the `gradientLight` and `gradientDark` props.
 
 ```ts isBeta file="CompassBasic.tsx"
 

packages/react-core/src/demos/Compass/examples/CompassDemo.tsx

@@ -153,9 +153,9 @@ export const CompassBasic: React.FunctionComponent = () => {
           Hero
         </Hero>
       </CompassHero>
-      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
+      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} panelProps={{ isGlass: true }} />
       <CompassContent>
-        <Panel>
+        <Panel isScrollable isAutoHeight isFullHeight isGlass>
           <PanelMain>
             <PanelMainBody>Content</PanelMainBody>
           </PanelMain>

packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx

@@ -377,9 +377,9 @@ export const CompassDockDemo: React.FunctionComponent = () => {
 
   const mainContent = (
     <>
-      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
+      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} panelProps={{ isGlass: true }} />
       <CompassContent>
-        <Panel>
+        <Panel isScrollable isAutoHeight isFullHeight isGlass>
           <PanelMain>
             <PanelMainBody>Content</PanelMainBody>
           </PanelMain>