pr feedback, update demo background

Author: kmcfaul

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

@@ -12,13 +12,13 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   header?: React.ReactNode;
   /** Flag indicating if the header is expanded */
   isHeaderExpanded?: boolean;
-  /** Content placed at the start of the layout */
+  /** Content placed at the horizontal start of the layout, before the main content */
   sidebarStart?: React.ReactNode;
   /** Flag indicating if the start sidebar is expanded */
   isSidebarStartExpanded?: boolean;
   /** Content placed at the center of the layout */
   main?: React.ReactNode;
-  /** Content placed at the end of the layout */
+  /** Content placed at the horizontal end of the layout, after the main content */
   sidebarEnd?: React.ReactNode;
   /** Flag indicating if the end sidebar is expanded */
   isSidebarEndExpanded?: boolean;

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

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
 interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content of the main compass area. Typically one or more CompassSection components. */
+  /** Content of the main compass area. Typically one or more CompassPanel components. */
   children: React.ReactNode;
   /** Additional classes added to the CompassContent */
   className?: string;

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

@@ -12,7 +12,7 @@ interface CompassHeaderProps {
 
 export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({ logo, nav, profile }) => (
   <>
-    <div className={css('pf-v6-c-compass__logo')}>{logo}</div>
+    <div className={css(`${styles.compass}__logo`)}>{logo}</div>
     <div className={css(styles.compassNav)}>{nav}</div>
     <div className={css(styles.compassProfile)}>{profile}</div>
   </>

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

@@ -1,5 +1,6 @@
 import { Flex, FlexItem } from '../../layouts/Flex';
 import { CompassPanel } from './CompassPanel';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
 interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
@@ -25,15 +26,15 @@ export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>
       <CompassPanel>
         <Flex alignItems={{ default: 'alignItemsCenter' }}>
           <FlexItem grow={{ default: 'grow' }}>{title}</FlexItem>
-          <FlexItem>{toolbar}</FlexItem>
+          {toolbar && <FlexItem>{toolbar}</FlexItem>}
         </Flex>
       </CompassPanel>
     ) : (
       children
     );
 
   return (
-    <div className={css('pf-v6-c-compass__main-header', className)} {...props}>
+    <div className={css(`${styles.compass}__main-header`, className)} {...props}>
       {_content}
     </div>
   );

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

@@ -16,9 +16,7 @@ interface CompassPanelProps extends React.HTMLProps<HTMLDivElement> {
   hasNoBorder?: boolean;
   /** Indicates the panel should have no padding */
   hasNoPadding?: boolean;
-  /** Indicates the panel should have a gradient border */
-  hasGradientBorder?: boolean;
-  /** Indicates the panel should have a thinking style */
+  /** Indicates the panel should have a "thinking" animation */
   isThinking?: boolean;
 }
 
@@ -28,7 +26,6 @@ export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
   isPill,
   hasNoBorder,
   hasNoPadding,
-  hasGradientBorder,
   isThinking,
   isFullHeight,
   isScrollable,
@@ -37,11 +34,10 @@ export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
   <div
     className={css(
       styles.compassPanel,
-      isPill && 'pf-m-pill',
+      isPill && styles.modifiers.pill,
       hasNoBorder && styles.modifiers.noBorder,
       hasNoPadding && styles.modifiers.noPadding,
-      hasGradientBorder && 'pf-m-gradient-border',
-      isThinking && 'pf-m-thinking',
+      isThinking && 'pf-v6-m-thinking',
       isFullHeight && styles.modifiers.fullHeight,
       isScrollable && styles.modifiers.scrollable,
       className

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

@@ -33,9 +33,9 @@ test('Renders all content when all props are provided', () => {
   expect(screen.getByText('Profile')).toBeVisible();
 });
 
-test('Renders logo with pf-v6-c-compass__logo class', () => {
+test(`Renders logo with ${styles.compass}__logo class`, () => {
   render(<CompassHeader logo={<div>Logo</div>} />);
-  expect(screen.getByText('Logo').parentElement).toHaveClass('pf-v6-c-compass__logo');
+  expect(screen.getByText('Logo').parentElement).toHaveClass(`${styles.compass}__logo`);
 });
 
 test(`Renders nav with ${styles.compassNav} class`, () => {

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

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { CompassMainHeader } from '../CompassMainHeader';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
 
 test('Renders without children', () => {
   render(
@@ -20,9 +21,9 @@ test('Renders with custom class name when className prop is provided', () => {
   expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
-test('Renders with default pf-v6-c-compass__main-header class', () => {
+test(`Renders with default ${styles.compass}__main-header class`, () => {
   render(<CompassMainHeader>Test</CompassMainHeader>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v6-c-compass__main-header');
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header`);
 });
 
 test('Renders title when provided', () => {

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

@@ -32,14 +32,9 @@ test(`Renders with ${styles.modifiers.noPadding} when hasNoPadding is true`, ()
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPadding);
 });
 
-test('Renders with pf-m-gradient-border when hasGradientBorder is true', () => {
-  render(<CompassPanel hasGradientBorder>Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-gradient-border');
-});
-
-test('Renders with pf-m-thinking when isThinking is true', () => {
+test('Renders with pf-v6-m-thinking when isThinking is true', () => {
   render(<CompassPanel isThinking>Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-thinking');
+  expect(screen.getByText('Test')).toHaveClass('pf-v6-m-thinking');
 });
 
 test(`Renders with ${styles.modifiers.fullHeight} when isFullHeight is true`, () => {
@@ -54,16 +49,15 @@ test(`Renders with ${styles.modifiers.scrollable} when isScrollable is true`, ()
 
 test('Renders with multiple modifier classes when multiple props are true', () => {
   render(
-    <CompassPanel isPill hasNoBorder hasNoPadding hasGradientBorder isThinking isFullHeight isScrollable>
+    <CompassPanel isPill hasNoBorder hasNoPadding isThinking isFullHeight isScrollable>
       Test
     </CompassPanel>
   );
   const panelElement = screen.getByText('Test');
   expect(panelElement).toHaveClass(styles.modifiers.pill);
   expect(panelElement).toHaveClass(styles.modifiers.noBorder);
   expect(panelElement).toHaveClass(styles.modifiers.noPadding);
-  expect(panelElement).toHaveClass('pf-m-gradient-border');
-  expect(panelElement).toHaveClass('pf-m-thinking');
+  expect(panelElement).toHaveClass('pf-v6-m-thinking');
   expect(panelElement).toHaveClass(styles.modifiers.fullHeight);
   expect(panelElement).toHaveClass(styles.modifiers.scrollable);
 });
@@ -75,7 +69,7 @@ test('Renders with additional props spread to the component', () => {
 
 test('Matches the snapshot with all modifiers', () => {
   const { asFragment } = render(
-    <CompassPanel isPill hasNoBorder hasNoPadding hasGradientBorder isThinking isFullHeight isScrollable>
+    <CompassPanel isPill hasNoBorder hasNoPadding isThinking isFullHeight isScrollable>
       <div>Panel with all modifiers</div>
     </CompassPanel>
   );

packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot with all modifiers 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-compass__panel pf-m-pill pf-m-no-border pf-m-no-padding pf-m-gradient-border pf-m-thinking pf-m-full-height pf-m-scrollable"
+    class="pf-v6-c-compass__panel pf-m-pill pf-m-no-border pf-m-no-padding pf-v6-m-thinking pf-m-full-height pf-m-scrollable"
   >
     <div>
       Panel with all modifiers

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

@@ -2,7 +2,7 @@
 id: Compass
 cssPrefix: pf-v6-c-compass
 section: components
-isBeta: true
+beta: true
 propComponents: ['Compass', 'CompassHeader', 'CompassContent', 'CompassHero', 'CompassMainHeader', 'CompassPanel']
 ---