feat(misc): Replace Text, TextContent, TextList and TextListItem with…

… Content - PART 2 (#10643) * feat(Text): move to Content folder * refactor(Text examples): update names to Content * docs(Text): fix link * feat(Text): rename component to Content * feat(misc): replace Text, TextContent, TextList, TextListItem with Content * test(Content): update test * feat(misc): delete TextContent, TextList, TextListItem * test(Content): update snapshot * docs(Text): prop components update * fix rebase issue * additional updates to replace text with content * fixes from pr reviews * fix lint errors * update example * docs(Content): get rid of TextContent occurences * chore(docs): temporarily pin react-core version of react-docs Needed so that we can avoid temporary build problems caused by a chicken and egg situation between this repo and org. * chore(docs): Temporarily disable docs build from release CI * chore(docs): Undo changes to icons.js --------- Co-authored-by: Titani <tlabaj@redhat.com> Co-authored-by: Austin Sullivan <ausulliv@redhat.com>
patternfly · Jul 22, 2024 · f067b7c · f067b7c
1 parent 8e89786
commit f067b7c
Show file tree

Hide file tree

Showing 91 changed files with 829 additions and 1,108 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -11,15 +11,16 @@ jobs:
     name: CI
     uses: ./.github/workflows/main.yml
 
-  docs:
-    name: Documentation
-    uses: ./.github/workflows/documentation.yml
-    secrets: inherit
+  # docs:
+  #   name: Documentation
+  #   uses: ./.github/workflows/documentation.yml
+  #   secrets: inherit
 
   deploy:
     name: Deploy release
     runs-on: ubuntu-latest
-    needs: [ci, docs]
+    # needs: [ci, docs]
+    needs: [ci]
     steps:
       - name: Check out project
         uses: actions/checkout@v4

diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { AboutModal, Button, Content } from '@patternfly/react-core';
 import brandImg from '../../assets/PF-IconLogo.svg';
 
 export const AboutModalBasic: React.FunctionComponent = () => {
@@ -23,24 +23,24 @@ export const AboutModalBasic: React.FunctionComponent = () => {
         backgroundImageSrc="/assets/images/pf-background.svg"
         productName="name"
       >
-        <TextContent>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms Version</TextListItem>
-            <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server name</TextListItem>
-            <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User name</TextListItem>
-            <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User role</TextListItem>
-            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser version</TextListItem>
-            <TextListItem component="dd">601.2</TextListItem>
-            <TextListItem component="dt">Browser OS</TextListItem>
-            <TextListItem component="dd">Mac</TextListItem>
-          </TextList>
-        </TextContent>
+        <Content>
+          <dl>
+            <dt>CFME version</dt>
+            <dd>5.5.3.4.20102789036450</dd>
+            <dt>Cloudforms Version</dt>
+            <dd>4.1</dd>
+            <dt>Server name</dt>
+            <dd>40DemoMaster</dd>
+            <dt>User name</dt>
+            <dd>Administrator</dd>
+            <dt>User role</dt>
+            <dd>EvmRole-super_administrator</dd>
+            <dt>Browser version</dt>
+            <dd>601.2</dd>
+            <dt>Browser OS</dt>
+            <dd>Mac</dd>
+          </dl>
+        </Content>
       </AboutModal>
     </React.Fragment>
   );

diff --git a/.../react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx b/.../react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { AboutModal, Alert, Button, Content } from '@patternfly/react-core';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
@@ -25,29 +25,29 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         hasNoContentContainer={true}
         productName="Product name"
       >
-        <TextContent id="test1" className={spacing.pyXl}>
+        <Content id="test1" className={spacing.pyXl}>
           <h4>About</h4>
           <p>Content here</p>
-        </TextContent>
+        </Content>
         <Alert variant="info" title="Updates available" />
-        <TextContent id="test2" className={spacing.pyXl}>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms version</TextListItem>
-            <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server name</TextListItem>
-            <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User name</TextListItem>
-            <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User role</TextListItem>
-            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser version</TextListItem>
-            <TextListItem component="dd">601.2</TextListItem>
-            <TextListItem component="dt">Browser OS</TextListItem>
-            <TextListItem component="dd">Mac</TextListItem>
-          </TextList>
-        </TextContent>
+        <Content id="test2" className={spacing.pyXl}>
+          <dl>
+            <dt>CFME version</dt>
+            <dd>5.5.3.4.20102789036450</dd>
+            <dt>Cloudforms version</dt>
+            <dd>4.1</dd>
+            <dt>Server name</dt>
+            <dd>40DemoMaster</dd>
+            <dt>User name</dt>
+            <dd>Administrator</dd>
+            <dt>User role</dt>
+            <dd>EvmRole-super_administrator</dd>
+            <dt>Browser version</dt>
+            <dd>601.2</dd>
+            <dt>Browser OS</dt>
+            <dd>Mac</dd>
+          </dl>
+        </Content>
       </AboutModal>
     </React.Fragment>
   );

diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { AboutModal, Button, Content } from '@patternfly/react-core';
 import brandImg from '../../assets/PF-IconLogo.svg';
 
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
@@ -23,24 +23,24 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
         backgroundImageSrc="/assets/images/pf-background.svg"
         aria-label="No product name about modal"
       >
-        <TextContent>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms version</TextListItem>
-            <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server name</TextListItem>
-            <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User name</TextListItem>
-            <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User role</TextListItem>
-            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser version</TextListItem>
-            <TextListItem component="dd">601.2</TextListItem>
-            <TextListItem component="dt">Browser OS</TextListItem>
-            <TextListItem component="dd">Mac</TextListItem>
-          </TextList>
-        </TextContent>
+        <Content>
+          <dl>
+            <dt>CFME version</dt>
+            <dd>5.5.3.4.20102789036450</dd>
+            <dt>Cloudforms version</dt>
+            <dd>4.1</dd>
+            <dt>Server name</dt>
+            <dd>40DemoMaster</dd>
+            <dt>User name</dt>
+            <dd>Administrator</dd>
+            <dt>User role</dt>
+            <dd>EvmRole-super_administrator</dd>
+            <dt>Browser version</dt>
+            <dd>601.2</dd>
+            <dt>Browser OS</dt>
+            <dd>Mac</dd>
+          </dl>
+        </Content>
       </AboutModal>
     </React.Fragment>
   );

diff --git a/packages/react-core/src/components/Content/Content.tsx b/packages/react-core/src/components/Content/Content.tsx
@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Content/content';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export enum TextVariants {
+export enum ContentVariants {
   h1 = 'h1',
   h2 = 'h2',
   h3 = 'h3',
@@ -24,7 +24,7 @@ export enum TextVariants {
   dd = 'dd'
 }
 
-export interface TextProps extends React.HTMLProps<HTMLElement>, OUIAProps {
+export interface ContentProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   /** The content component. If none provided, it will be a 'div' and styling will be applied to all its child components. */
   component?:
     | 'h1'
@@ -81,7 +81,7 @@ const componentStyles = {
   dd: styles.contentDd
 };
 
-export const Text: React.FunctionComponent<TextProps> = ({
+export const Content: React.FunctionComponent<ContentProps> = ({
   children,
   className = '',
   component,
@@ -90,10 +90,10 @@ export const Text: React.FunctionComponent<TextProps> = ({
   ouiaId,
   ouiaSafe = true,
   ...props
-}: TextProps) => {
+}: ContentProps) => {
   const wrappingComponent = component ?? 'div';
   const Component: any = wrappingComponent;
-  const ouiaProps = useOUIAProps(Text.displayName, ouiaId, ouiaSafe);
+  const ouiaProps = useOUIAProps(Content.displayName, ouiaId, ouiaSafe);
 
   const isList = ['ul', 'ol', 'dl'].includes(wrappingComponent);
 
@@ -113,4 +113,4 @@ export const Text: React.FunctionComponent<TextProps> = ({
     </Component>
   );
 };
-Text.displayName = 'Text';
+Content.displayName = 'Content';
diff --git a/packages/react-core/src/components/Content/TextContent.tsx b/packages/react-core/src/components/Content/TextContent.tsx
diff --git a/packages/react-core/src/components/Content/TextList.tsx b/packages/react-core/src/components/Content/TextList.tsx
diff --git a/packages/react-core/src/components/Content/TextListItem.tsx b/packages/react-core/src/components/Content/TextListItem.tsx