diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx index 352279e84c3..fd3fee9073c 100644 --- 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" > - - - CFME version - 5.5.3.4.20102789036450 - Cloudforms Version - 4.1 - Server name - 40DemoMaster - User name - Administrator - User role - EvmRole-super_administrator - Browser version - 601.2 - Browser OS - Mac - - + +
+
CFME version
+
5.5.3.4.20102789036450
+
Cloudforms Version
+
4.1
+
Server name
+
40DemoMaster
+
User name
+
Administrator
+
User role
+
EvmRole-super_administrator
+
Browser version
+
601.2
+
Browser OS
+
Mac
+
+ ); diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx index 750e8a73685..70a6fee69a7 100644 --- a/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx +++ b/packages/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" > - +

About

Content here

- + - - - CFME version - 5.5.3.4.20102789036450 - Cloudforms version - 4.1 - Server name - 40DemoMaster - User name - Administrator - User role - EvmRole-super_administrator - Browser version - 601.2 - Browser OS - Mac - - + +
+
CFME version
+
5.5.3.4.20102789036450
+
Cloudforms version
+
4.1
+
Server name
+
40DemoMaster
+
User name
+
Administrator
+
User role
+
EvmRole-super_administrator
+
Browser version
+
601.2
+
Browser OS
+
Mac
+
+ ); diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx index a83de36d5ad..0835aa257b2 100644 --- 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" > - - - CFME version - 5.5.3.4.20102789036450 - Cloudforms version - 4.1 - Server name - 40DemoMaster - User name - Administrator - User role - EvmRole-super_administrator - Browser version - 601.2 - Browser OS - Mac - - + +
+
CFME version
+
5.5.3.4.20102789036450
+
Cloudforms version
+
4.1
+
Server name
+
40DemoMaster
+
User name
+
Administrator
+
User role
+
EvmRole-super_administrator
+
Browser version
+
601.2
+
Browser OS
+
Mac
+
+ ); diff --git a/packages/react-core/src/components/Content/Content.tsx b/packages/react-core/src/components/Content/Content.tsx new file mode 100644 index 00000000000..dcb58030156 --- /dev/null +++ b/packages/react-core/src/components/Content/Content.tsx @@ -0,0 +1,116 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Content/content'; +import { useOUIAProps, OUIAProps } from '../../helpers'; + +export enum ContentVariants { + h1 = 'h1', + h2 = 'h2', + h3 = 'h3', + h4 = 'h4', + h5 = 'h5', + h6 = 'h6', + p = 'p', + a = 'a', + small = 'small', + blockquote = 'blockquote', + pre = 'pre', + hr = 'hr', + ul = 'ul', + ol = 'ol', + dl = 'dl', + li = 'li', + dt = 'dt', + dd = 'dd' +} + +export interface ContentProps extends React.HTMLProps, OUIAProps { + /** The content component. If none provided, it will be a 'div' and styling will be applied to all its child components. */ + component?: + | 'h1' + | 'h2' + | 'h3' + | 'h4' + | 'h5' + | 'h6' + | 'p' + | 'a' + | 'small' + | 'blockquote' + | 'pre' + | 'hr' + | 'ul' + | 'ol' + | 'dl' + | 'li' + | 'dt' + | 'dd'; + /** Children rendered within the Content. */ + children?: React.ReactNode; + /** Additional classes added to the Content. */ + className?: string; + /** Modifies the list (ul, ol and dl components) to have plain styling. */ + isPlainList?: boolean; + /** Flag to indicate the link (or all links within the content) has visited styles applied if the browser determines the link has been visited. */ + isVisitedLink?: boolean; + /** Value to overwrite the randomly generated data-ouia-component-id. */ + ouiaId?: number | string; + /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ + ouiaSafe?: boolean; +} + +const componentStyles = { + div: styles.content, + h1: styles.contentH1, + h2: styles.contentH2, + h3: styles.contentH3, + h4: styles.contentH4, + h5: styles.contentH5, + h6: styles.contentH6, + p: styles.contentP, + a: styles.contentA, + small: styles.contentSmall, + blockquote: styles.contentBlockquote, + pre: styles.contentPre, + hr: styles.contentHr, + ul: styles.contentUl, + ol: styles.contentOl, + dl: styles.contentDl, + li: styles.contentLi, + dt: styles.contentDt, + dd: styles.contentDd +}; + +export const Content: React.FunctionComponent = ({ + children, + className = '', + component, + isPlainList = false, + isVisitedLink = false, + ouiaId, + ouiaSafe = true, + ...props +}: ContentProps) => { + const wrappingComponent = component ?? 'div'; + const Component: any = wrappingComponent; + const ouiaProps = useOUIAProps(Content.displayName, ouiaId, ouiaSafe); + + const isList = ['ul', 'ol', 'dl'].includes(wrappingComponent); + + return ( + + {children} + + ); +}; +Content.displayName = 'Content'; diff --git a/packages/react-core/src/components/Content/__tests__/Content.test.tsx b/packages/react-core/src/components/Content/__tests__/Content.test.tsx new file mode 100644 index 00000000000..63b922e9c3a --- /dev/null +++ b/packages/react-core/src/components/Content/__tests__/Content.test.tsx @@ -0,0 +1,270 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import { Content } from '../Content'; +import styles from '@patternfly/react-styles/css/components/Content/content'; + +test('Renders without children', () => { + render( +
+ +
+ ); + expect(screen.getByTestId('test-content').firstChild).toBeVisible(); +}); + +test('Renders children', () => { + render(Test); + expect(screen.getByText('Test')).toBeVisible(); +}); + +test('Renders with custom class name when className prop is provided', () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass('custom-class'); +}); + +test('Renders as "div" element by default', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DIV'); +}); + +test('Renders as "h1" element when component="h1"', () => { + render(Test); + expect(screen.getByRole('heading', { level: 1 })).toBeVisible(); +}); + +test('Renders as "h2" element when component="h2"', () => { + render(Test); + expect(screen.getByRole('heading', { level: 2 })).toBeVisible(); +}); + +test('Renders as "h3" element when component="h3"', () => { + render(Test); + expect(screen.getByRole('heading', { level: 3 })).toBeVisible(); +}); + +test('Renders as "h4" element when component="h4"', () => { + render(Test); + expect(screen.getByRole('heading', { level: 4 })).toBeVisible(); +}); + +test('Renders as "h5" element when component="h5"', () => { + render(Test); + expect(screen.getByRole('heading', { level: 5 })).toBeVisible(); +}); + +test('Renders as "h6" element when component="h6"', () => { + render(Test); + expect(screen.getByRole('heading', { level: 6 })).toBeVisible(); +}); + +test('Renders as "a" element when component="a"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'A'); +}); + +test('Renders as "blockquote" element when component="blockquote"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'BLOCKQUOTE'); +}); + +test('Renders as "pre" element when component="pre"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'PRE'); +}); + +test('Renders as "hr" element when component="hr"', () => { + render(); + expect(screen.getByRole('separator')).toHaveProperty('nodeName', 'HR'); +}); + +test('Renders as "ul" element component="ul"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'UL'); +}); + +test('Renders as "ol" element when component="ol"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'OL'); +}); + +test('Renders as "dl" element when component="dl"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL'); +}); + +test('Renders as "li" element when component="li"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'LI'); +}); + +test('Renders as "dt" element when component="dt"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DT'); +}); + +test('Renders as "dd" element when component="dd"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DD'); +}); + +test(`Renders with class name ${styles.contentH1} when component="h1"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH1); +}); + +test(`Renders with class name ${styles.contentH2} when component="h2"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH2); +}); + +test(`Renders with class name ${styles.contentH3} when component="h3"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH3); +}); + +test(`Renders with class name ${styles.contentH4} when component="h4"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH4); +}); + +test(`Renders with class name ${styles.contentH5} when component="h5"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH5); +}); + +test(`Renders with class name ${styles.contentH6} when component="h6"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH6); +}); + +test(`Renders with class name ${styles.contentP} when component="p"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentP); +}); + +test(`Renders with class name ${styles.contentA} when component="a"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentA); +}); + +test(`Renders with class name ${styles.contentSmall} when component="small"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentSmall); +}); + +test(`Renders with class name ${styles.contentBlockquote} when component="blockquote"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentBlockquote); +}); + +test(`Renders with class name ${styles.contentPre} when component="pre"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentPre); +}); + +test(`Renders with class name ${styles.contentHr} when component="hr"`, () => { + render(); + expect(screen.getByRole('separator')).toHaveClass(styles.contentHr); +}); + +test(`Renders with class name ${styles.contentUl} when component="ul"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentUl); +}); + +test(`Renders with class name ${styles.contentOl} when component="ol"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentOl); +}); + +test(`Renders with class name ${styles.contentDl} when component="dl"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentDl); +}); + +test(`Renders with class name ${styles.contentLi} when component="li"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentLi); +}); + +test(`Renders with class name ${styles.contentDt} when component="dt"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentDt); +}); + +test(`Renders with class name ${styles.contentDd} when component="dd"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentDd); +}); + +test(`Renders with class name ${styles.content} when no component prop is provided`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.content); +}); + +test(`Renders without class name ${styles.content} when component is provided`, () => { + render(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.content); +}); + +test(`Renders with class name pf-m-plain when isPlainList=true and component is 'ul', 'ol' or 'dl'`, () => { + render( + <> + + Test1 + + + Test2 + + + Test3 + + + ); + expect(screen.getByText('Test1')).toHaveClass('pf-m-plain'); + expect(screen.getByText('Test2')).toHaveClass('pf-m-plain'); + expect(screen.getByText('Test3')).toHaveClass('pf-m-plain'); +}); + +test(`Renders without class name pf-m-plain by default`, () => { + render(Test); + expect(screen.getByText('Test')).not.toHaveClass('pf-m-plain'); +}); + +test(`Renders without class name pf-m-plain when isPlainList=true, but component is not 'ul', 'ol' or 'dl'`, () => { + render( + + Test + + ); + expect(screen.getByText('Test')).not.toHaveClass('pf-m-plain'); +}); + +test('Renders without class name pf-m-visited by default', () => { + render(Test); + expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited'); +}); + +test('Renders with class name pf-m-visited when isVisitedLink=true', () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass('pf-m-visited'); +}); + +test('Renders with class name pf-m-visited when isVisitedLink=true and component="a"', () => { + render( + + Test + + ); + expect(screen.getByText('Test')).toHaveClass('pf-m-visited'); +}); + +test('Renders with inherited element props spread to the component', () => { + render(Test); + expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); +}); + +test('Matches the snapshot', () => { + const { asFragment } = render(Test); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/Content.test.tsx.snap similarity index 72% rename from packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap rename to packages/react-core/src/components/Content/__tests__/__snapshots__/Content.test.tsx.snap index 3eb559d2dd2..7abe54a6a73 100644 --- a/packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap +++ b/packages/react-core/src/components/Content/__tests__/__snapshots__/Content.test.tsx.snap @@ -2,14 +2,14 @@ exports[`Matches the snapshot 1`] = ` -

Test -

+ `; diff --git a/packages/react-core/src/components/Content/examples/Content.md b/packages/react-core/src/components/Content/examples/Content.md new file mode 100644 index 00000000000..ba8d7410f48 --- /dev/null +++ b/packages/react-core/src/components/Content/examples/Content.md @@ -0,0 +1,62 @@ +--- +id: Content +section: components +cssPrefix: pf-v5-c-content +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 + +### Content as a styling wrapper + +```ts file="./ContentWrapper.tsx" + +``` + +### Headings + +```ts file="./ContentHeadings.tsx" + +``` + +### Body + +```ts file="./ContentBody.tsx" + +``` + +### Unordered list + +```ts file="./ContentUnorderedList.tsx" + +``` + +### Ordered list + +```ts file="./ContentOrderedList.tsx" + +``` + +### Plain list + +```ts file="./ContentPlainList.tsx" + +``` + +### Description list + +```ts file="./ContentDescriptionList.tsx" + +``` + +### Link and visited link + +```ts file="./ContentVisited.tsx" + +``` diff --git a/packages/react-core/src/components/Text/examples/TextBody.tsx b/packages/react-core/src/components/Content/examples/ContentBody.tsx similarity index 58% rename from packages/react-core/src/components/Text/examples/TextBody.tsx rename to packages/react-core/src/components/Content/examples/ContentBody.tsx index 88fa3a9b4da..c9c78f87bef 100644 --- a/packages/react-core/src/components/Text/examples/TextBody.tsx +++ b/packages/react-core/src/components/Content/examples/ContentBody.tsx @@ -1,24 +1,26 @@ import React from 'react'; -import { Text, TextVariants } from '@patternfly/react-core'; +import { Content } from '@patternfly/react-core'; -export const TextBody: React.FunctionComponent = () => ( +export const ContentBody: React.FunctionComponent = () => ( <> - <Text component={TextVariants.p}> + <Content component="p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well! - </Text> - <Text component={TextVariants.p}> + </Content> + <Content component="p"> Quisque ante lacus, malesuada ac auctor vitae, congue{' '} - <Text component={TextVariants.a} href="#"> + <Content component="a" href="#"> non ante - </Text> + </Content> . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus. - </Text> - <Text component={TextVariants.blockquote}> + </Content> + <Content component="blockquote"> Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis. - </Text> - <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text> + </Content> + <Content component="small"> + Sometimes you need small text to display things like date created - but better use Timestamp component for that. + </Content> </> ); diff --git a/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx b/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx new file mode 100644 index 00000000000..d67fcbffbba --- /dev/null +++ b/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Content } from '@patternfly/react-core'; + +export const ContentDescriptionList: React.FunctionComponent = () => ( + <Content component="dl"> + <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/ContentHeadings.tsx b/packages/react-core/src/components/Content/examples/ContentHeadings.tsx new file mode 100644 index 00000000000..2973eadd6e6 --- /dev/null +++ b/packages/react-core/src/components/Content/examples/ContentHeadings.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Content } from '@patternfly/react-core'; + +export const ContentHeadings: React.FunctionComponent = () => ( + <> + <Content component="h1">Hello World</Content> + <Content component="h2">Second level</Content> + <Content component="h3">Third level</Content> + <Content component="h4">Fourth level</Content> + <Content component="h5">Fifth level</Content> + <Content component="h6">Sixth level</Content> + </> +); diff --git a/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx b/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx new file mode 100644 index 00000000000..e4642593c35 --- /dev/null +++ b/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Content } from '@patternfly/react-core'; + +export const ContentOrderedList: React.FunctionComponent = () => ( + <Content component="ol"> + <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 new file mode 100644 index 00000000000..0fad94e2b9e --- /dev/null +++ b/packages/react-core/src/components/Content/examples/ContentPlainList.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Content } from '@patternfly/react-core'; + +export const ContentPlainList: React.FunctionComponent = () => ( + <> + <Content component="h3">Plain unordered list</Content> + <Content component="ul" isPlainList> + <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> + <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 new file mode 100644 index 00000000000..c1494bb512e --- /dev/null +++ b/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Content } from '@patternfly/react-core'; + +export const ContentUnorderedList: React.FunctionComponent = () => ( + <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 component="li"> + Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. + <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 new file mode 100644 index 00000000000..f1ae107ae5b --- /dev/null +++ b/packages/react-core/src/components/Content/examples/ContentVisited.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Content } from '@patternfly/react-core'; + +export const ContentVisited: React.FunctionComponent = () => ( + <> + <Content> + <h5>Link with isVisitedLink prop</h5> + <p> + <Content component="a" isVisitedLink href="#"> + Click to visit link + </Content> + </p> + </Content> + <br /> + <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> + </> +); diff --git a/packages/react-core/src/components/Content/examples/ContentWrapper.tsx b/packages/react-core/src/components/Content/examples/ContentWrapper.tsx new file mode 100644 index 00000000000..8d8ed1728cc --- /dev/null +++ b/packages/react-core/src/components/Content/examples/ContentWrapper.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Content } from '@patternfly/react-core'; + +export const ContentWrapper: React.FunctionComponent = () => ( + <Content> + <Content component="p"> + Content with a component of type "p" still renders the same when wrapped with a parent Content. + </Content> + <p>If located within a wrapping Content, html elements are styled as well!</p> + <h6>This h6 html element is also styled, because it is inside Content.</h6> + <blockquote>And this blockquote too!</blockquote> + </Content> +); diff --git a/packages/react-core/src/components/Content/index.ts b/packages/react-core/src/components/Content/index.ts new file mode 100644 index 00000000000..b39182a1a2f --- /dev/null +++ b/packages/react-core/src/components/Content/index.ts @@ -0,0 +1 @@ +export * from './Content'; diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx index 361c85aabb1..69d508fa043 100644 --- a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { + Content, DataList, DataListItem, DataListCell, @@ -9,9 +10,6 @@ import { DataListContent, DataListItemCells, DataListItemRow, - Text, - TextVariants, - TextContent, Dropdown, DropdownList, DropdownItem, @@ -44,9 +42,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { return ( <> <div key="example-1"> - <TextContent> - <Text component={TextVariants.h4}>Default fitting - example 1</Text> - </TextContent> + <Content component="h4">Default fitting - example 1</Content> <DataList aria-label="Width modifier data list example 1"> <DataListItem aria-labelledby="width-ex1-item1"> <DataListItemRow> @@ -71,9 +67,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { </DataList> </div> <div key="example-2"> - <TextContent> - <Text component={TextVariants.h4}>Flex modifiers - example 2</Text> - </TextContent> + <Content component="h4">Flex modifiers - example 2</Content> <DataList aria-label="Width modifier data list example 2"> <DataListItem aria-labelledby="width-ex2-item1"> <DataListItemRow> @@ -139,9 +133,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { </DataList> </div> <div key="example-3"> - <TextContent> - <Text component={TextVariants.h4}>Flex modifiers - example 3</Text> - </TextContent> + <Content component="h4">Flex modifiers - example 3</Content> <DataList aria-label="Width modifier data list example 3"> <DataListItem aria-labelledby="width-ex3-item1" isExpanded={show}> <DataListItemRow> diff --git a/packages/react-core/src/components/Icon/examples/IconInline.tsx b/packages/react-core/src/components/Icon/examples/IconInline.tsx index a6311b7ad97..19b3a273b39 100644 --- a/packages/react-core/src/components/Icon/examples/IconInline.tsx +++ b/packages/react-core/src/components/Icon/examples/IconInline.tsx @@ -1,26 +1,24 @@ import React from 'react'; -import { Icon, Text, TextContent } from '@patternfly/react-core'; +import { Icon, Content } from '@patternfly/react-core'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; export const IconInline: React.FunctionComponent = () => ( <React.Fragment> - <TextContent> - <Text component="h1"> + <Content> + <h1> Heading <Icon isInline> <PlusCircleIcon /> </Icon> - </Text> - <Text component="p"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus. - </Text> - <Text component="h2"> + </h1> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.</p> + <h2> Second level <Icon isInline> <PlusCircleIcon /> </Icon> - </Text> - <Text component="p"> + </h2> + <p> <Icon isInline> <PlusCircleIcon /> </Icon> @@ -33,7 +31,7 @@ export const IconInline: React.FunctionComponent = () => ( </strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. - </Text> + </p> <small> Sometimes you need small text <Icon isInline> @@ -57,6 +55,6 @@ export const IconInline: React.FunctionComponent = () => ( <PlusCircleIcon /> </Icon> extra large - </TextContent> + </Content> </React.Fragment> ); diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx index ba7783e954e..2c0e95a35e6 100644 --- a/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx @@ -8,7 +8,7 @@ import { ModalVariant, Title, TitleSizes, - TextContent, + Content, Flex } from '@patternfly/react-core'; @@ -34,12 +34,12 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => { aria-describedby="modal-custom-header-description" > <ModalHeader> - <TextContent> + <Content> <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}> Custom header modal

Add custom content to the header by not passing the titles prop the modal box header component.

- + diff --git a/packages/react-core/src/components/Slider/examples/SliderActions.tsx b/packages/react-core/src/components/Slider/examples/SliderActions.tsx index 58a3a58c9ce..a7abeef91a4 100644 --- a/packages/react-core/src/components/Slider/examples/SliderActions.tsx +++ b/packages/react-core/src/components/Slider/examples/SliderActions.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Slider, SliderOnChangeEvent, Button, Text, TextVariants } from '@patternfly/react-core'; +import { Slider, SliderOnChangeEvent, Button, Content } from '@patternfly/react-core'; import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon'; @@ -61,7 +61,7 @@ export const SliderActions: React.FunctionComponent = () => { return ( <> - Slider value is: {value1} + Slider value is: {value1} { const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false); @@ -15,14 +15,14 @@ export const SliderContinuous: React.FunctionComponent = () => { onChange={(_event: React.FormEvent, checked: boolean) => setHasTooltipOverThumb(checked)} style={{ marginBottom: 20 }} /> - Slider Value is: {value} + Slider Value is: {value} setValue(value)} />
- Slider value is: {valueCustom} + Slider value is: {valueCustom} setValueCustom(value)} value={valueCustom} diff --git a/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx index 31b36872194..8656b95f6b9 100644 --- a/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx +++ b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core'; +import { Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core'; export const SliderDisabled: React.FunctionComponent = () => { const [value, setValue] = React.useState(50); @@ -22,7 +22,7 @@ export const SliderDisabled: React.FunctionComponent = () => { return ( <> - Slider value is: {displayValue()} + Slider value is: {displayValue()} { const initialValues = { @@ -50,15 +50,15 @@ export const SliderDiscrete: React.FunctionComponent = () => { return ( <> - Slider value is: {numValue.value1} + Slider value is: {numValue.value1} handleChange(value, 'value1')} customSteps={steps} />
- Slider value is: {numValue.value2} - (min = 0, max = 200, step = 50) + Slider value is: {numValue.value2} + (min = 0, max = 200, step = 50) handleChange(value, 'value2')} @@ -67,8 +67,8 @@ export const SliderDiscrete: React.FunctionComponent = () => { showTicks />
- Slider value is: {Math.floor(numValue.value3)} - (min = -25, max = 75, step = 10, boundaries not shown) + Slider value is: {Math.floor(numValue.value3)} + (min = -25, max = 75, step = 10, boundaries not shown) handleChange(value, 'value3')} @@ -79,8 +79,8 @@ export const SliderDiscrete: React.FunctionComponent = () => { showBoundaries={false} />
- Slider value is: {Math.floor(numValue.value4)} - (min = -25, max = 75, step = 10, boundaries shown) + Slider value is: {Math.floor(numValue.value4)} + (min = -25, max = 75, step = 10, boundaries shown) handleChange(value, 'value4')} @@ -90,8 +90,8 @@ export const SliderDiscrete: React.FunctionComponent = () => { showTicks />
- Slider value is: {Math.floor(numValue.value5)} - (min = -25, max = 75, step = 10, boundaries shown, ticks not shown) + Slider value is: {Math.floor(numValue.value5)} + (min = -25, max = 75, step = 10, boundaries shown, ticks not shown) handleChange(value, 'value5')} @@ -100,8 +100,8 @@ export const SliderDiscrete: React.FunctionComponent = () => { step={10} />
- Slider value is: {Math.floor(numValue.value6)} - (max = 5, custom steps) + Slider value is: {Math.floor(numValue.value6)} + (max = 5, custom steps) { onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value6')} />
- Slider value is: {Math.floor(numValue.value7)} - (min = 12, max = 86, custom steps with non linear data) + Slider value is: {Math.floor(numValue.value7)} + (min = 12, max = 86, custom steps with non linear data) ( - - + +

Heading - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus. - - +

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.

+

Second level - - +

+

Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,{' '} sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. - +

Sometimes you need small text - + ); diff --git a/packages/react-core/src/components/Text/Text.tsx b/packages/react-core/src/components/Text/Text.tsx deleted file mode 100644 index 2ad27df6823..00000000000 --- a/packages/react-core/src/components/Text/Text.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; -import { css } from '@patternfly/react-styles'; -import styles from '@patternfly/react-styles/css/components/Content/content'; -import { useOUIAProps, OUIAProps } from '../../helpers'; - -export enum TextVariants { - h1 = 'h1', - h2 = 'h2', - h3 = 'h3', - h4 = 'h4', - h5 = 'h5', - h6 = 'h6', - p = 'p', - a = 'a', - small = 'small', - blockquote = 'blockquote', - pre = 'pre' -} - -export interface TextProps extends React.HTMLProps, OUIAProps { - /** The text component */ - component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'a' | 'small' | 'blockquote' | 'pre'; - /** Content rendered within the Text */ - children?: React.ReactNode; - /** Additional classes added to the Text */ - className?: string; - /** Flag to indicate the link has visited styles applied if the browser determines the link has been visited */ - isVisitedLink?: boolean; - /** Value to overwrite the randomly generated data-ouia-component-id.*/ - ouiaId?: number | string; - /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ - ouiaSafe?: boolean; -} - -const componentStyles = { - h1: styles.contentH1, - h2: styles.contentH2, - h3: styles.contentH3, - h4: styles.contentH4, - h5: styles.contentH5, - h6: styles.contentH6, - p: styles.contentP, - a: styles.contentA, - small: styles.contentSmall, - blockquote: styles.contentBlockquote, - pre: styles.contentPre -}; - -export const Text: React.FunctionComponent = ({ - children = null, - className = '', - component = TextVariants.p, - isVisitedLink = false, - ouiaId, - ouiaSafe = true, - ...props -}: TextProps) => { - const Component: any = component; - const ouiaProps = useOUIAProps(Text.displayName, ouiaId, ouiaSafe); - - return ( - - {children} - - ); -}; -Text.displayName = 'Text'; diff --git a/packages/react-core/src/components/Text/TextContent.tsx b/packages/react-core/src/components/Text/TextContent.tsx deleted file mode 100644 index b7df9cfa2f6..00000000000 --- a/packages/react-core/src/components/Text/TextContent.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import styles from '@patternfly/react-styles/css/components/Content/content'; -import { css } from '@patternfly/react-styles'; - -export interface TextContentProps extends React.HTMLProps { - /** Content rendered within the TextContent */ - children?: React.ReactNode; - /** Additional classes added to the TextContent */ - className?: string; - /** Flag to indicate the all links in a the content block have visited styles applied if the browser determines the link has been visited */ - isVisited?: boolean; -} - -export const TextContent: React.FunctionComponent = ({ - children, - className = '', - isVisited = false, - ...props -}: TextContentProps) => ( -
- {children} -
-); - -TextContent.displayName = 'TextContent'; diff --git a/packages/react-core/src/components/Text/TextList.tsx b/packages/react-core/src/components/Text/TextList.tsx deleted file mode 100644 index ebceb43dee7..00000000000 --- a/packages/react-core/src/components/Text/TextList.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; -import styles from '@patternfly/react-styles/css/components/Content/content'; -import { css } from '@patternfly/react-styles'; - -export enum TextListVariants { - ul = 'ul', - ol = 'ol', - dl = 'dl' -} - -const componentStyles = { - ul: styles.contentUl, - ol: styles.contentOl, - dl: styles.contentDl -}; - -export interface TextListProps extends React.HTMLProps { - /** Content rendered within the TextList */ - children?: React.ReactNode; - /** Additional classes added to the TextList */ - className?: string; - /** The text list component */ - component?: 'ul' | 'ol' | 'dl'; - /** Modifies the list to include plain styling */ - isPlain?: boolean; -} - -export const TextList: React.FunctionComponent = ({ - children = null, - className = '', - component = TextListVariants.ul, - isPlain = false, - ...props -}: TextListProps) => { - const Component: any = component; - - return ( - - {children} - - ); -}; -TextList.displayName = 'TextList'; diff --git a/packages/react-core/src/components/Text/TextListItem.tsx b/packages/react-core/src/components/Text/TextListItem.tsx deleted file mode 100644 index 8aedef965fb..00000000000 --- a/packages/react-core/src/components/Text/TextListItem.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; -import styles from '@patternfly/react-styles/css/components/Content/content'; -import { css } from '@patternfly/react-styles'; - -export enum TextListItemVariants { - li = 'li', - dt = 'dt', - dd = 'dd' -} - -const componentStyles = { - li: styles.contentLi, - dt: styles.contentDt, - dd: styles.contentDd -}; - -export interface TextListItemProps extends React.HTMLProps { - /** Content rendered within the TextListItem */ - children?: React.ReactNode; - /** Additional classes added to the TextListItem */ - className?: string; - /** The text list item component */ - component?: 'li' | 'dt' | 'dd'; -} - -export const TextListItem: React.FunctionComponent = ({ - children = null, - className = '', - component = TextListItemVariants.li, - ...props -}: TextListItemProps) => { - const Component: any = component; - - return ( - - {children} - - ); -}; -TextListItem.displayName = 'TextListItem'; diff --git a/packages/react-core/src/components/Text/__tests__/Generated/TextContent.test.tsx b/packages/react-core/src/components/Text/__tests__/Generated/TextContent.test.tsx deleted file mode 100644 index c605ea9c28d..00000000000 --- a/packages/react-core/src/components/Text/__tests__/Generated/TextContent.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { TextContent } from '../../TextContent'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('TextContent should match snapshot (auto-generated)', () => { - const { asFragment } = render(ReactNode} className={"''"} />); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Text/__tests__/Generated/TextList.test.tsx b/packages/react-core/src/components/Text/__tests__/Generated/TextList.test.tsx deleted file mode 100644 index 8ca49dccde7..00000000000 --- a/packages/react-core/src/components/Text/__tests__/Generated/TextList.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { TextList } from '../../TextList'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('TextList should match snapshot (auto-generated)', () => { - const { asFragment } = render(ReactNode} className={"''"} component={'ul'} />); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Text/__tests__/Generated/TextListItem.test.tsx b/packages/react-core/src/components/Text/__tests__/Generated/TextListItem.test.tsx deleted file mode 100644 index 04d86d2bc6c..00000000000 --- a/packages/react-core/src/components/Text/__tests__/Generated/TextListItem.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * This test was generated - */ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { TextListItem } from '../../TextListItem'; -// any missing imports can usually be resolved by adding them here -import {} from '../..'; - -it('TextListItem should match snapshot (auto-generated)', () => { - const { asFragment } = render(ReactNode} className={"''"} component={'li'} />); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap deleted file mode 100644 index 2f445b62f7b..00000000000 --- a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TextContent should match snapshot (auto-generated) 1`] = ` - -
- ReactNode -
- -`; diff --git a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap deleted file mode 100644 index e55fc4c9f8b..00000000000 --- a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TextList should match snapshot (auto-generated) 1`] = ` - -
    - ReactNode -
- -`; diff --git a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap deleted file mode 100644 index 6fcd0810bad..00000000000 --- a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TextListItem should match snapshot (auto-generated) 1`] = ` - -
  • - ReactNode -
    • -     -`; diff --git a/packages/react-core/src/components/Text/__tests__/Text.test.tsx b/packages/react-core/src/components/Text/__tests__/Text.test.tsx deleted file mode 100644 index 979dc857f66..00000000000 --- a/packages/react-core/src/components/Text/__tests__/Text.test.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import * as React from 'react'; -import { render, screen } from '@testing-library/react'; -import { Text } from '../Text'; - -test('Renders without children', () => { - render( -
    - -
    - ); - expect(screen.getByTestId('test-content').firstChild).toBeVisible(); -}); - -test('Renders children', () => { - render(Test); - expect(screen.getByText('Test')).toBeVisible(); -}); - -test('Renders with custom class name when className prop is provided', () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass('custom-class'); -}); - -test('Renders as "p" element by default', () => { - render(Test); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'P'); -}); - -test('Renders as "h1" element when component="h1"', () => { - render(Test); - expect(screen.getByRole('heading', { level: 1 })).toBeVisible(); -}); - -test('Renders as "h2" element when component="h2"', () => { - render(Test); - expect(screen.getByRole('heading', { level: 2 })).toBeVisible(); -}); - -test('Renders as "h3" element when component="h3"', () => { - render(Test); - expect(screen.getByRole('heading', { level: 3 })).toBeVisible(); -}); - -test('Renders as "h4" element when component="h4"', () => { - render(Test); - expect(screen.getByRole('heading', { level: 4 })).toBeVisible(); -}); - -test('Renders as "h5" element when component="h5"', () => { - render(Test); - expect(screen.getByRole('heading', { level: 5 })).toBeVisible(); -}); - -test('Renders as "h6" element when component="h6"', () => { - render(Test); - expect(screen.getByRole('heading', { level: 6 })).toBeVisible(); -}); - -test('Renders as "a" element when component="a"', () => { - render(Test); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'A'); -}); - -test('Renders as "blockquote" element when component="blockquote"', () => { - render(Test); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'BLOCKQUOTE'); -}); - -test('Renders as "pre" element when component="pre"', () => { - render(Test); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'PRE'); -}); - -test('Renders without class name pf-m-visited by default', () => { - render(Test); - expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited'); -}); - -test('Renders with class name pf-m-visited when isVisited=true and component="a"', () => { - render( - - Test - - ); - expect(screen.getByText('Test')).toHaveClass('pf-m-visited'); -}); - -test('Renders with inherited element props spread to the component', () => { - render(Test); - expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); -}); - -test('Matches the snapshot', () => { - const { asFragment } = render(Test); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Text/__tests__/TextContent.test.tsx b/packages/react-core/src/components/Text/__tests__/TextContent.test.tsx deleted file mode 100644 index 254b2d7bcd0..00000000000 --- a/packages/react-core/src/components/Text/__tests__/TextContent.test.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import { render, screen } from '@testing-library/react'; -import { TextContent } from '../TextContent'; -import styles from '@patternfly/react-styles/css/components/Content/content'; - -test('Renders without children', () => { - render( -
    - -
    - ); - expect(screen.getByTestId('test-content').firstChild).toBeVisible(); -}); - -test('Renders children', () => { - render(Test); - expect(screen.getByText('Test')).toBeVisible(); -}); - -test(`Renders with class name ${styles.content}`, () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass(styles.content, { exact: true }); -}); - -test('Renders with custom class name when className prop is provided', () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass('custom-class'); -}); - -test('Renders without class name pf-m-visited by default', () => { - render(Test); - expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited'); -}); - -test('Renders with class name pf-m-visited when isVisited=true', () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass('pf-m-visited'); -}); - -test('Renders with inherited element props spread to the component', () => { - render(Test); - expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); -}); - -test('Matches the snapshot', () => { - const { asFragment } = render(Test); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Text/__tests__/TextList.test.tsx b/packages/react-core/src/components/Text/__tests__/TextList.test.tsx deleted file mode 100644 index 76745221c5c..00000000000 --- a/packages/react-core/src/components/Text/__tests__/TextList.test.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from 'react'; -import { render, screen } from '@testing-library/react'; -import { TextList } from '../TextList'; - -test('Renders without children', () => { - render( -
    - -
    - ); - expect(screen.getByTestId('test-list').firstChild).toBeVisible(); -}); - -test('Renders children', () => { - render(Test); - expect(screen.getByText('Test')).toBeVisible(); -}); - -test('Renders with custom class name when className prop is provided', () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass('custom-class'); -}); - -test('Renders as "ul" element by default', () => { - render(Test); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'UL'); -}); - -test('Renders as "ol" element when component="ol"', () => { - render(Test); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'OL'); -}); - -test('Renders as "dl" element when component="dl"', () => { - render(Test); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL'); -}); - -test('Renders with plain modifier class when isPlain is set to true', () => { - render(Test); - expect(screen.getByRole('list')).toHaveClass('pf-m-plain'); -}); - -test('Renders with inherited element props spread to the component', () => { - render(Test); - expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); -}); - -test('Matches the snapshot', () => { - const { asFragment } = render(Test); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx b/packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx deleted file mode 100644 index d966b8fda3f..00000000000 --- a/packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react'; -import { render, screen } from '@testing-library/react'; -import { TextListItem } from '../TextListItem'; - -test('Renders without children', () => { - render( -
    - -
    - ); - expect(screen.getByTestId('test-list-item').firstChild).toBeVisible(); -}); - -test('Renders children', () => { - render(Test); - expect(screen.getByText('Test')).toBeVisible(); -}); - -test('Renders with custom class name when className prop is provided', () => { - render(Test); - expect(screen.getByText('Test')).toHaveClass('custom-class'); -}); - -test('Renders as "li" element by default', () => { - render(Test); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'LI'); -}); - -test('Renders as "dt" element when component="dt"', () => { - render(Test); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DT'); -}); - -test('Renders as "dd" element when component="dd"', () => { - render(Test); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DD'); -}); - -test('Renders with inherited element props spread to the component', () => { - render(Test); - expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); -}); - -test('Matches the snapshot', () => { - const { asFragment } = render(Test); - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextContent.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/__snapshots__/TextContent.test.tsx.snap deleted file mode 100644 index 6e89543c768..00000000000 --- a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextContent.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Matches the snapshot 1`] = ` - -
    - Test -
    -     -`; diff --git a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextList.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/__snapshots__/TextList.test.tsx.snap deleted file mode 100644 index 08ef0add850..00000000000 --- a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextList.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Matches the snapshot 1`] = ` - -
      - Test -
    -     -`; diff --git a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap deleted file mode 100644 index 514daf612d4..00000000000 --- a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Matches the snapshot 1`] = ` - -
  • - Test -
    • -     -`; diff --git a/packages/react-core/src/components/Text/examples/Text.md b/packages/react-core/src/components/Text/examples/Text.md index 61566a36d43..ac3264e1353 100644 --- a/packages/react-core/src/components/Text/examples/Text.md +++ b/packages/react-core/src/components/Text/examples/Text.md @@ -2,63 +2,6 @@ id: Text section: components cssPrefix: pf-v5-c-content -propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem'] --- -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`, and `pre`), as well as the text component suite ``, and ``. `TextContent` may be used as a container for the text components, but nesting them inside `` is not required. - -You cannot nest other components within ``, and doing so can cause styling overrides or other conflicts. Instead, you can use the `` component's properties to achieve the same results. - -For example, rather than nesting the `` and `` 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. - -## Examples - -### Headings - -```ts file="./TextHeadings.tsx" - -``` - -### Body - -```ts file="./TextBody.tsx" - -``` - -### Unordered list - -```ts file="./TextUnorderedList.tsx" - -``` - -### Ordered list - -```ts file="./TextOrderedList.tsx" - -``` - -### Plain list - -```ts file="./TextPlainList.tsx" - -``` - -### Description list - -```ts file="./TextDescriptionList.tsx" - -``` - -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. - -### Wrapped in TextContent - -```ts file="./TextContentWrapped.tsx" - -``` - -### Link and visited link - -```ts file="./TextVisited.tsx" - -``` +The `<Text>`, `<TextContent>`, `<TextList>` and `<TextListItem>` has all been replaced with a [Content component](/components/content). diff --git a/packages/react-core/src/components/Text/examples/TextContentWrapped.tsx b/packages/react-core/src/components/Text/examples/TextContentWrapped.tsx deleted file mode 100644 index 6b89c1df7c0..00000000000 --- a/packages/react-core/src/components/Text/examples/TextContentWrapped.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { TextContent, Text, TextVariants } from '@patternfly/react-core'; - -export const TextContentWrapped: React.FunctionComponent = () => ( - <TextContent> - <Text component={TextVariants.p}> - Text with a component of type "p" still renders the same when wrapped with a TextContent. - </Text> - <p>If located within a wrapping TextContent, html elements are styled as well!</p> - </TextContent> -); diff --git a/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx b/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx deleted file mode 100644 index 3ad396c0169..00000000000 --- a/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core'; - -export const TextDescriptionList: React.FunctionComponent = () => ( - <TextList component={TextListVariants.dl}> - <TextListItem component={TextListItemVariants.dt}>Web</TextListItem> - <TextListItem component={TextListItemVariants.dd}> - The part of the Internet that contains websites and web pages - </TextListItem> - <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem> - <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem> - <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem> - <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem> - </TextList> -); diff --git a/packages/react-core/src/components/Text/examples/TextHeadings.tsx b/packages/react-core/src/components/Text/examples/TextHeadings.tsx deleted file mode 100644 index a9842a9caf6..00000000000 --- a/packages/react-core/src/components/Text/examples/TextHeadings.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Text, TextVariants } from '@patternfly/react-core'; - -export const TextHeadings: React.FunctionComponent = () => ( - <> - <Text component={TextVariants.h1}>Hello World</Text> - <Text component={TextVariants.h2}>Second level</Text> - <Text component={TextVariants.h3}>Third level</Text> - <Text component={TextVariants.h4}>Fourth level</Text> - <Text component={TextVariants.h5}>Fifth level</Text> - <Text component={TextVariants.h6}>Sixth level</Text> - </> -); diff --git a/packages/react-core/src/components/Text/examples/TextOrderedList.tsx b/packages/react-core/src/components/Text/examples/TextOrderedList.tsx deleted file mode 100644 index 59c33f7b0f1..00000000000 --- a/packages/react-core/src/components/Text/examples/TextOrderedList.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; - -export const TextOrderedList: React.FunctionComponent = () => ( - <TextList component={TextListVariants.ol}> - <TextListItem>Donec blandit a lorem id convallis.</TextListItem> - <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem> - <TextListItem>Integer in volutpat libero.</TextListItem> - <TextListItem>Donec a diam tellus.</TextListItem> - <TextListItem>Aenean nec tortor orci.</TextListItem> - <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem> - <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem> - </TextList> -); diff --git a/packages/react-core/src/components/Text/examples/TextPlainList.tsx b/packages/react-core/src/components/Text/examples/TextPlainList.tsx deleted file mode 100644 index 61672f3c170..00000000000 --- a/packages/react-core/src/components/Text/examples/TextPlainList.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { Text, TextVariants, TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; - -export const TextPlainList: React.FunctionComponent = () => ( - <> - <Text component={TextVariants.h3}>Plain unordered list</Text> - <TextList isPlain> - <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem> - <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem> - <TextListItem>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</TextListItem> - <TextListItem>Ut non enim metus.</TextListItem> - </TextList> - <Text component={TextVariants.h3}>Plain ordered list</Text> - <TextList component={TextListVariants.ol} isPlain> - <TextListItem>Donec blandit a lorem id convallis.</TextListItem> - <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem> - <TextListItem>Integer in volutpat libero.</TextListItem> - <TextListItem>Donec a diam tellus.</TextListItem> - <TextListItem>Aenean nec tortor orci.</TextListItem> - <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem> - <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem> - </TextList> - </> -); diff --git a/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx b/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx deleted file mode 100644 index 59b6296cbb2..00000000000 --- a/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { TextList, TextListItem } from '@patternfly/react-core'; - -export const TextUnorderedList: React.FunctionComponent = () => ( - <TextList> - <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem> - <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem> - <TextListItem> - Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. - <TextList> - <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem> - <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem> - </TextList> - </TextListItem> - <TextListItem>Ut non enim metus.</TextListItem> - </TextList> -); diff --git a/packages/react-core/src/components/Text/examples/TextVisited.tsx b/packages/react-core/src/components/Text/examples/TextVisited.tsx deleted file mode 100644 index 348841539ed..00000000000 --- a/packages/react-core/src/components/Text/examples/TextVisited.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { TextContent, Text, TextVariants } from '@patternfly/react-core'; - -export const TextVisited: React.FunctionComponent = () => ( - <> - <TextContent> - <Text component={TextVariants.h3}>Link example</Text> - <Text component={TextVariants.p}> - <Text component={TextVariants.a} isVisitedLink href="#"> - Click to visit link - </Text> - </Text> - </TextContent> - <br /> - <TextContent isVisited> - <Text component={TextVariants.h3}>Link content example</Text> - <Text component={TextVariants.p}> - <Text component={TextVariants.a} href="#"> - content link 1 - </Text> - </Text> - <Text component={TextVariants.p}> - <Text component={TextVariants.a} href="#"> - content link 2 - </Text> - </Text> - <Text component={TextVariants.p}> - <Text component={TextVariants.a} href="#"> - content link 3 - </Text> - </Text> - </TextContent> - </> -); diff --git a/packages/react-core/src/components/Text/index.ts b/packages/react-core/src/components/Text/index.ts deleted file mode 100644 index 8f8269d7d26..00000000000 --- a/packages/react-core/src/components/Text/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './TextContent'; -export * from './Text'; -export * from './TextList'; -export * from './TextListItem'; diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts index fcfc6b51e24..681a6834e64 100644 --- a/packages/react-core/src/components/index.ts +++ b/packages/react-core/src/components/index.ts @@ -17,6 +17,7 @@ export * from './Card'; export * from './Checkbox'; export * from './ClipboardCopy'; export * from './CodeBlock'; +export * from './Content'; export * from './DataList'; export * from './DatePicker'; export * from './DescriptionList'; @@ -62,7 +63,6 @@ export * from './Slider'; export * from './Spinner'; export * from './Switch'; export * from './Tabs'; -export * from './Text'; export * from './TextArea'; export * from './TextInput'; export * from './Tile'; diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md index ac1b38cea37..6d2342da70a 100644 --- a/packages/react-core/src/demos/Banner.md +++ b/packages/react-core/src/demos/Banner.md @@ -13,17 +13,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ```js isFullscreen import React from 'react'; -import { - Banner, - Card, - CardBody, - Flex, - Gallery, - GalleryItem, - PageSection, - TextContent, - Text -} from '@patternfly/react-core'; +import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import { css } from '@patternfly/react-styles'; @@ -48,13 +38,13 @@ class BannerDemo extends React.Component { </Flex> </Banner> <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of it’s relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection> <Gallery hasGutter> @@ -87,8 +77,7 @@ import { Gallery, GalleryItem, PageSection, - TextContent, - Text + Content } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import { css } from '@patternfly/react-styles'; @@ -122,13 +111,13 @@ class BannerDemo extends React.Component { <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}> <DashboardWrapper breadcrumb={null}> <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of it’s relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection> <Gallery hasGutter> diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx index fe7f31da631..f83af427435 100644 --- a/packages/react-core/src/demos/CardView/examples/CardView.tsx +++ b/packages/react-core/src/demos/CardView/examples/CardView.tsx @@ -7,6 +7,7 @@ import { CardHeader, CardTitle, CardBody, + Content, Divider, Dropdown, DropdownItem, @@ -24,8 +25,6 @@ import { OverflowMenuItem, PageSection, Pagination, - TextContent, - Text, Toolbar, ToolbarItem, ToolbarFilter, @@ -470,10 +469,10 @@ export const CardViewBasic: React.FunctionComponent = () => { <React.Fragment> <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}> <PageSection> - <TextContent> - <Text component="h1">Projects</Text> - <Text component="p">This is a demo that showcases PatternFly cards.</Text> - </TextContent> + <Content> + <h1>Projects</h1> + <p>This is a demo that showcases PatternFly cards.</p> + </Content> <Toolbar id="toolbar-group-types" clearAllFilters={onDelete}> <ToolbarContent>{toolbarItems}</ToolbarContent> </Toolbar> diff --git a/packages/react-core/src/demos/DashboardWrapper.tsx b/packages/react-core/src/demos/DashboardWrapper.tsx index 8dd074b6d21..95f2382bcbc 100644 --- a/packages/react-core/src/demos/DashboardWrapper.tsx +++ b/packages/react-core/src/demos/DashboardWrapper.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { Breadcrumb, BreadcrumbItem, + Content, Nav, NavItem, NavList, @@ -10,9 +11,7 @@ import { PageSection, PageSidebar, PageSidebarBody, - SkipToContent, - Text, - TextContent + SkipToContent } from '../components'; import { DashboardHeader } from './DashboardHeader'; @@ -38,10 +37,10 @@ export const DashboardBreadcrumb = ( const PageTemplateTitle = ( <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p">This is a full page demo.</Text> - </TextContent> + <Content> + <h1>Main title</h1> + <p>This is a full page demo.</p> + </Content> </PageSection> ); diff --git a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx index d006554ca47..0867d08e8ca 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Button, + Content, DataList, DataListItem, DataListCell, @@ -16,9 +17,6 @@ import { PageSection, PageSectionVariants, Pagination, - Text, - TextContent, - TextVariants, Toolbar, ToolbarItem, ToolbarContent @@ -77,10 +75,10 @@ export const DataListBasic: React.FunctionComponent = () => { <React.Fragment> <DashboardWrapper mainContainerId="main-content-datalist-view-default-nav" breadcrumb={null}> <PageSection variant={PageSectionVariants.light}> - <TextContent> - <Text component="h1">Projects</Text> - <Text component="p">This is a demo that showcases PatternFly Data List</Text> - </TextContent> + <Content> + <h1>Projects</h1> + <p>This is a demo that showcases PatternFly Data List</p> + </Content> </PageSection> <PageSection isFilled> <Toolbar id="toolbar-group-types"> @@ -94,13 +92,13 @@ export const DataListBasic: React.FunctionComponent = () => { <DataListCell isFilled={false} key="buttons1"> <Flex direction={{ default: 'column' }}> <FlexItem> - <Text component={TextVariants.p}>patternfly</Text> + <Content component="p">patternfly</Content> </FlexItem> <FlexItem> - <Text component={TextVariants.small}> + <Content component="small"> Working repo for <a href="http://www.patternfly.org/">PatternFly</a> - </Text> + </Content> </FlexItem> <FlexItem> <Flex spaceItems={{ default: 'spaceItemsSm' }}> @@ -139,10 +137,10 @@ export const DataListBasic: React.FunctionComponent = () => { <DataListCell isFilled={false} key="buttons2"> <Flex direction={{ default: 'column' }}> <FlexItem> - <Text component={TextVariants.small}>patternfly-elements</Text> + <Content component="small">patternfly-elements</Content> </FlexItem> <FlexItem> - <Text component={TextVariants.small}>PatternFly elements</Text> + <Content component="small">PatternFly elements</Content> </FlexItem> <FlexItem> <Flex spaceItems={{ default: 'spaceItemsSm' }}> @@ -191,7 +189,7 @@ export const DataListBasic: React.FunctionComponent = () => { <DataListCell isFilled={false} key="Demo-item3"> <Flex direction={{ default: 'column' }}> <FlexItem> - <Text component={TextVariants.small}>patternfly-unified-design-kit</Text> + <Content component="small">patternfly-unified-design-kit</Content> </FlexItem> </Flex> </DataListCell>, @@ -216,13 +214,13 @@ export const DataListBasic: React.FunctionComponent = () => { <DataListCell isFilled={false} key="buttons4"> <Flex direction={{ default: 'column' }}> <FlexItem> - <Text component={TextVariants.small}>patternfly</Text> + <Content component="small">patternfly</Content> </FlexItem> <FlexItem> - <Text component={TextVariants.small}> + <Content component="small"> Working repo for <a href="http://www.patternfly.org/">PatternFly</a> - </Text> + </Content> </FlexItem> <FlexItem> <Flex spaceItems={{ default: 'spaceItemsSm' }}> @@ -262,10 +260,10 @@ export const DataListBasic: React.FunctionComponent = () => { <DataListCell isFilled={false} key="buttons5"> <Flex direction={{ default: 'column' }}> <FlexItem> - <Text component={TextVariants.small}>patternfly-elements</Text> + <Content component="small">patternfly-elements</Content> </FlexItem> <FlexItem> - <Text component={TextVariants.small}>PatternFly elements</Text> + <Content component="small">PatternFly elements</Content> </FlexItem> <FlexItem> <Flex spaceItems={{ default: 'spaceItemsSm' }}> diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx index 07fd6063cb6..3f082348e8b 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Button, + Content, DataList, DataListItem, DataListItemRow, @@ -23,9 +24,7 @@ import { Tooltip, Icon, PageSection, - PageSectionVariants, - Text, - TextContent + PageSectionVariants } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; @@ -135,10 +134,10 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () => <React.Fragment> <DashboardWrapper mainContainerId="main-content-datalist-view-default-nav" breadcrumb={null}> <PageSection variant={PageSectionVariants.light}> - <TextContent> - <Text component="h1">Projects</Text> - <Text component="p">This is a demo that showcases PatternFly Data List</Text> - </TextContent> + <Content> + <h1>Projects</h1> + <p>This is a demo that showcases PatternFly Data List</p> + </Content> </PageSection> <PageSection isFilled> {renderToolbar()} diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md index 4510ebf6975..8e3a4ff138e 100644 --- a/packages/react-core/src/demos/JumpLinks.md +++ b/packages/react-core/src/demos/JumpLinks.md @@ -32,7 +32,7 @@ import { SidebarPanel, Switch, Title, - TextContent, + Content, getResizeObserver } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; @@ -102,7 +102,7 @@ ScrollspyH2 = () => { </SidebarPanel> <SidebarContent hasNoBackground> <PageSection> - <TextContent> + <Content> {headings.map(i => ( <div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}> <h2 id={`heading-${i}`} tabIndex={-1}> @@ -129,7 +129,7 @@ ScrollspyH2 = () => { </p> </div> ))} - </TextContent> + </Content> </PageSection> </SidebarContent> </Sidebar> diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx index 44018fe4caf..31552165eb8 100644 --- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx +++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx @@ -6,6 +6,7 @@ import { BreadcrumbItem, Button, ButtonVariant, + Content, Divider, Dropdown, DropdownItem, @@ -32,8 +33,6 @@ import { PageSidebar, PageSidebarBody, SkipToContent, - TextContent, - Text, PageToggleButton, Masthead, MastheadMain, @@ -534,13 +533,13 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { mainContainerId={pageId} > <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of its relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection>Panel section content</PageSection> </Page> diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx index 19cbf98d21f..1f3d4f93a9d 100644 --- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx +++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx @@ -6,6 +6,7 @@ import { BreadcrumbItem, Button, ButtonVariant, + Content, Divider, Dropdown, DropdownItem, @@ -34,8 +35,6 @@ import { PageSidebar, PageSidebarBody, SkipToContent, - TextContent, - Text, PageToggleButton, Masthead, MastheadMain, @@ -773,13 +772,13 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => { mainContainerId={pageId} > <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of its relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection>Panel section content</PageSection> </Page> diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx index d45210b4358..e9f30ed5565 100644 --- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx +++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx @@ -8,6 +8,7 @@ import { Button, ButtonVariant, Card, + Content, Divider, Dropdown, DropdownGroup, @@ -32,9 +33,6 @@ import { PageToggleButton, Pagination, PaginationVariant, - Text, - TextContent, - TextVariants, Toolbar, ToolbarContent, ToolbarGroup, @@ -448,10 +446,10 @@ export const PaginatedTableAction = () => { </Breadcrumb> </PageBreadcrumb> <PageSection variant="light"> - <TextContent> - <Text component={TextVariants.h1}>{translation.title}</Text> - <Text component={TextVariants.p}>{translation.body}</Text> - </TextContent> + <Content> + <h1>{translation.title}</h1> + <p>{translation.body}</p> + </Content> </PageSection> <PageSection> <Card> diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx index 1039a853e13..f068bdee472 100644 --- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx +++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx @@ -8,6 +8,7 @@ import { Button, ButtonVariant, Card, + Content, Divider, Dropdown, DropdownGroup, @@ -32,9 +33,6 @@ import { PageToggleButton, Pagination, PaginationVariant, - Text, - TextContent, - TextVariants, Toolbar, ToolbarContent, ToolbarGroup, @@ -474,10 +472,10 @@ export const PaginatedTableAction: React.FunctionComponent = () => { </Breadcrumb> </PageBreadcrumb> <PageSection variant="light"> - <TextContent> - <Text component={TextVariants.h1}>{translation.title}</Text> - <Text component={TextVariants.p}>{translation.body}</Text> - </TextContent> + <Content> + <h1>{translation.title}</h1> + <p>{translation.body}</p> + </Content> </PageSection> <PageSection> <Card> diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx index a22daa093be..3f125d9ccb8 100644 --- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx +++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx @@ -13,8 +13,7 @@ import { NotificationDrawerListItemBody, NotificationDrawerListItemHeader, PageSection, - TextContent, - Text, + Content, EmptyStateVariant, NumberInput, Alert, @@ -316,15 +315,15 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = () isNotificationDrawerExpanded={isDrawerExpanded} > <PageSection> - <TextContent> - <Text component="h1">Alert Group with Notification Drawer demo</Text> - <Text component="p"> + <Content> + <h1>Alert Group with Notification Drawer demo</h1> + <p> New alerts can be added with buttons below. Each alert has a timeout of 7 seconds, however, even after the timeout expires, all alerts are still visible in the notification drawer. By default, only 3 alerts are displayed. The rest can be accessed in the notification drawer after clicking on the bell icon in the header or by clicking on the overflow message. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection> @@ -348,11 +347,11 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = () </PageSection> <PageSection> - <TextContent> + <Content> <br /> - <Text component="h2">Max displayed alerts</Text> - <Text component="p">The maximum number of displayed alerts can be set below.</Text> - </TextContent> + <h2>Max displayed alerts</h2> + <p>The maximum number of displayed alerts can be set below.</p> + </Content> <NumberInput value={maxDisplayed} min={minAlerts} diff --git a/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx b/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx index 41b2dd01c88..2eb37aeaa4f 100644 --- a/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx +++ b/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx @@ -3,11 +3,10 @@ import { BackToTop, Card, CardBody, + Content, Gallery, GalleryItem, PageSection, - TextContent, - Text, Page, Switch } from '@patternfly/react-core'; @@ -24,14 +23,14 @@ export const Name = () => { <DashboardWrapper breadcrumb={null}> <Page> <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px.It should have leading of 24px because <br /> of it’s relative line height of 1.5. - </Text> + </p> <Switch label="Always show BackToTopButton" onChange={handleChange} isChecked={isAlwaysVisible} /> - </TextContent> + </Content> </PageSection> <PageSection hasOverflowScroll diff --git a/packages/react-core/src/demos/examples/DashboardWrapper.js b/packages/react-core/src/demos/examples/DashboardWrapper.js index 84d0e124a7f..3f5cf63976a 100644 --- a/packages/react-core/src/demos/examples/DashboardWrapper.js +++ b/packages/react-core/src/demos/examples/DashboardWrapper.js @@ -2,6 +2,7 @@ import React from 'react'; import { Breadcrumb, BreadcrumbItem, + Content, Nav, NavItem, NavList, @@ -9,9 +10,7 @@ import { PageSection, PageSidebar, PageSidebarBody, - SkipToContent, - Text, - TextContent + SkipToContent } from '@patternfly/react-core'; import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader'; @@ -28,10 +27,10 @@ export const DashboardBreadcrumb = ( export const PageTemplateTitle = ( <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p">This is a full page demo.</Text> - </TextContent> + <Content> + <h1>Main title</h1> + <p>This is a full page demo.</p> + </Content> </PageSection> ); diff --git a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js index 5dfe9fd73e9..fecce0e8359 100644 --- a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js +++ b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js @@ -1,6 +1,7 @@ import React from 'react'; import { Button, + Content, Drawer, DrawerPanelContent, DrawerContent, @@ -15,7 +16,6 @@ import { Sidebar, SidebarContent, SidebarPanel, - TextContent, getResizeObserver, DrawerContext } from '@patternfly/react-core'; @@ -100,7 +100,7 @@ export const JumpLinksWithDrawer = () => { <Button onClick={onToggleClick}>Toggle drawer</Button> </PageSection> <PageSection> - <TextContent> + <Content> {headings.map((heading) => ( <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}> <h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}> @@ -132,7 +132,7 @@ export const JumpLinksWithDrawer = () => { </p> </div> ))} - </TextContent> + </Content> </PageSection> </SidebarContent> </Sidebar> diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx index 225a6e40a57..6a2ed257fab 100644 --- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx +++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx @@ -8,6 +8,7 @@ import { ButtonVariant, Card, CardBody, + Content, Divider, Dropdown, DropdownGroup, @@ -36,8 +37,6 @@ import { PageToggleButton, Popper, SkipToContent, - Text, - TextContent, Toolbar, ToolbarContent, ToolbarGroup, @@ -532,10 +531,10 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = isBreadcrumbGrouped additionalGroupedContent={ <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p">This is a full page demo.</Text> - </TextContent> + <Content> + <h1>Main title</h1> + <p>This is a full page demo.</p> + </Content> </PageSection> } > diff --git a/packages/react-core/src/demos/examples/Nav/NavDefault.tsx b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx index 4cf810b6a65..9daba91948f 100644 --- a/packages/react-core/src/demos/examples/Nav/NavDefault.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Card, CardBody, + Content, Gallery, GalleryItem, Nav, @@ -11,9 +12,7 @@ import { PageSection, PageSidebar, PageSidebarBody, - SkipToContent, - TextContent, - Text + SkipToContent } from '@patternfly/react-core'; import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; @@ -72,13 +71,13 @@ export const NavDefault: React.FunctionComponent = () => { mainContainerId={pageId} > <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of its relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection> <Gallery hasGutter> diff --git a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx index 6ec464df3f1..999f87dc40d 100644 --- a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Card, CardBody, + Content, Gallery, GalleryItem, Nav, @@ -12,9 +13,7 @@ import { PageSection, PageSidebar, PageSidebarBody, - SkipToContent, - TextContent, - Text + SkipToContent } from '@patternfly/react-core'; import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; @@ -98,13 +97,13 @@ export const NavExpandableDemo: React.FunctionComponent = () => { mainContainerId={pageId} > <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of its relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection> <Gallery hasGutter> diff --git a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx index 59d13f54547..6e2032bdc9a 100644 --- a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { + Content, Nav, NavGroup, NavItem, @@ -7,9 +8,7 @@ import { PageSection, PageSidebar, PageSidebarBody, - SkipToContent, - TextContent, - Text + SkipToContent } from '@patternfly/react-core'; import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; @@ -80,13 +79,13 @@ export const NavGrouped: React.FunctionComponent = () => { mainContainerId={pageId} > <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of its relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection>Section 1</PageSection> <PageSection>Section 2</PageSection> diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx index e1938120b83..702dca54917 100644 --- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx @@ -6,6 +6,7 @@ import { ButtonVariant, Card, CardBody, + Content, Divider, Dropdown, DropdownGroup, @@ -24,8 +25,6 @@ import { Page, PageSection, SkipToContent, - TextContent, - Text, Toolbar, ToolbarContent, ToolbarGroup, @@ -216,13 +215,13 @@ export const NavHorizontal: React.FunctionComponent = () => { mainContainerId={pageId} > <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of its relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection> <Gallery hasGutter> diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx index 03fcd7bb927..0bd7ab8d37f 100644 --- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx @@ -6,6 +6,7 @@ import { ButtonVariant, Card, CardBody, + Content, Divider, Dropdown, DropdownGroup, @@ -27,8 +28,6 @@ import { PageSectionTypes, PageToggleButton, SkipToContent, - TextContent, - Text, Toolbar, ToolbarContent, ToolbarGroup, @@ -271,13 +270,13 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => { {DashboardBreadcrumb} </PageSection> <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of it’s relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection> <Gallery hasGutter> diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx index c7f29257c4d..fc8f2356708 100644 --- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx @@ -6,6 +6,7 @@ import { ButtonVariant, Card, CardBody, + Content, Divider, Dropdown, DropdownGroup, @@ -28,8 +29,6 @@ import { PageSidebarBody, PageToggleButton, SkipToContent, - TextContent, - Text, Toolbar, ToolbarContent, ToolbarGroup, @@ -247,13 +246,13 @@ export const NavManual: React.FunctionComponent = () => { mainContainerId={pageId} > <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of its relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection> <Gallery hasGutter> diff --git a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx index db3db517c59..b378c19add0 100644 --- a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Card, CardBody, + Content, Gallery, GalleryItem, Nav, @@ -12,9 +13,7 @@ import { PageSectionTypes, PageSidebar, PageSidebarBody, - SkipToContent, - TextContent, - Text + SkipToContent } from '@patternfly/react-core'; import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; @@ -116,13 +115,13 @@ export const NavWithSubnav: React.FunctionComponent = () => { {DashboardBreadcrumb} </PageSection> <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of it’s relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection> <Gallery hasGutter> diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx index e235a7adb93..79d422b1fa5 100644 --- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx +++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx @@ -8,6 +8,7 @@ import { ButtonVariant, Card, CardBody, + Content, Divider, Dropdown, DropdownGroup, @@ -31,8 +32,6 @@ import { PageSidebarBody, PageToggleButton, SkipToContent, - Text, - TextContent, Toolbar, ToolbarContent, ToolbarGroup, @@ -270,10 +269,10 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => { }} > <PageSection isWidthLimited> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p">This is a full page demo.</Text> - </TextContent> + <Content> + <h1>Main title</h1> + <p>This is a full page demo.</p> + </Content> </PageSection> <PageSection isWidthLimited> <Gallery hasGutter> diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx index b3b117bc94f..70058550e20 100644 --- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx +++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx @@ -8,6 +8,7 @@ import { ButtonVariant, Card, CardBody, + Content, Divider, Dropdown, DropdownGroup, @@ -31,8 +32,6 @@ import { PageSidebarBody, PageToggleButton, SkipToContent, - Text, - TextContent, Toolbar, ToolbarContent, ToolbarGroup, @@ -266,10 +265,10 @@ export const PageStickySectionGroup: React.FunctionComponent = () => { isBreadcrumbGrouped additionalGroupedContent={ <PageSection isWidthLimited> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p">This is a full page demo.</Text> - </TextContent> + <Content> + <h1>Main title</h1> + <p>This is a full page demo.</p> + </Content> </PageSection> } groupProps={{ diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx index 1e75356386b..75a6aba58e3 100644 --- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx +++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx @@ -8,6 +8,7 @@ import { ButtonVariant, Card, CardBody, + Content, Divider, Dropdown, DropdownGroup, @@ -33,8 +34,6 @@ import { PageSidebarBody, PageToggleButton, SkipToContent, - Text, - TextContent, Toolbar, ToolbarContent, ToolbarGroup, @@ -266,10 +265,10 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => { </Breadcrumb> </PageBreadcrumb> <PageSection isWidthLimited> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p">This is a full page demo.</Text> - </TextContent> + <Content> + <h1>Main title</h1> + <p>This is a full page demo.</p> + </Content> </PageSection>{' '} </PageGroup> <PageSection> diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx index 01767e5de84..10f80838a4b 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx @@ -6,6 +6,7 @@ import { CardHeader, CardBody, CardTitle, + Content, Divider, Drawer, DrawerActions, @@ -30,8 +31,6 @@ import { Select, SelectList, SelectOption, - TextContent, - Text, Title, Toolbar, ToolbarFilter, @@ -573,11 +572,9 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => { </Button> </FlexItem> <FlexItem> - <TextContent> - <Text component="small" className="pf-v6-u-color-200 pf-v6-u-font-family-text"> - Provided by Red Hat - </Text> - </TextContent> + <Content> + <small className="pf-v6-u-color-200 pf-v6-u-font-family-text">Provided by Red Hat</small> + </Content> </FlexItem> </Flex> </CardTitle> @@ -621,10 +618,10 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => { return ( <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}> <PageSection variant={PageSectionVariants.light}> - <TextContent> - <Text component="h1">Projects</Text> - <Text component="p">This is a demo that showcases Patternfly Cards.</Text> - </TextContent> + <Content> + <h1>Projects</h1> + <p>This is a demo that showcases Patternfly Cards.</p> + </Content> </PageSection> <PageSection isFilled padding={{ default: 'noPadding' }}> <Toolbar id="card-view-data-toolbar-group-types" usePageInsets clearAllFilters={onDelete}> diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx index e66615bc451..e951d54271b 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Button, ButtonVariant, + Content, DataList, DataListAction, DataListCell, @@ -30,8 +31,6 @@ import { Progress, Stack, StackItem, - Text, - TextContent, TextInput, Title, Select, @@ -421,13 +420,13 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => { return ( <DashboardWrapper> <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of it's relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <Divider component="div" /> <PageSection padding={{ default: 'noPadding' }}> diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx index 52e5a51696f..9dc9ca3953d 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Card, + Content, DataList, DataListCell, DataListItem, @@ -27,8 +28,6 @@ import { PageSection, PageSectionVariants, Progress, - Text, - TextContent, Title } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; @@ -184,13 +183,13 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => { return ( <DashboardWrapper> <PageSection variant={PageSectionVariants.light}> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of it’s relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <Divider component="div" /> <PageSection> diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx index 78796f45f89..f3815dbde46 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Button, ButtonVariant, + Content, DataList, DataListAction, DataListCell, @@ -30,8 +31,6 @@ import { Progress, Stack, StackItem, - Text, - TextContent, TextInput, Title, Select, @@ -421,13 +420,13 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => { return ( <DashboardWrapper mainContainerId="main-content-page-layout-default-nav"> <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of it's relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <Divider component="div" /> <PageSection padding={{ default: 'noPadding' }}> diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx index 1531711b9dd..20584aadd84 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Button, ButtonVariant, + Content, DataList, DataListAction, DataListCell, @@ -30,8 +31,6 @@ import { Progress, Stack, StackItem, - Text, - TextContent, TextInput, Title, Select, @@ -421,13 +420,13 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => { return ( <DashboardWrapper> <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of it's relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <Divider component="div" /> <PageSection padding={{ default: 'noPadding' }}> diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx index 9f500d6ea1c..3b51ac403a5 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Card, + Content, Divider, Drawer, DrawerActions, @@ -18,8 +19,6 @@ import { SimpleList, SimpleListGroup, SimpleListItem, - Text, - TextContent, Title } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; @@ -93,13 +92,13 @@ export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => { return ( <DashboardWrapper> <PageSection variant={PageSectionVariants.light}> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px. It should have leading of 24px because <br /> of it’s relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <Divider component="div" /> <PageSection> diff --git a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx index f888e8795ca..50e452085f7 100644 --- a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx +++ b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx @@ -2,8 +2,7 @@ import React from 'react'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import { PageSection, - TextContent, - Text, + Content, Gallery, Card, CardBody, @@ -82,10 +81,10 @@ export const ModalTabs: React.FunctionComponent = () => { <React.Fragment> <DashboardWrapper mainContainerId="main-content-card-view-default-nav"> <PageSection> - <TextContent> - <Text component="h1">Projects</Text> - <Text component="p">Click any project card to view Tabs within Modals.</Text> - </TextContent> + <Content> + <h1>Projects</h1> + <p>Click any project card to view Tabs within Modals.</p> + </Content> </PageSection> <PageSection isFilled> <Gallery hasGutter aria-label="Selectable card container"> diff --git a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx index 78ba131685a..7df037ae9fd 100644 --- a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx +++ b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx @@ -3,6 +3,7 @@ import { Card, CardHeader, CardBody, + Content, Grid, GridItem, PageSection, @@ -12,8 +13,6 @@ import { TabContentBody, TabTitleText, Title, - Text, - TextContent, TitleSizes, CardTitle } from '@patternfly/react-core'; @@ -65,9 +64,9 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => { <TabContentBody> <Grid hasGutter> <GridItem> - <TextContent> - <Text>To perform a standard x86_64 installation using the GUI, you'll need to:</Text> - </TextContent> + <Content component="p"> + To perform a standard x86_64 installation using the GUI, you'll need to: + </Content> </GridItem> <Grid md={6} xl2={3} hasGutter> <Card component="div"> diff --git a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx index a1ec5a60191..0ee383bd918 100644 --- a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx +++ b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Button, + Content, Drawer, DrawerActions, DrawerCloseButton, @@ -11,9 +12,6 @@ import { Flex, Modal, ModalVariant, - Text, - TextContent, - TextVariants, Wizard, WizardHeader, WizardStep @@ -59,8 +57,8 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () => spaceItems={{ default: 'spaceItemsLg' }} height="100%" > - <TextContent> - <Text component={TextVariants.h1}>{stepName} content</Text> + <Content> + <h1>{stepName} content</h1> <p> Wizard description goes here. If you need more assistance,{' '} <Button isInline variant="link" onClick={onOpenClick}> @@ -68,7 +66,7 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () => </Button>{' '} in the side drawer.{' '} </p> - </TextContent> + </Content> </Flex> </DrawerContent> </Drawer> diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx index f3c04ff8c3b..8b353bbb4ae 100644 --- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx +++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx @@ -4,6 +4,7 @@ import { Breadcrumb, BreadcrumbItem, Button, + Content, Drawer, DrawerActions, DrawerCloseButton, @@ -21,8 +22,6 @@ import { PageSidebar, PageSidebarBody, SkipToContent, - Text, - TextContent, Masthead, PageToggleButton, MastheadToggle, @@ -159,10 +158,10 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => { mainContainerId={pageId} > <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p">A demo of a wizard in a page.</Text> - </TextContent> + <Content> + <h1>Main title</h1> + <p>A demo of a wizard in a page.</p> + </Content> </PageSection> <PageSection type={PageSectionTypes.wizard}> <Wizard> diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx index 409556631d0..7fe689fde30 100644 --- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx +++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx @@ -4,6 +4,7 @@ import { Breadcrumb, BreadcrumbItem, Button, + Content, Drawer, DrawerActions, DrawerCloseButton, @@ -21,8 +22,6 @@ import { PageSidebar, PageSidebarBody, SkipToContent, - Text, - TextContent, Masthead, PageToggleButton, MastheadToggle, @@ -138,8 +137,8 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () spaceItems={{ default: 'spaceItemsLg' }} height="100%" > - <TextContent> - <Text>{stepName} content</Text> + <Content> + <p>{stepName} content</p> <p> Wizard description goes here. If you need more assistance,{' '} <Button isInline variant="link" onClick={onOpenClick}> @@ -147,7 +146,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () </Button>{' '} in the side drawer.{' '} </p> - </TextContent> + </Content> </Flex> </DrawerContent> </Drawer> @@ -164,10 +163,10 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () mainContainerId={pageId} > <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p">A demo of a wizard in a page.</Text> - </TextContent> + <Content> + <h1>Main title</h1> + <p>A demo of a wizard in a page.</p> + </Content> </PageSection> <PageSection type={PageSectionTypes.wizard} ß> <Wizard> diff --git a/packages/react-docs/patternfly-docs/pages/icons.js b/packages/react-docs/patternfly-docs/pages/icons.js index b3844cadfc9..6c2b50c5a0b 100644 --- a/packages/react-docs/patternfly-docs/pages/icons.js +++ b/packages/react-docs/patternfly-docs/pages/icons.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Tooltip, Text, Grid, GridItem, PageSection } from '@patternfly/react-core'; +import { Tooltip, Grid, GridItem, PageSection, Content } from '@patternfly/react-core'; import spacerMd from '@patternfly/react-tokens/dist/esm/global_spacer_md'; import labelFontSize from '@patternfly/react-tokens/dist/esm/global_font_size_sm'; import * as IconsModule from '@patternfly/react-icons/dist/esm'; @@ -36,14 +36,14 @@ const iconsPage = () => { return ( <PageSection> - <Text> + <Content component="p"> These are all of the icons available for use in PatternFly React. For recommended icon usage, see our{' '} <a href="https://www.patternfly.org/v4/guidelines/icons">icon usage guidelines</a>. - </Text> - <Text> + </Content> + <Content component="p"> Learn how you can use them in the{' '} <a href="https://github.com/patternfly/patternfly-react/tree/main/packages/react-icons">react-icons docs</a>. - </Text> + </Content> <Grid> {allIcons // BREAKING CHANGE - remove line below when AnsibeTowerIcon is removed diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx index c144e87e3a4..f2cb11486f2 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.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'; const brandImg = '../../../assets/images/brandImg.svg'; interface AboutModalState { @@ -37,24 +37,24 @@ export class AboutModalDemo extends React.Component<{}, AboutModalState> { brandImageAlt="Patternfly Logo" productName="Product 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/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx index 61f354ba15b..142762ca4b5 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx @@ -1,26 +1,16 @@ import React from 'react'; -import { - BackToTop, - Card, - CardBody, - Gallery, - GalleryItem, - PageSection, - TextContent, - Text, - Page -} from '@patternfly/react-core'; +import { BackToTop, Card, CardBody, Content, Gallery, GalleryItem, PageSection, Page } from '@patternfly/react-core'; export const BackToTopDemo = () => ( <Page> <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p"> + <Content> + <h1>Main title</h1> + <p> Body text should be Overpass Regular at 16px.It should have leading of 24px because <br /> of it’s relative line height of 1.5. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection hasOverflowScroll name="scrolling-section"> <Gallery hasGutter> diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx index 2cce8749f14..2147fe762b5 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { TextArea, Text, ValidatedOptions } from '@patternfly/react-core'; +import { Content, TextArea, ValidatedOptions } from '@patternfly/react-core'; interface TextAreaState { textAreaValue: string; @@ -81,7 +81,7 @@ export class TextAreaDemo extends React.Component<{}, TextAreaState> { } = this.state; return ( <React.Fragment> - <Text>Text area</Text> + <Content component="p">Text area</Content> <TextArea id="textarea1" value={textAreaValue} @@ -89,7 +89,7 @@ export class TextAreaDemo extends React.Component<{}, TextAreaState> { validated={isValid ? ValidatedOptions.default : ValidatedOptions.error} aria-label="text area example 1" /> - <Text>Required text area</Text> + <Content component="p">Required text area</Content> <TextArea id="textarea2" value={requiredTextAreaValue} @@ -98,7 +98,7 @@ export class TextAreaDemo extends React.Component<{}, TextAreaState> { validated={requiredIsValid ? ValidatedOptions.default : ValidatedOptions.error} aria-label="text area example 2" /> - <Text>Resize text area horizontally </Text> + <Content component="p">Resize text area horizontally </Content> <TextArea id="textarea3" resizeOrientation="horizontal" @@ -107,7 +107,7 @@ export class TextAreaDemo extends React.Component<{}, TextAreaState> { validated={horizontalIsValid ? ValidatedOptions.default : ValidatedOptions.error} aria-label="text area example 3" /> - <Text>Resize text area vertically </Text> + <Content component="p">Resize text area vertically </Content> <TextArea id="textarea4" resizeOrientation="vertical" @@ -116,7 +116,7 @@ export class TextAreaDemo extends React.Component<{}, TextAreaState> { validated={verticalIsValid ? ValidatedOptions.default : ValidatedOptions.error} aria-label="text area example 4" /> - <Text>Validated text area </Text> + <Content component="p">Validated text area </Content> <TextArea id="textarea5" value={validatedTextArea} @@ -124,10 +124,10 @@ export class TextAreaDemo extends React.Component<{}, TextAreaState> { validated={validated} aria-label="text area example 5" /> - <Text>Disabled text area </Text> + <Content component="p">Disabled text area </Content> <TextArea id="textarea6-a" value={'disabled text area'} aria-label="text area example 6 a" disabled /> <TextArea id="textarea6-b" value={'isDisabled text area'} aria-label="text area example 6 b" isDisabled /> - <Text>Read only text area </Text> + <Content component="p">Read only text area </Content> <TextArea id="textarea7-a" value={'readOnly text area'} aria-label="text area example 7 a" readOnly /> <TextArea id="textarea7-b" diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TextInputDemo/TextInputDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TextInputDemo/TextInputDemo.tsx index ebb9b443196..54cd50f69cb 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TextInputDemo/TextInputDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TextInputDemo/TextInputDemo.tsx @@ -1,4 +1,4 @@ -import { Text, TextInput, TextInputProps, ValidatedOptions } from '@patternfly/react-core'; +import { Content, TextInput, TextInputProps, ValidatedOptions } from '@patternfly/react-core'; import React, { Component } from 'react'; export class TextInputDemo extends Component { @@ -60,7 +60,7 @@ export class TextInputDemo extends Component { render() { return ( <React.Fragment> - <Text>Simple Text Input Example</Text> + <Content component="p">Simple Text Input Example</Content> <TextInput id="text" onChange={this.myTextInputProps.onChange} /> <TextInput id="text-disabled" @@ -72,21 +72,21 @@ export class TextInputDemo extends Component { readOnlyVariant={this.myReadOnlyTextInputProps.readOnlyVariant} value={this.myReadOnlyTextInputProps.value} /> - <Text>Text Input Truncated on Left Example</Text> + <Content component="p">Text Input Truncated on Left Example</Content> <TextInput id="text-truncated-on-left" isStartTruncated onChange={this.handleLeftTruncatedTextInputChange} value={this.state.leftTruncatedTextInputValue} /> - <Text>Validated Text Input </Text> + <Content component="p">Validated Text Input </Content> <TextInput id="text-validated" onChange={this.handleValidatedTextInputChange} value={this.state.validatedTextInputValue} validated={this.state.validated} /> - <Text>Select Text Using Ref Example </Text> + <Content component="p">Select Text Using Ref Example </Content> <TextInput id="text-using-ref" ref={this.ref} diff --git a/packages/react-table/src/demos/DashboardWrapper.tsx b/packages/react-table/src/demos/DashboardWrapper.tsx index 135bb1f4565..88ff501986b 100644 --- a/packages/react-table/src/demos/DashboardWrapper.tsx +++ b/packages/react-table/src/demos/DashboardWrapper.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { Breadcrumb, BreadcrumbItem, + Content, Nav, NavItem, NavList, @@ -9,9 +10,7 @@ import { PageSection, PageSidebar, PageSidebarBody, - SkipToContent, - Text, - TextContent + SkipToContent } from '@patternfly/react-core'; import { DashboardHeader } from './DashboardHeader'; @@ -109,10 +108,10 @@ export const DashboardBreadcrumb = ( const PageTemplateTitle = ( <PageSection> - <TextContent> - <Text component="h1">Main title</Text> - <Text component="p">This is a full page demo.</Text> - </TextContent> + <Content> + <h1>Main title</h1> + <p>This is a full page demo.</p> + </Content> </PageSection> ); diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx index 9fadeac988b..926fce619dc 100644 --- a/packages/react-table/src/demos/examples/TableColumnManagement.tsx +++ b/packages/react-table/src/demos/examples/TableColumnManagement.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { Button, Card, + Content, DataList, DataListCheck, DataListItem, @@ -20,10 +21,7 @@ import { OverflowMenuItem, PageSection, Pagination, - PaginationVariant, - Text, - TextContent, - TextVariants + PaginationVariant } from '@patternfly/react-core'; import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; @@ -213,12 +211,12 @@ export const TableColumnManagement: React.FunctionComponent = () => { isOpen={isModalOpen} variant="small" description={ - <TextContent> - <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text> + <Content> + <p>Selected categories will be displayed in the table.</p> <Button isInline onClick={selectAllColumns} variant="link"> Select all </Button> - </TextContent> + </Content> } onClose={handleModalToggle} actions={[ diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx index f56db266632..061e511b4ac 100644 --- a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx +++ b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Button, + Content, DataList, DataListCheck, DataListControl, @@ -16,9 +17,6 @@ import { OverflowMenu, OverflowMenuGroup, OverflowMenuItem, - Text, - TextContent, - TextVariants, MenuToggle } from '@patternfly/react-core'; import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated'; @@ -427,12 +425,12 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () => isOpen={isModalOpen} variant="small" description={ - <TextContent> - <Text component={TextVariants.p}>Selected categories will be displayed in the table.</Text> + <Content> + <p>Selected categories will be displayed in the table.</p> <Button isInline onClick={selectAllColumns} variant="link"> Select all </Button> - </TextContent> + </Content> } onClose={handleModalToggle} actions={[ diff --git a/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx b/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx index 987dd21671f..0320c76a717 100644 --- a/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx +++ b/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx @@ -1,5 +1,5 @@ import React, { ReactNode } from 'react'; -import { Card, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core'; +import { Card, Content, Label, PageSection } from '@patternfly/react-core'; import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table'; import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper'; @@ -22,17 +22,17 @@ const serverData: Server[] = [ workspaces: 7, status: { title: <Label color="green">Running</Label> }, details: ( - <TextContent> - <Text component={TextVariants.p}> - Location<Text component={TextVariants.small}>Boston</Text> - </Text> - <Text component={TextVariants.p}> - Last Modified<Text component={TextVariants.small}>2 hours ago</Text> - </Text> - <Text component={TextVariants.p}> - URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node1</Text> - </Text> - </TextContent> + <Content> + <p> + Location<small>Boston</small> + </p> + <p> + Last Modified<small>2 hours ago</small> + </p> + <p> + URL<small>http://www.redhat.com/en/office-locations/US-node1</small> + </p> + </Content> ) }, { @@ -42,17 +42,17 @@ const serverData: Server[] = [ workspaces: 17, status: { title: <Label color="red">Down</Label> }, details: ( - <TextContent> - <Text component={TextVariants.p}> - Location<Text component={TextVariants.small}>Atlanta</Text> - </Text> - <Text component={TextVariants.p}> - Last Modified<Text component={TextVariants.small}>5 hours ago</Text> - </Text> - <Text component={TextVariants.p}> - URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node2</Text> - </Text> - </TextContent> + <Content> + <p> + Location<small>Atlanta</small> + </p> + <p> + Last Modified<small>5 hours ago</small> + </p> + <p> + URL<small>http://www.redhat.com/en/office-locations/US-node2</small> + </p> + </Content> ) }, { @@ -62,17 +62,17 @@ const serverData: Server[] = [ workspaces: 3, status: { title: <Label color="green">Running</Label> }, details: ( - <TextContent> - <Text component={TextVariants.p}> - Location<Text component={TextVariants.small}>San Francisco</Text> - </Text> - <Text component={TextVariants.p}> - Last Modified<Text component={TextVariants.small}>20 minutes ago</Text> - </Text> - <Text component={TextVariants.p}> - URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node3</Text> - </Text> - </TextContent> + <Content> + <p> + Location<small>San Francisco</small> + </p> + <p> + Last Modified<small>20 minutes ago</small> + </p> + <p> + URL<small>http://www.redhat.com/en/office-locations/US-node3</small> + </p> + </Content> ) }, { @@ -82,17 +82,17 @@ const serverData: Server[] = [ workspaces: 15, status: { title: <Label color="blue">Needs Maintenance</Label> }, details: ( - <TextContent> - <Text component={TextVariants.p}> - Location<Text component={TextVariants.small}>Raleigh</Text> - </Text> - <Text component={TextVariants.p}> - Last Modified<Text component={TextVariants.small}>10 minutes ago</Text> - </Text> - <Text component={TextVariants.p}> - URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node4</Text> - </Text> - </TextContent> + <Content> + <p> + Location<small>Raleigh</small> + </p> + <p> + Last Modified<small>10 minutes ago</small> + </p> + <p> + URL<small>http://www.redhat.com/en/office-locations/US-node4</small> + </p> + </Content> ) }, { @@ -102,17 +102,17 @@ const serverData: Server[] = [ workspaces: 17, status: { title: <Label color="orange">Stopped</Label> }, details: ( - <TextContent> - <Text component={TextVariants.p}> - Location<Text component={TextVariants.small}>Atlanta</Text> - </Text> - <Text component={TextVariants.p}> - Last Modified<Text component={TextVariants.small}>15 minutes ago</Text> - </Text> - <Text component={TextVariants.p}> - URL<Text component={TextVariants.small}>http://www.redhat.com/en/office-locations/US-node5</Text> - </Text> - </TextContent> + <Content> + <p> + Location<small>Atlanta</small> + </p> + <p> + Last Modified<small>15 minutes ago</small> + </p> + <p> + URL<small>http://www.redhat.com/en/office-locations/US-node5</small> + </p> + </Content> ) } ]; diff --git a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx index 8715a876143..e9fd5b02af9 100644 --- a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx +++ b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { Button, Card, + Content, Dropdown, DropdownList, Flex, @@ -14,8 +15,6 @@ import { SelectOption, SelectList, SelectGroup, - Text, - TextContent, Toolbar, ToolbarContent, ToolbarGroup, @@ -232,13 +231,13 @@ export const TableSortableResponsive: React.FunctionComponent = () => { <React.Fragment> <DashboardWrapper> <PageSection isWidthLimited variant={PageSectionVariants.light}> - <TextContent> - <Text component="h1">Table demos</Text> - <Text component="p"> + <Content> + <h1>Table demos</h1> + <p> Below is an example of a responsive sortable table. When the screen size shrinks the table into a compact form, the toolbar will display a dropdown menu containing sorting options. - </Text> - </TextContent> + </p> + </Content> </PageSection> <PageSection padding={{