feat(misc): Replace Text, TextContent, TextList and TextListItem with Content - PART 1

packages/react-core/src/components/Text/Text.tsx → packages/react-core/src/components/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
       )}
     >

packages/react-core/src/components/Text/__tests__/Text.test.tsx → packages/react-core/src/components/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"', () => {

packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap → packages/react-core/src/components/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>
 `;

packages/react-core/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"
+
+```

packages/react-core/src/components/Text/examples/TextBody.tsx → packages/react-core/src/components/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

packages/react-core/src/components/Text/examples/TextDescriptionList.tsx → packages/react-core/src/components/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}>

packages/react-core/src/components/Text/examples/TextHeadings.tsx → packages/react-core/src/components/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>

packages/react-core/src/components/Text/examples/TextOrderedList.tsx → packages/react-core/src/components/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>

packages/react-core/src/components/Text/examples/TextPlainList.tsx → packages/react-core/src/components/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>

packages/react-core/src/components/Text/examples/TextUnorderedList.tsx → packages/react-core/src/components/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>

packages/react-core/src/components/Text/examples/TextVisited.tsx → packages/react-core/src/components/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>

packages/react-core/src/components/Text/examples/TextContentWrapped.tsx → packages/react-core/src/components/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.

packages/react-core/src/components/Text/index.ts → packages/react-core/src/components/Content/index.ts

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

packages/react-core/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).

packages/react-core/src/components/index.ts

@@ -17,6 +17,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './ClipboardCopy';
 export * from './CodeBlock';
+export * from './Content';
 export * from './DataList';
 export * from './DatePicker';
 export * from './DescriptionList';
@@ -62,7 +63,6 @@ export * from './Slider';
 export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';
-export * from './Text';
 export * from './TextArea';
 export * from './TextInput';
 export * from './Tile';