chore(Text/Content): Replace Text component with Content (#4149)

* chore(Text/Content): Replace Text component with Content * chore(TextVariants): Change TextVariants to ContentVariants * chore(Text/Content): Pull in latest react release, resolve build errors * chore(text/content): Update to latest react releases * chore(packaging): bring docs-framework version back inline
patternfly · Jul 22, 2024 · 4b7a402 · 4b7a402
1 parent 325f8a2
commit 4b7a402
Show file tree

Hide file tree

Showing 22 changed files with 846 additions and 848 deletions.
diff --git a/package.json b/package.json
@@ -35,9 +35,9 @@
   },
   "devDependencies": {
     "@patternfly/patternfly": "6.0.0-alpha.181",
-    "@patternfly/react-code-editor": "6.0.0-alpha.78",
-    "@patternfly/react-core": "6.0.0-alpha.78",
-    "@patternfly/react-table": "6.0.0-alpha.79",
+    "@patternfly/react-code-editor": "6.0.0-alpha.89",
+    "@patternfly/react-core": "6.0.0-alpha.89",
+    "@patternfly/react-table": "6.0.0-alpha.90",
     "@octokit/rest": "^19.0.7",
     "glob": "^8.1.0",
     "lerna": "^6.4.1",

diff --git a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, FlexItem, Text } from '@patternfly/react-core';
+import { Flex, FlexItem, Content } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 import { Link } from '../link/link';
 import { slugger } from '../../helpers/slugger';
@@ -17,7 +17,7 @@ export const AutoLinkHeader = ({
   return (
     <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }}>
       <FlexItem>
-        <Text
+        <Content
           id={slug}
           component={headingLevel}
           className={css('ws-heading', className)}
@@ -27,7 +27,7 @@ export const AutoLinkHeader = ({
             <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
           </Link>
           {children}
-        </Text>
+        </Content>
       </FlexItem>
       {metaText && <FlexItem>{metaText}</FlexItem>}
     </Flex>

diff --git a/packages/documentation-framework/components/footer/footer.js b/packages/documentation-framework/components/footer/footer.js
@@ -1,5 +1,5 @@
 import React from "react";
-import {Brand, Grid, GridItem, List, PageSection, Text} from "@patternfly/react-core";
+import {Brand, Grid, GridItem, List, PageSection, Content} from "@patternfly/react-core";
 import {Link} from "@patternfly/documentation-framework/components";
 import {GithubIcon, TwitterIcon} from "@patternfly/react-icons";
 import redhatLogo from "./RHLogo.png";
@@ -176,14 +176,14 @@ export const Footer = () => (
                   <source srcSet={logo} />
                 </Brand>
               </Link>
-              <Text className="ws-org-pfsite-footer-menu-about-description">
+              <Content component="p" className="ws-org-pfsite-footer-menu-about-description">
                 PatternFly is an open source design system built to drive
                 consistency and unify teams. From documentation and components
                 to code examples and tutorials, PatternFly is a place where
                 design and development can thrive. We’re on a mission to help
                 teams build consistent, accessible, and scalable enterprise
                 product experiences—the open source way.
-              </Text>
+              </Content>
             </GridItem>
             <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v6-u-px-xl">
               <Link

diff --git a/packages/documentation-framework/components/sectionGallery/TextSummary.js b/packages/documentation-framework/components/sectionGallery/TextSummary.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { convertToReactComponent } from "@patternfly/ast-helpers";
-import { TextContent, Text } from "@patternfly/react-core";
+import { Content } from "@patternfly/react-core";
 
 // convert summary text from string to jsx, remove links
 export const SummaryComponent = ({ id, itemsData }) => {
@@ -22,10 +22,10 @@ export const TextSummary = ({ id, itemsData }) => {
   }
 
   return (
-    <TextContent>
-      <Text>
+    <Content>
+      <Content component="p">
         <SummaryComponent id={id} itemsData={itemsData} />
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
   )
 };
diff --git a/packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js b/packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js
@@ -7,9 +7,8 @@ import {
   DataListCell,
   Split,
   SplitItem,
-  TextContent,
-  Text,
-  TextVariants,
+  Content,
+  ContentVariants,
   Label,
 } from '@patternfly/react-core';
 import { Link } from '../link/link';
@@ -58,11 +57,11 @@ export const SectionDataListLayout = ({
                     <DataListCell width={5} key="text-description">
                       <Split className={hasListText ? 'pf-v6-u-mb-md' : null}>
                         <SplitItem isFilled>
-                          <TextContent>
-                            <Text component={TextVariants.h2}>
+                          <Content>
+                            <Content component={ContentVariants.h2}>
                               <span>{title}</span>
-                            </Text>
-                          </TextContent>
+                            </Content>
+                          </Content>
                         </SplitItem>
                         <SplitItem>
                           {isBeta && (

diff --git a/packages/documentation-framework/components/sectionGallery/sectionGalleryToolbar.js b/packages/documentation-framework/components/sectionGallery/sectionGalleryToolbar.js
@@ -6,8 +6,8 @@ import {
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
-  Text,
-  TextVariants,
+  Content,
+  ContentVariants,
   ToggleGroup,
   ToggleGroupItem,
 } from '@patternfly/react-core';
@@ -63,10 +63,10 @@ export const SectionGalleryToolbar = ({
         spacer={{ default: 'spacerMd', md: 'spacerNone' }}
         style={{ '--pf-v6-c-toolbar__item--MinWidth': 'max-content' }}
       >
-        <Text component={TextVariants.small}>
+        <Content component={ContentVariants.small}>
           {galleryItems.length}
           {countText}
-        </Text>
+        </Content>
       </ToolbarItem>
     </ToolbarContent>
   </Toolbar>

diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json
@@ -74,9 +74,9 @@
   },
   "peerDependencies": {
     "@patternfly/patternfly": "6.0.0-alpha.181",
-    "@patternfly/react-code-editor": "6.0.0-alpha.78",
-    "@patternfly/react-core": "6.0.0-alpha.78",
-    "@patternfly/react-table": "6.0.0-alpha.79",
+    "@patternfly/react-code-editor": "6.0.0-alpha.89",
+    "@patternfly/react-core": "6.0.0-alpha.89",
+    "@patternfly/react-table": "6.0.0-alpha.90",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   }

diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageSection, Title, Tooltip, PageSectionVariants, Button, BackToTop, Flex, FlexItem, PageGroup, Page, Text, TextContent, Label, Stack, StackItem } from '@patternfly/react-core';
+import { PageSection, Title, Tooltip, PageSectionVariants, Button, BackToTop, Flex, FlexItem, PageGroup, Page, Content, Label, Stack, StackItem } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import { Router, useLocation } from '@reach/router';
@@ -249,7 +249,7 @@ export const MDXTemplate = ({
           variant={!isSinglePage ? PageSectionVariants.light : ""}
           isWidthLimited
         >
-          <TextContent>
+          <Content>
             <Flex alignItems={{ default: 'alignItemsCenter'}}>
               <FlexItem>
                 <Title headingLevel='h1' size='4xl' id="ws-page-title">
@@ -289,7 +289,7 @@ export const MDXTemplate = ({
               </FlexItem>
             </Flex>
             {isComponent && summary && (<SummaryComponent />)}
-          </TextContent>
+          </Content>
         </PageSection>
         { showTabs && (
           <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">

diff --git a/packages/documentation-framework/versions.json b/packages/documentation-framework/versions.json
@@ -8,21 +8,21 @@
         "@patternfly/patternfly": "6.0.0-alpha.139",
         "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4",
         "@patternfly/react-charts": "8.0.0-alpha.23",
-        "@patternfly/react-code-editor": "6.0.0-alpha.61",
+        "@patternfly/react-code-editor": "6.0.0-alpha.89",
         "@patternfly/react-component-groups": "6.0.0-alpha.3",
-        "@patternfly/react-core": "6.0.0-alpha.61",
-        "@patternfly/react-drag-drop": "6.0.0-alpha.43",
+        "@patternfly/react-core": "6.0.0-alpha.89",
+        "@patternfly/react-drag-drop": "6.0.0-alpha.71",
         "@patternfly/react-icons": "6.0.0-alpha.23",
         "@patternfly/react-log-viewer": "6.0.0-alpha.2",
         "@patternfly/react-styles": "6.0.0-alpha.23",
-        "@patternfly/react-table": "6.0.0-alpha.61",
+        "@patternfly/react-table": "6.0.0-alpha.90",
         "@patternfly/react-tokens": "6.0.0-alpha.23",
         "@patternfly/react-topology": "6.0.0-alpha.1",
         "@patternfly/react-user-feedback": "6.0.0-alpha.1",
         "@patternfly/react-console": "6.0.0-alpha.1",
         "@patternfly/quickstarts": "5.1.0",
         "@patternfly/react-virtualized-extension": "6.0.0-alpha.1",
-        "@patternfly/react-templates": "6.0.0-alpha.11"
+        "@patternfly/react-templates": "6.0.0-alpha.39"
       }
     },{
       "name": "5.2.0",

diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json
@@ -17,10 +17,10 @@
     "screenshots": "pf-docs-framework screenshots"
   },
   "dependencies": {
-    "@patternfly/documentation-framework": "6.0.0-alpha.62",
+    "@patternfly/documentation-framework": "6.0.0-alpha.63",
     "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4",
     "@patternfly/react-console": "6.0.0-alpha.3",
-    "@patternfly/react-docs": "7.0.0-alpha.84",
+    "@patternfly/react-docs": "7.0.0-alpha.96",
     "@patternfly/react-log-viewer": "6.0.0-alpha.1",
     "@patternfly/react-topology": "6.0.0-alpha.1",
     "@patternfly/react-user-feedback": "6.0.0-alpha.1",

diff --git a/...on-site/patternfly-docs/content/design-guidelines/components/content/content.md b/...on-site/patternfly-docs/content/design-guidelines/components/content/content.md
@@ -0,0 +1,8 @@
+---
+id: Content
+section: components
+---
+
+## Usage
+
+Content can be used anywhere in your designs and can take on different formats. Read [PatternFly’s typography page](/design-foundations/typography) for more guidelines on how to use content in your UIs, and the different styles available.
diff --git a/...entation-site/patternfly-docs/content/design-guidelines/components/text/text.md b/...entation-site/patternfly-docs/content/design-guidelines/components/text/text.md
diff --git a/...on-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-grid.js b/...on-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-grid.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Flex, FlexItem, Text } from '@patternfly/react-core';
+import { Grid, GridItem, Flex, FlexItem, Content } from '@patternfly/react-core';
 import '@patternfly/patternfly/patternfly-charts.css';
 
 const colorFamilies = [
@@ -41,7 +41,7 @@ const ColorFamily = ({color, computedStyles}) => {
 
   return (
     <GridItem>
-      <Text className="ws-heading ws-title" component="h3">{color} family</Text>
+      <Content className="ws-heading ws-title" component="h3">{color} family</Content>
       <Flex direction={{ default: 'column' }}  gap={{ default: 'gapMd' }}>
         {entries}
       </Flex>

diff --git a/...umentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.md b/...umentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.md
@@ -2,7 +2,7 @@
 id: Icons
 section: design-foundations
 ---
-import { Icon, Text, TextVariants } from '@patternfly/react-core';
+import { Icon, Content, ContentVariants } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
@@ -34,20 +34,20 @@ Use the following semantic tokens to ensure that icons are properly aligned and
 
 | **Size** | **Token** | **Example** |
 | --- | --- | :---: |
-|  1.375rem (22px)   | `pf-t--global--icon--size--font--heading--h1` | <Text component="h1"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Text>  | 
-| 1.25rem (20px)    | `pf-t--global--icon--size--font--heading--h2` | <Text component="h2"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Text>  |
-| 1.125rem (18px) | `pf-t--global--icon--size--font--heading--h3` | <Text component="h3"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Text>  |
-| 1rem (16px) | `pf-t--global--icon--size--font--heading--h4` | <Text component="h4"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Text>  |
-| 1rem (16px) | `pf-t--global--icon--size--font--heading--h5` | <Text component="h5"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Text>  |
-| 1rem (16px) | `pf-t--global--icon--size--font--heading--h6` | <Text component="h6"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Text>  |
+|  1.375rem (22px)   | `pf-t--global--icon--size--font--heading--h1` | <Content component="h1"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Content>  | 
+| 1.25rem (20px)    | `pf-t--global--icon--size--font--heading--h2` | <Content component="h2"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Content>  |
+| 1.125rem (18px) | `pf-t--global--icon--size--font--heading--h3` | <Content component="h3"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Content>  |
+| 1rem (16px) | `pf-t--global--icon--size--font--heading--h4` | <Content component="h4"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Content>  |
+| 1rem (16px) | `pf-t--global--icon--size--font--heading--h5` | <Content component="h5"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Content>  |
+| 1rem (16px) | `pf-t--global--icon--size--font--heading--h6` | <Content component="h6"> <Icon isInline> <StarIcon /> </Icon> Heading <Icon isInline> <StarIcon /> </Icon></Content>  |
 
 ### Body text
 
 | **Size** | **Token** | **Example** |
 | --- | --- | :---: |
-| 0.75rem (12px)  | `pf-t--global--icon--size--font--body--sm`  | <Text component={TextVariants.small}> <Icon isInline><StarIcon /></Icon> Small body <Icon isInline><StarIcon /></Icon></Text> |
-| 0.875rem (14px) | `pf-t--global--icon--size--font--body--default`  | <Text component={TextVariants.p}> <Icon isInline><StarIcon /></Icon> Default body <Icon isInline><StarIcon /></Icon></Text> 
-| 1rem (16px)  | `pf-t--global--icon--size--font--body--lg`  | <Text component={TextVariants.p} style="font-size: 16px"> <Icon isInline><StarIcon /></Icon> Large body <Icon isInline><StarIcon /></Icon></Text> 
+| 0.75rem (12px)  | `pf-t--global--icon--size--font--body--sm`  | <Content component={ContentVariants.small}> <Icon isInline><StarIcon /></Icon> Small body <Icon isInline><StarIcon /></Icon></Content> |
+| 0.875rem (14px) | `pf-t--global--icon--size--font--body--default`  | <Content component={ContentVariants.p}> <Icon isInline><StarIcon /></Icon> Default body <Icon isInline><StarIcon /></Icon></Content> 
+| 1rem (16px)  | `pf-t--global--icon--size--font--body--lg`  | <Content component={ContentVariants.p} style="font-size: 16px"> <Icon isInline><StarIcon /></Icon> Large body <Icon isInline><StarIcon /></Icon></Content> 
 
 ## Standalone icons 
 

diff --git a/...-site/patternfly-docs/content/design-guidelines/styles/typography/typography.md b/...-site/patternfly-docs/content/design-guidelines/styles/typography/typography.md
@@ -3,7 +3,7 @@ id: Typography
 section: design-foundations
 ---
 
-import { Text, TextContent, TextVariants, Title } from '@patternfly/react-core';
+import { Content, ContentVariants, Title } from '@patternfly/react-core';
 import correct from './typography_correct_spacing.png';
 import incorrect from './typography_incorrect_spacing.png';
 
@@ -78,8 +78,8 @@ All body text uses Red Hat Text.
 | Example | Tokens | Size | Line height | Usage | 
 | --- | --- | --- | --- | --- |
 |<p style="font-size:16px">Aa</p>  | --pf-t--global--font--size--body--lg | 1rem (16px) | 1.5 | Use for larger body text, like in xl empty states.  |
-| <TextContent><Text component={TextVariants.p}>Aa</Text></TextContent> | --pf-t--global--font--size--body--default | 0.875rem (14px) | 1.5 | Use for standard body text. |
-| <TextContent><Text component={TextVariants.small}>Aa</Text></TextContent>  | --pf-t--global--font--size--body--sm | 0.75rem (12px) | 1.5 | User for smaller body text, like helper text. |
+| <Content><Content component={ContentVariants.p}>Aa</Content></Content> | --pf-t--global--font--size--body--default | 0.875rem (14px) | 1.5 | Use for standard body text. |
+| <Content><Content component={ContentVariants.small}>Aa</Content></Content>  | --pf-t--global--font--size--body--sm | 0.75rem (12px) | 1.5 | User for smaller body text, like helper text. |
 
 ## Line height and spacing
 The line height of your text impacts how you should use [spacers](/design-foundations/spacers) in your design. 

diff --git a/...ages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md b/...ages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md
@@ -5,7 +5,7 @@ section: get-started
 ---
 
 import './get-started.css';
-import { Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Divider, Icon, Grid, GridItem, PageSection, Split, SplitItem, Title, Tooltip, Text, TextVariants } from '@patternfly/react-core';
+import { Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Divider, Icon, Grid, GridItem, PageSection, Split, SplitItem, Title, Tooltip, Content, ContentVariants } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import { Link } from '@patternfly/documentation-framework/components';