diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 3d26d5c07fb..fe42589a789 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -11,15 +11,16 @@ jobs: name: CI uses: ./.github/workflows/main.yml - docs: - name: Documentation - uses: ./.github/workflows/documentation.yml - secrets: inherit + # docs: + # name: Documentation + # uses: ./.github/workflows/documentation.yml + # secrets: inherit deploy: name: Deploy release runs-on: ubuntu-latest - needs: [ci, docs] + # needs: [ci, docs] + needs: [ci] steps: - name: Check out project uses: actions/checkout@v4 diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx index 352279e84c3..fd3fee9073c 100644 --- a/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx +++ b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core'; +import { AboutModal, Button, Content } from '@patternfly/react-core'; import brandImg from '../../assets/PF-IconLogo.svg'; export const AboutModalBasic: React.FunctionComponent = () => { @@ -23,24 +23,24 @@ export const AboutModalBasic: React.FunctionComponent = () => { backgroundImageSrc="/assets/images/pf-background.svg" productName="name" > - - - CFME version - 5.5.3.4.20102789036450 - Cloudforms Version - 4.1 - Server name - 40DemoMaster - User name - Administrator - User role - EvmRole-super_administrator - Browser version - 601.2 - Browser OS - Mac - - + +
+
CFME version
+
5.5.3.4.20102789036450
+
Cloudforms Version
+
4.1
+
Server name
+
40DemoMaster
+
User name
+
Administrator
+
User role
+
EvmRole-super_administrator
+
Browser version
+
601.2
+
Browser OS
+
Mac
+
+ ); diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx index 750e8a73685..70a6fee69a7 100644 --- a/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx +++ b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core'; +import { AboutModal, Alert, Button, Content } from '@patternfly/react-core'; import brandImg from '../../assets/PF-IconLogo.svg'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; @@ -25,29 +25,29 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = ( hasNoContentContainer={true} productName="Product name" > - +

About

Content here

- + - - - CFME version - 5.5.3.4.20102789036450 - Cloudforms version - 4.1 - Server name - 40DemoMaster - User name - Administrator - User role - EvmRole-super_administrator - Browser version - 601.2 - Browser OS - Mac - - + +
+
CFME version
+
5.5.3.4.20102789036450
+
Cloudforms version
+
4.1
+
Server name
+
40DemoMaster
+
User name
+
Administrator
+
User role
+
EvmRole-super_administrator
+
Browser version
+
601.2
+
Browser OS
+
Mac
+
+ ); diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx index a83de36d5ad..0835aa257b2 100644 --- a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx +++ b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core'; +import { AboutModal, Button, Content } from '@patternfly/react-core'; import brandImg from '../../assets/PF-IconLogo.svg'; export const AboutModalWithoutProductName: React.FunctionComponent = () => { @@ -23,24 +23,24 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => { backgroundImageSrc="/assets/images/pf-background.svg" aria-label="No product name about modal" > - - - CFME version - 5.5.3.4.20102789036450 - Cloudforms version - 4.1 - Server name - 40DemoMaster - User name - Administrator - User role - EvmRole-super_administrator - Browser version - 601.2 - Browser OS - Mac - - + +
+
CFME version
+
5.5.3.4.20102789036450
+
Cloudforms version
+
4.1
+
Server name
+
40DemoMaster
+
User name
+
Administrator
+
User role
+
EvmRole-super_administrator
+
Browser version
+
601.2
+
Browser OS
+
Mac
+
+ ); diff --git a/packages/react-core/src/components/Content/Content.tsx b/packages/react-core/src/components/Content/Content.tsx index 15780f89c0e..dcb58030156 100644 --- a/packages/react-core/src/components/Content/Content.tsx +++ b/packages/react-core/src/components/Content/Content.tsx @@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Content/content'; import { useOUIAProps, OUIAProps } from '../../helpers'; -export enum TextVariants { +export enum ContentVariants { h1 = 'h1', h2 = 'h2', h3 = 'h3', @@ -24,7 +24,7 @@ export enum TextVariants { dd = 'dd' } -export interface TextProps extends React.HTMLProps, OUIAProps { +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' @@ -81,7 +81,7 @@ const componentStyles = { dd: styles.contentDd }; -export const Text: React.FunctionComponent = ({ +export const Content: React.FunctionComponent = ({ children, className = '', component, @@ -90,10 +90,10 @@ export const Text: React.FunctionComponent = ({ ouiaId, ouiaSafe = true, ...props -}: TextProps) => { +}: ContentProps) => { const wrappingComponent = component ?? 'div'; const Component: any = wrappingComponent; - const ouiaProps = useOUIAProps(Text.displayName, ouiaId, ouiaSafe); + const ouiaProps = useOUIAProps(Content.displayName, ouiaId, ouiaSafe); const isList = ['ul', 'ol', 'dl'].includes(wrappingComponent); @@ -113,4 +113,4 @@ export const Text: React.FunctionComponent = ({ ); }; -Text.displayName = 'Text'; +Content.displayName = 'Content'; diff --git a/packages/react-core/src/components/Content/TextContent.tsx b/packages/react-core/src/components/Content/TextContent.tsx deleted file mode 100644 index b7df9cfa2f6..00000000000 --- a/packages/react-core/src/components/Content/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/Content/TextList.tsx b/packages/react-core/src/components/Content/TextList.tsx deleted file mode 100644 index ebceb43dee7..00000000000 --- a/packages/react-core/src/components/Content/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/Content/TextListItem.tsx b/packages/react-core/src/components/Content/TextListItem.tsx deleted file mode 100644 index 8aedef965fb..00000000000 --- a/packages/react-core/src/components/Content/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/Content/__tests__/Content.test.tsx b/packages/react-core/src/components/Content/__tests__/Content.test.tsx index 13711a4f56b..63b922e9c3a 100644 --- a/packages/react-core/src/components/Content/__tests__/Content.test.tsx +++ b/packages/react-core/src/components/Content/__tests__/Content.test.tsx @@ -1,96 +1,270 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; -import { Text } from '../Content'; +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); + render(Test); expect(screen.getByText('Test')).toBeVisible(); }); test('Renders with custom class name when className prop is provided', () => { - render(Test); + render(Test); expect(screen.getByText('Test')).toHaveClass('custom-class'); }); test('Renders as "div" element by default', () => { - render(Test); + render(Test); expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DIV'); }); test('Renders as "h1" element when component="h1"', () => { - render(Test); + render(Test); expect(screen.getByRole('heading', { level: 1 })).toBeVisible(); }); test('Renders as "h2" element when component="h2"', () => { - render(Test); + render(Test); expect(screen.getByRole('heading', { level: 2 })).toBeVisible(); }); test('Renders as "h3" element when component="h3"', () => { - render(Test); + render(Test); expect(screen.getByRole('heading', { level: 3 })).toBeVisible(); }); test('Renders as "h4" element when component="h4"', () => { - render(Test); + render(Test); expect(screen.getByRole('heading', { level: 4 })).toBeVisible(); }); test('Renders as "h5" element when component="h5"', () => { - render(Test); + render(Test); expect(screen.getByRole('heading', { level: 5 })).toBeVisible(); }); test('Renders as "h6" element when component="h6"', () => { - render(Test); + render(Test); expect(screen.getByRole('heading', { level: 6 })).toBeVisible(); }); test('Renders as "a" element when component="a"', () => { - render(Test); + render(Test); expect(screen.getByText('Test')).toHaveProperty('nodeName', 'A'); }); test('Renders as "blockquote" element when component="blockquote"', () => { - render(Test); + render(Test); expect(screen.getByText('Test')).toHaveProperty('nodeName', 'BLOCKQUOTE'); }); test('Renders as "pre" element when component="pre"', () => { - render(Test); + render(Test); expect(screen.getByText('Test')).toHaveProperty('nodeName', 'PRE'); }); +test('Renders as "hr" element when component="hr"', () => { + render(); + expect(screen.getByRole('separator')).toHaveProperty('nodeName', 'HR'); +}); + +test('Renders as "ul" element component="ul"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'UL'); +}); + +test('Renders as "ol" element when component="ol"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'OL'); +}); + +test('Renders as "dl" element when component="dl"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL'); +}); + +test('Renders as "li" element when component="li"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'LI'); +}); + +test('Renders as "dt" element when component="dt"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DT'); +}); + +test('Renders as "dd" element when component="dd"', () => { + render(Test); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DD'); +}); + +test(`Renders with class name ${styles.contentH1} when component="h1"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH1); +}); + +test(`Renders with class name ${styles.contentH2} when component="h2"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH2); +}); + +test(`Renders with class name ${styles.contentH3} when component="h3"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH3); +}); + +test(`Renders with class name ${styles.contentH4} when component="h4"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH4); +}); + +test(`Renders with class name ${styles.contentH5} when component="h5"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH5); +}); + +test(`Renders with class name ${styles.contentH6} when component="h6"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentH6); +}); + +test(`Renders with class name ${styles.contentP} when component="p"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentP); +}); + +test(`Renders with class name ${styles.contentA} when component="a"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentA); +}); + +test(`Renders with class name ${styles.contentSmall} when component="small"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentSmall); +}); + +test(`Renders with class name ${styles.contentBlockquote} when component="blockquote"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentBlockquote); +}); + +test(`Renders with class name ${styles.contentPre} when component="pre"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentPre); +}); + +test(`Renders with class name ${styles.contentHr} when component="hr"`, () => { + render(); + expect(screen.getByRole('separator')).toHaveClass(styles.contentHr); +}); + +test(`Renders with class name ${styles.contentUl} when component="ul"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentUl); +}); + +test(`Renders with class name ${styles.contentOl} when component="ol"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentOl); +}); + +test(`Renders with class name ${styles.contentDl} when component="dl"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentDl); +}); + +test(`Renders with class name ${styles.contentLi} when component="li"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentLi); +}); + +test(`Renders with class name ${styles.contentDt} when component="dt"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentDt); +}); + +test(`Renders with class name ${styles.contentDd} when component="dd"`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.contentDd); +}); + +test(`Renders with class name ${styles.content} when no component prop is provided`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.content); +}); + +test(`Renders without class name ${styles.content} when component is provided`, () => { + render(Test); + expect(screen.getByText('Test')).not.toHaveClass(styles.content); +}); + +test(`Renders with class name pf-m-plain when isPlainList=true and component is 'ul', 'ol' or 'dl'`, () => { + render( + <> + + Test1 + + + Test2 + + + Test3 + + + ); + expect(screen.getByText('Test1')).toHaveClass('pf-m-plain'); + expect(screen.getByText('Test2')).toHaveClass('pf-m-plain'); + expect(screen.getByText('Test3')).toHaveClass('pf-m-plain'); +}); + +test(`Renders without class name pf-m-plain by default`, () => { + render(Test); + expect(screen.getByText('Test')).not.toHaveClass('pf-m-plain'); +}); + +test(`Renders without class name pf-m-plain when isPlainList=true, but component is not 'ul', 'ol' or 'dl'`, () => { + render( + + Test + + ); + expect(screen.getByText('Test')).not.toHaveClass('pf-m-plain'); +}); + test('Renders without class name pf-m-visited by default', () => { - render(Test); + 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"', () => { +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); + render(Test); expect(screen.getByText('Test')).toHaveAccessibleName('Test label'); }); test('Matches the snapshot', () => { - const { asFragment } = render(Test); + const { asFragment } = render(Test); expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Content/__tests__/Generated/TextContent.test.tsx b/packages/react-core/src/components/Content/__tests__/Generated/TextContent.test.tsx deleted file mode 100644 index c605ea9c28d..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/Generated/TextList.test.tsx b/packages/react-core/src/components/Content/__tests__/Generated/TextList.test.tsx deleted file mode 100644 index 8ca49dccde7..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/Generated/TextListItem.test.tsx b/packages/react-core/src/components/Content/__tests__/Generated/TextListItem.test.tsx deleted file mode 100644 index 04d86d2bc6c..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap deleted file mode 100644 index 2f445b62f7b..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/Generated/__snapshots__/TextList.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/Generated/__snapshots__/TextList.test.tsx.snap deleted file mode 100644 index e55fc4c9f8b..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap deleted file mode 100644 index 6fcd0810bad..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/TextContent.test.tsx b/packages/react-core/src/components/Content/__tests__/TextContent.test.tsx deleted file mode 100644 index 254b2d7bcd0..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/TextList.test.tsx b/packages/react-core/src/components/Content/__tests__/TextList.test.tsx deleted file mode 100644 index 76745221c5c..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/TextListItem.test.tsx b/packages/react-core/src/components/Content/__tests__/TextListItem.test.tsx deleted file mode 100644 index d966b8fda3f..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/__snapshots__/Content.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/Content.test.tsx.snap index ca4f2b1203a..7abe54a6a73 100644 --- 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 @@ -5,7 +5,7 @@ exports[`Matches the snapshot 1`] = `
    diff --git a/packages/react-core/src/components/Content/__tests__/__snapshots__/TextContent.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/TextContent.test.tsx.snap deleted file mode 100644 index 6e89543c768..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/__snapshots__/TextList.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/TextList.test.tsx.snap deleted file mode 100644 index 08ef0add850..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/__tests__/__snapshots__/TextListItem.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/TextListItem.test.tsx.snap deleted file mode 100644 index 514daf612d4..00000000000 --- a/packages/react-core/src/components/Content/__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/Content/examples/Content.md b/packages/react-core/src/components/Content/examples/Content.md index 170c085f210..3f6de645462 100644 --- a/packages/react-core/src/components/Content/examples/Content.md +++ b/packages/react-core/src/components/Content/examples/Content.md @@ -1,18 +1,26 @@ --- id: Content section: components -cssPrefix: pf-v5-c-content -propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem'] +cssPrefix: pf-v6-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`, 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. +The `` component allows you to establish a block of HTML content and apply simple, built-in styling. `` can be used for any element supported by the `component` property (including `h1` through `h6`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`). -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. +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. +For example, to create a level 1 heading, you should pass `component="h1"` to `<Content>`, instead of nesting a `<Title>` component within `<Content>`. Similarly, when you need to add a divider to a page, you should utilize the `hr` property of `<Content>` (which is styled as a divider), rather than using a separate `<Divider>` component. ## Examples +HTML elements wrapped by `<Content>` are styled by the content component. + +### Content as a wrapper + +```ts file="./ContentWrapper.tsx" + +``` + ### Headings ```ts file="./ContentHeadings.tsx" @@ -49,14 +57,6 @@ For example, rather than nesting the `<List>` and `<Title>` components within `< ``` -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="./ContentWrapper.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 index 922e90bce7a..b94e9e2c524 100644 --- a/packages/react-core/src/components/Content/examples/ContentBody.tsx +++ b/packages/react-core/src/components/Content/examples/ContentBody.tsx @@ -1,24 +1,26 @@ import React from 'react'; -import { Text, TextVariants } from '@patternfly/react-core'; +import { Content, ContentVariants } from '@patternfly/react-core'; export const ContentBody: React.FunctionComponent = () => ( <> - <Text component={TextVariants.p}> + <Content component={ContentVariants.p}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well! - </Text> - <Text component={TextVariants.p}> + </Content> + <Content component={ContentVariants.p}> Quisque ante lacus, malesuada ac auctor vitae, congue{' '} - <Text component={TextVariants.a} href="#"> + <Content component={ContentVariants.a} href="#"> non ante - </Text> + </Content> . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus. - </Text> - <Text component={TextVariants.blockquote}> + </Content> + <Content component={ContentVariants.blockquote}> Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis. - </Text> - <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text> + </Content> + <Content component={ContentVariants.small}> + Sometimes you need small text to display things like date created + </Content> </> ); diff --git a/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx b/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx index 6ffc2422ba6..7742ca50f94 100644 --- a/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx @@ -1,15 +1,13 @@ import React from 'react'; -import { TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core'; +import { Content, ContentVariants } from '@patternfly/react-core'; export const ContentDescriptionList: 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> + <Content component={ContentVariants.dl}> + <Content component={ContentVariants.dt}>Web</Content> + <Content component={ContentVariants.dd}>The part of the Internet that contains websites and web pages</Content> + <Content component={ContentVariants.dt}>HTML</Content> + <Content component={ContentVariants.dd}>A markup language for creating web pages</Content> + <Content component={ContentVariants.dt}>CSS</Content> + <Content component={ContentVariants.dd}>A technology to make HTML look better</Content> + </Content> ); diff --git a/packages/react-core/src/components/Content/examples/ContentHeadings.tsx b/packages/react-core/src/components/Content/examples/ContentHeadings.tsx index 0f222aee7ae..f0a6f4b3c0e 100644 --- a/packages/react-core/src/components/Content/examples/ContentHeadings.tsx +++ b/packages/react-core/src/components/Content/examples/ContentHeadings.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import { Text, TextVariants } from '@patternfly/react-core'; +import { Content, ContentVariants } from '@patternfly/react-core'; export const ContentHeadings: 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> + <Content component={ContentVariants.h1}>Hello World</Content> + <Content component={ContentVariants.h2}>Second level</Content> + <Content component={ContentVariants.h3}>Third level</Content> + <Content component={ContentVariants.h4}>Fourth level</Content> + <Content component={ContentVariants.h5}>Fifth level</Content> + <Content component={ContentVariants.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 index 08ddf3d79f0..24dd49c2c5d 100644 --- a/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import { TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; +import { Content, ContentVariants } from '@patternfly/react-core'; export const ContentOrderedList: 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> + <Content component={ContentVariants.ol}> + <Content component={ContentVariants.li}>Donec blandit a lorem id convallis.</Content> + <Content component={ContentVariants.li}>Cras gravida arcu at diam gravida gravida.</Content> + <Content component={ContentVariants.li}>Integer in volutpat libero.</Content> + <Content component={ContentVariants.li}>Donec a diam tellus.</Content> + <Content component={ContentVariants.li}>Aenean nec tortor orci.</Content> + <Content component={ContentVariants.li}>Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content> + <Content component={ContentVariants.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 aa55b8c36b7..e49e4512868 100644 --- a/packages/react-core/src/components/Content/examples/ContentPlainList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentPlainList.tsx @@ -1,24 +1,28 @@ import React from 'react'; -import { Text, TextVariants, TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; +import { Content, ContentVariants } from '@patternfly/react-core'; export const ContentPlainList: 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> + <Content component={ContentVariants.h3}>Plain unordered list</Content> + <Content component={ContentVariants.ul} isPlainList> + <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content> + <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content> + <Content component={ContentVariants.li}> + Aliquam nec felis in sapien venenatis viverra fermentum nec lectus. + </Content> + <Content component={ContentVariants.li}>Ut non enim metus.</Content> + </Content> + <Content component={ContentVariants.h3}>Plain ordered list</Content> + <Content component={ContentVariants.ol} isPlainList> + <Content component={ContentVariants.li}>Donec blandit a lorem id convallis.</Content> + <Content component={ContentVariants.li}> + {' '} + component={ContentVariants.li}Cras gravida arcu at diam gravida gravida. + </Content> + <Content component={ContentVariants.li}>Integer in volutpat libero.</Content> + <Content component={ContentVariants.li}>Aenean nec tortor orci.</Content> + <Content component={ContentVariants.li}>Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content> + <Content component={ContentVariants.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 30f5aaa486d..356edfe1b0f 100644 --- a/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx @@ -1,17 +1,17 @@ import React from 'react'; -import { TextList, TextListItem } from '@patternfly/react-core'; +import { Content, ContentVariants } from '@patternfly/react-core'; export const ContentUnorderedList: 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> + <Content component={ContentVariants.ul}> + <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content> + <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content> + <Content component={ContentVariants.li}> 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> + <Content component={ContentVariants.ul}> + <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content> + <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content> + </Content> + </Content> + <Content component={ContentVariants.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 1692938f52e..56fe72aa1b1 100644 --- a/packages/react-core/src/components/Content/examples/ContentVisited.tsx +++ b/packages/react-core/src/components/Content/examples/ContentVisited.tsx @@ -1,34 +1,34 @@ import React from 'react'; -import { TextContent, Text, TextVariants } from '@patternfly/react-core'; +import { Content, ContentVariants } from '@patternfly/react-core'; export const ContentVisited: React.FunctionComponent = () => ( <> - <TextContent> - <Text component={TextVariants.h3}>Link example</Text> - <Text component={TextVariants.p}> - <Text component={TextVariants.a} isVisitedLink href="#"> + <Content> + <Content component={ContentVariants.h3}>Link example</Content> + <Content component={ContentVariants.p}> + <Content component={ContentVariants.a} isVisitedLink href="#"> Click to visit link - </Text> - </Text> - </TextContent> + </Content> + </Content> + </Content> <br /> - <TextContent isVisited> - <Text component={TextVariants.h3}>Link content example</Text> - <Text component={TextVariants.p}> - <Text component={TextVariants.a} href="#"> + <Content isVisitedLink> + <Content component={ContentVariants.h3}>Link content example</Content> + <Content component={ContentVariants.p}> + <Content component={ContentVariants.a} href="#"> content link 1 - </Text> - </Text> - <Text component={TextVariants.p}> - <Text component={TextVariants.a} href="#"> + </Content> + </Content> + <Content component={ContentVariants.p}> + <Content component={ContentVariants.a} href="#"> content link 2 - </Text> - </Text> - <Text component={TextVariants.p}> - <Text component={TextVariants.a} href="#"> + </Content> + </Content> + <Content component={ContentVariants.p}> + <Content component={ContentVariants.a} href="#"> content link 3 - </Text> - </Text> - </TextContent> + </Content> + </Content> + </Content> </> ); diff --git a/packages/react-core/src/components/Content/examples/ContentWrapper.tsx b/packages/react-core/src/components/Content/examples/ContentWrapper.tsx index 8e2b9ed593e..e8ed09652c2 100644 --- a/packages/react-core/src/components/Content/examples/ContentWrapper.tsx +++ b/packages/react-core/src/components/Content/examples/ContentWrapper.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { TextContent, Text, TextVariants } from '@patternfly/react-core'; +import { Content, ContentVariants } from '@patternfly/react-core'; export const ContentWrapper: 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> + <Content> + <Content component={ContentVariants.p}> + Content with a component of type "p" still renders the same when wrapped with a Content. + </Content> + <p>If located within a wrapping Content, html elements are styled as well!</p> + </Content> ); diff --git a/packages/react-core/src/components/Content/index.ts b/packages/react-core/src/components/Content/index.ts index ef7483f3f13..b39182a1a2f 100644 --- a/packages/react-core/src/components/Content/index.ts +++ b/packages/react-core/src/components/Content/index.ts @@ -1,4 +1 @@ export * from './Content'; -export * from './TextContent'; -export * from './TextList'; -export * from './TextListItem'; diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx index 361c85aabb1..47c316c761e 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,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { return ( <> <div key="example-1"> - <TextContent> - <Text component={TextVariants.h4}>Default fitting - example 1</Text> - </TextContent> + <Content> + <h4>Default fitting - example 1</h4> + </Content> <DataList aria-label="Width modifier data list example 1"> <DataListItem aria-labelledby="width-ex1-item1"> <DataListItemRow> @@ -71,9 +69,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { </DataList> </div> <div key="example-2"> - <TextContent> - <Text component={TextVariants.h4}>Flex modifiers - example 2</Text> - </TextContent> + <Content> + <h4>Flex modifiers - example 2</h4> + </Content> <DataList aria-label="Width modifier data list example 2"> <DataListItem aria-labelledby="width-ex2-item1"> <DataListItemRow> @@ -139,9 +137,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => { </DataList> </div> <div key="example-3"> - <TextContent> - <Text component={TextVariants.h4}>Flex modifiers - example 3</Text> - </TextContent> + <Content> + <h4>Flex modifiers - example 3</h4> + </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..4337d03fd53 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,10 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => { aria-describedby="modal-custom-header-description" > <ModalHeader> - <TextContent> - <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}> - Custom header modal - + +

    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 23e21dfecb3..f5df5ce1e24 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'; @@ -64,7 +64,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/examples/Text.md b/packages/react-core/src/components/Text/examples/Text.md deleted file mode 100644 index 7cd1f5d7bd4..00000000000 --- a/packages/react-core/src/components/Text/examples/Text.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -id: Text -section: components -cssPrefix: pf-v5-c-content -propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem'] ---- - -The `` component has been renamed to [Content](/components/content). diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md index ac1b38cea37..7e01d57ab4c 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 { - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
    + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of it’s relative line height of 1.5. - - +

    +     @@ -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 { - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
    + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of it’s relative line height of 1.5. - - +

    +     diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx index 8b15178b537..32ff8a17d19 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 = () => { - - Projects - This is a demo that showcases PatternFly cards. - + +

    Projects

    +

    This is a demo that showcases PatternFly cards.

    +     {toolbarItems} 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 = ( - - Main title - This is a full page demo. - + +

    Main title

    +

    This is a full page demo.

    +     ); diff --git a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx index d006554ca47..3160a0f0f64 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, @@ -14,11 +15,7 @@ import { OverflowMenuControl, OverflowMenuItem, PageSection, - PageSectionVariants, Pagination, - Text, - TextContent, - TextVariants, Toolbar, ToolbarItem, ToolbarContent @@ -76,11 +73,11 @@ export const DataListBasic: React.FunctionComponent = () => { return ( - - - Projects - This is a demo that showcases PatternFly Data List - + + +

    Projects

    +

    This is a demo that showcases PatternFly data list

    +     @@ -94,13 +91,13 @@ export const DataListBasic: React.FunctionComponent = () => { - patternfly + patternfly - + Working repo for PatternFly - + @@ -139,10 +136,10 @@ export const DataListBasic: React.FunctionComponent = () => { - patternfly-elements + patternfly-elements - PatternFly elements + PatternFly elements @@ -191,7 +188,7 @@ export const DataListBasic: React.FunctionComponent = () => { - patternfly-unified-design-kit + patternfly-unified-design-kit , @@ -216,13 +213,13 @@ export const DataListBasic: React.FunctionComponent = () => { - patternfly + patternfly - + Working repo for PatternFly - + @@ -262,10 +259,10 @@ export const DataListBasic: React.FunctionComponent = () => { - patternfly-elements + patternfly-elements - PatternFly elements + PatternFly elements diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx index 71bfd2beff3..391be32e611 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, @@ -22,10 +23,7 @@ import { SearchInput, Tooltip, Icon, - PageSection, - PageSectionVariants, - Text, - TextContent + PageSection } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; @@ -135,11 +133,11 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () => return ( - - - Projects - This is a demo that showcases PatternFly Data List - + + +

    Projects

    +

    This is a demo that showcases PatternFly data list

    +     {renderToolbar()} diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx index 772ce127546..0c502dfceeb 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx @@ -5,12 +5,10 @@ import { DescriptionListGroup, DescriptionListDescription, PageSection, - PageSectionVariants, Card, CardBody, CardHeader, - TextContent, - Text, + Content, Title, Divider, Flex, @@ -21,11 +19,11 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard export const DescriptionListBasic: React.FunctionComponent = () => ( - - - Projects - This is a full page demo - + + + Projects + This is a full page demo + diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md index d7791146942..b871c508948 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'; @@ -101,7 +101,7 @@ ScrollspyH2 = () => { - + {headings.map(i => (

    @@ -128,7 +128,7 @@ ScrollspyH2 = () => {

    ))} -     +     diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx index e1eaa7f23a4..3489b984ef9 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, @@ -530,13 +529,13 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { mainContainerId={pageId} > - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
    + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of its relative line height of 1.5. - - +

    +     Panel section content diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx index 9fe635abc3b..c4b20f7f415 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, @@ -769,13 +768,13 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => { mainContainerId={pageId} > - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
    + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of its relative line height of 1.5. - - +

    +     Panel section content diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx index d644cfd34f0..5cf53cb3a26 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 = () => { - - {translation.title} - {translation.body} - + +

    {translation.title}

    +

    {translation.body}

    +     diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx index 7c69f8ebcc3..e56ee7f700f 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 = () => { - - {translation.title} - {translation.body} - + +

    {translation.title}

    +

    {translation.body}

    +     diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx index a22daa093be..87ecd8a90f9 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} > - - Alert Group with Notification Drawer demo - - 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. - - + +

    Alert group with notification drawer demo

    +

    + New alerts can be added with the following buttons. 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. +

    +     @@ -348,11 +347,11 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = () - +
    - Max displayed alerts - The maximum number of displayed alerts can be set below. -     +

    Max displayed alerts

    +

    Adjust the maximum number of displayed alerts.

    + { - - Main title - - Body text should be Overpass Regular at 16px.It should have leading of 24px because
    + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of it’s relative line height of 1.5. - +

    -     +     - - Main title - This is a full page demo. - + +

    Main title

    +

    This is a full page demo.

    +     ); 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 = () => {     - + {headings.map((heading) => (
    ))} -     +     diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx index 89e2cc91318..2095aee5257 100644 --- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx +++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx @@ -26,10 +26,8 @@ import { NavList, Page, PageSection, - PageSectionVariants, SkipToContent, - Text, - TextContent, + Content, Toolbar, ToolbarContent, ToolbarGroup, @@ -185,8 +183,8 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {     - - - Provided by Red Hat - - + + Provided by Red Hat +     @@ -620,11 +616,11 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => { return ( - - - Projects - This is a demo that showcases Patternfly Cards. - + + +

    Projects

    +

    This is a demo that showcases Patternfly cards.

    +     @@ -634,7 +630,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => { - + {drawerContent} diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx index febc308cfbd..db8e133396e 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, @@ -419,13 +418,13 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => { return ( - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
    + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of it's relative line height of 1.5. - - +

    +     diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx index 4ae445c4455..5bd10d19704 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, @@ -25,10 +26,7 @@ import { FlexItem, MenuToggle, PageSection, - PageSectionVariants, Progress, - Text, - TextContent, Title } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; @@ -183,14 +181,14 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => { return ( - - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
    + + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of it’s relative line height of 1.5. - - +

    +     diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx index a03235749d9..d732f222a62 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, @@ -419,13 +418,13 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => { return ( - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
    + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of it's relative line height of 1.5. - - +

    +     diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx index bf3a95b82ee..f12a64d5e65 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, @@ -419,13 +418,13 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => { return ( - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
    + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of it's relative line height of 1.5. - - +

    +     diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx index 9f500d6ea1c..ac261b3e4e2 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, @@ -13,13 +14,10 @@ import { Flex, FlexItem, PageSection, - PageSectionVariants, Progress, SimpleList, SimpleListGroup, SimpleListItem, - Text, - TextContent, Title } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; @@ -92,14 +90,14 @@ export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => { return ( - - - Main title - - Body text should be Overpass Regular at 16px. It should have leading of 24px because
    + + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of it’s relative line height of 1.5. - - +

    +     diff --git a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx index f888e8795ca..4944fe3b822 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 = () => { - - Projects - Click any project card to view Tabs within Modals. - + +

    Projects

    +

    Click any project card to view tabs within modals.

    +     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 = () => { - - To perform a standard x86_64 installation using the GUI, you'll need to: - + + To perform a standard x86_64 installation using the GUI, you'll need to: + diff --git a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx index a612060b473..fb2ed312ea8 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%" > - - {stepName} content + +

    {stepName} content

    Wizard description goes here. If you need more assistance,{' '} {' '} in the side drawer.{' '}

    -     +     diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx index b55589387ab..8802409c7cc 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} > - - Main title - A demo of a wizard in a page. - + +

    Main title

    +

    A demo of a wizard in a page.

    +     diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx index fae61080959..b5e13dfa326 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%" > - - {stepName} content + +

    {stepName} content

    Wizard description goes here. If you need more assistance,{' '} {' '} in the side drawer.{' '}

    -     +     @@ -164,10 +163,10 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () mainContainerId={pageId} > - - Main title - A demo of a wizard in a page. - + +

    Main title

    +

    A demo of a wizard in a page.

    +     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 ( - + These are all of the icons available for use in PatternFly React. For recommended icon usage, see our{' '} icon usage guidelines. - - + + Learn how you can use them in the{' '} react-icons docs. - + {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 3cda19c050f..30aa5e8f5a7 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" > - - - CFME Version - 5.5.3.4.20102789036450 - Cloudforms Version - 4.1 - Server Name - 40DemoMaster - User Name - Administrator - User Role - EvmRole-super_administrator - Browser Version - 601.2 - Browser OS - Mac - - + +
    +
    CFME Version
    +
    5.5.3.4.20102789036450
    +
    Cloudforms Version
    +
    4.1
    +
    Server Name
    +
    40DemoMaster
    +
    User Name
    +
    Administrator
    +
    User Role
    +
    EvmRole-super_administrator
    +
    Browser Version
    +
    601.2
    +
    Browser OS
    +
    Mac
    +
    +     ); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx index 4eb13c459c9..f86fd7feee2 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,25 +1,15 @@ -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 = () => ( - - Main title - - Body text should be Overpass Regular at 16px.It should have leading of 24px because
    + +

    Main title

    +

    + Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
    of it’s relative line height of 1.5. - - +

    +     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 b6b5be34ae7..412d4655f44 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 ( <> - Text area + Text area