From e6ff2d219bac42fa22353a9ebb1d3b26a8bbcba2 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Mon, 10 Jun 2024 18:43:52 +0200 Subject: [PATCH 1/5] feat(Content): introduce component (replacement for Text) --- .../src/components/Content/Content.tsx | 117 +++++++++++ .../Content/__tests__/Content.test.tsx | 188 ++++++++++++++++++ .../__snapshots__/Content.test.tsx.snap | 15 ++ .../components/Content/examples/Content.md | 60 ++++++ .../Content/examples/ContentBody.tsx | 26 +++ .../examples/ContentDescriptionList.tsx | 13 ++ .../Content/examples/ContentHeadings.tsx | 13 ++ .../Content/examples/ContentOrderedList.tsx | 14 ++ .../Content/examples/ContentPlainList.tsx | 24 +++ .../Content/examples/ContentUnorderedList.tsx | 17 ++ .../Content/examples/ContentVisited.tsx | 26 +++ .../Content/examples/ContentWrapper.tsx | 13 ++ .../src/components/Content/index.ts | 1 + packages/react-core/src/components/index.ts | 1 + 14 files changed, 528 insertions(+) create mode 100644 packages/react-core/src/components/Content/Content.tsx create mode 100644 packages/react-core/src/components/Content/__tests__/Content.test.tsx create mode 100644 packages/react-core/src/components/Content/__tests__/__snapshots__/Content.test.tsx.snap create mode 100644 packages/react-core/src/components/Content/examples/Content.md create mode 100644 packages/react-core/src/components/Content/examples/ContentBody.tsx create mode 100644 packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx create mode 100644 packages/react-core/src/components/Content/examples/ContentHeadings.tsx create mode 100644 packages/react-core/src/components/Content/examples/ContentOrderedList.tsx create mode 100644 packages/react-core/src/components/Content/examples/ContentPlainList.tsx create mode 100644 packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx create mode 100644 packages/react-core/src/components/Content/examples/ContentVisited.tsx create mode 100644 packages/react-core/src/components/Content/examples/ContentWrapper.tsx create mode 100644 packages/react-core/src/components/Content/index.ts 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..15f1e715a6e --- /dev/null +++ b/packages/react-core/src/components/Content/Content.tsx @@ -0,0 +1,117 @@ +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..7121aceccc5 --- /dev/null +++ b/packages/react-core/src/components/Content/__tests__/Content.test.tsx @@ -0,0 +1,188 @@ +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 "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.content} when no component prop is provided`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.content); +}); + +test(`Renders with class name ${styles.content} when component is 'ul', 'ol' or 'dl'`, () => { + render( + <> + Test1 + Test2 + Test3 + + ); + expect(screen.getByText('Test1')).toHaveClass(styles.content); + expect(screen.getByText('Test2')).toHaveClass(styles.content); + expect(screen.getByText('Test3')).toHaveClass(styles.content); +}); + +test(`Renders without class name ${styles.content} when component is provided and it is not a list`, () => { + 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/Content/__tests__/__snapshots__/Content.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/Content.test.tsx.snap new file mode 100644 index 00000000000..7abe54a6a73 --- /dev/null +++ b/packages/react-core/src/components/Content/__tests__/__snapshots__/Content.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +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..75f85cd0a72 --- /dev/null +++ b/packages/react-core/src/components/Content/examples/Content.md @@ -0,0 +1,60 @@ +--- +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`). + +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/Content/examples/ContentBody.tsx b/packages/react-core/src/components/Content/examples/ContentBody.tsx new file mode 100644 index 00000000000..c9c78f87bef --- /dev/null +++ b/packages/react-core/src/components/Content/examples/ContentBody.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Content } from '@patternfly/react-core'; + +export const ContentBody: React.FunctionComponent = () => ( + <> + <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! + </Content> + <Content component="p"> + Quisque ante lacus, malesuada ac auctor vitae, congue{' '} + <Content component="a" href="#"> + non ante + </Content> + . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus. + </Content> + <Content component="blockquote"> + Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet + turpis. + </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..c5cf3c85c67 --- /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"> + <dt>Web</dt> + <dd>The part of the Internet that contains websites and web pages</dd> + <dt>HTML</dt> + <dd>A markup language for creating web pages</dd> + <dt>CSS</dt> + <dd>A technology to make HTML look better</dd> + </Content> +); 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..ca72cdc5445 --- /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"> + <li>Donec blandit a lorem id convallis.</li> + <li>Cras gravida arcu at diam gravida gravida.</li> + <li>Integer in volutpat libero.</li> + <li>Donec a diam tellus.</li> + <li>Aenean nec tortor orci.</li> + <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li> + <li>Vivamus maximus ultricies pulvinar.</li> + </Content> +); 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..d867f4c7fd3 --- /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> + <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> + <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> + <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li> + <li>Ut non enim metus.</li> + </Content> + <Content component="h3">Plain ordered list</Content> + <Content component="ol" isPlainList> + <li>Donec blandit a lorem id convallis.</li> + <li>Cras gravida arcu at diam gravida gravida.</li> + <li>Integer in volutpat libero.</li> + <li>Donec a diam tellus.</li> + <li>Aenean nec tortor orci.</li> + <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li> + <li>Vivamus maximus ultricies pulvinar.</li> + </Content> + </> +); 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..95544e7e532 --- /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"> + <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> + <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> + <li> + Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. + <ul> + <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> + <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> + </ul> + </li> + <li>Ut non enim metus.</li> + </Content> +); 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..60df94190c0 --- /dev/null +++ b/packages/react-core/src/components/Content/examples/ContentVisited.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Content } from '@patternfly/react-core'; + +export const ContentVisited: React.FunctionComponent = () => ( + <> + <Content component="h5">Link with isVisitedLink prop</Content> + <p> + <Content component="a" isVisitedLink href="#"> + Click to visit link + </Content> + </p> + <br /> + <Content component="h5">Links wrapped in Content with isVisitedLink prop</Content> + <Content component="ul" isVisitedLink> + <li> + <a href="#1">Content link 1</a> + </li> + <li> + <a href="#2">Content link 2</a> + </li> + <li> + <a href="#3">Content link 3</a> + </li> + </Content> + </> +); 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/index.ts b/packages/react-core/src/components/index.ts index fcfc6b51e24..58ee3730f46 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'; From 3f72ce2daedb543af4772dad8437ea5844c0edf6 Mon Sep 17 00:00:00 2001 From: adamviktora <viktora.adam@gmail.com> Date: Thu, 13 Jun 2024 11:41:13 +0200 Subject: [PATCH 2/5] fix(Content): remove ability to be a content wrapper for lists, add tests --- .../src/components/Content/Content.tsx | 1 - .../Content/__tests__/Content.test.tsx | 105 +++++++++++++++--- 2 files changed, 91 insertions(+), 15 deletions(-) diff --git a/packages/react-core/src/components/Content/Content.tsx b/packages/react-core/src/components/Content/Content.tsx index 15f1e715a6e..dcb58030156 100644 --- a/packages/react-core/src/components/Content/Content.tsx +++ b/packages/react-core/src/components/Content/Content.tsx @@ -104,7 +104,6 @@ export const Content: React.FunctionComponent<ContentProps> = ({ data-pf-content className={css( componentStyles[wrappingComponent], - isList && styles.content, isList && isPlainList && styles.modifiers.plain, isVisitedLink && styles.modifiers.visited, className diff --git a/packages/react-core/src/components/Content/__tests__/Content.test.tsx b/packages/react-core/src/components/Content/__tests__/Content.test.tsx index 7121aceccc5..106db1279e9 100644 --- a/packages/react-core/src/components/Content/__tests__/Content.test.tsx +++ b/packages/react-core/src/components/Content/__tests__/Content.test.tsx @@ -102,25 +102,102 @@ test('Renders as "dd" element when component="dd"', () => { expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DD'); }); +test(`Renders with class name ${styles.contentH1} when component="h1"`, () => { + render(<Content component="h1">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentH1); +}); + +test(`Renders with class name ${styles.contentH2} when component="h2"`, () => { + render(<Content component="h2">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentH2); +}); + +test(`Renders with class name ${styles.contentH3} when component="h3"`, () => { + render(<Content component="h3">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentH3); +}); + +test(`Renders with class name ${styles.contentH4} when component="h4"`, () => { + render(<Content component="h4">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentH4); +}); + +test(`Renders with class name ${styles.contentH5} when component="h5"`, () => { + render(<Content component="h5">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentH5); +}); + +test(`Renders with class name ${styles.contentH6} when component="h6"`, () => { + render(<Content component="h6">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentH6); +}); + +test(`Renders with class name ${styles.contentP} when component="p"`, () => { + render(<Content component="p">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentP); +}); + +test(`Renders with class name ${styles.contentA} when component="a"`, () => { + render(<Content component="a">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentA); +}); + +test(`Renders with class name ${styles.contentSmall} when component="small"`, () => { + render(<Content component="small">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentSmall); +}); + +test(`Renders with class name ${styles.contentBlockquote} when component="blockquote"`, () => { + render(<Content component="blockquote">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentBlockquote); +}); + +test(`Renders with class name ${styles.contentPre} when component="pre"`, () => { + render(<Content component="pre">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentPre); +}); + +test(`Renders with class name ${styles.contentHr} when component="hr"`, () => { + render(<Content component="hr">Test</Content>); + expect(screen.getByRole('separator')).toHaveClass(styles.contentHr); +}); + +test(`Renders with class name ${styles.contentUl} when component="ul"`, () => { + render(<Content component="ul">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentUl); +}); + +test(`Renders with class name ${styles.contentOl} when component="ol"`, () => { + render(<Content component="ol">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentOl); +}); + +test(`Renders with class name ${styles.contentDl} when component="dl"`, () => { + render(<Content component="dl">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentDl); +}); + +test(`Renders with class name ${styles.contentLi} when component="li"`, () => { + render(<Content component="li">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentLi); +}); + +test(`Renders with class name ${styles.contentDt} when component="dt"`, () => { + render(<Content component="dt">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentDt); +}); + +test(`Renders with class name ${styles.contentDd} when component="dd"`, () => { + render(<Content component="dd">Test</Content>); + expect(screen.getByText('Test')).toHaveClass(styles.contentDd); +}); + test(`Renders with class name ${styles.content} when no component prop is provided`, () => { render(<Content>Test</Content>); expect(screen.getByText('Test')).toHaveClass(styles.content); }); -test(`Renders with class name ${styles.content} when component is 'ul', 'ol' or 'dl'`, () => { - render( - <> - <Content component="ul">Test1</Content> - <Content component="ol">Test2</Content> - <Content component="dl">Test3</Content> - </> - ); - expect(screen.getByText('Test1')).toHaveClass(styles.content); - expect(screen.getByText('Test2')).toHaveClass(styles.content); - expect(screen.getByText('Test3')).toHaveClass(styles.content); -}); - -test(`Renders without class name ${styles.content} when component is provided and it is not a list`, () => { +test(`Renders without class name ${styles.content} when component is provided`, () => { render(<Content component="p">Test</Content>); expect(screen.getByText('Test')).not.toHaveClass(styles.content); }); From 534b5d3eb370792c1e5ede1e9019f8f3da923464 Mon Sep 17 00:00:00 2001 From: adamviktora <viktora.adam@gmail.com> Date: Thu, 13 Jun 2024 11:56:18 +0200 Subject: [PATCH 3/5] docs(Content): update examples and description --- .../components/Content/examples/Content.md | 2 + .../examples/ContentDescriptionList.tsx | 12 +++--- .../Content/examples/ContentOrderedList.tsx | 14 +++---- .../Content/examples/ContentPlainList.tsx | 22 +++++------ .../Content/examples/ContentUnorderedList.tsx | 18 ++++----- .../Content/examples/ContentVisited.tsx | 38 ++++++++++--------- 6 files changed, 56 insertions(+), 50 deletions(-) diff --git a/packages/react-core/src/components/Content/examples/Content.md b/packages/react-core/src/components/Content/examples/Content.md index 75f85cd0a72..ca905087859 100644 --- a/packages/react-core/src/components/Content/examples/Content.md +++ b/packages/react-core/src/components/Content/examples/Content.md @@ -7,6 +7,8 @@ propComponents: ['Content'] The `<Content>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property - `h1` through `h6`, `p`, `a`, `small`, `blockquote`, `pre`, `hr`, list components (`ul`, `ol`, `dl`) and list items (`li`, `dt`, `dd`). +If you use <Content> without a component property, it will style all its child elements. If you want to style only a single element, e.g. `h1`, use `<Content component="h1">`. + To prevent styling issues, you should use `<Content>` component's properties instead of using seperate components. For example, rather than nesting the `<List>` and `<Title>` components within `<Content>`, you should use `<Content component="ul">` and `<Content component="h1">` or nest html elements within `<Content>`. Similarly, when you need to add a divider, rather than passing in a separate `<Divider>` component, you should use `<Content component="hr">`, which will be styled as a divider. ## Examples diff --git a/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx b/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx index c5cf3c85c67..d67fcbffbba 100644 --- a/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx @@ -3,11 +3,11 @@ import { Content } from '@patternfly/react-core'; export const ContentDescriptionList: React.FunctionComponent = () => ( <Content component="dl"> - <dt>Web</dt> - <dd>The part of the Internet that contains websites and web pages</dd> - <dt>HTML</dt> - <dd>A markup language for creating web pages</dd> - <dt>CSS</dt> - <dd>A technology to make HTML look better</dd> + <Content component="dt">Web</Content> + <Content component="dd">The part of the Internet that contains websites and web pages</Content> + <Content component="dt">HTML</Content> + <Content component="dd">A markup language for creating web pages</Content> + <Content component="dt">CSS</Content> + <Content component="dd">A technology to make HTML look better</Content> </Content> ); diff --git a/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx b/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx index ca72cdc5445..e4642593c35 100644 --- a/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx @@ -3,12 +3,12 @@ import { Content } from '@patternfly/react-core'; export const ContentOrderedList: React.FunctionComponent = () => ( <Content component="ol"> - <li>Donec blandit a lorem id convallis.</li> - <li>Cras gravida arcu at diam gravida gravida.</li> - <li>Integer in volutpat libero.</li> - <li>Donec a diam tellus.</li> - <li>Aenean nec tortor orci.</li> - <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li> - <li>Vivamus maximus ultricies pulvinar.</li> + <Content component="li">Donec blandit a lorem id convallis.</Content> + <Content component="li">Cras gravida arcu at diam gravida gravida.</Content> + <Content component="li">Integer in volutpat libero.</Content> + <Content component="li">Donec a diam tellus.</Content> + <Content component="li">Aenean nec tortor orci.</Content> + <Content component="li">Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content> + <Content component="li">Vivamus maximus ultricies pulvinar.</Content> </Content> ); diff --git a/packages/react-core/src/components/Content/examples/ContentPlainList.tsx b/packages/react-core/src/components/Content/examples/ContentPlainList.tsx index d867f4c7fd3..0fad94e2b9e 100644 --- a/packages/react-core/src/components/Content/examples/ContentPlainList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentPlainList.tsx @@ -5,20 +5,20 @@ export const ContentPlainList: React.FunctionComponent = () => ( <> <Content component="h3">Plain unordered list</Content> <Content component="ul" isPlainList> - <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> - <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> - <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li> - <li>Ut non enim metus.</li> + <Content component="li">In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content> + <Content component="li">Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content> + <Content component="li">Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</Content> + <Content component="li">Ut non enim metus.</Content> </Content> <Content component="h3">Plain ordered list</Content> <Content component="ol" isPlainList> - <li>Donec blandit a lorem id convallis.</li> - <li>Cras gravida arcu at diam gravida gravida.</li> - <li>Integer in volutpat libero.</li> - <li>Donec a diam tellus.</li> - <li>Aenean nec tortor orci.</li> - <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li> - <li>Vivamus maximus ultricies pulvinar.</li> + <Content component="li">Donec blandit a lorem id convallis.</Content> + <Content component="li">Cras gravida arcu at diam gravida gravida.</Content> + <Content component="li">Integer in volutpat libero.</Content> + <Content component="li">Donec a diam tellus.</Content> + <Content component="li">Aenean nec tortor orci.</Content> + <Content component="li">Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content> + <Content component="li">Vivamus maximus ultricies pulvinar.</Content> </Content> </> ); diff --git a/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx b/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx index 95544e7e532..c1494bb512e 100644 --- a/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx @@ -3,15 +3,15 @@ import { Content } from '@patternfly/react-core'; export const ContentUnorderedList: React.FunctionComponent = () => ( <Content component="ul"> - <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> - <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> - <li> + <Content component="li">In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content> + <Content component="li">Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content> + <Content component="li"> Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. - <ul> - <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> - <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> - </ul> - </li> - <li>Ut non enim metus.</li> + <Content component="ul"> + <Content component="li">In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content> + <Content component="li">Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content> + </Content> + </Content> + <Content component="li">Ut non enim metus.</Content> </Content> ); diff --git a/packages/react-core/src/components/Content/examples/ContentVisited.tsx b/packages/react-core/src/components/Content/examples/ContentVisited.tsx index 60df94190c0..f1ae107ae5b 100644 --- a/packages/react-core/src/components/Content/examples/ContentVisited.tsx +++ b/packages/react-core/src/components/Content/examples/ContentVisited.tsx @@ -3,24 +3,28 @@ import { Content } from '@patternfly/react-core'; export const ContentVisited: React.FunctionComponent = () => ( <> - <Content component="h5">Link with isVisitedLink prop</Content> - <p> - <Content component="a" isVisitedLink href="#"> - Click to visit link - </Content> - </p> + <Content> + <h5>Link with isVisitedLink prop</h5> + <p> + <Content component="a" isVisitedLink href="#"> + Click to visit link + </Content> + </p> + </Content> <br /> - <Content component="h5">Links wrapped in Content with isVisitedLink prop</Content> - <Content component="ul" isVisitedLink> - <li> - <a href="#1">Content link 1</a> - </li> - <li> - <a href="#2">Content link 2</a> - </li> - <li> - <a href="#3">Content link 3</a> - </li> + <Content isVisitedLink> + <h5>Links wrapped in Content with isVisitedLink prop</h5> + <ul> + <li> + <a href="#1">Content link 1</a> + </li> + <li> + <a href="#2">Content link 2</a> + </li> + <li> + <a href="#3">Content link 3</a> + </li> + </ul> </Content> </> ); From 2ed3db7e75a8dababa844055fd42cae03d044945 Mon Sep 17 00:00:00 2001 From: adamviktora <viktora.adam@gmail.com> Date: Thu, 13 Jun 2024 14:11:55 +0200 Subject: [PATCH 4/5] fix(Content): fix <hr> test --- .../src/components/Content/__tests__/Content.test.tsx | 7 ++++++- .../react-core/src/components/Content/examples/Content.md | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Content/__tests__/Content.test.tsx b/packages/react-core/src/components/Content/__tests__/Content.test.tsx index 106db1279e9..63b922e9c3a 100644 --- a/packages/react-core/src/components/Content/__tests__/Content.test.tsx +++ b/packages/react-core/src/components/Content/__tests__/Content.test.tsx @@ -72,6 +72,11 @@ test('Renders as "pre" element when component="pre"', () => { expect(screen.getByText('Test')).toHaveProperty('nodeName', 'PRE'); }); +test('Renders as "hr" element when component="hr"', () => { + render(<Content component="hr" />); + expect(screen.getByRole('separator')).toHaveProperty('nodeName', 'HR'); +}); + test('Renders as "ul" element component="ul"', () => { render(<Content component="ul">Test</Content>); expect(screen.getByText('Test')).toHaveProperty('nodeName', 'UL'); @@ -158,7 +163,7 @@ test(`Renders with class name ${styles.contentPre} when component="pre"`, () => }); test(`Renders with class name ${styles.contentHr} when component="hr"`, () => { - render(<Content component="hr">Test</Content>); + render(<Content component="hr" />); expect(screen.getByRole('separator')).toHaveClass(styles.contentHr); }); diff --git a/packages/react-core/src/components/Content/examples/Content.md b/packages/react-core/src/components/Content/examples/Content.md index ca905087859..ba8d7410f48 100644 --- a/packages/react-core/src/components/Content/examples/Content.md +++ b/packages/react-core/src/components/Content/examples/Content.md @@ -7,7 +7,7 @@ propComponents: ['Content'] The `<Content>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property - `h1` through `h6`, `p`, `a`, `small`, `blockquote`, `pre`, `hr`, list components (`ul`, `ol`, `dl`) and list items (`li`, `dt`, `dd`). -If you use <Content> without a component property, it will style all its child elements. If you want to style only a single element, e.g. `h1`, use `<Content component="h1">`. +If you use `<Content>` without a component property, it will style all its child elements. If you want to style only a single element, e.g. `h1`, use `<Content component="h1">`. To prevent styling issues, you should use `<Content>` component's properties instead of using seperate components. For example, rather than nesting the `<List>` and `<Title>` 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. From 95f00d9724a8507870924661e44fa3829fe5f874 Mon Sep 17 00:00:00 2001 From: adamviktora <viktora.adam@gmail.com> Date: Thu, 13 Jun 2024 15:13:18 +0200 Subject: [PATCH 5/5] feat(misc): replace Text with Content --- .../AboutModal/examples/AboutModalBasic.tsx | 38 +++--- ...AboutModalComplexUserPositionedContent.tsx | 42 +++---- .../examples/AboutModalWithoutProductName.tsx | 38 +++--- .../examples/DataListWidthModifiers.tsx | 16 +-- .../components/Icon/examples/IconInline.tsx | 22 ++-- .../Modal/examples/ModalCustomHeader.tsx | 6 +- .../Slider/examples/SliderActions.tsx | 4 +- .../Slider/examples/SliderContinuous.tsx | 6 +- .../Slider/examples/SliderDisabled.tsx | 4 +- .../Slider/examples/SliderDiscrete.tsx | 28 ++--- .../Spinner/examples/SpinnerInline.tsx | 22 ++-- .../react-core/src/components/Text/Text.tsx | 76 ------------ .../src/components/Text/TextContent.tsx | 25 ---- .../src/components/Text/TextList.tsx | 43 ------- .../src/components/Text/TextListItem.tsx | 40 ------- .../__tests__/Generated/TextContent.test.tsx | 13 -- .../__tests__/Generated/TextList.test.tsx | 13 -- .../__tests__/Generated/TextListItem.test.tsx | 13 -- .../__snapshots__/TextContent.test.tsx.snap | 11 -- .../__snapshots__/TextList.test.tsx.snap | 11 -- .../__snapshots__/TextListItem.test.tsx.snap | 11 -- .../components/Text/__tests__/Text.test.tsx | 96 --------------- .../Text/__tests__/TextContent.test.tsx | 48 -------- .../Text/__tests__/TextList.test.tsx | 52 -------- .../Text/__tests__/TextListItem.test.tsx | 47 -------- .../__snapshots__/Text.test.tsx.snap | 15 --- .../__snapshots__/TextContent.test.tsx.snap | 11 -- .../__snapshots__/TextList.test.tsx.snap | 11 -- .../__snapshots__/TextListItem.test.tsx.snap | 11 -- .../src/components/Text/examples/Text.md | 59 +-------- .../src/components/Text/examples/TextBody.tsx | 24 ---- .../Text/examples/TextContentWrapped.tsx | 11 -- .../Text/examples/TextDescriptionList.tsx | 15 --- .../components/Text/examples/TextHeadings.tsx | 13 -- .../Text/examples/TextOrderedList.tsx | 14 --- .../Text/examples/TextPlainList.tsx | 24 ---- .../Text/examples/TextUnorderedList.tsx | 17 --- .../components/Text/examples/TextVisited.tsx | 34 ------ .../react-core/src/components/Text/index.ts | 4 - packages/react-core/src/components/index.ts | 1 - packages/react-core/src/demos/Banner.md | 35 ++---- .../src/demos/CardView/examples/CardView.tsx | 11 +- .../react-core/src/demos/DashboardWrapper.tsx | 13 +- .../demos/DataList/examples/DataListBasic.tsx | 34 +++--- .../DataListExpandableControlInToolbar.tsx | 13 +- packages/react-core/src/demos/JumpLinks.md | 6 +- .../examples/NotificationDrawerBasic.tsx | 13 +- .../examples/NotificationDrawerGrouped.tsx | 13 +- .../src/demos/RTL/examples/PaginatedTable.jsx | 12 +- .../src/demos/RTL/examples/PaginatedTable.tsx | 12 +- .../AlertGroupToastWithNotificationDrawer.tsx | 21 ++-- .../examples/BackToTop/BackToTopNameDemo.tsx | 13 +- .../src/demos/examples/DashboardWrapper.js | 13 +- .../examples/JumpLinks/JumpLinksWithDrawer.js | 6 +- ...stheadWithUtilitiesAndUserDropdownMenu.tsx | 11 +- .../src/demos/examples/Nav/NavDefault.tsx | 15 ++- .../src/demos/examples/Nav/NavExpandable.tsx | 15 ++- .../src/demos/examples/Nav/NavGrouped.tsx | 15 ++- .../src/demos/examples/Nav/NavHorizontal.tsx | 13 +- .../examples/Nav/NavHorizontalWithSubnav.tsx | 13 +- .../src/demos/examples/Nav/NavManual.tsx | 13 +- .../src/demos/examples/Nav/NavWithSubnav.tsx | 15 ++- .../Page/PageStickySectionBreadcrumb.tsx | 11 +- .../examples/Page/PageStickySectionGroup.tsx | 11 +- .../Page/PageStickySectionGroupAlternate.tsx | 11 +- .../PrimaryDetail/PrimaryDetailCardView.tsx | 19 ++- .../PrimaryDetailContentPadding.tsx | 13 +- .../PrimaryDetailDataListInCard.tsx | 13 +- .../PrimaryDetail/PrimaryDetailFullPage.tsx | 13 +- .../PrimaryDetailInlineModifier.tsx | 13 +- .../PrimaryDetailSimpleListInCard.tsx | 13 +- .../src/demos/examples/Tabs/ModalTabs.tsx | 11 +- .../examples/Tabs/NestedUnindentedTabs.tsx | 9 +- .../InModalWithDrawerInformationalStep.tsx | 10 +- .../examples/Wizard/InPageWithDrawer.tsx | 11 +- .../InPageWithDrawerInformationalStep.tsx | 17 ++- .../react-docs/patternfly-docs/pages/icons.js | 10 +- .../demos/AboutModal/AboutModalDemo.tsx | 38 +++--- .../demos/BackToTopDemo/BackToTopDemo.tsx | 22 +--- .../demos/TextAreaDemo/TextAreaDemo.tsx | 16 +-- .../demos/TextInputDemo/TextInputDemo.tsx | 10 +- .../src/demos/DashboardWrapper.tsx | 13 +- .../demos/examples/TableColumnManagement.tsx | 12 +- .../TableColumnManagementWithDraggable.tsx | 10 +- .../demos/examples/TableExpandCollapseAll.tsx | 112 +++++++++--------- .../examples/TableSortableResponsive.tsx | 13 +- 86 files changed, 453 insertions(+), 1292 deletions(-) delete mode 100644 packages/react-core/src/components/Text/Text.tsx delete mode 100644 packages/react-core/src/components/Text/TextContent.tsx delete mode 100644 packages/react-core/src/components/Text/TextList.tsx delete mode 100644 packages/react-core/src/components/Text/TextListItem.tsx delete mode 100644 packages/react-core/src/components/Text/__tests__/Generated/TextContent.test.tsx delete mode 100644 packages/react-core/src/components/Text/__tests__/Generated/TextList.test.tsx delete mode 100644 packages/react-core/src/components/Text/__tests__/Generated/TextListItem.test.tsx delete mode 100644 packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap delete mode 100644 packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap delete mode 100644 packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap delete mode 100644 packages/react-core/src/components/Text/__tests__/Text.test.tsx delete mode 100644 packages/react-core/src/components/Text/__tests__/TextContent.test.tsx delete mode 100644 packages/react-core/src/components/Text/__tests__/TextList.test.tsx delete mode 100644 packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx delete mode 100644 packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap delete mode 100644 packages/react-core/src/components/Text/__tests__/__snapshots__/TextContent.test.tsx.snap delete mode 100644 packages/react-core/src/components/Text/__tests__/__snapshots__/TextList.test.tsx.snap delete mode 100644 packages/react-core/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap delete mode 100644 packages/react-core/src/components/Text/examples/TextBody.tsx delete mode 100644 packages/react-core/src/components/Text/examples/TextContentWrapped.tsx delete mode 100644 packages/react-core/src/components/Text/examples/TextDescriptionList.tsx delete mode 100644 packages/react-core/src/components/Text/examples/TextHeadings.tsx delete mode 100644 packages/react-core/src/components/Text/examples/TextOrderedList.tsx delete mode 100644 packages/react-core/src/components/Text/examples/TextPlainList.tsx delete mode 100644 packages/react-core/src/components/Text/examples/TextUnorderedList.tsx delete mode 100644 packages/react-core/src/components/Text/examples/TextVisited.tsx delete mode 100644 packages/react-core/src/components/Text/index.ts 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" > - <TextContent> - <TextList component="dl"> - <TextListItem component="dt">CFME version</TextListItem> - <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem> - <TextListItem component="dt">Cloudforms Version</TextListItem> - <TextListItem component="dd">4.1</TextListItem> - <TextListItem component="dt">Server name</TextListItem> - <TextListItem component="dd">40DemoMaster</TextListItem> - <TextListItem component="dt">User name</TextListItem> - <TextListItem component="dd">Administrator</TextListItem> - <TextListItem component="dt">User role</TextListItem> - <TextListItem component="dd">EvmRole-super_administrator</TextListItem> - <TextListItem component="dt">Browser version</TextListItem> - <TextListItem component="dd">601.2</TextListItem> - <TextListItem component="dt">Browser OS</TextListItem> - <TextListItem component="dd">Mac</TextListItem> - </TextList> - </TextContent> + <Content> + <dl> + <dt>CFME version</dt> + <dd>5.5.3.4.20102789036450</dd> + <dt>Cloudforms Version</dt> + <dd>4.1</dd> + <dt>Server name</dt> + <dd>40DemoMaster</dd> + <dt>User name</dt> + <dd>Administrator</dd> + <dt>User role</dt> + <dd>EvmRole-super_administrator</dd> + <dt>Browser version</dt> + <dd>601.2</dd> + <dt>Browser OS</dt> + <dd>Mac</dd> + </dl> + </Content> </AboutModal> </React.Fragment> ); diff --git a/packages/react-core/src/components/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" > - <TextContent id="test1" className={spacing.pyXl}> + <Content id="test1" className={spacing.pyXl}> <h4>About</h4> <p>Content here</p> - </TextContent> + </Content> <Alert variant="info" title="Updates available" /> - <TextContent id="test2" className={spacing.pyXl}> - <TextList component="dl"> - <TextListItem component="dt">CFME version</TextListItem> - <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem> - <TextListItem component="dt">Cloudforms version</TextListItem> - <TextListItem component="dd">4.1</TextListItem> - <TextListItem component="dt">Server name</TextListItem> - <TextListItem component="dd">40DemoMaster</TextListItem> - <TextListItem component="dt">User name</TextListItem> - <TextListItem component="dd">Administrator</TextListItem> - <TextListItem component="dt">User role</TextListItem> - <TextListItem component="dd">EvmRole-super_administrator</TextListItem> - <TextListItem component="dt">Browser version</TextListItem> - <TextListItem component="dd">601.2</TextListItem> - <TextListItem component="dt">Browser OS</TextListItem> - <TextListItem component="dd">Mac</TextListItem> - </TextList> - </TextContent> + <Content id="test2" className={spacing.pyXl}> + <dl> + <dt>CFME version</dt> + <dd>5.5.3.4.20102789036450</dd> + <dt>Cloudforms version</dt> + <dd>4.1</dd> + <dt>Server name</dt> + <dd>40DemoMaster</dd> + <dt>User name</dt> + <dd>Administrator</dd> + <dt>User role</dt> + <dd>EvmRole-super_administrator</dd> + <dt>Browser version</dt> + <dd>601.2</dd> + <dt>Browser OS</dt> + <dd>Mac</dd> + </dl> + </Content> </AboutModal> </React.Fragment> ); diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx 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" > - <TextContent> - <TextList component="dl"> - <TextListItem component="dt">CFME version</TextListItem> - <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem> - <TextListItem component="dt">Cloudforms version</TextListItem> - <TextListItem component="dd">4.1</TextListItem> - <TextListItem component="dt">Server name</TextListItem> - <TextListItem component="dd">40DemoMaster</TextListItem> - <TextListItem component="dt">User name</TextListItem> - <TextListItem component="dd">Administrator</TextListItem> - <TextListItem component="dt">User role</TextListItem> - <TextListItem component="dd">EvmRole-super_administrator</TextListItem> - <TextListItem component="dt">Browser version</TextListItem> - <TextListItem component="dd">601.2</TextListItem> - <TextListItem component="dt">Browser OS</TextListItem> - <TextListItem component="dd">Mac</TextListItem> - </TextList> - </TextContent> + <Content> + <dl> + <dt>CFME version</dt> + <dd>5.5.3.4.20102789036450</dd> + <dt>Cloudforms version</dt> + <dd>4.1</dd> + <dt>Server name</dt> + <dd>40DemoMaster</dd> + <dt>User name</dt> + <dd>Administrator</dd> + <dt>User role</dt> + <dd>EvmRole-super_administrator</dd> + <dt>Browser version</dt> + <dd>601.2</dd> + <dt>Browser OS</dt> + <dd>Mac</dd> + </dl> + </Content> </AboutModal> </React.Fragment> ); diff --git a/packages/react-core/src/components/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__/Text.test.tsx.snap b/packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap deleted file mode 100644 index 3eb559d2dd2..00000000000 --- a/packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap +++ /dev/null @@ -1,15 +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__/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/TextBody.tsx b/packages/react-core/src/components/Text/examples/TextBody.tsx deleted file mode 100644 index 88fa3a9b4da..00000000000 --- a/packages/react-core/src/components/Text/examples/TextBody.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { Text, TextVariants } from '@patternfly/react-core'; - -export const TextBody: React.FunctionComponent = () => ( - <> - <Text component={TextVariants.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}> - Quisque ante lacus, malesuada ac auctor vitae, congue{' '} - <Text component={TextVariants.a} href="#"> - non ante - </Text> - . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus. - </Text> - <Text component={TextVariants.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> - </> -); 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 58ee3730f46..681a6834e64 100644 --- a/packages/react-core/src/components/index.ts +++ b/packages/react-core/src/components/index.ts @@ -63,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={{