From 534b5d3eb370792c1e5ede1e9019f8f3da923464 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Thu, 13 Jun 2024 11:56:18 +0200 Subject: [PATCH] docs(Content): update examples and description --- .../components/Content/examples/Content.md | 2 + .../examples/ContentDescriptionList.tsx | 12 +++--- .../Content/examples/ContentOrderedList.tsx | 14 +++---- .../Content/examples/ContentPlainList.tsx | 22 +++++------ .../Content/examples/ContentUnorderedList.tsx | 18 ++++----- .../Content/examples/ContentVisited.tsx | 38 ++++++++++--------- 6 files changed, 56 insertions(+), 50 deletions(-) diff --git a/packages/react-core/src/components/Content/examples/Content.md b/packages/react-core/src/components/Content/examples/Content.md index 75f85cd0a72..ca905087859 100644 --- a/packages/react-core/src/components/Content/examples/Content.md +++ b/packages/react-core/src/components/Content/examples/Content.md @@ -7,6 +7,8 @@ propComponents: ['Content'] The `` 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`, `pre`, `hr`, list components (`ul`, `ol`, `dl`) and list items (`li`, `dt`, `dd`). +If you use without a component property, it will style all its child elements. If you want to style only a single element, e.g. `h1`, use ``. + To prevent styling issues, you should use `` component's properties instead of using seperate components. For example, rather than nesting the `` and `` components within `<Content>`, you should use `<Content component="ul">` and `<Content component="h1">` or nest html elements within `<Content>`. Similarly, when you need to add a divider, rather than passing in a separate `<Divider>` component, you should use `<Content component="hr">`, which will be styled as a divider. ## Examples diff --git a/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx b/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx index c5cf3c85c67..d67fcbffbba 100644 --- a/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx @@ -3,11 +3,11 @@ import { Content } from '@patternfly/react-core'; export const ContentDescriptionList: React.FunctionComponent = () => ( <Content component="dl"> - <dt>Web</dt> - <dd>The part of the Internet that contains websites and web pages</dd> - <dt>HTML</dt> - <dd>A markup language for creating web pages</dd> - <dt>CSS</dt> - <dd>A technology to make HTML look better</dd> + <Content component="dt">Web</Content> + <Content component="dd">The part of the Internet that contains websites and web pages</Content> + <Content component="dt">HTML</Content> + <Content component="dd">A markup language for creating web pages</Content> + <Content component="dt">CSS</Content> + <Content component="dd">A technology to make HTML look better</Content> </Content> ); diff --git a/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx b/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx index ca72cdc5445..e4642593c35 100644 --- a/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx @@ -3,12 +3,12 @@ import { Content } from '@patternfly/react-core'; export const ContentOrderedList: React.FunctionComponent = () => ( <Content component="ol"> - <li>Donec blandit a lorem id convallis.</li> - <li>Cras gravida arcu at diam gravida gravida.</li> - <li>Integer in volutpat libero.</li> - <li>Donec a diam tellus.</li> - <li>Aenean nec tortor orci.</li> - <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li> - <li>Vivamus maximus ultricies pulvinar.</li> + <Content component="li">Donec blandit a lorem id convallis.</Content> + <Content component="li">Cras gravida arcu at diam gravida gravida.</Content> + <Content component="li">Integer in volutpat libero.</Content> + <Content component="li">Donec a diam tellus.</Content> + <Content component="li">Aenean nec tortor orci.</Content> + <Content component="li">Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content> + <Content component="li">Vivamus maximus ultricies pulvinar.</Content> </Content> ); diff --git a/packages/react-core/src/components/Content/examples/ContentPlainList.tsx b/packages/react-core/src/components/Content/examples/ContentPlainList.tsx index d867f4c7fd3..0fad94e2b9e 100644 --- a/packages/react-core/src/components/Content/examples/ContentPlainList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentPlainList.tsx @@ -5,20 +5,20 @@ export const ContentPlainList: React.FunctionComponent = () => ( <> <Content component="h3">Plain unordered list</Content> <Content component="ul" isPlainList> - <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> - <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> - <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li> - <li>Ut non enim metus.</li> + <Content component="li">In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content> + <Content component="li">Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content> + <Content component="li">Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</Content> + <Content component="li">Ut non enim metus.</Content> </Content> <Content component="h3">Plain ordered list</Content> <Content component="ol" isPlainList> - <li>Donec blandit a lorem id convallis.</li> - <li>Cras gravida arcu at diam gravida gravida.</li> - <li>Integer in volutpat libero.</li> - <li>Donec a diam tellus.</li> - <li>Aenean nec tortor orci.</li> - <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li> - <li>Vivamus maximus ultricies pulvinar.</li> + <Content component="li">Donec blandit a lorem id convallis.</Content> + <Content component="li">Cras gravida arcu at diam gravida gravida.</Content> + <Content component="li">Integer in volutpat libero.</Content> + <Content component="li">Donec a diam tellus.</Content> + <Content component="li">Aenean nec tortor orci.</Content> + <Content component="li">Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content> + <Content component="li">Vivamus maximus ultricies pulvinar.</Content> </Content> </> ); diff --git a/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx b/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx index 95544e7e532..c1494bb512e 100644 --- a/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx @@ -3,15 +3,15 @@ import { Content } from '@patternfly/react-core'; export const ContentUnorderedList: React.FunctionComponent = () => ( <Content component="ul"> - <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> - <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> - <li> + <Content component="li">In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content> + <Content component="li">Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content> + <Content component="li"> Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. - <ul> - <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> - <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> - </ul> - </li> - <li>Ut non enim metus.</li> + <Content component="ul"> + <Content component="li">In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content> + <Content component="li">Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content> + </Content> + </Content> + <Content component="li">Ut non enim metus.</Content> </Content> ); diff --git a/packages/react-core/src/components/Content/examples/ContentVisited.tsx b/packages/react-core/src/components/Content/examples/ContentVisited.tsx index 60df94190c0..f1ae107ae5b 100644 --- a/packages/react-core/src/components/Content/examples/ContentVisited.tsx +++ b/packages/react-core/src/components/Content/examples/ContentVisited.tsx @@ -3,24 +3,28 @@ import { Content } from '@patternfly/react-core'; export const ContentVisited: React.FunctionComponent = () => ( <> - <Content component="h5">Link with isVisitedLink prop</Content> - <p> - <Content component="a" isVisitedLink href="#"> - Click to visit link - </Content> - </p> + <Content> + <h5>Link with isVisitedLink prop</h5> + <p> + <Content component="a" isVisitedLink href="#"> + Click to visit link + </Content> + </p> + </Content> <br /> - <Content component="h5">Links wrapped in Content with isVisitedLink prop</Content> - <Content component="ul" isVisitedLink> - <li> - <a href="#1">Content link 1</a> - </li> - <li> - <a href="#2">Content link 2</a> - </li> - <li> - <a href="#3">Content link 3</a> - </li> + <Content isVisitedLink> + <h5>Links wrapped in Content with isVisitedLink prop</h5> + <ul> + <li> + <a href="#1">Content link 1</a> + </li> + <li> + <a href="#2">Content link 2</a> + </li> + <li> + <a href="#3">Content link 3</a> + </li> + </ul> </Content> </> );