@patternfly/react-core 5.2.0-prerelease.18 → 5.2.0-prerelease.19

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.2.0-prerelease.17","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.2.0-prerelease.18","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.2.0-prerelease.17","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.2.0-prerelease.18","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.2.0-prerelease.17","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.2.0-prerelease.18","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.2.0-prerelease.18",
+  "version": "5.2.0-prerelease.19",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "044826a3f3ee454f616c35c0cfd5652d6baa9614"
+  "gitHead": "177b67612018e68f66e0d83d7285eebd48cb3f27"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -75,7 +75,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   onChange?: (event: React.FormEvent, text?: string | number) => void;
   /** The text which is copied. */
   children: React.ReactNode;
-  /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
+  /** Additional actions for inline-compact clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -57,6 +57,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   children,
   variant = 'control',
   onTooltipHidden = () => {},
+  className,
   ...props
 }: ClipboardCopyButtonProps) => {
   const triggerRef = React.createRef<HTMLButtonElement>();
@@ -79,6 +80,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
         variant={variant}
         onClick={onClick}
         aria-label={ariaLabel}
+        className={className}
         id={id}
         aria-labelledby={`${id} ${textId}`}
         {...props}

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -28,7 +28,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     onClick={onClick}
     id={id}
     aria-labelledby={`${id} ${textId}`}
-    aria-controls={`${id} ${contentId}`}
+    aria-controls={contentId}
     aria-expanded={isExpanded}
     {...props}
   >

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

@@ -0,0 +1,344 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { ClipboardCopy } from '../ClipboardCopy';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('../ClipboardCopyButton', () => ({
+  ClipboardCopyButton: ({ 'aria-label': ariaLabel, children, entryDelay, exitDelay, maxWidth, position, onClick }) => (
+    <div data-testid="clipboardCopyButton-mock">
+      <p>{`exitDelay: ${exitDelay}`}</p>
+      <p>{`entryDelay: ${entryDelay}`}</p>
+      <p>{`maxWidth: ${maxWidth}`}</p>
+      <p>{`position: ${position}`}</p>
+      <p>{`button-ariaLabel: ${ariaLabel}`}</p>
+      <div>{`children: ${children}`}</div>
+      <button onClick={onClick}>Test CCB clicker</button>
+    </div>
+  )
+}));
+
+jest.mock('../ClipboardCopyToggle', () => ({
+  ClipboardCopyToggle: ({ 'aria-label': ariaLabel }) => (
+    <div data-testid="clipboardCopyToggle-mock">
+      <p>{`toggle-ariaLabel: ${ariaLabel}`}</p>
+    </div>
+  )
+}));
+
+const children = 'Copyable text';
+const testId = 'clipboard-copy';
+
+test(`Renders with class ${styles.clipboardCopy} by default`, () => {
+  render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+  expect(screen.getByTestId(testId)).toHaveClass(styles.clipboardCopy, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(
+    <ClipboardCopy className="test-class" data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).toHaveClass('test-class');
+});
+
+test(`Does not render with class ${styles.modifiers.inline} by default`, () => {
+  render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+  expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.inline);
+});
+
+test(`Does not render with class ${styles.modifiers.inline} if variant is not inline-compact`, () => {
+  render(
+    <ClipboardCopy variant="expansion" data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.inline);
+});
+
+test(`Renders with class ${styles.modifiers.inline} when variant is inline-compact`, () => {
+  render(
+    <ClipboardCopy variant="inline-compact" data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.inline);
+});
+
+test(`Does not render with class ${styles.modifiers.expanded} by default`, () => {
+  render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+  expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders with class ${styles.modifiers.expanded} when isExpanded is passed`, () => {
+  render(
+    <ClipboardCopy isExpanded data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Does not render with class ${styles.modifiers.block} by default`, () => {
+  render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+  expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.block);
+});
+
+test(`Renders with class ${styles.modifiers.block} when isBlock is passed`, () => {
+  render(
+    <ClipboardCopy isBlock data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.block);
+});
+
+test('Spreads additional props to container div', () => {
+  render(
+    <ClipboardCopy data-testid={testId} role="group">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByTestId(testId)).toHaveAttribute('role', 'group');
+});
+
+test(`Renders children without class ${styles.modifiers.code} when variant is inline-compact and isCode is not passed`, () => {
+  render(
+    <ClipboardCopy variant="inline-compact" data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText(children)).not.toHaveClass(styles.modifiers.code);
+});
+
+test(`Renders children with class ${styles.modifiers.code} when variant is inline-compact and isCode is passed`, () => {
+  render(
+    <ClipboardCopy isCode variant="inline-compact" data-testid={testId}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText(children)).toHaveClass(styles.modifiers.code);
+});
+
+test('Does not render content passed to additionalActions by default', () => {
+  render(<ClipboardCopy additionalActions="Additional action">{children}</ClipboardCopy>);
+
+  expect(screen.queryByText('Additional action')).toBeNull();
+});
+
+test('Does not render content passed to additionalActions when variant is not inline-compact', () => {
+  render(
+    <ClipboardCopy variant="expansion" additionalActions="Additional action">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.queryByText('Additional action')).toBeNull();
+});
+
+test('Renders content passed to additionalActions when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" additionalActions="Additional action">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('Additional action')).toBeVisible();
+});
+
+test('Passes hoverTip to ClipboardCopyButton by default', () => {
+  render(<ClipboardCopy hoverTip="hover tip">{children}</ClipboardCopy>);
+
+  expect(screen.getByText('button-ariaLabel: hover tip')).toBeVisible();
+  expect(screen.getByText('children: hover tip')).toBeVisible();
+});
+
+test('Passes hoverTip to ClipboardCopyButton when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" hoverTip="hover tip">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('button-ariaLabel: hover tip')).toBeVisible();
+  expect(screen.getByText('children: hover tip')).toBeVisible();
+});
+
+test('Passes clickTip when ClipboardCopyButton clicked', async () => {
+  const user = userEvent.setup();
+  render(<ClipboardCopy clickTip="click tip">{children}</ClipboardCopy>);
+
+  await user.click(screen.getByRole('button', { name: 'Test CCB clicker' }));
+
+  expect(screen.getByText('children: click tip')).toBeVisible();
+});
+
+test('Passes entryDelay to ClipboardCopyButton by default', () => {
+  render(<ClipboardCopy entryDelay={100}>{children}</ClipboardCopy>);
+
+  expect(screen.getByText('entryDelay: 100')).toBeVisible();
+});
+
+test('Passes entryDelay to ClipboardCopyButton when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" entryDelay={100}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('entryDelay: 100')).toBeVisible();
+});
+
+test('Passes exitDelay to ClipboardCopyButton by default', () => {
+  render(<ClipboardCopy exitDelay={100}>{children}</ClipboardCopy>);
+
+  expect(screen.getByText('exitDelay: 100')).toBeVisible();
+});
+
+test('Passes exitDelay to ClipboardCopyButton when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" exitDelay={100}>
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('exitDelay: 100')).toBeVisible();
+});
+
+test('Passes maxWidth to ClipboardCopyButton by default', () => {
+  render(<ClipboardCopy maxWidth="100">{children}</ClipboardCopy>);
+
+  expect(screen.getByText('maxWidth: 100')).toBeVisible();
+});
+
+test('Passes maxWidth to ClipboardCopyButton when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" maxWidth="100">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('maxWidth: 100')).toBeVisible();
+});
+
+test('Passes position to ClipboardCopyButton by default', () => {
+  render(<ClipboardCopy position="bottom">{children}</ClipboardCopy>);
+
+  expect(screen.getByText('position: bottom')).toBeVisible();
+});
+
+test('Passes position to ClipboardCopyButton when variant is inline-compact', () => {
+  render(
+    <ClipboardCopy variant="inline-compact" position="bottom">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('position: bottom')).toBeVisible();
+});
+
+test('Passes toggleAriaLabel to ClipboardCopyToggle when variant is expansion', () => {
+  render(
+    <ClipboardCopy variant="expansion" toggleAriaLabel="toggle label">
+      {children}
+    </ClipboardCopy>
+  );
+
+  expect(screen.getByText('toggle-ariaLabel: toggle label')).toBeVisible();
+});
+
+test('Does not set textinput to readonly when isReadOnly is not passed', () => {
+  render(<ClipboardCopy>{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).not.toHaveAttribute('readonly');
+});
+
+test('Passes isReadOnly to TextInput', () => {
+  render(<ClipboardCopy isReadOnly>{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
+});
+
+test('Passes textAriaLabel to TextInput', () => {
+  render(<ClipboardCopy textAriaLabel="text label">{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).toHaveAccessibleName('text label');
+});
+
+test('Calls onChange when ClipboardCopy textinput is typed in', async () => {
+  const onChangeMock = jest.fn();
+  const user = userEvent.setup();
+  const typedText = 'stuff';
+
+  render(<ClipboardCopy onChange={onChangeMock}>{children}</ClipboardCopy>);
+
+  await user.type(screen.getByRole('textbox'), typedText);
+
+  expect(onChangeMock).toHaveBeenCalledTimes(typedText.length);
+});
+
+test('Does not call onChange when ClipboardCopy textinput is not typed in', async () => {
+  const onChangeMock = jest.fn();
+  const user = userEvent.setup();
+  const typedText = 'stuff';
+
+  render(
+    <>
+      <ClipboardCopy onChange={onChangeMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.type(screen.getByRole('textbox', { name: 'native input' }), typedText);
+
+  expect(onChangeMock).not.toHaveBeenCalled();
+});
+
+test('Calls onCopy when ClipboardCopyButton is clicked', async () => {
+  const onCopyMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(<ClipboardCopy onCopy={onCopyMock}>{children}</ClipboardCopy>);
+
+  await user.click(screen.getByRole('button', { name: 'Test CCB clicker' }));
+
+  expect(onCopyMock).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onCopy when ClipboardCopyButton is not clicked', async () => {
+  const onCopyMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopy onCopy={onCopyMock}>{children}</ClipboardCopy>
+      <button>Test native clicker</button>
+    </>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test native clicker' }));
+
+  expect(onCopyMock).not.toHaveBeenCalled();
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(
+    <ClipboardCopy id="snapshot" ouiaId="snapshot">
+      {children}
+    </ClipboardCopy>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { ClipboardCopyAction } from '../ClipboardCopyAction';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <ClipboardCopyAction />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test(`Renders with class ${styles.clipboardCopyActionsItem} by default`, () => {
+  render(<ClipboardCopyAction>Action text</ClipboardCopyAction>);
+
+  expect(screen.getByText('Action text')).toHaveClass(styles.clipboardCopyActionsItem, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<ClipboardCopyAction className="custom-class">Action text</ClipboardCopyAction>);
+
+  expect(screen.getByText('Action text')).toHaveClass('custom-class');
+});
+
+test(`Spreads additional props`, () => {
+  render(<ClipboardCopyAction id="test-id">Action text</ClipboardCopyAction>);
+
+  expect(screen.getByText('Action text')).toHaveAttribute('id', 'test-id');
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<ClipboardCopyAction>Action text</ClipboardCopyAction>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -2,36 +2,153 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
 import { ClipboardCopyButton } from '../ClipboardCopyButton';
+import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
+
+jest.mock('../../Tooltip', () => ({
+  Tooltip: ({ content, children, exitDelay, entryDelay, maxWidth, position, onTooltipHidden }) => (
+    <div data-testid="tooltip-mock">
+      <div data-testid="tooltip-mock-content">{content}</div>
+      <p>{`exitDelay: ${exitDelay}`}</p>
+      <p>{`entryDelay: ${entryDelay}`}</p>
+      <p>{`maxWidth: ${maxWidth}`}</p>
+      <p>{`position: ${position}`}</p>
+      <a onClick={onTooltipHidden}>onTooltipHidden clicker</a>
+      {children}
+    </div>
+  )
+}));
 
-const props = {
-  id: 'my-id',
-  textId: 'my-text-id',
-  className: 'fancy-copy-button',
+const requiredProps = {
   onClick: jest.fn(),
-  exitDelay: 1000,
-  entryDelay: 2000,
-  maxWidth: '500px',
-  position: 'right' as 'right',
-  'aria-label': 'click this button to copy text'
+  children: 'Button content',
+  id: 'button-id',
+  textId: 'text-id'
 };
 
-test('copy button render', () => {
-  const { asFragment } = render(<ClipboardCopyButton {...props}>Copy Me</ClipboardCopyButton>);
+// Must be kept as first test to avoid Button's ouiaId updating in snapshots
+test('Matches snapshot', () => {
+  const { asFragment } = render(<ClipboardCopyButton {...requiredProps} />);
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('copy button onClick', async () => {
-  const onclick = jest.fn();
-  const user = userEvent.setup();
+test('Renders with passed id prop', () => {
+  render(<ClipboardCopyButton {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveAttribute('id', 'button-id');
+});
+
+test('Renders with aria-labelledby with passed id and textId prop values', () => {
+  render(
+    <>
+      <div id="text-id">Copyable text</div>
+      <ClipboardCopyButton {...requiredProps} />
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Copyable input Copyable text');
+});
+
+test('Renders with concatenated aria-label by default', () => {
+  render(
+    <>
+      <div id="text-id">Copyable text</div>
+      <ClipboardCopyButton {...requiredProps} />
+    </>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Copyable input Copyable text');
+});
 
+test('Renders with concatenated aria-label when custom aria-label is passed', () => {
   render(
-    <ClipboardCopyButton {...props} onClick={onclick}>
-      Copy to Clipboard
-    </ClipboardCopyButton>
+    <>
+      <div id="text-id">Copyable text</div>
+      <ClipboardCopyButton aria-label="Custom label" {...requiredProps} />
+    </>
   );
 
+  expect(screen.getByRole('button')).toHaveAccessibleName('Custom label Copyable text');
+});
+
+test('Passes className to Button', () => {
+  render(<ClipboardCopyButton className="test-class" {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveClass('test-class');
+});
+
+test('Passes variant to Button by default', () => {
+  render(<ClipboardCopyButton {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.control);
+});
+
+test('Passes variant to Button when variant is passed', () => {
+  render(<ClipboardCopyButton variant="plain" {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.plain);
+});
+
+test('Calls onClick when ClipboardCopyButton is clicked', async () => {
+  const user = userEvent.setup();
+
+  render(<ClipboardCopyButton {...requiredProps} />);
+
   await user.click(screen.getByRole('button'));
-  expect(onclick).toHaveBeenCalled();
+  expect(requiredProps.onClick).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onClick when ClipboardCopyButton is not clicked', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopyButton {...requiredProps} />
+      <button>Test clicker</button>
+    </>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test clicker' }));
+  expect(requiredProps.onClick).not.toHaveBeenCalled();
+});
+
+test('Passes children to Tooltip content', () => {
+  render(<ClipboardCopyButton {...requiredProps} />);
+
+  expect(screen.getByText('Button content')).toBeVisible();
+});
+
+test('Passes exitDelay to Tooltip', () => {
+  render(<ClipboardCopyButton exitDelay={200} {...requiredProps} />);
+
+  expect(screen.getByText('exitDelay: 200')).toBeVisible();
+});
+
+test('Passes entryDelay to Tooltip', () => {
+  render(<ClipboardCopyButton entryDelay={200} {...requiredProps} />);
+
+  expect(screen.getByText('entryDelay: 200')).toBeVisible();
+});
+
+test('Passes maxWidth to Tooltip', () => {
+  render(<ClipboardCopyButton maxWidth="200px" {...requiredProps} />);
+
+  expect(screen.getByText('maxWidth: 200px')).toBeVisible();
+});
+
+test('Passes position to Tooltip', () => {
+  render(<ClipboardCopyButton position="bottom" {...requiredProps} />);
+
+  expect(screen.getByText('position: bottom')).toBeVisible();
+});
+
+test('Passes onTooltipHidden to Tooltip', async () => {
+  const user = userEvent.setup();
+  const onTooltipHiddenMock = jest.fn();
+
+  render(<ClipboardCopyButton onTooltipHidden={onTooltipHiddenMock} {...requiredProps} />);
+
+  await user.click(screen.getByText('onTooltipHidden clicker'));
+
+  expect(onTooltipHiddenMock).toHaveBeenCalled();
 });