@patternfly/react-core 6.5.0-prerelease.11 → 6.5.0-prerelease.13

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeaderContent.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header-content"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeaderTitle.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header-title"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeaderToolbar.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__main-header-toolbar"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/examples/Compass.md

@@ -1,7 +1,7 @@
 ---
 id: Compass
 cssPrefix: pf-v6-c-compass
-section: PatternFly-AI
+section: AI
 subsection: Generative UIs
 beta: true
 propComponents:
@@ -46,3 +46,21 @@ The background image of the `Compass` and `CompassHero` may be customized by usi
 ```ts isFullscreen file="CompassDemo.tsx"
 
 ```
+
+## Composable structure
+
+When building a more custom implementation using Compass components, there are some intended or expected structures that must be present.
+
+### CompassMainHeader structure
+
+When using the `children` property in the `<CompassMainHeader>` component, you should ensure that the expected sub-components are used. The following code block shows a general structure to follow.
+
+```noLive
+<CompassMainHeader>
+  <CompassPanel>
+    <CompassMainHeaderContent>
+      {Your custom content goes here, which can include the CompassMainHeaderTitle and/or CompassMainHeaderToolbar sub-components}
+    </CompassMainHeaderContent>
+  </CompassPanel>
+</CompassMainHeader>
+```

package/src/components/Compass/examples/CompassBasic.tsx

@@ -1,4 +1,12 @@
-import { Compass, CompassHeader, CompassHero, CompassContent, CompassMainHeader } from '@patternfly/react-core';
+import {
+  Compass,
+  CompassHeader,
+  CompassHero,
+  CompassContent,
+  CompassMainHeader,
+  CompassPanel,
+  CompassMainHeaderContent
+} from '@patternfly/react-core';
 import './compass.css';
 
 export const CompassBasic: React.FunctionComponent = () => {
@@ -12,7 +20,11 @@ export const CompassBasic: React.FunctionComponent = () => {
       </CompassHero>
       <CompassContent>
         <CompassMainHeader>
-          <div>Content title</div>
+          <CompassPanel>
+            <CompassMainHeaderContent>
+              <div>Content title</div>
+            </CompassMainHeaderContent>
+          </CompassPanel>
         </CompassMainHeader>
         <div>Content</div>
       </CompassContent>

package/src/components/Compass/examples/CompassDemo.tsx

@@ -7,6 +7,7 @@ import {
   CompassMainHeader,
   CompassPanel,
   CompassMessageBar,
+  Hero,
   Tabs,
   TabsComponent,
   Tab,
@@ -119,8 +120,8 @@ export const CompassBasic: React.FunctionComponent = () => {
   const sidebarStartContent = sidebarContent;
   const mainContent = (
     <>
-      <CompassHero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>
-        <div>Hero</div>
+      <CompassHero>
+        <Hero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>Hero</Hero>
       </CompassHero>
       <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
       <CompassContent>

package/src/components/Compass/index.ts

@@ -3,5 +3,8 @@ export * from './CompassContent';
 export * from './CompassHeader';
 export * from './CompassHero';
 export * from './CompassMainHeader';
+export * from './CompassMainHeaderContent';
+export * from './CompassMainHeaderTitle';
+export * from './CompassMainHeaderToolbar';
 export * from './CompassMessageBar';
 export * from './CompassPanel';

package/src/components/Hero/Hero.tsx

@@ -0,0 +1,102 @@
+import styles from '@patternfly/react-styles/css/components/Hero/hero';
+import { css } from '@patternfly/react-styles';
+import heroBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_hero_BackgroundImage_light';
+import heroBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_hero_BackgroundImage_dark';
+import heroGradientStop1Light from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_1_light';
+import heroGradientStop2Light from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_2_light';
+import heroGradientStop3Light from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_3_light';
+import heroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_1_dark';
+import heroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_2_dark';
+import heroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_3_dark';
+import heroBodyWidth from '@patternfly/react-tokens/dist/esm/c_hero__body_Width';
+import heroBodyMaxWidth from '@patternfly/react-tokens/dist/esm/c_hero__body_MaxWidth';
+
+/** The main Hero component that allows adjusting of its background images and gradients in different color modes (such as light and dark). */
+
+export interface HeroProps extends Omit<React.HTMLProps<HTMLDivElement>, '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, taking any valid CSS color values for each stop property. */
+  gradientLight?: {
+    stop1?: string;
+    stop2?: string;
+    stop3?: string;
+  };
+  /** Dark theme gradient of the hero, taking any valid CSS color values for each stop property. */
+  gradientDark?: {
+    stop1?: string;
+    stop2?: string;
+    stop3?: string;
+  };
+  /** Flag indicating whether glass styles are removed from the hero when a glass theme is applied. */
+  hasNoGlass?: boolean;
+  /** Modifies the width of the hero body. */
+  bodyWidth?: string;
+  /** Modifies the max-width of the hero body. */
+  bodyMaxWidth?: string;
+}
+
+export const Hero: React.FunctionComponent<HeroProps> = ({
+  className,
+  children,
+  backgroundSrcLight,
+  backgroundSrcDark,
+  gradientLight,
+  gradientDark,
+  hasNoGlass = false,
+  bodyWidth,
+  bodyMaxWidth,
+  ...props
+}) => {
+  const customStyles: { [key: string]: string } = {};
+  if (backgroundSrcLight) {
+    customStyles[heroBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
+  }
+  if (backgroundSrcDark) {
+    customStyles[heroBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
+  }
+
+  if (gradientLight?.stop1) {
+    customStyles[heroGradientStop1Light.name] = gradientLight.stop1;
+  }
+  if (gradientLight?.stop2) {
+    customStyles[heroGradientStop2Light.name] = gradientLight.stop2;
+  }
+  if (gradientLight?.stop3) {
+    customStyles[heroGradientStop3Light.name] = gradientLight.stop3;
+  }
+  if (gradientDark?.stop1) {
+    customStyles[heroGradientStop1Dark.name] = gradientDark.stop1;
+  }
+  if (gradientDark?.stop2) {
+    customStyles[heroGradientStop2Dark.name] = gradientDark.stop2;
+  }
+  if (gradientDark?.stop3) {
+    customStyles[heroGradientStop3Dark.name] = gradientDark.stop3;
+  }
+
+  if (bodyWidth) {
+    customStyles[heroBodyWidth.name] = bodyWidth;
+  }
+  if (bodyMaxWidth) {
+    customStyles[heroBodyMaxWidth.name] = bodyMaxWidth;
+  }
+
+  return (
+    <div
+      className={css(styles.hero, hasNoGlass && styles.modifiers.noGlass, className)}
+      style={{ ...props.style, ...customStyles }}
+      {...props}
+    >
+      <div className={css(styles.heroBody)}>{children}</div>
+    </div>
+  );
+};
+
+Hero.displayName = 'Hero';

package/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(
+    <div data-testid="test-hero">
+      <Hero />
+    </div>
+  );
+  expect(screen.getByTestId('test-hero').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<Hero>Test content</Hero>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test(`Renders with ${styles.hero} class on wrapper by defaulty`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.hero}`, { exact: true });
+});
+
+test('Renders with custom class name on wrapper when className prop is provided', () => {
+  render(<Hero className="custom-class">Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
+});
+
+test(`Renders with class ${styles.heroBody} on content element`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test')).toHaveClass(`${styles.heroBody}`, { exact: true });
+});
+
+test('Renders with additional props spread to the wrapper component', () => {
+  render(<Hero id="custom-id">Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveAttribute('id', 'custom-id');
+});
+
+test('Renders with light background image style when backgroundSrcLight is provided', () => {
+  const backgroundSrc = 'light-bg.jpg';
+  render(<Hero backgroundSrcLight={backgroundSrc}>Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-hero--BackgroundImage--light: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with dark background image style when backgroundSrcDark is provided', () => {
+  const backgroundSrc = 'dark-bg.jpg';
+  render(<Hero backgroundSrcDark={backgroundSrc}>Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-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(
+    <Hero backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc}>
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${darkSrc})`);
+});
+
+test('Renders with light gradient styles when gradientLight is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<Hero gradientLight={gradient}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-2--light: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-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(<Hero gradientDark={gradient}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-2--dark: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-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(
+    <Hero gradientLight={lightGradient} gradientDark={darkGradient}>
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+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(
+    <Hero
+      backgroundSrcLight={lightSrc}
+      backgroundSrcDark={darkSrc}
+      gradientLight={lightGradient}
+      gradientDark={darkGradient}
+    >
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${darkSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with inline width style when bodyWidth is passed', () => {
+  const bodyWidth = '100px';
+
+  render(<Hero bodyWidth={bodyWidth}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero__body--Width: ${bodyWidth}`);
+});
+
+test('Renders with inline max-width style when bodyMaxWidth is passed', () => {
+  const bodyMaxWidth = '100px';
+
+  render(<Hero bodyMaxWidth={bodyMaxWidth}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero__body--MaxWidth: ${bodyMaxWidth}`);
+});
+
+test('Matches the snapshot without backgroundSrc and gradient props', () => {
+  const { asFragment } = render(<Hero>Hero content</Hero>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with backgroundSrc and gradient props', () => {
+  const { asFragment } = render(
+    <Hero
+      backgroundSrcLight="light.jpg"
+      backgroundSrcDark="dark.jpg"
+      gradientLight={{ stop1: '#ff0000', stop2: '#00ff00', stop3: '#0000ff' }}
+      gradientDark={{ stop1: '#000000', stop2: '#ffffff', stop3: '#808080' }}
+    >
+      Hero content
+    </Hero>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with backgroundSrc and gradient props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hero"
+    style="--pf-v6-c-hero--BackgroundImage--light: url(light.jpg); --pf-v6-c-hero--BackgroundImage--dark: url(dark.jpg); --pf-v6-c-hero--gradient--stop-1--light: #ff0000; --pf-v6-c-hero--gradient--stop-2--light: #00ff00; --pf-v6-c-hero--gradient--stop-3--light: #0000ff; --pf-v6-c-hero--gradient--stop-1--dark: #000000; --pf-v6-c-hero--gradient--stop-2--dark: #ffffff; --pf-v6-c-hero--gradient--stop-3--dark: #808080;"
+  >
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot without backgroundSrc and gradient props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hero"
+  >
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Hero/examples/Hero.md

@@ -0,0 +1,19 @@
+---
+id: Hero
+section: components
+cssPrefix: pf-v6-c-hero
+beta: true
+propComponents: ['Hero']
+---
+
+## Examples
+
+### Basic
+
+If you need finer control over the placement of text content within the `<Hero>`, such as when you omit a background image, adjust the `bodyWidth` and `bodyMaxWidth` properties. Be mindful of using these properties when a background image is still present and ensure there is sufficient contrast between text and any part of the image that it overlaps.
+
+When using `gradientLight` or `gradientDark` to apply gradient backgrounds, check the color contrast to ensure proper accessibility.
+
+```ts file="HeroBasic.tsx"
+
+```

package/src/components/Hero/examples/HeroBasic.tsx

@@ -0,0 +1,3 @@
+import { Hero } from '@patternfly/react-core';
+
+export const HeroBasic: React.FunctionComponent = () => <Hero>Basic hero content</Hero>;

package/src/components/Hero/index.ts

@@ -0,0 +1 @@
+export * from './Hero';

package/src/components/index.ts

@@ -32,6 +32,7 @@ export * from './FileUpload';
 export * from './Form';
 export * from './FormSelect';
 export * from './HelperText';
+export * from './Hero';
 export * from './Hint';
 export * from './Icon';
 export * from './InputGroup';

package/src/deprecated/components/Modal/examples/Modal.md

@@ -127,7 +127,7 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 ### With dropdown
 
-To present a menu of actions or links to a user, you can add a [dropdown](/components/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
 
@@ -143,7 +143,7 @@ To help simplify and explain complex models, add a help [popover](/components/po
 
 ### With form
 
-To collect user input within a modal, you can add a [form](/components/form).
+To collect user input within a modal, you can add a [form](/components/forms/form).
 
 To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
 

package/src/deprecated/components/Tile/examples/Tile.md

@@ -15,8 +15,6 @@ import './Tile.css';
 
 ## Examples
 
-Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
-
 ### Basic tile
 
 Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`.

package/src/helpers/OUIA/OUIA.md

@@ -1,6 +1,6 @@
 ---
 id: Open UI Automation
-section: developer-resources
+section: developer-guides
 ---
 import { Fragment } from 'react';
 
@@ -54,6 +54,7 @@ component.
 * [Card](/components/card)
 * [Checkbox](/components/forms/checkbox)
 * [Chip](/components/chip)
+* [Content](/components/content)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
 * [FormSelect](/components/forms/form-select)
@@ -68,7 +69,6 @@ component.
 * [Switch](/components/switch)
 * [TabContent](/components/tabs)
 * [Tabs](/components/tabs)
-* [Text](/components/text)
 * [TextInput](/components/forms/text-input)
 * [Title](/components/title)
 * [Toolbar](/components/toolbar)

package/src/layouts/Bullseye/examples/Bullseye.md

@@ -1,7 +1,8 @@
 ---
 id: Bullseye
 cssPrefix: pf-v6-l-bullseye
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Bullseye']
 ---
 

package/src/layouts/Flex/examples/Flex.md

@@ -1,7 +1,8 @@
 ---
 id: Flex
 cssPrefix: pf-v6-l-flex
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Flex', 'FlexItem']
 ---
 

package/src/layouts/Gallery/examples/Gallery.md

@@ -1,7 +1,8 @@
 ---
 id: Gallery
 cssPrefix: pf-v6-l-gallery
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Gallery', 'GalleryItem']
 ---
 

package/src/layouts/Grid/examples/Grid.md

@@ -1,7 +1,8 @@
 ---
 id: Grid
 cssPrefix: pf-v6-l-grid
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Grid', 'GridItem']
 ---
 

package/src/layouts/Level/examples/Level.md

@@ -1,7 +1,8 @@
 ---
 id: Level
 cssPrefix: pf-v6-l-level
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Level', 'LevelItem']
 ---
 

package/src/layouts/Split/examples/Split.md

@@ -1,7 +1,8 @@
 ---
 id: Split
 cssPrefix: pf-v6-l-split
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Split', 'SplitItem']
 ---
 

package/src/layouts/Stack/examples/Stack.md

@@ -1,7 +1,8 @@
 ---
 id: Stack
 cssPrefix: pf-v6-l-stack
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Stack', 'StackItem']
 ---