@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

package/src/components/Checkbox/Checkbox.tsx

@@ -2,13 +2,12 @@ import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Check/check';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
-import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
-import { getUniqueId } from '../../helpers/util';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { ASTERISK } from '../../helpers/htmlConstants';
 
 export interface CheckboxProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>, OUIAProps {
   /** Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if
    * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
    */
@@ -53,12 +52,7 @@ export interface CheckboxProps
 // tslint:disable-next-line:no-empty
 const defaultOnChange = () => {};
 
-interface CheckboxState {
-  ouiaStateId: string;
-  descriptionId: string;
-}
-
-class Checkbox extends Component<CheckboxProps, CheckboxState> {
+class Checkbox extends Component<CheckboxProps> {
   static displayName = 'Checkbox';
   static defaultProps: PickOptional<CheckboxProps> = {
     className: '',
@@ -71,14 +65,6 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     ouiaSafe: true
   };
 
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(Checkbox.displayName),
-      descriptionId: getUniqueId('pf-checkbox-description')
-    };
-  }
-
   private handleChange = (event: React.FormEvent<HTMLInputElement>): void => {
     this.props.onChange(event, event.currentTarget.checked);
   };
@@ -121,76 +107,81 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       checkedProps.defaultChecked = defaultChecked;
     }
 
-    // Handle aria-describedby logic
-    let ariaDescribedByValue: string | undefined;
-    if (ariaDescribedBy !== undefined) {
-      ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
-    } else if (description) {
-      ariaDescribedByValue = this.state.descriptionId;
-    }
+    return (
+      <SSRSafeIds prefix="pf-checkbox-description-" ouiaComponentType="Checkbox">
+        {(descriptionId, generatedOuiaId) => {
+          let ariaDescribedByValue: string | undefined;
+          if (ariaDescribedBy !== undefined) {
+            ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
+          } else if (description) {
+            ariaDescribedByValue = descriptionId;
+          }
 
-    const inputRendered = (
-      <input
-        {...props}
-        className={css(styles.checkInput, inputClassName)}
-        type="checkbox"
-        onChange={this.handleChange}
-        aria-invalid={!isValid}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedByValue}
-        disabled={isDisabled}
-        required={isRequired}
-        ref={(elem) => {
-          elem && (elem.indeterminate = isChecked === null);
-        }}
-        {...checkedProps}
-        {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-      />
-    );
+          const inputRendered = (
+            <input
+              {...props}
+              className={css(styles.checkInput, inputClassName)}
+              type="checkbox"
+              onChange={this.handleChange}
+              aria-invalid={!isValid}
+              aria-label={ariaLabel}
+              aria-describedby={ariaDescribedByValue}
+              disabled={isDisabled}
+              required={isRequired}
+              ref={(elem) => {
+                elem && (elem.indeterminate = isChecked === null);
+              }}
+              {...checkedProps}
+              {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+            />
+          );
 
-    const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
+          const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
 
-    const Label = wrapWithLabel ? 'span' : 'label';
-    const labelRendered = label ? (
-      <Label
-        className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)}
-        htmlFor={!wrapWithLabel ? props.id : undefined}
-      >
-        {label}
-        {isRequired && (
-          <span className={css(styles.checkLabelRequired)} aria-hidden="true">
-            {ASTERISK}
-          </span>
-        )}
-      </Label>
-    ) : null;
+          const Label = wrapWithLabel ? 'span' : 'label';
+          const labelRendered = label ? (
+            <Label
+              className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)}
+              htmlFor={!wrapWithLabel ? props.id : undefined}
+            >
+              {label}
+              {isRequired && (
+                <span className={css(styles.checkLabelRequired)} aria-hidden="true">
+                  {ASTERISK}
+                </span>
+              )}
+            </Label>
+          ) : null;
 
-    const Component = component ?? (wrapWithLabel ? 'label' : 'div');
+          const WrapperComponent = component ?? (wrapWithLabel ? 'label' : 'div');
 
-    checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
-    return (
-      <Component
-        className={css(styles.check, !label && styles.modifiers.standalone, className)}
-        htmlFor={wrapWithLabel ? props.id : undefined}
-      >
-        {labelPosition === 'start' ? (
-          <>
-            {labelRendered}
-            {inputRendered}
-          </>
-        ) : (
-          <>
-            {inputRendered}
-            {labelRendered}
-          </>
-        )}
-        {description && (
-          <span id={this.state.descriptionId} className={css(styles.checkDescription)}>
-            {description}
-          </span>
-        )}
-        {body && <span className={css(styles.checkBody)}>{body}</span>}
-      </Component>
+          checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
+          return (
+            <WrapperComponent
+              className={css(styles.check, !label && styles.modifiers.standalone, className)}
+              htmlFor={wrapWithLabel ? props.id : undefined}
+            >
+              {labelPosition === 'start' ? (
+                <>
+                  {labelRendered}
+                  {inputRendered}
+                </>
+              ) : (
+                <>
+                  {inputRendered}
+                  {labelRendered}
+                </>
+              )}
+              {description && (
+                <span id={descriptionId} className={css(styles.checkDescription)}>
+                  {description}
+                </span>
+              )}
+              {body && <span className={css(styles.checkBody)}>{body}</span>}
+            </WrapperComponent>
+          );
+        }}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -55,6 +55,10 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   textAriaLabel?: string;
   /** Aria-label to use on the ClipboardCopyToggle. */
   toggleAriaLabel?: string;
+  /** ID to use on the TextInput. */
+  inputId?: string;
+  /** Name attribute to use on the TextInput. */
+  inputName?: string;
   /** Flag to show if the input is read only. */
   isReadOnly?: boolean;
   /** Flag to determine if clipboard copy is in the expanded state initially */
@@ -91,6 +95,10 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
+  /** Callback function when text input is focused */
+  onInputFocus?: (event?: any) => void;
+  /** Callback function when text input is blurred (focus leaves) */
+  onInputBlur?: (event?: any) => void;
   /** The text which is copied. */
   children: string | string[];
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
@@ -177,6 +185,8 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       /* eslint-disable @typescript-eslint/no-unused-vars */
       isExpanded,
       onChange, // Don't pass to <div>
+      onInputFocus, // Don't pass to <div>
+      onInputBlur, // Don't pass to <div>
       /* eslint-enable @typescript-eslint/no-unused-vars */
       isReadOnly,
       isCode,
@@ -189,6 +199,8 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       clickTip,
       textAriaLabel,
       toggleAriaLabel,
+      inputId,
+      inputName,
       variant,
       position,
       className,
@@ -295,8 +307,11 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                     readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
                     value={this.state.expanded ? this.state.textWhenExpanded : copyableText}
-                    id={`text-input-${id}`}
+                    id={inputId ?? `text-input-${id}`}
+                    name={inputName}
                     aria-label={textAriaLabel}
+                    onFocus={onInputFocus}
+                    onBlur={onInputBlur}
                     {...(isCode && { dir: 'ltr' })}
                   />
                   <ClipboardCopyButton

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -3,8 +3,10 @@ import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import { Button } from '../Button';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 
-export interface ClipboardCopyButtonProps
-  extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
+export interface ClipboardCopyButtonProps extends Omit<
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  'ref'
+> {
   /** Callback for the copy when the button is clicked */
   onClick: (event: React.MouseEvent) => void;
   /** Content of the copy button */

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -1,10 +1,12 @@
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import { css } from '@patternfly/react-styles';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { Button } from '../Button';
 
-export interface ClipboardCopyToggleProps
-  extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
+export interface ClipboardCopyToggleProps extends Omit<
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  'ref'
+> {
   onClick: (event: React.MouseEvent) => void;
   id: string;
   contentId: string;
@@ -29,7 +31,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     {...props}
     icon={
       <div className={css(styles.clipboardCopyToggleIcon)}>
-        <AngleRightIcon />
+        <RhMicronsCaretDownIcon />
       </div>
     }
   />

package/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx

@@ -309,6 +309,18 @@ test('Passes textAriaLabel to TextInput', () => {
   expect(screen.getByRole('textbox')).toHaveAccessibleName('text label');
 });
 
+test('Passes inputId to TextInput', () => {
+  render(<ClipboardCopy inputId="custom-input-id">{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('id', 'custom-input-id');
+});
+
+test('Passes inputName to TextInput', () => {
+  render(<ClipboardCopy inputName="custom-input-name">{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('name', 'custom-input-name');
+});
+
 test('Calls onChange when ClipboardCopy textinput is typed in', async () => {
   const onChangeMock = jest.fn();
   const user = userEvent.setup();
@@ -338,6 +350,66 @@ test('Does not call onChange when ClipboardCopy textinput is not typed in', asyn
   expect(onChangeMock).not.toHaveBeenCalled();
 });
 
+test('Calls onFocus when ClipboardCopy textinput is focused', async () => {
+  const onFocusMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(<ClipboardCopy onInputFocus={onFocusMock}>{children}</ClipboardCopy>);
+
+  await user.click(screen.getByRole('textbox'));
+
+  expect(onFocusMock).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onFocus when ClipboardCopy textinput is not focused', async () => {
+  const onFocusMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopy onInputFocus={onFocusMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.click(screen.getByRole('textbox', { name: 'native input' }));
+
+  expect(onFocusMock).not.toHaveBeenCalled();
+});
+
+test('Calls onBlur when ClipboardCopy textinput loses focus', async () => {
+  const onBlurMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopy onInputBlur={onBlurMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.click(screen.getByRole('textbox', { name: 'Copyable input' }));
+  await user.click(screen.getByRole('textbox', { name: 'native input' }));
+
+  expect(onBlurMock).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onBlur when ClipboardCopy textinput does not lose focus', async () => {
+  const onBlurMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopy onInputBlur={onBlurMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.click(screen.getByRole('textbox', { name: 'native input' }));
+
+  expect(onBlurMock).not.toHaveBeenCalled();
+});
+
 test('Calls onCopy when ClipboardCopyButton is clicked', async () => {
   const onCopyMock = jest.fn();
   const user = userEvent.setup();

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-36"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r2j:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`Matches snapshot 1`] = `
     <button
       aria-label="Copyable input"
       class="pf-v6-c-button pf-m-control"
-      data-ouia-component-id="OUIA-Generated-Button-control-1"
+      data-ouia-component-id="OUIA-Generated-Button-control-:r0:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       id="button-id"
@@ -45,12 +45,24 @@ exports[`Matches snapshot 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 448 512"
           width="1em"
         >
-          <path
-            d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
+            />
+          </svg>
         </svg>
       </span>
     </button>

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Matches snapshot 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-button pf-m-control"
-    data-ouia-component-id="OUIA-Generated-Button-control-1"
+    data-ouia-component-id="OUIA-Generated-Button-control-:r0:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     id="main-id"
@@ -23,11 +23,11 @@ exports[`Matches snapshot 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 256 512"
+          viewBox="0 0 20 20"
           width="1em"
         >
           <path
-            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
           />
         </svg>
       </div>

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -37,7 +37,6 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
       <CodeBlockAction>
         <ClipboardCopyButton
           id="basic-copy-button"
-          textId="code-content"
           aria-label="Copy to clipboard basic example code block"
           onClick={(e) => onClick(e, code)}
           exitDelay={copied ? 1500 : 600}

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -53,7 +53,6 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
       <CodeBlockAction>
         <ClipboardCopyButton
           id="expandable-copy-button"
-          textId="code-content"
           aria-label="Copy to clipboard"
           onClick={(e) => onClick(e, copyBlock)}
           exitDelay={copied ? 1500 : 600}

package/src/components/Compass/Compass.tsx

@@ -1,4 +1,4 @@
-import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
+import { Drawer, DrawerContent, DrawerContentBody, DrawerProps } from '../Drawer';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
@@ -6,8 +6,10 @@ import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_com
 import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_dark';
 
 export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
-  /** Additional classes added to the compass. */
+  /** Additional classes added to the Compass. */
   className?: string;
+  /** Content of the docked navigation area of the layout */
+  dock?: React.ReactNode;
   /** Content placed at the top of the layout */
   header?: React.ReactNode;
   /** Flag indicating if the header is expanded */
@@ -30,14 +32,15 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   drawerContent?: React.ReactNode;
   /** Additional props passed to the drawer */
   drawerProps?: DrawerProps;
-  /** Light theme background image path of the compass */
+  /** Light theme background image path of the Compass  */
   backgroundSrcLight?: string;
-  /** Dark theme background image path of the compass */
+  /** Dark theme background image path of the Compass  */
   backgroundSrcDark?: string;
 }
 
 export const Compass: React.FunctionComponent<CompassProps> = ({
   className,
+  dock,
   header,
   isHeaderExpanded = true,
   sidebarStart,
@@ -52,7 +55,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   backgroundSrcLight,
   backgroundSrcDark,
   ...props
-}) => {
+}: CompassProps) => {
   const hasDrawer = drawerContent !== undefined;
 
   const backgroundImageStyles: { [key: string]: string } = {};
@@ -64,39 +67,54 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   }
 
   const compassContent = (
-    <div className={css(styles.compass, className)} {...props} style={{ ...props.style, ...backgroundImageStyles }}>
-      <div
-        className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
-        {...(!isHeaderExpanded && { inert: 'true' })}
-      >
-        {header}
-      </div>
-      <div
-        className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
-        {...(!isSidebarStartExpanded && { inert: 'true' })}
-      >
-        {sidebarStart}
-      </div>
-      <div className={css(styles.compassMain)}>{main}</div>
-      <div
-        className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
-        {...(!isSidebarEndExpanded && { inert: 'true' })}
-      >
-        {sidebarEnd}
-      </div>
-      <div
-        className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
-        {...(!isFooterExpanded && { inert: 'true' })}
-      >
-        {footer}
-      </div>
+    <div
+      className={css(styles.compass, dock !== undefined && styles.modifiers.dock, className)}
+      {...props}
+      style={{ ...props.style, ...backgroundImageStyles }}
+    >
+      {dock && <div className={css(`${styles.compass}__dock`)}>{dock}</div>}
+      {header && (
+        <div
+          className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
+          {...(!isHeaderExpanded && { inert: 'true' })}
+        >
+          {header}
+        </div>
+      )}
+      {sidebarStart && (
+        <div
+          className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
+          {...(!isSidebarStartExpanded && { inert: 'true' })}
+        >
+          {sidebarStart}
+        </div>
+      )}
+      {main && <div className={css(styles.compassMain)}>{main}</div>}
+      {sidebarEnd && (
+        <div
+          className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
+          {...(!isSidebarEndExpanded && { inert: 'true' })}
+        >
+          {sidebarEnd}
+        </div>
+      )}
+      {footer && (
+        <div
+          className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
+          {...(!isFooterExpanded && { inert: 'true' })}
+        >
+          {footer}
+        </div>
+      )}
     </div>
   );
 
   if (hasDrawer) {
     return (
-      <Drawer {...drawerProps}>
-        <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
+      <Drawer isPill {...drawerProps}>
+        <DrawerContent panelContent={drawerContent}>
+          <DrawerContentBody>{compassContent}</DrawerContentBody>
+        </DrawerContent>
       </Drawer>
     );
   }

package/src/components/Compass/CompassContent.tsx

@@ -2,8 +2,8 @@ import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
 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 CompassPanel components. */
+export interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main Compass area. Typically one or more CompassPanel components. */
   children: React.ReactNode;
   /** Additional classes added to the CompassContent */
   className?: string;
@@ -19,7 +19,7 @@ export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
   drawerProps,
   drawerContent,
   ...props
-}) => {
+}: CompassContentProps) => {
   const hasDrawer = drawerContent !== undefined;
 
   const compassContent = (
@@ -30,7 +30,7 @@ export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
 
   if (hasDrawer) {
     return (
-      <Drawer {...drawerProps}>
+      <Drawer isPill {...drawerProps}>
         <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
       </Drawer>
     );

package/src/components/Compass/CompassHeader.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassHeaderProps {
+export interface CompassHeaderProps {
   /** Content of the logo area */
   logo?: React.ReactNode;
   /** Content of the navigation area */
@@ -10,7 +10,11 @@ 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>