+
+
+ event.stopPropagation() // Prevents clicking TextArea from opening file dialog
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
index 80f02fa90b6..2e567f30153 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
+++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
@@ -6,124 +6,166 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
class="pf-v6-c-code-editor"
>
-
-
-
-
-
-
+
+
-
-
-
-
-
+
+
-
-
+
+
+
+
-
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
index 0c3d3681b5d..7fe074cf68c 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
@@ -14,6 +14,7 @@ import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import FontIcon from '@patternfly/react-icons/dist/esm/icons/font-icon';
## Examples
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorConfigurationModal.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorConfigurationModal.tsx
index 1f5cc3d7bca..95b4e4e8516 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorConfigurationModal.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorConfigurationModal.tsx
@@ -2,8 +2,19 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
+import FontIcon from '@patternfly/react-icons/dist/esm/icons/font-icon';
import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
-import { Flex, FlexItem, Icon, Modal, ModalBody, ModalHeader, Switch, SwitchProps } from '@patternfly/react-core';
+import {
+ Flex,
+ FlexItem,
+ Icon,
+ Modal,
+ ModalBody,
+ ModalHeader,
+ NumberInput,
+ Switch,
+ SwitchProps
+} from '@patternfly/react-core';
import { useState } from 'react';
interface ConfigModalItemProps {
@@ -11,76 +22,105 @@ interface ConfigModalItemProps {
icon?: React.ReactNode;
/** Description of the configuration option. */
description: string;
- /** Flag indicating whether the option is enabled or disabled. */
- isChecked?: SwitchProps['isChecked'];
- /** onChange handler for the switch. */
- onChange?: SwitchProps['onChange'];
/** Title of the configuration option. We assume that titles are unique. */
title: string;
- /** Labels for the enabled and disabled states of the switch. */
- labels?: {
- enabled: string;
- disabled: string;
- };
- /** Optional OUIA ID of the configuration option. Also used as a prefix for the ids of inner elements. */
- ouiaId?: string;
+ /**
+ * Optional ID of the configuration option. Also used as a prefix for the following elements:
+ * - `${id}-title` for the element which contains the title
+ * - `${id}-description` for the element which contains the description
+ */
+ id?: string;
+ /**
+ * Slot to render inside the configuration modal. Remember to add `aria-labelledby` and `aria-describedby` props
+ * to the control inside the slot, pointing to the title and description ids respectively.
+ */
+ slot?: React.ReactNode;
}
const ConfigModalItem: React.FunctionComponent
-
+
+
+
{description}
+ {description}
+ onInputFocus, // Don't pass to
);
diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx
index 8c308779da0..bc689aa7b5f 100644
--- a/packages/react-core/src/components/Form/FormGroup.tsx
+++ b/packages/react-core/src/components/Form/FormGroup.tsx
@@ -56,8 +56,7 @@ export const FormGroup: React.FunctionComponent
+ onInputBlur, // Don't pass to {
- /** 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 {
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 = ({
className,
+ dock,
header,
isHeaderExpanded = true,
sidebarStart,
@@ -52,7 +55,7 @@ export const Compass: React.FunctionComponent = ({
backgroundSrcLight,
backgroundSrcDark,
...props
-}) => {
+}: CompassProps) => {
const hasDrawer = drawerContent !== undefined;
const backgroundImageStyles: { [key: string]: string } = {};
@@ -64,38 +67,51 @@ export const Compass: React.FunctionComponent = ({
}
const compassContent = (
- onToggle(event, !propOrStateIsExpanded)}
- {...(variant !== ExpandableSectionVariant.truncate && {
- icon: (
-
- Test content );
+
+ const button = screen.getByRole('button');
+ expect(button.querySelector('.pf-v6-c-expandable-section__toggle-icon')).not.toBeInTheDocument();
+});
+
+test('Does not render custom toggle icon when hasToggleIcon is false', () => {
+ render(
+ Test content );
+
+ const button = screen.getByRole('button');
+ expect(button.querySelector('.pf-v6-c-expandable-section__toggle-icon')).toBeInTheDocument();
+});
diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
index 8b9918bb6d2..fc4058b5569 100644
--- a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
+++ b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap
@@ -29,12 +29,24 @@ exports[`Disclosure ExpandableSection 1`] = `
fill="currentColor"
height="1em"
role="img"
- viewBox="0 0 256 512"
width="1em"
>
- = ({
-
/* eslint-enable @typescript-eslint/no-unused-vars */
isReadOnly,
isCode,
@@ -189,6 +199,8 @@ class ClipboardCopy extends Component {
clickTip,
textAriaLabel,
toggleAriaLabel,
+ inputId,
+ inputName,
variant,
position,
className,
@@ -295,8 +307,11 @@ class ClipboardCopy extends Component {
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' })}
/>
, HTMLButtonElement>, 'ref'> {
+export interface ClipboardCopyButtonProps extends Omit<
+ React.DetailedHTMLProps, HTMLButtonElement>,
+ 'ref'
+> {
/** Callback for the copy when the button is clicked */
onClick: (event: React.MouseEvent) => void;
/** Content of the copy button */
diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
index e0a29c9537e..0eb90a65dc0 100644
--- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
@@ -3,8 +3,10 @@ import { css } from '@patternfly/react-styles';
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
import { Button } from '../Button';
-export interface ClipboardCopyToggleProps
- extends Omit, HTMLButtonElement>, 'ref'> {
+export interface ClipboardCopyToggleProps extends Omit<
+ React.DetailedHTMLProps, HTMLButtonElement>,
+ 'ref'
+> {
onClick: (event: React.MouseEvent) => void;
id: string;
contentId: string;
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx
index 1b7b51f0637..f014f4ba6bb 100644
--- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx
+++ b/packages/react-core/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({children} );
+
+ expect(screen.getByRole('textbox')).toHaveAttribute('id', 'custom-input-id');
+});
+
+test('Passes inputName to TextInput', () => {
+ render({children} );
+
+ 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({children} );
+
+ 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(
+ <>
+ {children}
+
+
+ );
+
+ 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(
+ <>
+ {children}
+
+
+ );
+
+ 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(
+ <>
+ {children}
+
+
+ );
+
+ 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();
diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap
index ca7c7931a23..e936ecf1237 100644
--- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap
+++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
-
diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx
index 14b94635691..619d034d4ac 100644
--- a/packages/react-core/src/components/Compass/Compass.tsx
+++ b/packages/react-core/src/components/Compass/Compass.tsx
@@ -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
-
+
{compassContent}
diff --git a/packages/react-core/src/components/Compass/CompassContent.tsx b/packages/react-core/src/components/Compass/CompassContent.tsx
index 09b3dc1cb19..960c5e52a34 100644
--- a/packages/react-core/src/components/Compass/CompassContent.tsx
+++ b/packages/react-core/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 {
- /** Content of the main compass area. Typically one or more CompassPanel components. */
+export interface CompassContentProps extends React.HTMLProps {
+ /** 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 = ({
drawerProps,
drawerContent,
...props
-}) => {
+}: CompassContentProps) => {
const hasDrawer = drawerContent !== undefined;
const compassContent = (
@@ -30,7 +30,7 @@ export const CompassContent: React.FunctionComponent = ({
if (hasDrawer) {
return (
-
+
{compassContent}
);
diff --git a/packages/react-core/src/components/Compass/CompassHeader.tsx b/packages/react-core/src/components/Compass/CompassHeader.tsx
index c249c1d8858..7de33925245 100644
--- a/packages/react-core/src/components/Compass/CompassHeader.tsx
+++ b/packages/react-core/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 = ({ logo, nav, profile }) => (
+export const CompassHeader: React.FunctionComponent = ({
+ logo,
+ nav,
+ profile
+}: CompassHeaderProps) => (
<>
, 'content'> {
+/** A wrapper component to pass a PatternFly Hero component into. */
+export interface CompassHeroProps extends Omit, 'content'> {
/** Content of the hero */
children?: React.ReactNode;
/** Additional classes added to the hero */
className?: string;
- /** Light theme background image path of the hero */
- backgroundSrcLight?: string;
- /** Dark theme background image path of the hero */
- backgroundSrcDark?: string;
- /** Light theme gradient of the hero */
- gradientLight?: {
- stop1?: string;
- stop2?: string;
- stop3?: string;
- };
- /** Dark theme gradient of the hero */
- gradientDark?: {
- stop1?: string;
- stop2?: string;
- stop3?: string;
- };
}
export const CompassHero: React.FunctionComponent = ({
className,
children,
- backgroundSrcLight,
- backgroundSrcDark,
- gradientLight,
- gradientDark,
...props
-}) => {
- const backgroundImageStyles: { [key: string]: string } = {};
- if (backgroundSrcLight) {
- backgroundImageStyles[compassHeroBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
- }
- if (backgroundSrcDark) {
- backgroundImageStyles[compassHeroBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
- }
-
- if (gradientLight) {
- if (gradientLight.stop1) {
- backgroundImageStyles[compassHeroGradientStop1Light.name] = gradientLight.stop1;
- }
- if (gradientLight.stop2) {
- backgroundImageStyles[compassHeroGradientStop2Light.name] = gradientLight.stop2;
- }
- if (gradientLight.stop3) {
- backgroundImageStyles[compassHeroGradientStop3Light.name] = gradientLight.stop3;
- }
- }
- if (gradientDark) {
- if (gradientDark.stop1) {
- backgroundImageStyles[compassHeroGradientStop1Dark.name] = gradientDark.stop1;
- }
- if (gradientDark.stop2) {
- backgroundImageStyles[compassHeroGradientStop2Dark.name] = gradientDark.stop2;
- }
- if (gradientDark.stop3) {
- backgroundImageStyles[compassHeroGradientStop3Dark.name] = gradientDark.stop3;
- }
- }
-
- return (
- , 'title'> {
+ /** Additional classes added to the main footer */
+ className?: string;
+ /** Main footer content */
+ children?: React.ReactNode;
+ /** Indicates if the main footer is expanded */
+ isExpanded?: boolean;
+}
+
+export const CompassMainFooter: React.FunctionComponent = ({
+ className,
+ children,
+ isExpanded = true,
+ ...props
+}) => (
+ , 'title'> {
+/** The wrapper component for header content in the main Compass area. When building out a custom implementation,
+ * you should ensure any content within the main header is rendered inside a Compass panel and main header content wrappers.
+ */
+
+export interface CompassMainHeaderProps extends Omit, 'title'> {
+ /** Custom main header content. To opt into a default styling, use the title and toolbar props instead. */
+ children?: React.ReactNode;
/** Additional classes added to the main header */
className?: string;
/** Styled title. If title or toolbar is provided, the children will be ignored. */
title?: React.ReactNode;
/** Styled toolbar. If title or toolbar is provided, the children will be ignored. */
toolbar?: React.ReactNode;
- /** Custom main header content. To opt into a default styling, use the title and toolbar props instead. */
- children?: React.ReactNode;
+ /** Additional props passed to the Compass panel that wraps the main header content when using the title or toolbar props. When using the
+ * children prop, you should pass your own Compass panel.
+ */
+ compassPanelProps?: Omit;
}
export const CompassMainHeader: React.FunctionComponent = ({
@@ -19,15 +29,16 @@ export const CompassMainHeader: React.FunctionComponent
title,
toolbar,
children,
+ compassPanelProps,
...props
-}) => {
+}: CompassMainHeaderProps) => {
const _content =
title !== undefined || toolbar !== undefined ? (
-
-
- {title}
- {toolbar && {toolbar} }
-
+
+
+ {title && {title} }
+ {toolbar && {toolbar} }
+
) : (
children
diff --git a/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx b/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx
new file mode 100644
index 00000000000..590ecd25427
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassMainHeaderContent.tsx
@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component to be passed as custom content for the Compass main header. This should also be wrapped
+ * in a Compass panel component.
+ */
+
+export interface CompassMainHeaderContentProps extends React.HTMLProps {
+ /** Content of the main header content. */
+ children: React.ReactNode;
+ /** Additional classes added to the main header content. */
+ className?: string;
+}
+
+export const CompassMainHeaderContent: React.FunctionComponent = ({
+ children,
+ className,
+ ...props
+}: CompassMainHeaderContentProps) => (
+ {
+ /** Content of the main header title. */
+ children: React.ReactNode;
+ /** Additional classes added to the main header title. */
+ className?: string;
+}
+
+export const CompassMainHeaderTitle: React.FunctionComponent = ({
+ children,
+ className,
+ ...props
+}: CompassMainHeaderTitleProps) => (
+ {
+ /** Content of the main header toolbar. */
+ children: React.ReactNode;
+ /** Additional classes added to the main header toolbar. */
+ className?: string;
+}
+
+export const CompassMainHeaderToolbar: React.FunctionComponent = ({
+ children,
+ className,
+ ...props
+}: CompassMainHeaderToolbarProps) => (
+ {
+export interface CompassMessageBarProps extends React.HTMLProps {
/** Content of the message bar. Typically a @patternfly/chatbot MessageBar component. */
children?: React.ReactNode;
/** Additional classes added to the message bar */
@@ -12,7 +12,7 @@ export const CompassMessageBar: React.FunctionComponent
children,
className,
...props
-}) => (
+}: CompassMessageBarProps) => (
{
+ /** Content of the nav content wrapper. */
+ children: React.ReactNode;
+ /** Additional classes added to the nav content. */
+ className?: string;
+}
+
+export const CompassNavContent: React.FunctionComponent = ({
+ children,
+ className,
+ ...props
+}: CompassNavContentProps) => (
+ , 'onClick'> {
+ /** Content to display in the tooltip. Defaults to "Home". */
+ tooltipContent?: React.ReactNode;
+ /** Click handler for the home button. */
+ onClick?: React.MouseEventHandler;
+ /** Additional classes added to the nav home wrapper. */
+ className?: string;
+ /** Accessible label for the nav home. */
+ 'aria-label'?: string;
+}
+
+export const CompassNavHome: React.FunctionComponent = ({
+ 'aria-label': ariaLabel = 'Home',
+ tooltipContent = 'Home',
+ className,
+ onClick,
+ ...props
+}: CompassNavHomeProps) => {
+ const buttonRef = useRef(null);
+
+ return (
+ {
+ /** Content of the nav main section (typically tabs). */
+ children: React.ReactNode;
+ /** Additional classes added to the nav main section. */
+ className?: string;
+}
+
+export const CompassNavMain: React.FunctionComponent = ({
+ children,
+ className,
+ ...props
+}: CompassNavMainProps) => (
+ , 'onClick'> {
+ /** Content to display in the tooltip. Defaults to "Search". */
+ tooltipContent?: React.ReactNode;
+ /** Click handler for the search button. */
+ onClick?: React.MouseEventHandler;
+ /** Additional classes added to the nav search wrapper. */
+ className?: string;
+ /** Accessible label for the nav search. */
+ 'aria-label'?: string;
+}
+
+export const CompassNavSearch: React.FunctionComponent = ({
+ 'aria-label': ariaLabel = 'Search',
+ tooltipContent = 'Search',
+ className,
+ onClick,
+ ...props
+}: CompassNavSearchProps) => {
+ const buttonRef = useRef(null);
+
+ return (
+ {
+export interface CompassPanelProps extends React.HTMLProps {
/** Content of the panel. */
children: React.ReactNode;
/** Additional classes added to the panel. */
@@ -30,7 +30,7 @@ export const CompassPanel: React.FunctionComponent = ({
isFullHeight,
isScrollable,
...props
-}) => (
+}: CompassPanelProps) => (
Test );
- expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
-});
-
-test(`Renders with default ${styles.compassPanel} and ${styles.compassHero} classes on the hero and ${styles.compassHeroBody} class on the hero body`, () => {
+test(`Renders with ${styles.compass}__hero class by defaulty`, () => {
render(Test );
- const heroBodyElement = screen.getByText('Test');
- expect(heroBodyElement).toHaveClass(styles.compassHeroBody);
-
- const heroElement = heroBodyElement.parentElement;
- expect(heroElement).toHaveClass(styles.compassPanel);
- expect(heroElement).toHaveClass(styles.compassHero);
-});
-
-test('Renders with light background image style when backgroundSrcLight is provided', () => {
- const backgroundSrc = 'light-bg.jpg';
- render(Test );
- expect(screen.getByText('Test').parentElement).toHaveStyle(
- `--pf-v6-c-compass__hero--BackgroundImage--light: url(${backgroundSrc})`
- );
-});
-
-test('Renders with dark background image style when backgroundSrcDark is provided', () => {
- const backgroundSrc = 'dark-bg.jpg';
- render(Test );
- expect(screen.getByText('Test').parentElement).toHaveStyle(
- `--pf-v6-c-compass__hero--BackgroundImage--dark: url(${backgroundSrc})`
- );
-});
-
-test('Renders with both light and dark background image styles when both are provided', () => {
- const lightSrc = 'light-bg.jpg';
- const darkSrc = 'dark-bg.jpg';
- render(
-
- Test
-
- );
- const heroElement = screen.getByText('Test').parentElement;
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--light: url(${lightSrc})`);
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--dark: url(${darkSrc})`);
-});
-
-test('Renders with light gradient styles when gradientLight is provided', () => {
- const gradient = {
- stop1: '#ff0000',
- stop2: '#00ff00',
- stop3: '#0000ff'
- };
- render(Test );
- const heroElement = screen.getByText('Test').parentElement;
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${gradient.stop1}`);
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-2--light: ${gradient.stop2}`);
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-3--light: ${gradient.stop3}`);
-});
-test('Renders with dark gradient styles when gradientDark is provided', () => {
- const gradient = {
- stop1: '#ff0000',
- stop2: '#00ff00',
- stop3: '#0000ff'
- };
- render(Test );
- const heroElement = screen.getByText('Test').parentElement;
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${gradient.stop1}`);
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-2--dark: ${gradient.stop2}`);
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-3--dark: ${gradient.stop3}`);
-});
-
-test('Renders with both light and dark gradient styles when both are provided', () => {
- const lightGradient = {
- stop1: '#ff0000',
- stop2: '#00ff00',
- stop3: '#0000ff'
- };
- const darkGradient = {
- stop1: '#000000',
- stop2: '#ffffff',
- stop3: '#808080'
- };
- render(
-
- Test
-
- );
- const heroElement = screen.getByText('Test').parentElement;
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${lightGradient.stop1}`);
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+ expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__hero`, { exact: true });
});
-test('Renders with both background images and gradient styles when both are provided', () => {
- const lightSrc = 'light-bg.jpg';
- const darkSrc = 'dark-bg.jpg';
- const lightGradient = { stop1: '#ff0000' };
- const darkGradient = { stop1: '#000000' };
-
- render(
-
- Test
-
- );
- const heroElement = screen.getByText('Test').parentElement;
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--light: url(${lightSrc})`);
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--dark: url(${darkSrc})`);
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${lightGradient.stop1}`);
- expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+test('Renders with custom class name when className prop is provided', () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass('custom-class');
});
test('Renders with additional props spread to the component', () => {
render(Test );
- expect(screen.getByText('Test').parentElement).toHaveAccessibleName('Test label');
+ expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
});
test('Matches the snapshot', () => {
- const { asFragment } = render(
-
-
- );
+ const { asFragment } = render(Hero content );
expect(asFragment()).toMatchSnapshot();
});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassMainFooter.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassMainFooter.test.tsx
new file mode 100644
index 00000000000..25b955ba77c
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassMainFooter.test.tsx
@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainFooter } from '../CompassMainFooter';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+ render(
+ Custom content );
+ expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassMainFooter} class`, () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass(styles.compassMainFooter);
+});
+
+test(`Renders with pf-m-expanded class by default`, () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass('pf-m-expanded');
+});
+
+test(`Renders with pf-m-expanded class when isExpanded is true`, () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass('pf-m-expanded');
+});
+
+test(`Renders without pf-m-expanded class when isExpanded is false`, () => {
+ render(Test );
+ expect(screen.getByText('Test')).not.toHaveClass('pf-m-expanded');
+});
+
+test('Renders with additional props spread to the component', () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+ const { asFragment } = render(Custom children content );
+ expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx
index ef13deb96ef..1ef47f8c7bc 100644
--- a/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx
+++ b/packages/react-core/src/components/Compass/__tests__/CompassMainHeader.test.tsx
@@ -74,9 +74,52 @@ test('Renders children when neither title nor toolbar are provided', () => {
expect(screen.getByText('Custom children content')).toBeVisible();
});
+test('Renders CompassPanel when title is passed', () => {
+ render(
+
+ );
+
+ const content = screen.getByTestId('test-id').firstChild;
+ expect(content).not.toHaveClass(styles.compassPanel);
+});
+
+test('Passes props to CompassPanel when title and compassPanelProps is passed', () => {
+ render(
+ Test );
- expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+ render(Test );
+ expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
});
test('Matches the snapshot with both title and toolbar', () => {
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassMainHeaderContent.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassMainHeaderContent.test.tsx
new file mode 100644
index 00000000000..44475ae7dca
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassMainHeaderContent.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderContent } from '../CompassMainHeaderContent';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+ render(Custom content );
+ expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-content class`, () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-content`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+ const { asFragment } = render(Content );
+ expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassMainHeaderTitle.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassMainHeaderTitle.test.tsx
new file mode 100644
index 00000000000..9bc10b59b45
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassMainHeaderTitle.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderTitle } from '../CompassMainHeaderTitle';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+ render(Custom content );
+ expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-title class`, () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-title`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+ const { asFragment } = render(Content );
+ expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassMainHeaderToolbar.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassMainHeaderToolbar.test.tsx
new file mode 100644
index 00000000000..62ab818f602
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassMainHeaderToolbar.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderToolbar } from '../CompassMainHeaderToolbar';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+ render(Custom content );
+ expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-toolbar class`, () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-toolbar`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+ render(Test );
+ expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+ const { asFragment } = render(Content );
+ expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassNavContent.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassNavContent.test.tsx
new file mode 100644
index 00000000000..eb176b5ccae
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassNavContent.test.tsx
@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { CompassNavContent } from '../CompassNavContent';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+ render(Test content );
+
+ expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+ render(Test );
+
+ expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassNavContent} class`, () => {
+ render(Test );
+
+ expect(screen.getByText('Test')).toHaveClass(styles.compassNavContent, { exact: true });
+});
+
+test('Renders with additional props spread to the component', () => {
+ render(Test );
+
+ expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+ const { asFragment } = render(
+
+
+ );
+
+ expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassNavHome.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassNavHome.test.tsx
new file mode 100644
index 00000000000..2f3b8b6fed1
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassNavHome.test.tsx
@@ -0,0 +1,89 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CompassNavHome } from '../CompassNavHome';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with default aria-label', () => {
+ render(Test content );
+
+ expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+ render(Test );
+
+ expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassNavMain} class`, () => {
+ render(Test );
+
+ expect(screen.getByText('Test')).toHaveClass(styles.compassNavMain, { exact: true });
+});
+
+test('Renders with additional props spread to the component', () => {
+ render(Test );
+
+ expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+ const { asFragment } = render(
+
+
+ );
+
+ expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Compass/__tests__/CompassNavSearch.test.tsx b/packages/react-core/src/components/Compass/__tests__/CompassNavSearch.test.tsx
new file mode 100644
index 00000000000..a32111d6899
--- /dev/null
+++ b/packages/react-core/src/components/Compass/__tests__/CompassNavSearch.test.tsx
@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CompassNavSearch } from '../CompassNavSearch';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with default aria-label', () => {
+ render(
@@ -364,12 +402,24 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
fill="currentColor"
height="1em"
role="img"
- viewBox="0 0 352 512"
width="1em"
>
- ` component. Enabling a focus trap with `focusTrap.enabled` will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx b/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx
index df64c62bda8..64395a8c59d 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx
@@ -13,7 +13,7 @@ import {
export const DrawerAdditionalSectionAboveContent: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx
index e792e32a058..803d1d92aab 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx
@@ -14,7 +14,7 @@ import {
export const DrawerBasic: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx
index a9ceb86666e..2df988d7740 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerBasicInline: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx
index dda20e8229c..fdea78cbfe7 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerBasicPill: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx
index 74eb0eb514f..0401fa35331 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerBreakpoint: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx
index 9574c6a5360..071cd9a3244 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx
index c1ed8445748..ffe46a2b9e1 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerInlinePanelStart: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx b/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx
index 218f7b44889..9a06d057e3f 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerModifiedContentPadding: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx b/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx
index 5f28bd3e451..afabeb0f9df 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerModifiedPanelPadding: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx
index c89f7f13e1f..1b765555597 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerPanelBottom: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx
index 852b9eff4c1..6c3460ace2f 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerPanelEnd: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx
index 60c8cc515e0..a1acde0be10 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerPanelStart: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx
index 2e3a42c2c81..16ae9532739 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerBasicPill: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx
index 252c683ce33..939fcf4a441 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerResizableAtEnd: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx
index b5d2ef2da8f..32e56665aa0 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerResizableAtStart: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx
index 86da473b620..ecce2daa1ca 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerResizableOnBottom: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx
index e4dd4a57bd5..16299b6db8e 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx
@@ -12,7 +12,7 @@ import {
export const DrawerResizableOnInline: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx b/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx
index 773d693207b..2f5229223cc 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx
@@ -13,7 +13,7 @@ import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/
export const DrawerStatic: React.FunctionComponent = () => {
const [isExpanded, setIsExpanded] = useState(false);
- const drawerRef = useRef(undefined);
+ const drawerRef = useRef(null);
const onExpand = () => {
drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx
index e539c528af5..80219aebdc3 100644
--- a/packages/react-core/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx
@@ -48,6 +48,12 @@ export interface DropdownProps extends MenuProps, OUIAProps {
ouiaId?: number | string;
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
ouiaSafe?: boolean;
+ /** When applied, wraps dropdown in a container with a data-ouia-component-id.*/
+ containerOuiaId?: number | string;
+ /** Set the value of data-ouia-safe for the container when containerOuiaId is applied. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+ containerOuiaSafe?: boolean;
+ /** Sets the base component to render for the container. Defaults to */
+ containerComponent?: React.ReactNode;
/** z-index of the dropdown menu */
zIndex?: number;
/** Additional properties to pass to the Popper */
@@ -86,11 +92,16 @@ const DropdownBase: React.FunctionComponent = ({
shouldFocusFirstItemOnOpen = false,
shouldPreventScrollOnItemFocus = true,
focusTimeoutDelay = 0,
+ containerOuiaId,
+ containerOuiaSafe = true,
+ containerComponent = 'span',
...props
}: DropdownProps) => {
const localMenuRef = useRef(undefined);
const localToggleRef = useRef(undefined);
const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
+ const ContainerComponent = containerComponent as any;
+ const containerOuiaProps = useOUIAProps('Dropdown container', containerOuiaId, containerOuiaSafe);
const menuRef = (innerRef as React.RefObject) || localMenuRef;
const toggleRef =
@@ -185,7 +196,8 @@ const DropdownBase: React.FunctionComponent = ({
);
- return (
+
+ const popper = (
= ({
{...popperProps}
/>
);
+
+ return containerOuiaId ? {popper} : popper;
};
export const Dropdown = forwardRef((props: DropdownProps, ref: React.Ref) => (
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
index 73e6d5068d5..b8b78399fe5 100644
--- a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
+++ b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
@@ -201,6 +201,32 @@ test('onOpenChange is called when passed and user presses esc key', async () =>
expect(onOpenChange).toBeCalledTimes(1);
});
+test('applies containerOuiaId to parent element', () => {
+ render(
+ toggle(toggleRef)}>
+ {dropdownChildren}
+
+ );
+
+ const dropdownToggle = screen.getByRole('button', { name: 'Dropdown' });
+ const dropdownParent = dropdownToggle?.parentNode?.parentNode;
+ expect(dropdownParent).toHaveAttribute('data-ouia-component-id', 'test-dropdown');
+ expect(dropdownParent).toHaveAttribute('data-ouia-component-type', 'PF6/Dropdown container');
+ expect(dropdownParent?.tagName).toBe('SPAN');
+});
+
+test('Renders with custom container element when containerComponent is passed', () => {
+ render(
+ toggle(toggleRef)}>
+ {dropdownChildren}
+
+ );
+
+ const dropdownToggle = screen.getByRole('button', { name: 'Dropdown' });
+ const dropdownParent = dropdownToggle?.parentNode?.parentNode;
+ expect(dropdownParent?.tagName).toBe('DIV');
+});
+
test('match snapshot', () => {
const { asFragment } = render(
`, pass a short messag
```ts file="./DropdownWithDescriptions.tsx"
```
+
+### Split toggle with checkbox
+
+To combine a checkbox or other control with a dropdown menu, use a split button.
+
+A `` can be rendered as a split button via `splitButtonItems`. Elements to be displayed before the dropdown toggle button (like the ``) must be included in the `splitButtonItems`.
+
+If the dropdown menu closes upon selection, you will need to manually shift focus back to the toggle element after a user selects an item from the menu.
+
+```ts file="./DropdownWithSplit.tsx"
+
+```
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx
new file mode 100644
index 00000000000..140a99510cd
--- /dev/null
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx
@@ -0,0 +1,97 @@
+import {
+ Dropdown,
+ MenuToggle,
+ MenuToggleCheckbox,
+ DropdownItem,
+ DropdownList,
+ Divider,
+ MenuToggleElement
+} from '@patternfly/react-core';
+import { useRef, useState } from 'react';
+
+export const DropdownSplitButtonText: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = useState(false);
+ const toggleRef = useRef(null);
+
+ const onFocus = () => {
+ if (!toggleRef.current) {
+ return;
+ }
+
+ const toggleButton = toggleRef.current.querySelector('button[aria-expanded]');
+ toggleButton?.focus();
+ };
+
+ const onSelect = () => {
+ setIsOpen(false);
+ onFocus();
+ };
+
+ const onToggleClick = () => {
+ setIsOpen(!isOpen);
+ };
+
+ return (
+ setIsOpen(isOpen)}
+ toggle={(toggleRefCallback: React.Ref) => (
+ {
+ // Handle both callback ref and useRef
+ if (typeof toggleRefCallback === 'function') {
+ toggleRefCallback(node);
+ } else if (toggleRefCallback) {
+ (toggleRefCallback as React.MutableRefObject).current = node;
+ }
+ (toggleRef as React.MutableRefObject).current = node;
+ }}
+ splitButtonItems={[
+
+
+ Action
+
+ ev.preventDefault()}
+ >
+ Link
+
+
+ Disabled Action
+
+
+ Disabled Link
+
+
+ Aria-disabled Link
+
+
+ Separated Action
+
+ ev.preventDefault()}>
+ Separated Link
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
index 63dab5eee9e..f9529ee933f 100644
--- a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
+++ b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap
@@ -90,12 +90,24 @@ exports[`DualListSelector with search inputs 1`] = `
fill="currentColor"
height="1em"
role="img"
- viewBox="0 0 512 512"
width="1em"
>
-
-
diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
index e6331b70b35..220e83bab9d 100644
--- a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
+++ b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
@@ -62,6 +62,10 @@ export interface ExpandableSectionProps extends Omit
- {header}
-
-
- {sidebarStart}
-
- {main}
-
- {sidebarEnd}
-
-
- {footer}
-
+
+ {dock &&
);
if (hasDrawer) {
return (
- {dock}
}
+ {header && (
+
+ {header}
+
+ )}
+ {sidebarStart && (
+
+ {sidebarStart}
+
+ )}
+ {main && {main}
}
+ {sidebarEnd && (
+
+ {sidebarEnd}
+
+ )}
+ {footer && (
+
+ {footer}
+
+ )}
{logo}
{nav}
diff --git a/packages/react-core/src/components/Compass/CompassHero.tsx b/packages/react-core/src/components/Compass/CompassHero.tsx
index 0987c25277e..ce57d73ccfe 100644
--- a/packages/react-core/src/components/Compass/CompassHero.tsx
+++ b/packages/react-core/src/components/Compass/CompassHero.tsx
@@ -1,87 +1,22 @@
import styles from '@patternfly/react-styles/css/components/Compass/compass';
import { css } from '@patternfly/react-styles';
-import compassHeroBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_light';
-import compassHeroBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_dark';
-import compassHeroGradientStop1Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_light';
-import compassHeroGradientStop2Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_light';
-import compassHeroGradientStop3Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_light';
-import compassHeroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_dark';
-import compassHeroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_dark';
-import compassHeroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_dark';
-
-interface CompassHeroProps extends Omit
-
- );
-};
+}: CompassHeroProps) => (
+ {children}
-
+ {children}
+
+);
CompassHero.displayName = 'CompassHero';
diff --git a/packages/react-core/src/components/Compass/CompassMainFooter.tsx b/packages/react-core/src/components/Compass/CompassMainFooter.tsx
new file mode 100644
index 00000000000..cbbd60f663f
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassMainFooter.tsx
@@ -0,0 +1,24 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassMainFooterProps extends Omit
+ {children}
+
+);
+
+CompassMainFooter.displayName = 'CompassMainFooter';
diff --git a/packages/react-core/src/components/Compass/CompassMainHeader.tsx b/packages/react-core/src/components/Compass/CompassMainHeader.tsx
index 409f7b2e454..9e52c8e172a 100644
--- a/packages/react-core/src/components/Compass/CompassMainHeader.tsx
+++ b/packages/react-core/src/components/Compass/CompassMainHeader.tsx
@@ -1,17 +1,27 @@
-import { Flex, FlexItem } from '../../layouts/Flex';
-import { CompassPanel } from './CompassPanel';
+import { CompassPanel, CompassPanelProps } from './CompassPanel';
+import { CompassMainHeaderContent } from './CompassMainHeaderContent';
+import { CompassMainHeaderTitle } from './CompassMainHeaderTitle';
+import { CompassMainHeaderToolbar } from './CompassMainHeaderToolbar';
import styles from '@patternfly/react-styles/css/components/Compass/compass';
import { css } from '@patternfly/react-styles';
-interface CompassMainHeaderProps extends Omit
+ {children}
+
+);
+
+CompassMainHeaderContent.displayName = 'CompassMainHeaderContent';
diff --git a/packages/react-core/src/components/Compass/CompassMainHeaderTitle.tsx b/packages/react-core/src/components/Compass/CompassMainHeaderTitle.tsx
new file mode 100644
index 00000000000..5fd5bc269ac
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassMainHeaderTitle.tsx
@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component for custom title content to be passed into a Compass main header. This should also be wrapped
+ * by a Compass main header content component.
+ */
+
+export interface CompassMainHeaderTitleProps extends React.HTMLProps
+ {children}
+
+);
+
+CompassMainHeaderTitle.displayName = 'CompassMainHeaderTitle';
diff --git a/packages/react-core/src/components/Compass/CompassMainHeaderToolbar.tsx b/packages/react-core/src/components/Compass/CompassMainHeaderToolbar.tsx
new file mode 100644
index 00000000000..b09529cfc00
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassMainHeaderToolbar.tsx
@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component for custom toolbar content to be passed into a Compass main header. This should also be wrapped
+ * by a Compass main header content component.
+ */
+
+export interface CompassMainHeaderToolbarProps extends React.HTMLProps
+ {children}
+
+);
+
+CompassMainHeaderToolbar.displayName = 'CompassMainHeaderToolbar';
diff --git a/packages/react-core/src/components/Compass/CompassMessageBar.tsx b/packages/react-core/src/components/Compass/CompassMessageBar.tsx
index 4e9a737aa37..f38b8a8529b 100644
--- a/packages/react-core/src/components/Compass/CompassMessageBar.tsx
+++ b/packages/react-core/src/components/Compass/CompassMessageBar.tsx
@@ -1,7 +1,7 @@
import styles from '@patternfly/react-styles/css/components/Compass/compass';
import { css } from '@patternfly/react-styles';
-interface CompassMessageBarProps extends React.HTMLProps
{children}
diff --git a/packages/react-core/src/components/Compass/CompassNavContent.tsx b/packages/react-core/src/components/Compass/CompassNavContent.tsx
new file mode 100644
index 00000000000..8c27583213b
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassNavContent.tsx
@@ -0,0 +1,20 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+export interface CompassNavContentProps extends React.HTMLProps
+ {children}
+
+);
+
+CompassNavContent.displayName = 'CompassNavContent';
diff --git a/packages/react-core/src/components/Compass/CompassNavHome.tsx b/packages/react-core/src/components/Compass/CompassNavHome.tsx
new file mode 100644
index 00000000000..8f9410ddc08
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassNavHome.tsx
@@ -0,0 +1,77 @@
+import { useRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+
+const CompassHomeIcon = () => (
+
+);
+
+export interface CompassNavHomeProps extends Omit
+
+ }
+ aria-label={ariaLabel}
+ onClick={onClick}
+ ref={buttonRef}
+ />
+
+
+ );
+};
+
+CompassNavHome.displayName = 'CompassNavHome';
diff --git a/packages/react-core/src/components/Compass/CompassNavMain.tsx b/packages/react-core/src/components/Compass/CompassNavMain.tsx
new file mode 100644
index 00000000000..082e75c61e8
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassNavMain.tsx
@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+export interface CompassNavMainProps extends React.HTMLProps
+ {children}
+
+);
+
+CompassNavMain.displayName = 'CompassNavMain';
diff --git a/packages/react-core/src/components/Compass/CompassNavSearch.tsx b/packages/react-core/src/components/Compass/CompassNavSearch.tsx
new file mode 100644
index 00000000000..5731b45883c
--- /dev/null
+++ b/packages/react-core/src/components/Compass/CompassNavSearch.tsx
@@ -0,0 +1,70 @@
+import { useRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+
+const CompassSearchIcon = () => (
+
+);
+
+export interface CompassNavSearchProps extends Omit
+
+ }
+ aria-label={ariaLabel}
+ onClick={onClick}
+ ref={buttonRef}
+ />
+
+
+ );
+};
+
+CompassNavSearch.displayName = 'CompassNavSearch';
diff --git a/packages/react-core/src/components/Compass/CompassPanel.tsx b/packages/react-core/src/components/Compass/CompassPanel.tsx
index 6b8096a51e6..d7b77843e77 100644
--- a/packages/react-core/src/components/Compass/CompassPanel.tsx
+++ b/packages/react-core/src/components/Compass/CompassPanel.tsx
@@ -1,7 +1,7 @@
import styles from '@patternfly/react-styles/css/components/Compass/compass';
import { css } from '@patternfly/react-styles';
-interface CompassPanelProps extends React.HTMLProps {
);
expect(asFragment()).toMatchSnapshot();
});
+
+test(`Renders with ${styles.modifiers.dock} class when dock is passed`, () => {
+ render(Dock content
} data-testid="compass" />);
+ expect(screen.getByTestId('compass')).toHaveClass(styles.modifiers.dock);
+});
+
+test(`Does not render with ${styles.modifiers.dock} class when dock is not passed`, () => {
+ render(Hero content
-
+
+ );
+ expect(screen.getByTestId('test-main-footer').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+ render(Children content
+ Nav content wrapper
+ Main tabs content
+
- {!hideDefaultPreview && type === fileReaderType.text && (
-
- )}
- {isLoading && (
-
+ {(isLoading || (!hideDefaultPreview && type === fileReaderType.text)) && (
+
-
- )}
-
+ {!hideDefaultPreview && type === fileReaderType.text && (
+
+ )}
+ {isLoading && (
+
+ )}
{children}
+
+ )}
+
+
+ );
+};
+
+Hero.displayName = 'Hero';
diff --git a/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx b/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx
new file mode 100644
index 00000000000..ee290be3aa8
--- /dev/null
+++ b/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx
@@ -0,0 +1,175 @@
+import { render, screen } from '@testing-library/react';
+import { Hero } from '../Hero';
+import styles from '@patternfly/react-styles/css/components/Hero/hero';
+
+test('Renders without children', () => {
+ render(
+ {children}
+
+
+ );
+ expect(screen.getByTestId('test-hero').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+ render(
+
+
+ Hero content
+
+
+
+
+ Hero content
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ + Log into your account +
+`.
+
+This example uses `brandImgProps` to pass the brand image source, alt text, and an extra class, which will be preferred over `brandImgSrc` when both are provided.
```ts file='./LoginPageBasic.tsx' isFullscreen
```
diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx
index 8d8ee40e7bf..d90d2cde442 100644
--- a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx
+++ b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx
@@ -114,8 +114,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
return (
= ({
@@ -36,6 +38,7 @@ export const Masthead: React.FunctionComponent = ({
md: 'inline'
},
inset,
+ variant = 'default',
...props
}: MastheadProps) => {
const { width, getBreakpoint } = useContext(PageContext);
@@ -43,6 +46,7 @@ export const Masthead: React.FunctionComponent = ({
, HTMLAnchorElement> {
+export interface MastheadLogoProps extends React.DetailedHTMLProps<
+ React.HTMLProps,
+ HTMLAnchorElement
+> {
/** Content rendered inside of the masthead logo. */
children?: React.ReactNode;
/** Additional classes added to the masthead logo. */
diff --git a/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx b/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx
index c6ece9b7def..982ae08d932 100644
--- a/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx
+++ b/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx
@@ -1,5 +1,6 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import { Masthead, MastheadMain, MastheadLogo, MastheadContent, MastheadBrand, MastheadToggle } from '../index';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
describe('Masthead', () => {
test('verify basic', () => {
@@ -71,6 +72,29 @@ describe('Masthead', () => {
expect(asFragment()).toMatchSnapshot();
});
});
+
+ test(`Renders with ${styles.modifiers.docked} class when variant is docked`, () => {
+ render(
+
+ test
+
+ );
+ expect(screen.getByTestId('masthead')).toHaveClass(styles.modifiers.docked);
+ });
+
+ test(`Does not render with ${styles.modifiers.docked} class when variant is default`, () => {
+ render(
+
+ test
+
+ );
+ expect(screen.getByTestId('masthead')).not.toHaveClass(styles.modifiers.docked);
+ });
+
+ test(`Does not render with ${styles.modifiers.docked} class when variant is not passed`, () => {
+ render(test );
+ expect(screen.getByTestId('masthead')).not.toHaveClass(styles.modifiers.docked);
+ });
});
describe('MastheadLogo', () => {
diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
index a707417af8a..e6b6c7ec1e5 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -23,7 +23,8 @@ export enum MenuToggleSize {
export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
export interface MenuToggleProps
- extends Omit<
+ extends
+ Omit<
React.DetailedHTMLProps<
React.ButtonHTMLAttributes & React.HTMLAttributes,
MenuToggleElement
diff --git a/packages/react-core/src/components/MenuToggle/MenuToggleCheckbox.tsx b/packages/react-core/src/components/MenuToggle/MenuToggleCheckbox.tsx
index 459417d2a57..de8aaad8502 100644
--- a/packages/react-core/src/components/MenuToggle/MenuToggleCheckbox.tsx
+++ b/packages/react-core/src/components/MenuToggle/MenuToggleCheckbox.tsx
@@ -5,8 +5,7 @@ import { PickOptional } from '../../helpers/typeUtils';
import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
export interface MenuToggleCheckboxProps
- extends Omit, 'type' | 'onChange' | 'disabled' | 'checked'>,
- OUIAProps {
+ extends Omit, 'type' | 'onChange' | 'disabled' | 'checked'>, OUIAProps {
/** Additional classes added to the MenuToggleCheckbox */
className?: string;
/** Flag to show if the checkbox selection is valid or invalid */
diff --git a/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap b/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap
index 8d90793143a..60dca52317b 100644
--- a/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap
+++ b/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap
@@ -27,12 +27,24 @@ exports[`Old Snapshot tests - remove when refactoring passes additional classes
fill="currentColor"
height="1em"
role="img"
- viewBox="0 0 320 512"
width="1em"
>
-
-
-
-
-
@@ -592,12 +688,24 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
fill="currentColor"
height="1em"
role="img"
- viewBox="0 0 352 512"
width="1em"
>
-
-
- , HTMLElement>, 'onSelect' | 'onToggle'>,
+ extends
+ Omit, HTMLElement>, 'onSelect' | 'onToggle'>,
OUIAProps {
/** Anything that can be rendered inside of the nav */
children?: React.ReactNode;
@@ -35,8 +36,8 @@ export interface NavProps
) => void;
/** Accessible label for the nav when there are multiple navs on the page */
'aria-label'?: string;
- /** For horizontal navs */
- variant?: 'default' | 'horizontal' | 'horizontal-subnav';
+ /** The nav variant to use. Docked is in beta. */
+ variant?: 'default' | 'horizontal' | 'horizontal-subnav' | 'docked';
/** Value to overwrite the randomly generated data-ouia-component-id.*/
ouiaId?: number | string;
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -154,6 +155,7 @@ class Nav extends Component<
className={css(
styles.nav,
isHorizontal && styles.modifiers.horizontal,
+ variant === 'docked' && styles.modifiers.docked,
variant === 'horizontal-subnav' && styles.modifiers.subnav,
this.state.isScrollable && styles.modifiers.scrollable,
className
diff --git a/packages/react-core/src/components/Nav/NavExpandable.tsx b/packages/react-core/src/components/Nav/NavExpandable.tsx
index 984c1efe84e..bb40ad633fc 100644
--- a/packages/react-core/src/components/Nav/NavExpandable.tsx
+++ b/packages/react-core/src/components/Nav/NavExpandable.tsx
@@ -9,8 +9,7 @@ import { PickOptional } from '../../helpers/typeUtils';
import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
export interface NavExpandableProps
- extends Omit, HTMLLIElement>, 'title'>,
- OUIAProps {
+ extends Omit, HTMLLIElement>, 'title'>, OUIAProps {
/** Title content shown for the expandable list */
title: React.ReactNode;
/** If defined, screen readers will read this text instead of the list title */
diff --git a/packages/react-core/src/components/Nav/NavItem.tsx b/packages/react-core/src/components/Nav/NavItem.tsx
index aea1b9b4ae6..c3f097e577a 100644
--- a/packages/react-core/src/components/Nav/NavItem.tsx
+++ b/packages/react-core/src/components/Nav/NavItem.tsx
@@ -1,4 +1,14 @@
-import { cloneElement, Fragment, isValidElement, useContext, useEffect, useRef, useState } from 'react';
+import {
+ cloneElement,
+ Fragment,
+ isValidElement,
+ useContext,
+ useEffect,
+ useRef,
+ useState,
+ forwardRef,
+ MutableRefObject
+} from 'react';
import styles from '@patternfly/react-styles/css/components/Nav/nav';
import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
import dividerStyles from '@patternfly/react-styles/css/components/Divider/divider';
@@ -42,9 +52,13 @@ export interface NavItemProps extends Omit, '
ouiaId?: number | string;
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
ouiaSafe?: boolean;
+ /** React ref for the anchor element within the nav item. */
+ anchorRef?: React.Ref;
+ /** @hide Forwarded ref */
+ innerRef?: React.Ref;
}
-export const NavItem: React.FunctionComponent = ({
+const NavItemBase: React.FunctionComponent = ({
children,
styleChildren = true,
className,
@@ -61,13 +75,16 @@ export const NavItem: React.FunctionComponent = ({
ouiaSafe,
zIndex = 9999,
icon,
+ innerRef,
+ anchorRef,
...props
}: NavItemProps) => {
const { flyoutRef, setFlyoutRef, navRef } = useContext(NavContext);
const { isSidebarOpen } = useContext(PageSidebarContext);
const [flyoutTarget, setFlyoutTarget] = useState(null);
const [isHovered, setIsHovered] = useState(false);
- const ref = useRef(undefined);
+ const _ref = useRef(undefined);
+ const ref = (innerRef as MutableRefObject) || _ref;
const flyoutVisible = ref === flyoutRef;
const popperRef = useRef(undefined);
const hasFlyout = flyout !== undefined;
@@ -180,6 +197,7 @@ export const NavItem: React.FunctionComponent = ({
const preventLinkDefault = preventDefault || !to;
return (
context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick)}
className={css(
@@ -208,6 +226,7 @@ export const NavItem: React.FunctionComponent = ({
className: css(styles.navLink, isActive && styles.modifiers.current, child.props && child.props.className)
}),
tabIndex: child.props.tabIndex || tabIndex,
+ ref: anchorRef,
children: hasFlyout ? (
{child.props.children}
@@ -267,4 +286,9 @@ export const NavItem: React.FunctionComponent = ({
return navItem;
};
+
+export const NavItem = forwardRef((props, ref) => (
+ , HTMLUListElement> {
+export interface NavListProps extends React.DetailedHTMLProps<
+ React.HTMLAttributes,
+ HTMLUListElement
+> {
/** Children nodes */
children?: React.ReactNode;
/** Additional classes added to the list */
diff --git a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap
index 8e10720ddf8..11ea5e157b6 100644
--- a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap
+++ b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap
@@ -25,12 +25,24 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
fill="currentColor"
height="1em"
role="img"
- viewBox="0 0 256 512"
width="1em"
>
-
-
@@ -347,12 +359,24 @@ exports[`Progress variant success 1`] = `
fill="currentColor"
height="1em"
role="img"
- viewBox="0 0 512 512"
width="1em"
>
-
-
-
-
-
- {
children?: React.ReactNode;
/** Additional classes added to the page layout */
className?: string;
+ /** @beta Indicates the layout variant */
+ variant?: 'default' | 'docked';
/** Masthead component (e.g. {
isBreadcrumbWidthLimited,
className,
children,
+ variant,
masthead,
sidebar,
notificationDrawer,
@@ -336,6 +339,7 @@ class Page extends Component {
{...rest}
className={css(
styles.page,
+ variant === 'docked' && styles.modifiers.dock,
width !== null && height !== null && 'pf-m-resize-observer',
width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
@@ -344,7 +348,7 @@ class Page extends Component {
)}
>
{skipToContent}
- {masthead}
+ {variant === 'docked' ? {masthead} : masthead}
{sidebar}
{notificationDrawer && (
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index 87bc72d9396..78ca03fb714 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -389,4 +389,21 @@ describe('Page', () => {
expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
});
+
+ test(`Renders with ${styles.modifiers.dock} class when variant is docked`, () => {
+ render(
-
-
- {
children?: React.ReactNode;
/** Additional classes added to the page layout */
className?: string;
+ /** @beta Indicates the layout variant */
+ variant?: 'default' | 'docked';
/** Masthead component (e.g. {
isBreadcrumbWidthLimited,
className,
children,
+ variant,
masthead,
sidebar,
notificationDrawer,
@@ -336,6 +339,7 @@ class Page extends Component {
{...rest}
className={css(
styles.page,
+ variant === 'docked' && styles.modifiers.dock,
width !== null && height !== null && 'pf-m-resize-observer',
width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
@@ -344,7 +348,7 @@ class Page extends Component {
)}
>
{skipToContent}
- {masthead}
+ {variant === 'docked' ? {masthead} : masthead}
{sidebar}
{notificationDrawer && (
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index 87bc72d9396..78ca03fb714 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -389,4 +389,21 @@ describe('Page', () => {
expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
});
+
+ test(`Renders with ${styles.modifiers.dock} class when variant is docked`, () => {
+ render(
- {
children?: React.ReactNode;
/** Additional classes added to the page layout */
className?: string;
+ /** @beta Indicates the layout variant */
+ variant?: 'default' | 'docked';
/** Masthead component (e.g. {
isBreadcrumbWidthLimited,
className,
children,
+ variant,
masthead,
sidebar,
notificationDrawer,
@@ -336,6 +339,7 @@ class Page extends Component {
{...rest}
className={css(
styles.page,
+ variant === 'docked' && styles.modifiers.dock,
width !== null && height !== null && 'pf-m-resize-observer',
width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
@@ -344,7 +348,7 @@ class Page extends Component {
)}
>
{skipToContent}
- {masthead}
+ {variant === 'docked' ? {masthead} : masthead}
{sidebar}
{notificationDrawer && (
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index 87bc72d9396..78ca03fb714 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -389,4 +389,21 @@ describe('Page', () => {
expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
});
+
+ test(`Renders with ${styles.modifiers.dock} class when variant is docked`, () => {
+ render(
{masthead}
: masthead}
{sidebar}
{notificationDrawer && (
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index 87bc72d9396..78ca03fb714 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -389,4 +389,21 @@ describe('Page', () => {
expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
});
+
+ test(`Renders with ${styles.modifiers.dock} class when variant is docked`, () => {
+ render(
diff --git a/packages/react-core/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap b/packages/react-core/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap
index 999c1fd0001..090ceae15e7 100644
--- a/packages/react-core/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap
+++ b/packages/react-core/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap
@@ -294,12 +294,24 @@ exports[`Progress variant danger 1`] = `
fill="currentColor"
height="1em"
role="img"
- viewBox="0 0 512 512"
width="1em"
>
-