@patternfly/react-core 6.4.1-prerelease.9 → 6.5.0-prerelease.10

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":"6.4.1-prerelease.8","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":"6.5.0-prerelease.9","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":"6.4.1-prerelease.8","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":"6.5.0-prerelease.9","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":"6.4.1-prerelease.8","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":"6.5.0-prerelease.9","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.1-prerelease.9",
+  "version": "6.5.0-prerelease.10",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.4.0",
-    "@patternfly/react-styles": "^6.4.0",
-    "@patternfly/react-tokens": "^6.4.0",
+    "@patternfly/react-icons": "^6.5.0-prerelease.4",
+    "@patternfly/react-styles": "^6.5.0-prerelease.4",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.4",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.4.0",
+    "@patternfly/patternfly": "6.5.0-prerelease.19",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "985efafb947f9159883ef65eacb2a9af85d45473"
+  "gitHead": "69e66e97b0df4a7987c3f207347383f492b565a7"
 }

package/src/components/ActionList/ActionList.tsx

@@ -8,15 +8,26 @@ export interface ActionListProps extends React.HTMLProps<HTMLDivElement> {
   isIconList?: boolean;
   /** Additional classes added to the action list */
   className?: string;
+  /** @beta Whether the layout of children is vertical or horizontal. */
+  isVertical?: boolean;
 }
 
 export const ActionList: React.FunctionComponent<ActionListProps> = ({
   children,
   isIconList,
   className,
+  isVertical = false,
   ...props
 }: ActionListProps) => (
-  <div className={css(styles.actionList, isIconList && styles.modifiers.icons, className)} {...props}>
+  <div
+    className={css(
+      styles.actionList,
+      isIconList && styles.modifiers.icons,
+      isVertical && styles.modifiers.vertical,
+      className
+    )}
+    {...props}
+  >
     {children}
   </div>
 );

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

@@ -37,6 +37,18 @@ test(`Renders with class ${styles.modifiers.icons} when isIconList is true`, ()
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.icons);
 });
 
+test(`Does not render with class ${styles.modifiers.vertical} by default`, () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.vertical);
+});
+
+test(`Renders with class ${styles.modifiers.vertical} when isVertical is true`, () => {
+  render(<ActionList isVertical={true}>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.vertical);
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(<ActionList aria-label="Test label">Test</ActionList>);
 

package/src/components/ActionList/examples/ActionList.md

@@ -35,3 +35,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 ```ts file="./ActionListWithCancelButton.tsx"
 
 ```
+
+### Vertical action list
+
+```ts file="./ActionListVertical.tsx" isBeta
+
+```

package/src/components/ActionList/examples/ActionListVertical.tsx

@@ -0,0 +1,46 @@
+import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const ActionListVertical: React.FunctionComponent = () => (
+  <>
+    <h4>Multiple groups</h4>
+    <ActionList isVertical>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button>Next</Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="secondary">Back</Button>
+        </ActionListItem>
+      </ActionListGroup>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button>Submit</Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="link">Cancel</Button>
+        </ActionListItem>
+      </ActionListGroup>
+    </ActionList>
+    <h4>Icons, in two groups</h4>
+    <ActionList isVertical>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button aria-label="Close vertical action list group 1" variant="plain" icon={<TimesIcon />} />
+        </ActionListItem>
+        <ActionListItem>
+          <Button aria-label="Toggle vertical action list example group 1" variant="plain" icon={<CheckIcon />} />
+        </ActionListItem>
+      </ActionListGroup>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button aria-label="Close vertical action list group 2" variant="plain" icon={<TimesIcon />} />
+        </ActionListItem>
+        <ActionListItem>
+          <Button aria-label="Toggle vertical action list example group 2" variant="plain" icon={<CheckIcon />} />
+        </ActionListItem>
+      </ActionListGroup>
+    </ActionList>
+  </>
+);

package/src/components/Button/Button.tsx

@@ -107,6 +107,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   isHamburger?: boolean;
   /** Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button. */
   hamburgerVariant?: 'expand' | 'collapse';
+  /** @beta Flag indicating the button is a circle button. Intended for buttons that only contain an icon.. */
+  isCircle?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -131,6 +133,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isSettings,
   isHamburger,
   hamburgerVariant,
+  isCircle,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -261,6 +264,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         variant === ButtonVariant.stateful && styles.modifiers[state],
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
+        isCircle && styles.modifiers.circle,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

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

@@ -214,6 +214,11 @@ test(`Renders without class ${styles.modifiers.progress} when isLoading = false
   expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.progress);
 });
 
+test(`Renders with class ${styles.modifiers.circle} when isCircle is true`, () => {
+  render(<Button isCircle>Circle Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.circle);
+});
+
 test(`Renders custom icon with class ${styles.modifiers.inProgress} when isLoading = true and icon is present`, () => {
   render(
     <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />

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

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-66"
+    data-ouia-component-id="OUIA-Generated-Button-primary-67"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Button/examples/Button.md

@@ -138,6 +138,14 @@ Stateful buttons are ideal for displaying the state of notifications. Use `varia
 
 ```
 
+### Circle buttons
+
+Pass `isCircle` to a button to modify its styling from simply rounded corners to complete circles. Circle buttons are intended for buttons that only contain an icon and adequate accessible naming.
+
+```ts file="./ButtonCircle.tsx"
+
+```
+
 ## Animated examples
 
 The following `<Button>` implementations have animations built into them. When using one of the following implementations, the `icon` property will be overridden due to the animations needing specific icons internally.

package/src/components/Button/examples/ButtonCircle.tsx

@@ -0,0 +1,63 @@
+import { Button, Flex } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+
+interface LoadingPropsType {
+  spinnerAriaValueText: string;
+  spinnerAriaLabelledBy?: string;
+  spinnerAriaLabel?: string;
+  isLoading: boolean;
+}
+
+export const ButtonCircle: React.FunctionComponent = () => {
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+
+  const uploadingProps = {} as LoadingPropsType;
+  uploadingProps.spinnerAriaValueText = 'Loading circle variant example';
+  uploadingProps.spinnerAriaLabel = 'Uploading circle variant example data';
+  uploadingProps.isLoading = isUploading;
+
+  return (
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button isCircle icon={<PlusCircleIcon />} aria-label="Add primary circle variant example" />
+      <Button
+        variant="secondary"
+        isCircle
+        icon={<PlusCircleIcon />}
+        aria-label="Add secondary circle variant example"
+      />
+      <Button variant="tertiary" isCircle icon={<PlusCircleIcon />} aria-label="Add tertiary circle variant example" />
+      <Button variant="danger" isCircle icon={<PlusCircleIcon />} aria-label="Add danger circle variant example" />
+      <Button variant="warning" isCircle icon={<PlusCircleIcon />} aria-label="Add warning circle variant example" />
+      <Button variant="link" isCircle icon={<PlusCircleIcon />} aria-label="Add link circle variant example" />
+      <Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
+      <Button variant="plain" isCircle icon={<TimesIcon />} aria-label="Remove plain circle variant example" />
+      <Button variant="stateful" isCircle icon={<BellIcon />} aria-label="Stateful unread circle variant example" />
+      <Button
+        variant="stateful"
+        state="read"
+        isCircle
+        icon={<BellIcon />}
+        aria-label="Stateful read circle variant example"
+      />
+      <Button
+        variant="stateful"
+        state="attention"
+        isCircle
+        icon={<BellIcon />}
+        aria-label="Stateful attention circle variant example"
+      />
+      <Button
+        variant="plain"
+        isCircle
+        {...(!isUploading && { 'aria-label': 'Upload circle variant example' })}
+        onClick={() => setIsUploading(!isUploading)}
+        icon={<UploadIcon />}
+        {...uploadingProps}
+      />
+    </Flex>
+  );
+};

package/src/components/Card/CardSubtitle.tsx

@@ -0,0 +1,20 @@
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Card/card';
+
+export interface CardSubtitleProps {
+  /** Content rendered inside the description. */
+  children?: React.ReactNode;
+  /** Id of the description. */
+  id?: string;
+}
+
+export const CardSubtitle: React.FunctionComponent<CardSubtitleProps> = ({
+  children = null,
+  id = '',
+  ...props
+}: CardSubtitleProps) => (
+  <div {...props} id={id} className={css(styles.cardSubtitle)}>
+    {children}
+  </div>
+);
+CardSubtitle.displayName = 'CardSubtitle';

package/src/components/Card/CardTitle.tsx

@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
+import { CardSubtitle } from './CardSubtitle';
 
 export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the CardTitle */
@@ -10,23 +11,28 @@ export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Sets the base component to render. defaults to div */
   component?: keyof React.JSX.IntrinsicElements;
+  /** @beta Subtitle of the card title */
+  subtitle?: React.ReactNode;
 }
 
 export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
   children,
   className,
   component = 'div',
+  subtitle,
   ...props
 }: CardTitleProps) => {
   const { cardId } = useContext(CardContext);
   const Component = component as any;
   const titleId = cardId ? `${cardId}-title` : '';
+  const subtitleId = cardId ? `${cardId}-subtitle` : '';
 
   return (
     <div className={css(styles.cardTitle)}>
       <Component className={css(styles.cardTitleText, className)} id={titleId || undefined} {...props}>
         {children}
       </Component>
+      {subtitle && <CardSubtitle id={subtitleId}>{subtitle}</CardSubtitle>}
     </div>
   );
 };

package/src/components/Card/__tests__/CardSubtitle.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import { CardSubtitle } from '../CardSubtitle';
+import styles from '@patternfly/react-styles/css/components/Card/card';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <CardSubtitle />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CardSubtitle>Subtitle content</CardSubtitle>);
+
+  expect(screen.getByText('Subtitle content')).toBeInTheDocument();
+});
+
+test(`Renders with class ${styles.cardSubtitle} by default`, () => {
+  render(<CardSubtitle>Subtitle content</CardSubtitle>);
+
+  expect(screen.getByText('Subtitle content')).toHaveClass(styles.cardSubtitle, { exact: true });
+});
+
+test('Renders with id when passed', () => {
+  render(<CardSubtitle id="subtitle-id">Subtitle content</CardSubtitle>);
+
+  expect(screen.getByText('Subtitle content')).toHaveAttribute('id', 'subtitle-id');
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card-subtitle';
+
+  render(<CardSubtitle data-testid={testId} />);
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+});
+
+test('Matches snapshot without children', () => {
+  const { asFragment } = render(<CardSubtitle />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with children', () => {
+  const { asFragment } = render(<CardSubtitle>Subtitle content</CardSubtitle>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Card/__tests__/CardTitle.test.tsx

@@ -1,21 +1,31 @@
 import { render, screen } from '@testing-library/react';
 import { CardTitle } from '../CardTitle';
 
-describe('CardTitle', () => {
-  test('renders with PatternFly Core styles', () => {
-    const { asFragment } = render(<CardTitle>text</CardTitle>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('className is added to the root element', () => {
-    render(<CardTitle className="extra-class">text</CardTitle>);
-    expect(screen.getByText('text')).toHaveClass('extra-class');
-  });
-
-  test('extra props are spread to the root element', () => {
-    const testId = 'card-header';
-
-    render(<CardTitle data-testid={testId} />);
-    expect(screen.getByTestId(testId)).toBeInTheDocument();
-  });
+test('Renders with custom class when passed', () => {
+  render(<CardTitle className="extra-class">text</CardTitle>);
+  expect(screen.getByText('text')).toHaveClass('extra-class');
+});
+
+test('Does not render with card subtitle by default', () => {
+  render(<CardTitle>text</CardTitle>);
+
+  expect(screen.queryByText('text')?.nextElementSibling).not.toBeInTheDocument();
+});
+
+test('Renders with card subtitle when subtitle is passed', () => {
+  render(<CardTitle subtitle="subtitle content">text</CardTitle>);
+
+  expect(screen.getByText('subtitle content')).toBeInTheDocument();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card-header';
+
+  render(<CardTitle data-testid={testId} />);
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<CardTitle>text</CardTitle>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Card/__tests__/__snapshots__/CardSubtitle.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with children 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-card__subtitle"
+    id=""
+  >
+    Subtitle content
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without children 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-card__subtitle"
+    id=""
+  />
+</DocumentFragment>
+`;

package/src/components/Card/__tests__/__snapshots__/CardTitle.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardTitle renders with PatternFly Core styles 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-card__title"

package/src/components/Card/examples/Card.md

@@ -28,7 +28,20 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item.
 
-```ts file='./CardBasic.tsx'
+```ts file='./CardBasic.tsx' 
+
+```
+### Card with subtitle
+
+A basic card that also has a subtitle
+
+```ts file='./CardSubtitle.tsx' isBeta
+
+```
+### Card with subtitle and Actions
+This card demonstrates having an image, action, and subtitle in a single card.
+
+```ts file='./CardSubtitleActions.tsx' isBeta
 
 ```
 
@@ -71,6 +84,8 @@ Select the "actions hasNoOffset" checkbox in the example below to illustrate thi
 
 ```
 
+
+
 ### Title inline with images and actions
 
 Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any images or actions.

package/src/components/Card/examples/CardSubtitle.tsx

@@ -0,0 +1,9 @@
+import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+
+export const CardSubtitle: React.FunctionComponent = () => (
+  <Card ouiaId="CardSubtitle">
+    <CardTitle subtitle="Subtitle">Title</CardTitle>
+    <CardBody>Body</CardBody>
+    <CardFooter>Footer</CardFooter>
+  </Card>
+);

package/src/components/Card/examples/CardSubtitleActions.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import {
+  Brand,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Checkbox,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+
+export const CardWithImageAndActions: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [hasNoOffset, setHasNoOffset] = useState<boolean>(false);
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+  const onClick = (checked: boolean) => {
+    setIsChecked(checked);
+  };
+  const toggleOffset = (checked: boolean) => {
+    setHasNoOffset(checked);
+  };
+
+  const dropdownItems = (
+    <>
+      <DropdownItem key="action">Action</DropdownItem>
+      {/* Prevent default onClick functionality for example purposes */}
+      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
+        Disabled Link
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Separated Link
+      </DropdownItem>
+    </>
+  );
+
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={isOpen}
+            onClick={() => setIsOpen(!isOpen)}
+            variant="plain"
+            aria-label="Card header images and actions example kebab toggle"
+            icon={<EllipsisVIcon />}
+          />
+        )}
+        isOpen={isOpen}
+        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-1"
+        name="check1"
+      />
+    </>
+  );
+
+  return (
+    <>
+      <Checkbox
+        label="actions hasNoOffset"
+        isChecked={hasNoOffset}
+        onChange={(_event, checked) => toggleOffset(checked)}
+        aria-label="remove actions offset"
+        id="toggle-actions-offset"
+        name="toggle-actions-offset"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Card>
+          <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
+            <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
+          </CardHeader>
+          <CardTitle subtitle="Subtitle">Title</CardTitle>
+          <CardBody>Body</CardBody>
+          <CardFooter>Footer</CardFooter>
+        </Card>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ClipboardCopy, ClipboardCopyVariant } from '../ClipboardCopy';
+
+// This test file uses the real Truncate component for integration testing, instead of a mock
+
+test('Tooltip appears on keyboard focus when using inline-compact variant with truncation', async () => {
+  const user = userEvent.setup();
+  const longText = 'This is a very long piece of content that should be truncated when the container is too small';
+
+  render(
+    <ClipboardCopy
+      variant={ClipboardCopyVariant.inlineCompact}
+      truncation={{ maxCharsDisplayed: 20 }}
+      data-testid="clipboard-copy"
+    >
+      {longText}
+    </ClipboardCopy>
+  );
+
+  expect(screen.queryByText(longText)).not.toBeInTheDocument();
+  expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+
+  await user.tab();
+
+  const clipboardCopy = screen.getByTestId('clipboard-copy');
+  expect(clipboardCopy).toHaveFocus();
+
+  const tooltip = screen.getByRole('tooltip');
+  expect(tooltip).toBeInTheDocument();
+  expect(tooltip).toHaveTextContent(longText);
+});