feat(misc): Replace Text, TextContent, TextList and TextListItem with Content - PART 2 by adamviktora · Pull Request #10643 · patternfly/patternfly-react

adamviktora · 2024-06-24T14:27:52Z

What: Closes #10395

This is a followup to Part 1 PR #10611 - wait for that PR to merge first.

This PR is breaking and the build will fail, because Text, TextContent, TextList and TextListItem have to be updated in patternfly-org so the build framework doesn't use these old components.

Codemod PR: patternfly/pf-codemods#675
Org issue to replace Text: patternfly/patternfly-org#4087

patternfly-build · 2024-06-24T14:31:14Z

Preview: https://patternfly-react-pr-10643.surge.sh

A11y report: https://patternfly-react-pr-10643-a11y.surge.sh

…ntent

mcoker

LGTM

thatblindgeye

Few changes below.

Also this isn't a blocker for this PR, but would be worth post v6 to clean up usage of Content for consistency. Right now we're mixing and matching between <Content component="h1">... and just using a native HTML <h1>.... Even if both are valid, might be better to stick to one in our examples/codebase, except any examples that are intended to show "you can also use native element inside of Content".

packages/react-core/src/components/Content/examples/ContentPlainList.tsx

packages/react-core/src/components/Content/examples/ContentOrderedList.tsx

thatblindgeye · 2024-07-18T15:57:43Z

packages/react-core/src/components/Content/examples/ContentWrapper.tsx

+      Content with a component of type "p" still renders the same when wrapped with a TextContent.
+    </Content>
    <p>If located within a wrapping TextContent, html elements are styled as well!</p>


Verbiage may need to be updated here, re: "...TextContent" still being used

@mcoker Is this example even needed. It is a new one?

packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx

edonehoo

I made a bunch of small content change requests too in some of the demos, just that I noticed 😅 but lmk if you have any thoughts or questions about my suggestions!

edonehoo · 2024-07-18T16:00:21Z

packages/react-core/src/components/Content/examples/Content.md

 ---

-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.
+The `<Content>` 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`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`).


Suggested change

The `<Content>` 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`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`).

The `<Content>` component allows you to establish a block of HTML content and apply simple, built-in styling. `<Content>` can be used for any element supported by the `component` property (including `h1` through `h6`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`).

edonehoo · 2024-07-18T16:06:04Z

packages/react-core/src/components/Content/examples/Content.md

+You cannot nest other components within `<Content>`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `<Content>` 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.
+For example, rather than nesting the `<List>` and `<Title>` components within `<Content>`, you should pass `component="h1"` into the `<Content>` component. Similarly, when you need to add a divider , rather than passing in a separate `<Divider>` component, you should utilize the `hr` property that `<Content>` supports, which will be styled as a divider.


Suggested change

For example, rather than nesting the `<List>` and `<Title>` components within `<Content>`, you should pass `component="h1"` into the `<Content>` component. Similarly, when you need to add a divider , rather than passing in a separate `<Divider>` component, you should utilize the `hr` property that `<Content>` supports, which will be styled as a divider.

For example, to create a level 1 heading, you should pass `component="h1"` to `<Content>`, instead of nesting a `<Title>` component within `<Content>`. Similarly, when you need to add a divider to a page, you should utilize the `hr` property of `<Content>` (which is styled as a divider), rather than using a separate `<Divider>` component.

maybe I'm misunderstanding, but is mentioning <List> relevant for this example? It doesn't intrinsically apply h1 does it?

edonehoo · 2024-07-18T16:09:25Z

packages/react-core/src/components/Content/examples/Content.md

 ```

-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.
+ Html elements wrapped by `<Content>` are styled by the Content component.


Suggested change

Html elements wrapped by `<Content>` are styled by the Content component.

HTML elements wrapped by `<Content>` are styled by the content component.

Maybe it would make more sense to me if I could load the website preview, but I'm not fully understanding the purpose of this line. Is this different than what we've already stated above?

edonehoo · 2024-07-18T16:12:49Z

packages/react-core/src/demos/Banner.md

+            <Content>
+              <h1>Main title</h1>
+              <p>
                Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />


Suggested change

Body text should be Overpass Regular at 16px. It should have leading of 24px because 

Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because 

this aligns with our higher level typography rules/docs

edonehoo · 2024-07-18T16:13:13Z

packages/react-core/src/demos/Banner.md

+                <Content>
+                  <h1>Main title</h1>
+                  <p>
                    Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />


Suggested change

Body text should be Overpass Regular at 16px. It should have leading of 24px because 

Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because

edonehoo · 2024-07-18T16:20:45Z

packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

+        <Content>
+          <h1>Main title</h1>
+          <p>
            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />


Suggested change

Body text should be Overpass Regular at 16px. It should have leading of 24px because 

Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because

edonehoo · 2024-07-18T16:20:53Z

packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

+        <Content>
+          <h1>Main title</h1>
+          <p>
            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />


Suggested change

Body text should be Overpass Regular at 16px. It should have leading of 24px because 

Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because

edonehoo · 2024-07-18T16:21:00Z

packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx

+        <Content>
+          <h1>Main title</h1>
+          <p>
            Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />


Suggested change

Body text should be Overpass Regular at 16px. It should have leading of 24px because 

Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because

edonehoo · 2024-07-18T16:21:17Z

packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx

-          </TextContent>
+          <Content>
+            <h1>Projects</h1>
+            <p>Click any project card to view Tabs within Modals.</p>


Suggested change

Click any project card to view Tabs within Modals.

Click any project card to view tabs within modals.

edonehoo · 2024-07-18T16:22:24Z

packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx

+      <Content>
+        <h1>Main title</h1>
+        <p>
          Body text should be Overpass Regular at 16px.It should have leading of 24px because <br />


Suggested change

Body text should be Overpass Regular at 16px.It should have leading of 24px because 

Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because

Needed so that we can avoid temporary build problems caused by a chicken and egg situation between this repo and org.

patternfly-build · 2024-07-22T17:51:52Z

Your changes have been released in:

@patternfly/react-code-editor@6.0.0-alpha.88
@patternfly/react-core@6.0.0-alpha.88
@patternfly/react-docs@7.0.0-alpha.95
@patternfly/react-drag-drop@6.0.0-alpha.70
@patternfly/react-integration@6.0.0-alpha.46
demo-app-ts@5.1.1-alpha.87
@patternfly/react-table@6.0.0-alpha.89
@patternfly/react-templates@6.0.0-alpha.38

Thanks for your contribution! 🎉

adamviktora mentioned this pull request Jun 26, 2024

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

Merged

adamviktora force-pushed the text-to-content_breaking-change branch from 2fb1edc to d72cde6 Compare June 26, 2024 15:19

adamviktora mentioned this pull request Jun 26, 2024

feat(Content): introduce Content component (replacement for Text) #10579

Closed

adamviktora linked an issue Jun 26, 2024 that may be closed by this pull request

Change Text component name to Content to better align with core #10395

Closed

adamviktora mentioned this pull request Jun 26, 2024

Text - replace with Content patternfly/pf-codemods#663

Closed

adamviktora requested a review from tlabaj June 26, 2024 17:06

adamviktora marked this pull request as ready for review June 26, 2024 17:06

nicolethoen linked an issue Jul 8, 2024 that may be closed by this pull request

Text - support for hr element #10390

Closed

adamviktora added 9 commits July 17, 2024 15:26

feat(Text): move to Content folder

c676e2f

refactor(Text examples): update names to Content

8c22024

docs(Text): fix link

558d587

feat(Text): rename component to Content

dc6c42d

feat(misc): replace Text, TextContent, TextList, TextListItem with Co…

86a3771

…ntent

test(Content): update test

50a22a2

feat(misc): delete TextContent, TextList, TextListItem

110b40e

test(Content): update snapshot

d2ea05b

docs(Text): prop components update

55d6063

tlabaj force-pushed the text-to-content_breaking-change branch from 4ce7667 to 55d6063 Compare July 17, 2024 19:37

tlabaj added 2 commits July 17, 2024 15:46

fix rebase issue

ffe178a

additional updates to replace text with content

be118b6

tlabaj added Content css review labels Jul 18, 2024

tlabaj requested review from kmcfaul, mcoker and thatblindgeye July 18, 2024 15:39

mcoker approved these changes Jul 18, 2024

View reviewed changes

thatblindgeye requested changes Jul 18, 2024

View reviewed changes

edonehoo suggested changes Jul 18, 2024

View reviewed changes

fixes from pr reviews

b103922

tlabaj requested review from edonehoo and thatblindgeye July 18, 2024 19:00

fix lint errors

1b5c02f

This was referenced Jul 18, 2024

Update Text to Content patternfly/patternfly-org#4148

Closed

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

Merged

edonehoo approved these changes Jul 18, 2024

View reviewed changes

wise-king-sullyman approved these changes Jul 18, 2024

View reviewed changes

update example

d51645c

thatblindgeye approved these changes Jul 19, 2024

View reviewed changes

docs(Content): get rid of TextContent occurences

6dfe684

adamviktora mentioned this pull request Jul 22, 2024

feat(misc): rename Text to Content patternfly/patternfly-org#4152

Closed

wise-king-sullyman added 3 commits July 22, 2024 11:45

chore(docs): temporarily pin react-core version of react-docs

7d4ac79

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

fdbcacf

chore(docs): Undo changes to icons.js

bdd318b

dlabaj approved these changes Jul 22, 2024

View reviewed changes

wise-king-sullyman merged commit f067b7c into patternfly:v6 Jul 22, 2024

wise-king-sullyman mentioned this pull request Jul 22, 2024

chore(CI): Reenable docs build in release CI #10794

Merged

tlabaj mentioned this pull request Jul 23, 2024

Change Text component name to Content to better align with core #10395

Closed

dgdavid mentioned this pull request Feb 13, 2025

Sync with master agama-project/agama#1991

Merged

	The `<Content>` 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`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`).
	The `<Content>` component allows you to establish a block of HTML content and apply simple, built-in styling. `<Content>` can be used for any element supported by the `component` property (including `h1` through `h6`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`).

	For example, rather than nesting the `<List>` and `<Title>` components within `<Content>`, you should pass `component="h1"` into the `<Content>` component. Similarly, when you need to add a divider , rather than passing in a separate `<Divider>` component, you should utilize the `hr` property that `<Content>` supports, which will be styled as a divider.
	For example, to create a level 1 heading, you should pass `component="h1"` to `<Content>`, instead of nesting a `<Title>` component within `<Content>`. Similarly, when you need to add a divider to a page, you should utilize the `hr` property of `<Content>` (which is styled as a divider), rather than using a separate `<Divider>` component.

	Html elements wrapped by `<Content>` are styled by the Content component.
	HTML elements wrapped by `<Content>` are styled by the content component.

	Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
	Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />

	<p>Click any project card to view Tabs within Modals.</p>
	<p>Click any project card to view tabs within modals.</p>

Conversation

adamviktora commented Jun 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Jun 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

edonehoo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edonehoo Jul 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Jul 22, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

adamviktora commented Jun 24, 2024 •

edited

Loading

patternfly-build commented Jun 24, 2024 •

edited

Loading

edonehoo left a comment •

edited

Loading

edonehoo Jul 18, 2024 •

edited

Loading