@patternfly/react-core 6.0.0-alpha.72 → 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.71",
+  "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.71",
+  "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.71",
+  "version": "6.0.0-alpha.73",
   "private": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.72",
+  "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.26",
-    "@patternfly/react-styles": "^6.0.0-alpha.25",
-    "@patternfly/react-tokens": "^6.0.0-alpha.25",
+    "@patternfly/react-icons": "^6.0.0-alpha.27",
+    "@patternfly/react-styles": "^6.0.0-alpha.26",
+    "@patternfly/react-tokens": "^6.0.0-alpha.26",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.150",
+    "@patternfly/patternfly": "6.0.0-alpha.160",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "0df6094898bc94f9b0881e1ab97e6d0941df90af"
+  "gitHead": "460bb23f9570b110a396a96b112f43ffdfbe60f1"
 }

package/src/components/Banner/Banner.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Banner/banner';
 import { css } from '@patternfly/react-styles';
 
-export type BannerColor = 'red' | 'orangered' | 'orange' | 'gold' | 'green' | 'cyan' | 'blue' | 'purple';
+export type BannerColor = 'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple';
 
 export type BannerStatus = 'success' | 'warning' | 'danger' | 'info' | 'custom';
 

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

@@ -47,9 +47,9 @@ test('Renders with class name pf-m-orange when "orange" is passed to color prop'
   expect(screen.getByText('Test')).toHaveClass('pf-m-orange');
 });
 
-test('Renders with class name pf-m-gold when "gold" is passed to color prop', () => {
-  render(<Banner color="gold">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-gold');
+test('Renders with class name pf-m-yellow when "yellow" is passed to color prop', () => {
+  render(<Banner color="yellow">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-yellow');
 });
 
 test('Renders with class name pf-m-green when "green" is passed to color prop', () => {
@@ -57,9 +57,9 @@ test('Renders with class name pf-m-green when "green" is passed to color prop',
   expect(screen.getByText('Test')).toHaveClass('pf-m-green');
 });
 
-test('Renders with class name pf-m-cyan when "cyan" is passed to color prop', () => {
-  render(<Banner color="cyan">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-cyan');
+test('Renders with class name pf-m-teal when "teal" is passed to color prop', () => {
+  render(<Banner color="teal">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-teal');
 });
 
 test('Renders with class name pf-m-blue when "blue" is passed to color prop', () => {

package/src/components/Banner/examples/BannerBasic.tsx

@@ -11,11 +11,11 @@ export const BannerBasic: React.FunctionComponent = () => (
     <br />
     <Banner color="orange">Orange banner</Banner>
     <br />
-    <Banner color="gold">Gold banner</Banner>
+    <Banner color="yellow">Yellow banner</Banner>
     <br />
     <Banner color="green">Green banner</Banner>
     <br />
-    <Banner color="cyan">Cyan banner</Banner>
+    <Banner color="teal">Teal banner</Banner>
     <br />
     <Banner color="blue">Blue banner</Banner>
     <br />

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/Label/Label.tsx

@@ -20,7 +20,7 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Additional classes added to the label. */
   className?: string;
   /** Color of the label. */
-  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'gold';
+  color?: 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow';
   /** Variant of the label. */
   variant?: 'outline' | 'filled' | 'overflow' | 'add';
   /** Status of the label with a respective icon and color. Overrides the color set by the color property. */
@@ -83,13 +83,13 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
 
 const colorStyles = {
   blue: styles.modifiers.blue,
-  cyan: styles.modifiers.cyan,
+  teal: styles.modifiers.teal,
   green: styles.modifiers.green,
   orange: styles.modifiers.orange,
   purple: styles.modifiers.purple,
   red: styles.modifiers.red,
   orangered: styles.modifiers.orangered,
-  gold: styles.modifiers.gold,
+  yellow: styles.modifiers.yellow,
   grey: ''
 };
 

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

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import { Label } from '../Label';
 
-const labelColors = ['blue', 'cyan', 'green', 'orange', 'purple', 'red', 'grey'];
+const labelColors = ['blue', 'teal', 'green', 'orange', 'purple', 'red', 'grey', 'yellow'];
 
 describe('Label', () => {
   test('renders', () => {

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

@@ -225,42 +225,6 @@ exports[`Label label with close button and outline variant 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Label label with cyan color 1`] = `
-<DocumentFragment>
-  <span
-    class="pf-v6-c-label pf-m-cyan pf-m-filled"
-  >
-    <span
-      class="pf-v6-c-label__content"
-    >
-      <span
-        class="pf-v6-c-label__text"
-      >
-        Something
-      </span>
-    </span>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Label label with cyan color with outline variant 1`] = `
-<DocumentFragment>
-  <span
-    class="pf-v6-c-label pf-m-cyan pf-m-outline"
-  >
-    <span
-      class="pf-v6-c-label__content"
-    >
-      <span
-        class="pf-v6-c-label__text"
-      >
-        Something
-      </span>
-    </span>
-  </span>
-</DocumentFragment>
-`;
-
 exports[`Label label with green color 1`] = `
 <DocumentFragment>
   <span
@@ -479,6 +443,42 @@ exports[`Label label with red color with outline variant 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Label label with teal color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-teal pf-m-filled"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label label with teal color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-teal pf-m-outline"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Label label with truncation 1`] = `
 <DocumentFragment>
   <span
@@ -498,6 +498,42 @@ exports[`Label label with truncation 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Label label with yellow color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-yellow pf-m-filled"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label label with yellow color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-yellow pf-m-outline"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Label renders 1`] = `
 <DocumentFragment>
   <span