From 26c101461b6d0eb237e9e4cf1371d052b87071e0 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Thu, 13 Jun 2024 15:27:41 +0200 Subject: [PATCH 1/5] feat(Text): update API to support
and prepare for Content rename --- .../react-core/src/components/Text/Text.tsx | 66 +++++++++++++++---- 1 file changed, 53 insertions(+), 13 deletions(-) diff --git a/packages/react-core/src/components/Text/Text.tsx b/packages/react-core/src/components/Text/Text.tsx index 2ad27df6823..15780f89c0e 100644 --- a/packages/react-core/src/components/Text/Text.tsx +++ b/packages/react-core/src/components/Text/Text.tsx @@ -14,25 +14,53 @@ export enum TextVariants { a = 'a', small = 'small', blockquote = 'blockquote', - pre = 'pre' + pre = 'pre', + hr = 'hr', + ul = 'ul', + ol = 'ol', + dl = 'dl', + li = 'li', + dt = 'dt', + dd = 'dd' } 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 */ + /** 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 Text */ + /** Additional classes added to the Content. */ className?: string; - /** Flag to indicate the link has visited styles applied if the browser determines the link has been visited */ + /** 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.*/ + /** 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, @@ -43,29 +71,41 @@ const componentStyles = { a: styles.contentA, small: styles.contentSmall, blockquote: styles.contentBlockquote, - pre: styles.contentPre + 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 Text: React.FunctionComponent = ({ - children = null, + children, className = '', - component = TextVariants.p, + component, + isPlainList = false, isVisitedLink = false, ouiaId, ouiaSafe = true, ...props }: TextProps) => { - const Component: any = component; + const wrappingComponent = component ?? 'div'; + const Component: any = wrappingComponent; const ouiaProps = useOUIAProps(Text.displayName, ouiaId, ouiaSafe); + const isList = ['ul', 'ol', 'dl'].includes(wrappingComponent); + return ( From 27ab23a9c6a430498f883a036395cfa391cf57a9 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Thu, 13 Jun 2024 15:34:08 +0200 Subject: [PATCH 2/5] feat(Text): move to Content folder --- .../src/components/{Text => Content}/Text.tsx | 0 .../{Text => Content}/TextContent.tsx | 0 .../components/{Text => Content}/TextList.tsx | 0 .../{Text => Content}/TextListItem.tsx | 0 .../__tests__/Generated/TextContent.test.tsx | 0 .../__tests__/Generated/TextList.test.tsx | 0 .../__tests__/Generated/TextListItem.test.tsx | 0 .../__snapshots__/TextContent.test.tsx.snap | 0 .../__snapshots__/TextList.test.tsx.snap | 0 .../__snapshots__/TextListItem.test.tsx.snap | 0 .../{Text => Content}/__tests__/Text.test.tsx | 0 .../__tests__/TextContent.test.tsx | 0 .../__tests__/TextList.test.tsx | 0 .../__tests__/TextListItem.test.tsx | 0 .../__snapshots__/Text.test.tsx.snap | 0 .../__snapshots__/TextContent.test.tsx.snap | 0 .../__snapshots__/TextList.test.tsx.snap | 0 .../__snapshots__/TextListItem.test.tsx.snap | 0 .../src/components/Content/examples/Text.md | 64 +++++++++++++++++++ .../{Text => Content}/examples/TextBody.tsx | 0 .../examples/TextContentWrapped.tsx | 0 .../examples/TextDescriptionList.tsx | 0 .../examples/TextHeadings.tsx | 0 .../examples/TextOrderedList.tsx | 0 .../examples/TextPlainList.tsx | 0 .../examples/TextUnorderedList.tsx | 0 .../examples/TextVisited.tsx | 0 .../src/components/{Text => Content}/index.ts | 0 .../src/components/Text/examples/Text.md | 58 +---------------- packages/react-core/src/components/index.ts | 2 +- 30 files changed, 66 insertions(+), 58 deletions(-) rename packages/react-core/src/components/{Text => Content}/Text.tsx (100%) rename packages/react-core/src/components/{Text => Content}/TextContent.tsx (100%) rename packages/react-core/src/components/{Text => Content}/TextList.tsx (100%) rename packages/react-core/src/components/{Text => Content}/TextListItem.tsx (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/Generated/TextContent.test.tsx (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/Generated/TextList.test.tsx (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/Generated/TextListItem.test.tsx (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/Generated/__snapshots__/TextList.test.tsx.snap (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/Text.test.tsx (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/TextContent.test.tsx (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/TextList.test.tsx (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/TextListItem.test.tsx (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/__snapshots__/Text.test.tsx.snap (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/__snapshots__/TextContent.test.tsx.snap (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/__snapshots__/TextList.test.tsx.snap (100%) rename packages/react-core/src/components/{Text => Content}/__tests__/__snapshots__/TextListItem.test.tsx.snap (100%) create mode 100644 packages/react-core/src/components/Content/examples/Text.md rename packages/react-core/src/components/{Text => Content}/examples/TextBody.tsx (100%) rename packages/react-core/src/components/{Text => Content}/examples/TextContentWrapped.tsx (100%) rename packages/react-core/src/components/{Text => Content}/examples/TextDescriptionList.tsx (100%) rename packages/react-core/src/components/{Text => Content}/examples/TextHeadings.tsx (100%) rename packages/react-core/src/components/{Text => Content}/examples/TextOrderedList.tsx (100%) rename packages/react-core/src/components/{Text => Content}/examples/TextPlainList.tsx (100%) rename packages/react-core/src/components/{Text => Content}/examples/TextUnorderedList.tsx (100%) rename packages/react-core/src/components/{Text => Content}/examples/TextVisited.tsx (100%) rename packages/react-core/src/components/{Text => Content}/index.ts (100%) diff --git a/packages/react-core/src/components/Text/Text.tsx b/packages/react-core/src/components/Content/Text.tsx similarity index 100% rename from packages/react-core/src/components/Text/Text.tsx rename to packages/react-core/src/components/Content/Text.tsx diff --git a/packages/react-core/src/components/Text/TextContent.tsx b/packages/react-core/src/components/Content/TextContent.tsx similarity index 100% rename from packages/react-core/src/components/Text/TextContent.tsx rename to packages/react-core/src/components/Content/TextContent.tsx diff --git a/packages/react-core/src/components/Text/TextList.tsx b/packages/react-core/src/components/Content/TextList.tsx similarity index 100% rename from packages/react-core/src/components/Text/TextList.tsx rename to packages/react-core/src/components/Content/TextList.tsx diff --git a/packages/react-core/src/components/Text/TextListItem.tsx b/packages/react-core/src/components/Content/TextListItem.tsx similarity index 100% rename from packages/react-core/src/components/Text/TextListItem.tsx rename to packages/react-core/src/components/Content/TextListItem.tsx diff --git a/packages/react-core/src/components/Text/__tests__/Generated/TextContent.test.tsx b/packages/react-core/src/components/Content/__tests__/Generated/TextContent.test.tsx similarity index 100% rename from packages/react-core/src/components/Text/__tests__/Generated/TextContent.test.tsx rename to packages/react-core/src/components/Content/__tests__/Generated/TextContent.test.tsx diff --git a/packages/react-core/src/components/Text/__tests__/Generated/TextList.test.tsx b/packages/react-core/src/components/Content/__tests__/Generated/TextList.test.tsx similarity index 100% rename from packages/react-core/src/components/Text/__tests__/Generated/TextList.test.tsx rename to packages/react-core/src/components/Content/__tests__/Generated/TextList.test.tsx diff --git a/packages/react-core/src/components/Text/__tests__/Generated/TextListItem.test.tsx b/packages/react-core/src/components/Content/__tests__/Generated/TextListItem.test.tsx similarity index 100% rename from packages/react-core/src/components/Text/__tests__/Generated/TextListItem.test.tsx rename to packages/react-core/src/components/Content/__tests__/Generated/TextListItem.test.tsx diff --git a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap rename to packages/react-core/src/components/Content/__tests__/Generated/__snapshots__/TextContent.test.tsx.snap diff --git a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/Generated/__snapshots__/TextList.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap rename to packages/react-core/src/components/Content/__tests__/Generated/__snapshots__/TextList.test.tsx.snap diff --git a/packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap rename to packages/react-core/src/components/Content/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap diff --git a/packages/react-core/src/components/Text/__tests__/Text.test.tsx b/packages/react-core/src/components/Content/__tests__/Text.test.tsx similarity index 100% rename from packages/react-core/src/components/Text/__tests__/Text.test.tsx rename to packages/react-core/src/components/Content/__tests__/Text.test.tsx diff --git a/packages/react-core/src/components/Text/__tests__/TextContent.test.tsx b/packages/react-core/src/components/Content/__tests__/TextContent.test.tsx similarity index 100% rename from packages/react-core/src/components/Text/__tests__/TextContent.test.tsx rename to packages/react-core/src/components/Content/__tests__/TextContent.test.tsx diff --git a/packages/react-core/src/components/Text/__tests__/TextList.test.tsx b/packages/react-core/src/components/Content/__tests__/TextList.test.tsx similarity index 100% rename from packages/react-core/src/components/Text/__tests__/TextList.test.tsx rename to packages/react-core/src/components/Content/__tests__/TextList.test.tsx diff --git a/packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx b/packages/react-core/src/components/Content/__tests__/TextListItem.test.tsx similarity index 100% rename from packages/react-core/src/components/Text/__tests__/TextListItem.test.tsx rename to packages/react-core/src/components/Content/__tests__/TextListItem.test.tsx diff --git a/packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/Text.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap rename to packages/react-core/src/components/Content/__tests__/__snapshots__/Text.test.tsx.snap diff --git a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextContent.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/TextContent.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/Text/__tests__/__snapshots__/TextContent.test.tsx.snap rename to packages/react-core/src/components/Content/__tests__/__snapshots__/TextContent.test.tsx.snap diff --git a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextList.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/TextList.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/Text/__tests__/__snapshots__/TextList.test.tsx.snap rename to packages/react-core/src/components/Content/__tests__/__snapshots__/TextList.test.tsx.snap diff --git a/packages/react-core/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/TextListItem.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap rename to packages/react-core/src/components/Content/__tests__/__snapshots__/TextListItem.test.tsx.snap diff --git a/packages/react-core/src/components/Content/examples/Text.md b/packages/react-core/src/components/Content/examples/Text.md new file mode 100644 index 00000000000..61566a36d43 --- /dev/null +++ b/packages/react-core/src/components/Content/examples/Text.md @@ -0,0 +1,64 @@ +--- +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" + +``` diff --git a/packages/react-core/src/components/Text/examples/TextBody.tsx b/packages/react-core/src/components/Content/examples/TextBody.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/TextBody.tsx rename to packages/react-core/src/components/Content/examples/TextBody.tsx diff --git a/packages/react-core/src/components/Text/examples/TextContentWrapped.tsx b/packages/react-core/src/components/Content/examples/TextContentWrapped.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/TextContentWrapped.tsx rename to packages/react-core/src/components/Content/examples/TextContentWrapped.tsx diff --git a/packages/react-core/src/components/Text/examples/TextDescriptionList.tsx b/packages/react-core/src/components/Content/examples/TextDescriptionList.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/TextDescriptionList.tsx rename to packages/react-core/src/components/Content/examples/TextDescriptionList.tsx diff --git a/packages/react-core/src/components/Text/examples/TextHeadings.tsx b/packages/react-core/src/components/Content/examples/TextHeadings.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/TextHeadings.tsx rename to packages/react-core/src/components/Content/examples/TextHeadings.tsx diff --git a/packages/react-core/src/components/Text/examples/TextOrderedList.tsx b/packages/react-core/src/components/Content/examples/TextOrderedList.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/TextOrderedList.tsx rename to packages/react-core/src/components/Content/examples/TextOrderedList.tsx diff --git a/packages/react-core/src/components/Text/examples/TextPlainList.tsx b/packages/react-core/src/components/Content/examples/TextPlainList.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/TextPlainList.tsx rename to packages/react-core/src/components/Content/examples/TextPlainList.tsx diff --git a/packages/react-core/src/components/Text/examples/TextUnorderedList.tsx b/packages/react-core/src/components/Content/examples/TextUnorderedList.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/TextUnorderedList.tsx rename to packages/react-core/src/components/Content/examples/TextUnorderedList.tsx diff --git a/packages/react-core/src/components/Text/examples/TextVisited.tsx b/packages/react-core/src/components/Content/examples/TextVisited.tsx similarity index 100% rename from packages/react-core/src/components/Text/examples/TextVisited.tsx rename to packages/react-core/src/components/Content/examples/TextVisited.tsx diff --git a/packages/react-core/src/components/Text/index.ts b/packages/react-core/src/components/Content/index.ts similarity index 100% rename from packages/react-core/src/components/Text/index.ts rename to packages/react-core/src/components/Content/index.ts diff --git a/packages/react-core/src/components/Text/examples/Text.md b/packages/react-core/src/components/Text/examples/Text.md index 61566a36d43..90eb79b2505 100644 --- a/packages/react-core/src/components/Text/examples/Text.md +++ b/packages/react-core/src/components/Text/examples/Text.md @@ -5,60 +5,4 @@ cssPrefix: pf-v5-c-content propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem'] --- -The `<Text>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property(`h1` through `h6`, `p`, `a`, `small`, `blockquote`, and `pre`), as well as the text component suite `<TextList>`, and `<TextListItem>`. `TextContent` may be used as a container for the text components, but nesting them inside `<TextContent>` is not required. - -You cannot nest other components within `<Text>`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `<Text>` component's properties to achieve the same results. - -For example, rather than nesting the `<List>` and `<Title>` components within `<Text>`, you should pass `component="h1"` into the `<TextList>` and `<Text>` components. Similarly, when you need to add a divider , rather than passing in a separate `<Divider>` component, you should utilize the `hr` property that `<Text>` supports, which will be styled as a divider. - -## 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>` component has been renamed to [Content](/components/Content). diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts index fcfc6b51e24..681a6834e64 100644 --- a/packages/react-core/src/components/index.ts +++ b/packages/react-core/src/components/index.ts @@ -17,6 +17,7 @@ export * from './Card'; export * from './Checkbox'; export * from './ClipboardCopy'; export * from './CodeBlock'; +export * from './Content'; export * from './DataList'; export * from './DatePicker'; export * from './DescriptionList'; @@ -62,7 +63,6 @@ export * from './Slider'; export * from './Spinner'; export * from './Switch'; export * from './Tabs'; -export * from './Text'; export * from './TextArea'; export * from './TextInput'; export * from './Tile'; From 0dc49245fbc234e6f761d884b4d72c0555fd67c2 Mon Sep 17 00:00:00 2001 From: adamviktora <viktora.adam@gmail.com> Date: Thu, 13 Jun 2024 15:41:35 +0200 Subject: [PATCH 3/5] test(Text): update tests to prepare for Content API --- .../src/components/Content/__tests__/Text.test.tsx | 4 ++-- .../Content/__tests__/__snapshots__/Text.test.tsx.snap | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-core/src/components/Content/__tests__/Text.test.tsx b/packages/react-core/src/components/Content/__tests__/Text.test.tsx index 979dc857f66..910d97cde9c 100644 --- a/packages/react-core/src/components/Content/__tests__/Text.test.tsx +++ b/packages/react-core/src/components/Content/__tests__/Text.test.tsx @@ -21,9 +21,9 @@ test('Renders with custom class name when className prop is provided', () => { expect(screen.getByText('Test')).toHaveClass('custom-class'); }); -test('Renders as "p" element by default', () => { +test('Renders as "div" element by default', () => { render(<Text>Test</Text>); - expect(screen.getByText('Test')).toHaveProperty('nodeName', 'P'); + expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DIV'); }); test('Renders as "h1" element when component="h1"', () => { diff --git a/packages/react-core/src/components/Content/__tests__/__snapshots__/Text.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/Text.test.tsx.snap index 3eb559d2dd2..ca4f2b1203a 100644 --- a/packages/react-core/src/components/Content/__tests__/__snapshots__/Text.test.tsx.snap +++ b/packages/react-core/src/components/Content/__tests__/__snapshots__/Text.test.tsx.snap @@ -2,14 +2,14 @@ exports[`Matches the snapshot 1`] = ` <DocumentFragment> - <p - class="pf-v6-c-content--p" + <div + class="pf-v6-c-content" data-ouia-component-id="ouia-id" data-ouia-component-type="PF6/Text" data-ouia-safe="true" data-pf-content="true" > Test - </p> + </div> </DocumentFragment> `; From 4927d0f0a7bb49e63e3326954227a96a74828380 Mon Sep 17 00:00:00 2001 From: adamviktora <viktora.adam@gmail.com> Date: Thu, 13 Jun 2024 16:45:47 +0200 Subject: [PATCH 4/5] refactor(Text examples): update names to Content --- .../Content/{Text.tsx => Content.tsx} | 0 .../{Text.test.tsx => Content.test.tsx} | 2 +- ...ext.test.tsx.snap => Content.test.tsx.snap} | 0 .../Content/examples/{Text.md => Content.md} | 18 +++++++++--------- .../examples/{TextBody.tsx => ContentBody.tsx} | 2 +- ...tionList.tsx => ContentDescriptionList.tsx} | 2 +- .../{TextHeadings.tsx => ContentHeadings.tsx} | 2 +- ...tOrderedList.tsx => ContentOrderedList.tsx} | 2 +- ...{TextPlainList.tsx => ContentPlainList.tsx} | 2 +- ...rderedList.tsx => ContentUnorderedList.tsx} | 2 +- .../{TextVisited.tsx => ContentVisited.tsx} | 2 +- ...xtContentWrapped.tsx => ContentWrapper.tsx} | 2 +- .../react-core/src/components/Content/index.ts | 2 +- 13 files changed, 19 insertions(+), 19 deletions(-) rename packages/react-core/src/components/Content/{Text.tsx => Content.tsx} (100%) rename packages/react-core/src/components/Content/__tests__/{Text.test.tsx => Content.test.tsx} (98%) rename packages/react-core/src/components/Content/__tests__/__snapshots__/{Text.test.tsx.snap => Content.test.tsx.snap} (100%) rename packages/react-core/src/components/Content/examples/{Text.md => Content.md} (83%) rename packages/react-core/src/components/Content/examples/{TextBody.tsx => ContentBody.tsx} (94%) rename packages/react-core/src/components/Content/examples/{TextDescriptionList.tsx => ContentDescriptionList.tsx} (91%) rename packages/react-core/src/components/Content/examples/{TextHeadings.tsx => ContentHeadings.tsx} (87%) rename packages/react-core/src/components/Content/examples/{TextOrderedList.tsx => ContentOrderedList.tsx} (90%) rename packages/react-core/src/components/Content/examples/{TextPlainList.tsx => ContentPlainList.tsx} (94%) rename packages/react-core/src/components/Content/examples/{TextUnorderedList.tsx => ContentUnorderedList.tsx} (91%) rename packages/react-core/src/components/Content/examples/{TextVisited.tsx => ContentVisited.tsx} (93%) rename packages/react-core/src/components/Content/examples/{TextContentWrapped.tsx => ContentWrapper.tsx} (84%) diff --git a/packages/react-core/src/components/Content/Text.tsx b/packages/react-core/src/components/Content/Content.tsx similarity index 100% rename from packages/react-core/src/components/Content/Text.tsx rename to packages/react-core/src/components/Content/Content.tsx diff --git a/packages/react-core/src/components/Content/__tests__/Text.test.tsx b/packages/react-core/src/components/Content/__tests__/Content.test.tsx similarity index 98% rename from packages/react-core/src/components/Content/__tests__/Text.test.tsx rename to packages/react-core/src/components/Content/__tests__/Content.test.tsx index 910d97cde9c..13711a4f56b 100644 --- a/packages/react-core/src/components/Content/__tests__/Text.test.tsx +++ b/packages/react-core/src/components/Content/__tests__/Content.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; -import { Text } from '../Text'; +import { Text } from '../Content'; test('Renders without children', () => { render( diff --git a/packages/react-core/src/components/Content/__tests__/__snapshots__/Text.test.tsx.snap b/packages/react-core/src/components/Content/__tests__/__snapshots__/Content.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/Content/__tests__/__snapshots__/Text.test.tsx.snap rename to packages/react-core/src/components/Content/__tests__/__snapshots__/Content.test.tsx.snap diff --git a/packages/react-core/src/components/Content/examples/Text.md b/packages/react-core/src/components/Content/examples/Content.md similarity index 83% rename from packages/react-core/src/components/Content/examples/Text.md rename to packages/react-core/src/components/Content/examples/Content.md index 61566a36d43..170c085f210 100644 --- a/packages/react-core/src/components/Content/examples/Text.md +++ b/packages/react-core/src/components/Content/examples/Content.md @@ -1,5 +1,5 @@ --- -id: Text +id: Content section: components cssPrefix: pf-v5-c-content propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem'] @@ -15,37 +15,37 @@ For example, rather than nesting the `<List>` and `<Title>` components within `< ### Headings -```ts file="./TextHeadings.tsx" +```ts file="./ContentHeadings.tsx" ``` ### Body -```ts file="./TextBody.tsx" +```ts file="./ContentBody.tsx" ``` ### Unordered list -```ts file="./TextUnorderedList.tsx" +```ts file="./ContentUnorderedList.tsx" ``` ### Ordered list -```ts file="./TextOrderedList.tsx" +```ts file="./ContentOrderedList.tsx" ``` ### Plain list -```ts file="./TextPlainList.tsx" +```ts file="./ContentPlainList.tsx" ``` ### Description list -```ts file="./TextDescriptionList.tsx" +```ts file="./ContentDescriptionList.tsx" ``` @@ -53,12 +53,12 @@ Text components such as Text, TextList, TextListItem can be placed within a Text ### Wrapped in TextContent -```ts file="./TextContentWrapped.tsx" +```ts file="./ContentWrapper.tsx" ``` ### Link and visited link -```ts file="./TextVisited.tsx" +```ts file="./ContentVisited.tsx" ``` diff --git a/packages/react-core/src/components/Content/examples/TextBody.tsx b/packages/react-core/src/components/Content/examples/ContentBody.tsx similarity index 94% rename from packages/react-core/src/components/Content/examples/TextBody.tsx rename to packages/react-core/src/components/Content/examples/ContentBody.tsx index 88fa3a9b4da..922e90bce7a 100644 --- a/packages/react-core/src/components/Content/examples/TextBody.tsx +++ b/packages/react-core/src/components/Content/examples/ContentBody.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Text, TextVariants } from '@patternfly/react-core'; -export const TextBody: React.FunctionComponent = () => ( +export const ContentBody: React.FunctionComponent = () => ( <> <Text component={TextVariants.p}> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla diff --git a/packages/react-core/src/components/Content/examples/TextDescriptionList.tsx b/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx similarity index 91% rename from packages/react-core/src/components/Content/examples/TextDescriptionList.tsx rename to packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx index 3ad396c0169..6ffc2422ba6 100644 --- a/packages/react-core/src/components/Content/examples/TextDescriptionList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentDescriptionList.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core'; -export const TextDescriptionList: React.FunctionComponent = () => ( +export const ContentDescriptionList: React.FunctionComponent = () => ( <TextList component={TextListVariants.dl}> <TextListItem component={TextListItemVariants.dt}>Web</TextListItem> <TextListItem component={TextListItemVariants.dd}> diff --git a/packages/react-core/src/components/Content/examples/TextHeadings.tsx b/packages/react-core/src/components/Content/examples/ContentHeadings.tsx similarity index 87% rename from packages/react-core/src/components/Content/examples/TextHeadings.tsx rename to packages/react-core/src/components/Content/examples/ContentHeadings.tsx index a9842a9caf6..0f222aee7ae 100644 --- a/packages/react-core/src/components/Content/examples/TextHeadings.tsx +++ b/packages/react-core/src/components/Content/examples/ContentHeadings.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Text, TextVariants } from '@patternfly/react-core'; -export const TextHeadings: React.FunctionComponent = () => ( +export const ContentHeadings: React.FunctionComponent = () => ( <> <Text component={TextVariants.h1}>Hello World</Text> <Text component={TextVariants.h2}>Second level</Text> diff --git a/packages/react-core/src/components/Content/examples/TextOrderedList.tsx b/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx similarity index 90% rename from packages/react-core/src/components/Content/examples/TextOrderedList.tsx rename to packages/react-core/src/components/Content/examples/ContentOrderedList.tsx index 59c33f7b0f1..08ddf3d79f0 100644 --- a/packages/react-core/src/components/Content/examples/TextOrderedList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentOrderedList.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; -export const TextOrderedList: React.FunctionComponent = () => ( +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> diff --git a/packages/react-core/src/components/Content/examples/TextPlainList.tsx b/packages/react-core/src/components/Content/examples/ContentPlainList.tsx similarity index 94% rename from packages/react-core/src/components/Content/examples/TextPlainList.tsx rename to packages/react-core/src/components/Content/examples/ContentPlainList.tsx index 61672f3c170..aa55b8c36b7 100644 --- a/packages/react-core/src/components/Content/examples/TextPlainList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentPlainList.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Text, TextVariants, TextList, TextListVariants, TextListItem } from '@patternfly/react-core'; -export const TextPlainList: React.FunctionComponent = () => ( +export const ContentPlainList: React.FunctionComponent = () => ( <> <Text component={TextVariants.h3}>Plain unordered list</Text> <TextList isPlain> diff --git a/packages/react-core/src/components/Content/examples/TextUnorderedList.tsx b/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx similarity index 91% rename from packages/react-core/src/components/Content/examples/TextUnorderedList.tsx rename to packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx index 59b6296cbb2..30f5aaa486d 100644 --- a/packages/react-core/src/components/Content/examples/TextUnorderedList.tsx +++ b/packages/react-core/src/components/Content/examples/ContentUnorderedList.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { TextList, TextListItem } from '@patternfly/react-core'; -export const TextUnorderedList: React.FunctionComponent = () => ( +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> diff --git a/packages/react-core/src/components/Content/examples/TextVisited.tsx b/packages/react-core/src/components/Content/examples/ContentVisited.tsx similarity index 93% rename from packages/react-core/src/components/Content/examples/TextVisited.tsx rename to packages/react-core/src/components/Content/examples/ContentVisited.tsx index 348841539ed..1692938f52e 100644 --- a/packages/react-core/src/components/Content/examples/TextVisited.tsx +++ b/packages/react-core/src/components/Content/examples/ContentVisited.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { TextContent, Text, TextVariants } from '@patternfly/react-core'; -export const TextVisited: React.FunctionComponent = () => ( +export const ContentVisited: React.FunctionComponent = () => ( <> <TextContent> <Text component={TextVariants.h3}>Link example</Text> diff --git a/packages/react-core/src/components/Content/examples/TextContentWrapped.tsx b/packages/react-core/src/components/Content/examples/ContentWrapper.tsx similarity index 84% rename from packages/react-core/src/components/Content/examples/TextContentWrapped.tsx rename to packages/react-core/src/components/Content/examples/ContentWrapper.tsx index 6b89c1df7c0..8e2b9ed593e 100644 --- a/packages/react-core/src/components/Content/examples/TextContentWrapped.tsx +++ b/packages/react-core/src/components/Content/examples/ContentWrapper.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { TextContent, Text, TextVariants } from '@patternfly/react-core'; -export const TextContentWrapped: React.FunctionComponent = () => ( +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. diff --git a/packages/react-core/src/components/Content/index.ts b/packages/react-core/src/components/Content/index.ts index 8f8269d7d26..ef7483f3f13 100644 --- a/packages/react-core/src/components/Content/index.ts +++ b/packages/react-core/src/components/Content/index.ts @@ -1,4 +1,4 @@ +export * from './Content'; export * from './TextContent'; -export * from './Text'; export * from './TextList'; export * from './TextListItem'; From 6aee8c8e296e192767889bb0039c8270e199a634 Mon Sep 17 00:00:00 2001 From: adamviktora <viktora.adam@gmail.com> Date: Thu, 20 Jun 2024 14:01:50 +0200 Subject: [PATCH 5/5] docs(Text): fix link --- packages/react-core/src/components/Text/examples/Text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Text/examples/Text.md b/packages/react-core/src/components/Text/examples/Text.md index 90eb79b2505..7cd1f5d7bd4 100644 --- a/packages/react-core/src/components/Text/examples/Text.md +++ b/packages/react-core/src/components/Text/examples/Text.md @@ -5,4 +5,4 @@ cssPrefix: pf-v5-c-content propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem'] --- -The `<Text>` component has been renamed to [Content](/components/Content). +The `<Text>` component has been renamed to [Content](/components/content).