@patternfly/react-core 6.0.0-alpha.73 → 6.0.0-alpha.74

package/helpers/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/helpers/index.js",
   "module": "../dist/esm/helpers/index.js",
   "typings": "../dist/esm/helpers/index.d.ts",
-  "version": "6.0.0-alpha.72",
+  "version": "6.0.0-alpha.73",
   "private": true
 }

package/layouts/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/layouts/index.js",
   "module": "../dist/esm/layouts/index.js",
   "typings": "../dist/esm/layouts/index.d.ts",
-  "version": "6.0.0-alpha.72",
+  "version": "6.0.0-alpha.73",
   "private": true
 }

package/next/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/next/index.js",
   "module": "../dist/esm/next/index.js",
   "typings": "../dist/esm/next/index.d.ts",
-  "version": "6.0.0-alpha.72",
+  "version": "6.0.0-alpha.73",
   "private": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.73",
+  "version": "6.0.0-alpha.74",
   "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",
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5ce8c9748b3f0fafa36430e68d82d0725dff2f2e"
+  "gitHead": "460bb23f9570b110a396a96b112f43ffdfbe60f1"
 }

package/src/components/{Text/Text.tsx → Content/Content.tsx}

@@ -14,25 +14,53 @@ export enum TextVariants {
   a = 'a',
   small = 'small',
   blockquote = 'blockquote',
-  pre = 'pre'
+  pre = 'pre',
+  hr = 'hr',
+  ul = 'ul',
+  ol = 'ol',
+  dl = 'dl',
+  li = 'li',
+  dt = 'dt',
+  dd = 'dd'
 }
 
 export interface TextProps extends React.HTMLProps<HTMLElement>, OUIAProps {
-  /** The text component */
-  component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'a' | 'small' | 'blockquote' | 'pre';
-  /** Content rendered within the Text */
+  /** The content component. If none provided, it will be a 'div' and styling will be applied to all its child components. */
+  component?:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'a'
+    | 'small'
+    | 'blockquote'
+    | 'pre'
+    | 'hr'
+    | 'ul'
+    | 'ol'
+    | 'dl'
+    | 'li'
+    | 'dt'
+    | 'dd';
+  /** Children rendered within the Content. */
   children?: React.ReactNode;
-  /** Additional classes added to the Text */
+  /** Additional classes added to the Content. */
   className?: string;
-  /** Flag to indicate the link has visited styles applied if the browser determines the link has been visited */
+  /** Modifies the list (ul, ol and dl components) to have plain styling. */
+  isPlainList?: boolean;
+  /** Flag to indicate the link (or all links within the content) has visited styles applied if the browser determines the link has been visited. */
   isVisitedLink?: boolean;
-  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  /** 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. */
   ouiaSafe?: boolean;
 }
 
 const componentStyles = {
+  div: styles.content,
   h1: styles.contentH1,
   h2: styles.contentH2,
   h3: styles.contentH3,
@@ -43,29 +71,41 @@ const componentStyles = {
   a: styles.contentA,
   small: styles.contentSmall,
   blockquote: styles.contentBlockquote,
-  pre: styles.contentPre
+  pre: styles.contentPre,
+  hr: styles.contentHr,
+  ul: styles.contentUl,
+  ol: styles.contentOl,
+  dl: styles.contentDl,
+  li: styles.contentLi,
+  dt: styles.contentDt,
+  dd: styles.contentDd
 };
 
 export const Text: React.FunctionComponent<TextProps> = ({
-  children = null,
+  children,
   className = '',
-  component = TextVariants.p,
+  component,
+  isPlainList = false,
   isVisitedLink = false,
   ouiaId,
   ouiaSafe = true,
   ...props
 }: TextProps) => {
-  const Component: any = component;
+  const wrappingComponent = component ?? 'div';
+  const Component: any = wrappingComponent;
   const ouiaProps = useOUIAProps(Text.displayName, ouiaId, ouiaSafe);
 
+  const isList = ['ul', 'ol', 'dl'].includes(wrappingComponent);
+
   return (
     <Component
       {...ouiaProps}
       {...props}
       data-pf-content
       className={css(
-        isVisitedLink && component === TextVariants.a && styles.modifiers.visited,
-        componentStyles[component],
+        componentStyles[wrappingComponent],
+        isList && isPlainList && styles.modifiers.plain,
+        isVisitedLink && styles.modifiers.visited,
         className
       )}
     >

package/src/components/{Text/__tests__/Text.test.tsx → Content/__tests__/Content.test.tsx}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Text } from '../Text';
+import { Text } from '../Content';
 
 test('Renders without children', () => {
   render(
@@ -21,9 +21,9 @@ test('Renders with custom class name when className prop is provided', () => {
   expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
-test('Renders as "p" element by default', () => {
+test('Renders as "div" element by default', () => {
   render(<Text>Test</Text>);
-  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'P');
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DIV');
 });
 
 test('Renders as "h1" element when component="h1"', () => {

package/src/components/{Text/__tests__/__snapshots__/Text.test.tsx.snap → Content/__tests__/__snapshots__/Content.test.tsx.snap}

@@ -2,14 +2,14 @@
 
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
-  <p
-    class="pf-v6-c-content--p"
+  <div
+    class="pf-v6-c-content"
     data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF6/Text"
     data-ouia-safe="true"
     data-pf-content="true"
   >
     Test
-  </p>
+  </div>
 </DocumentFragment>
 `;

package/src/components/Content/examples/Content.md

@@ -0,0 +1,64 @@
+---
+id: Content
+section: components
+cssPrefix: pf-v5-c-content
+propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem']
+---
+
+The `<Text>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property(`h1` through `h6`, `p`, `a`, `small`, `blockquote`, and `pre`), as well as the text component suite `<TextList>`, and `<TextListItem>`. `TextContent` may be used as a container for the text components, but nesting them inside `<TextContent>` is not required.
+
+You cannot nest other components within `<Text>`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `<Text>` component's properties to achieve the same results.
+
+For example, rather than nesting the `<List>` and `<Title>` components within `<Text>`, you should pass `component="h1"` into the `<TextList>` and `<Text>` components. Similarly, when you need to add a divider , rather than passing in a separate `<Divider>` component, you should utilize the `hr` property that `<Text>` supports, which will be styled as a divider.
+
+## Examples
+
+### Headings
+
+```ts file="./ContentHeadings.tsx"
+
+```
+
+### Body
+
+```ts file="./ContentBody.tsx"
+
+```
+
+### Unordered list
+
+```ts file="./ContentUnorderedList.tsx"
+
+```
+
+### Ordered list
+
+```ts file="./ContentOrderedList.tsx"
+
+```
+
+### Plain list
+
+```ts file="./ContentPlainList.tsx"
+
+```
+
+### Description list
+
+```ts file="./ContentDescriptionList.tsx"
+
+```
+
+Text components such as Text, TextList, TextListItem can be placed within a TextContent to provide styling for html elements, and additional styling options applied to the children.
+
+### Wrapped in TextContent
+
+```ts file="./ContentWrapper.tsx"
+
+```
+
+### Link and visited link
+
+```ts file="./ContentVisited.tsx"
+
+```

package/src/components/{Text/examples/TextBody.tsx → Content/examples/ContentBody.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, TextVariants } from '@patternfly/react-core';
 
-export const TextBody: React.FunctionComponent = () => (
+export const ContentBody: React.FunctionComponent = () => (
   <>
     <Text component={TextVariants.p}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla

package/src/components/{Text/examples/TextDescriptionList.tsx → Content/examples/ContentDescriptionList.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core';
 
-export const TextDescriptionList: React.FunctionComponent = () => (
+export const ContentDescriptionList: React.FunctionComponent = () => (
   <TextList component={TextListVariants.dl}>
     <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
     <TextListItem component={TextListItemVariants.dd}>

package/src/components/{Text/examples/TextHeadings.tsx → Content/examples/ContentHeadings.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, TextVariants } from '@patternfly/react-core';
 
-export const TextHeadings: React.FunctionComponent = () => (
+export const ContentHeadings: React.FunctionComponent = () => (
   <>
     <Text component={TextVariants.h1}>Hello World</Text>
     <Text component={TextVariants.h2}>Second level</Text>

package/src/components/{Text/examples/TextOrderedList.tsx → Content/examples/ContentOrderedList.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
 
-export const TextOrderedList: React.FunctionComponent = () => (
+export const ContentOrderedList: React.FunctionComponent = () => (
   <TextList component={TextListVariants.ol}>
     <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
     <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>

package/src/components/{Text/examples/TextPlainList.tsx → Content/examples/ContentPlainList.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, TextVariants, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
 
-export const TextPlainList: React.FunctionComponent = () => (
+export const ContentPlainList: React.FunctionComponent = () => (
   <>
     <Text component={TextVariants.h3}>Plain unordered list</Text>
     <TextList isPlain>

package/src/components/{Text/examples/TextUnorderedList.tsx → Content/examples/ContentUnorderedList.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextList, TextListItem } from '@patternfly/react-core';
 
-export const TextUnorderedList: React.FunctionComponent = () => (
+export const ContentUnorderedList: React.FunctionComponent = () => (
   <TextList>
     <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
     <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>

package/src/components/{Text/examples/TextVisited.tsx → Content/examples/ContentVisited.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextContent, Text, TextVariants } from '@patternfly/react-core';
 
-export const TextVisited: React.FunctionComponent = () => (
+export const ContentVisited: React.FunctionComponent = () => (
   <>
     <TextContent>
       <Text component={TextVariants.h3}>Link example</Text>

package/src/components/{Text/examples/TextContentWrapped.tsx → Content/examples/ContentWrapper.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextContent, Text, TextVariants } from '@patternfly/react-core';
 
-export const TextContentWrapped: React.FunctionComponent = () => (
+export const ContentWrapper: React.FunctionComponent = () => (
   <TextContent>
     <Text component={TextVariants.p}>
       Text with a component of type "p" still renders the same when wrapped with a TextContent.

package/src/components/{Text → Content}/index.ts

@@ -1,4 +1,4 @@
+export * from './Content';
 export * from './TextContent';
-export * from './Text';
 export * from './TextList';
 export * from './TextListItem';

package/src/components/Text/examples/Text.md

@@ -5,60 +5,4 @@ cssPrefix: pf-v5-c-content
 propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem']
 ---
 
-The `<Text>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property(`h1` through `h6`, `p`, `a`, `small`, `blockquote`, and `pre`), as well as the text component suite `<TextList>`, and `<TextListItem>`. `TextContent` may be used as a container for the text components, but nesting them inside `<TextContent>` is not required.
-
-You cannot nest other components within `<Text>`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `<Text>` component's properties to achieve the same results.
-
-For example, rather than nesting the `<List>` and `<Title>` components within `<Text>`, you should pass `component="h1"` into the `<TextList>` and `<Text>` components. Similarly, when you need to add a divider , rather than passing in a separate `<Divider>` component, you should utilize the `hr` property that `<Text>` supports, which will be styled as a divider.
-
-## Examples
-
-### Headings
-
-```ts file="./TextHeadings.tsx"
-
-```
-
-### Body
-
-```ts file="./TextBody.tsx"
-
-```
-
-### Unordered list
-
-```ts file="./TextUnorderedList.tsx"
-
-```
-
-### Ordered list
-
-```ts file="./TextOrderedList.tsx"
-
-```
-
-### Plain list
-
-```ts file="./TextPlainList.tsx"
-
-```
-
-### Description list
-
-```ts file="./TextDescriptionList.tsx"
-
-```
-
-Text components such as Text, TextList, TextListItem can be placed within a TextContent to provide styling for html elements, and additional styling options applied to the children.
-
-### Wrapped in TextContent
-
-```ts file="./TextContentWrapped.tsx"
-
-```
-
-### Link and visited link
-
-```ts file="./TextVisited.tsx"
-
-```
+The `<Text>` component has been renamed to [Content](/components/content).

package/src/components/Wizard/WizardBody.tsx

@@ -10,9 +10,11 @@ import { getResizeObserver } from '../../helpers/resizeObserver';
  * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
  */
 
-export interface WizardBodyProps {
+export interface WizardBodyProps extends React.HTMLProps<HTMLElement> {
   /** Anything that can be rendered in the Wizard body */
   children: React.ReactNode;
+  /** Additional classes spread to the wizard body */
+  className?: string;
   /** Flag to remove the default body padding */
   hasNoPadding?: boolean;
   /** Adds an accessible name to the wrapper element when the content overflows and renders
@@ -29,10 +31,12 @@ export interface WizardBodyProps {
 
 export const WizardBody = ({
   children,
+  className,
   hasNoPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  component = 'div'
+  component = 'div',
+  ...props
 }: WizardBodyProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const [previousWidth, setPreviousWidth] = React.useState<number | undefined>(undefined);
@@ -74,7 +78,8 @@ export const WizardBody = ({
       {...(shouldFocusContent && { tabIndex: -1 })}
       {...(component === 'div' && hasScrollbar && { role: 'region' })}
       {...(hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
-      className={css(styles.wizardMain)}
+      className={css(styles.wizardMain, className)}
+      {...props}
     >
       <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
     </WrapperComponent>

package/src/components/Wizard/WizardFooter.tsx

@@ -10,7 +10,7 @@ import { ActionList, ActionListGroup, ActionListItem } from '../ActionList';
  * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
  */
 
-export interface WizardFooterProps {
+export interface WizardFooterProps extends React.HTMLProps<HTMLElement> {
   /** The active step */
   activeStep: WizardStepType;
   /** Next button callback */
@@ -39,18 +39,23 @@ export interface WizardFooterProps {
   backButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled'>;
   /** Additional props for the Cancel button. */
   cancelButtonProps?: WizardFooterButtonProps;
+  /** Additional classes spread to the wizard footer */
+  className?: string;
 }
 
 /**
  * Applies default wizard footer styling any number of child elements.
  */
 
-interface WizardFooterWrapperProps {
+interface WizardFooterWrapperProps extends React.HTMLProps<HTMLElement> {
   children: React.ReactNode;
+  className?: string;
 }
 
-export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
-  <footer className={css(styles.wizardFooter)}>{children}</footer>
+export const WizardFooterWrapper = ({ children, className, ...props }: WizardFooterWrapperProps) => (
+  <footer className={css(styles.wizardFooter, className)} {...props}>
+    {children}
+  </footer>
 );
 
 export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => {
@@ -71,9 +76,11 @@ const InternalWizardFooter = ({
   cancelButtonText = 'Cancel',
   nextButtonProps,
   backButtonProps,
-  cancelButtonProps
+  cancelButtonProps,
+  className,
+  ...props
 }: Omit<WizardFooterProps, 'activeStep'>) => (
-  <WizardFooterWrapper>
+  <WizardFooterWrapper className={className} {...props}>
     <ActionList>
       <ActionListGroup>
         {!isBackHidden && (

package/src/components/Wizard/WizardHeader.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export interface WizardHeaderProps {
+export interface WizardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback function called when the X (Close) button is clicked */
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Title of the wizard */
@@ -21,6 +21,8 @@ export interface WizardHeaderProps {
   titleId?: string;
   /** id for the description */
   descriptionId?: string;
+  /** Additional classes spread to the wizard header */
+  className?: string;
 }
 
 export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
@@ -31,9 +33,11 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   closeButtonAriaLabel,
   titleId,
   descriptionComponent: Component = 'div',
-  descriptionId
+  descriptionId,
+  className,
+  ...props
 }: WizardHeaderProps) => (
-  <div className={css(styles.wizardHeader)}>
+  <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
         <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>

package/src/components/Wizard/WizardNav.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 
-export interface WizardNavProps {
+export interface WizardNavProps extends Omit<React.HTMLProps<HTMLOListElement>, 'type' | 'ref'> {
   /** children should be WizardNavItem components */
   children?: any;
   /** Aria-label applied to the navigation element */
@@ -13,6 +13,8 @@ export interface WizardNavProps {
   isExpanded?: boolean;
   /** True to return the inner list without the wrapping navigation element */
   isInnerList?: boolean;
+  /** Additional classes spread to the wizard nav */
+  className?: string;
 }
 
 export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
@@ -20,11 +22,13 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   isExpanded = false,
-  isInnerList = false
+  isInnerList = false,
+  className,
+  ...props
 }: WizardNavProps) => {
   if (isInnerList) {
     return (
-      <ol className={css(styles.wizardNavList)} role="list">
+      <ol className={css(styles.wizardNavList, className)} role="list" {...props}>
         {children}
       </ol>
     );
@@ -32,9 +36,10 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
 
   return (
     <nav
-      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded)}
+      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded, className)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
+      {...props}
     >
       <ol className={css(styles.wizardNavList)} role="list">
         {children}

package/src/components/Wizard/WizardNavItem.tsx

@@ -8,7 +8,11 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
 import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
 
-export interface WizardNavItemProps extends OUIAProps {
+export interface WizardNavItemProps
+  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>,
+    OUIAProps {
+  /** Additional classes spread to the wizard nav item */
+  className?: string;
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the navigation item */
@@ -53,7 +57,9 @@ export const WizardNavItem = ({
   status = 'default',
   target,
   ouiaId,
-  ouiaSafe = true
+  ouiaSafe = true,
+  className,
+  ...props
 }: WizardNavItemProps) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
@@ -72,8 +78,10 @@ export const WizardNavItem = ({
       className={css(
         styles.wizardNavItem,
         isExpandable && styles.modifiers.expandable,
-        isExpandable && isExpanded && styles.modifiers.expanded
+        isExpandable && isExpanded && styles.modifiers.expanded,
+        className
       )}
+      {...props}
     >
       <NavItemComponent
         {...(NavItemComponent === 'a'
@@ -97,7 +105,7 @@ export const WizardNavItem = ({
       >
         {status === WizardNavItemStatus.Error && (
           <>
-            <span className="pf-v5-screen-reader">, {status}</span>
+            <span className="pf-v6-screen-reader">, {status}</span>
             <span className={css(styles.wizardNavLinkStatusIcon)}>
               <ExclamationCircleIcon />
             </span>