docs(Text): add description #9583
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Preview: https://patternfly-react-pr-9583.surge.sh A11y report: https://patternfly-react-pr-9583-a11y.surge.sh |
mcoker
approved these changes
Sep 14, 2023
| @@ -5,41 +5,52 @@ 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 (`TextContent`, `TextList`, `TextListItem`). | |||
There was a problem hiding this comment.
Suggested change
| 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 (`TextContent`, `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 (`TextContent`, `TextList`, `TextListItem`). |
There was a problem hiding this comment.
Funny cause I'm usually pro oxford comma, must've missed it haha.
| @@ -5,41 +5,52 @@ 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 (`TextContent`, `TextList`, `TextListItem`). | |||
|
|
|||
| Other components are not supported as children of `Text`, and may cause styling overrides or other conflicts. For example, the `List` and `Title` components are meant for more complex use cases and should not be nested inside `Text` for simple blocks - `TextList` and `Text` with the `component="h1"` property should be used instead. Instead of `Divider`, `Text` expects to contain an `hr` which it styles as a divider. | |||
edonehoo
reviewed
Sep 18, 2023
| @@ -5,41 +5,52 @@ 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 (`TextContent`, `TextList`, `TextListItem`). | |||
There was a problem hiding this comment.
Suggested change
| 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 (`TextContent`, `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 (`TextContent`, `TextList`, `TextListItem`). |
adding onto what Michael said - just some formatting fixes
There was a problem hiding this comment.
I like wrapping the component in <>, it helps differentiate a component from a prop. Tho should we also update this?
(
TextContent,TextList,TextListItem)
to
(
<TextContent>,<TextList>,<TextListItem>).
| @@ -5,41 +5,52 @@ 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 (`TextContent`, `TextList`, `TextListItem`). | |||
|
|
|||
| Other components are not supported as children of `Text`, and may cause styling overrides or other conflicts. For example, the `List` and `Title` components are meant for more complex use cases and should not be nested inside `Text` for simple blocks - `TextList` and `Text` with the `component="h1"` property should be used instead. Instead of `Divider`, `Text` expects to contain an `hr` which it styles as a divider. | |||
There was a problem hiding this comment.
Suggested change
| Other components are not supported as children of `Text`, and may cause styling overrides or other conflicts. For example, the `List` and `Title` components are meant for more complex use cases and should not be nested inside `Text` for simple blocks - `TextList` and `Text` with the `component="h1"` property should be used instead. Instead of `Divider`, `Text` expects to contain an `hr` which it styles as a divider. | |
| 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. |
How do you feel about this rewording? Just trying to lead with the information that is most important to get across, and then follow with the examples.
Also, in the past I've style component names this way when I'm referring to the React component object, but if that's unnecessary we could change that strategy going forward.
There was a problem hiding this comment.
👍 I like the rewording better, and like the <> too. I remember struggling a bit with the phrasing of the block because I wanted to include the couple examples without repeating the bulleted list in the original issue haha.
kmcfaul
force-pushed
the
text_docs-usage
branch
from
3e4b5f0 to
c15af10
Compare
|
Your changes have been released in:
Thanks for your contribution! 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What: Closes #8413