From cf298337edef509cb68bb2c7b6f948d8fae51355 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 13 Dec 2023 13:46:05 -0500 Subject: [PATCH 1/4] feat(Title, Text): apply penta updates --- .../react-core/src/components/List/ListItem.tsx | 2 +- .../react-core/src/components/Text/examples/Text.md | 2 +- .../src/components/Text/examples/TextVisited.tsx | 6 +++--- packages/react-core/src/components/Title/Title.tsx | 13 ++----------- .../components/Title/examples/TitleCustomSizes.tsx | 12 ++++++------ .../components/Title/examples/TitleDefaultSizes.tsx | 12 ++++++------ 6 files changed, 19 insertions(+), 28 deletions(-) diff --git a/packages/react-core/src/components/List/ListItem.tsx b/packages/react-core/src/components/List/ListItem.tsx index 7b3aaeafbfa..3f020d9d6f2 100644 --- a/packages/react-core/src/components/List/ListItem.tsx +++ b/packages/react-core/src/components/List/ListItem.tsx @@ -16,7 +16,7 @@ export const ListItem: React.FunctionComponent = ({ }: ListItemProps) => (
  • {icon && {icon}} - {children} + {children}
    • ); ListItem.displayName = 'ListItem'; diff --git a/packages/react-core/src/components/Text/examples/Text.md b/packages/react-core/src/components/Text/examples/Text.md index b3edc39572c..42de50935b2 100644 --- a/packages/react-core/src/components/Text/examples/Text.md +++ b/packages/react-core/src/components/Text/examples/Text.md @@ -51,7 +51,7 @@ Text components such as Text, TextList, TextListItem need to be placed within a ``` -### Visited +### Link and visited link ```ts file="./TextVisited.tsx" diff --git a/packages/react-core/src/components/Text/examples/TextVisited.tsx b/packages/react-core/src/components/Text/examples/TextVisited.tsx index 80ef36f002a..348841539ed 100644 --- a/packages/react-core/src/components/Text/examples/TextVisited.tsx +++ b/packages/react-core/src/components/Text/examples/TextVisited.tsx @@ -4,16 +4,16 @@ import { TextContent, Text, TextVariants } from '@patternfly/react-core'; export const TextVisited: React.FunctionComponent = () => ( <> - Visited link example + Link example - Visited link + Click to visit link
    - Visited content example + Link content example content link 1 diff --git a/packages/react-core/src/components/Title/Title.tsx b/packages/react-core/src/components/Title/Title.tsx index 1e2d7bebc42..4548cdf9484 100644 --- a/packages/react-core/src/components/Title/Title.tsx +++ b/packages/react-core/src/components/Title/Title.tsx @@ -12,15 +12,6 @@ export enum TitleSizes { '4xl' = '4xl' } -enum headingLevelSizeMap { - h1 = '2xl', - h2 = 'xl', - h3 = 'lg', - h4 = 'md', - h5 = 'md', - h6 = 'md' -} - type Size = 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'; export interface TitleProps extends Omit, 'size' | 'className'>, OUIAProps { @@ -42,7 +33,7 @@ export const Title: React.FunctionComponent = ({ className = '', children = '', headingLevel: HeadingLevel, - size = headingLevelSizeMap[HeadingLevel], + size, ouiaId, ouiaSafe = true, ...props @@ -52,7 +43,7 @@ export const Title: React.FunctionComponent = ({ {children} diff --git a/packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx b/packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx index 2d1a89e775d..324c802b6d4 100644 --- a/packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx +++ b/packages/react-core/src/components/Title/examples/TitleCustomSizes.tsx @@ -4,22 +4,22 @@ import { Title, TitleSizes } from '@patternfly/react-core'; export const TitleCustomSizes: React.FunctionComponent = () => ( - h1 as 4xl + 4xl title - h2 as 3xl + 3xl title - h3 as 2xl + 2xl title - h4 as xl + xl title - h5 as lg + lg title - h6 as md Title + md title ); diff --git a/packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx b/packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx index f8a33d8db19..c1d22d172e3 100644 --- a/packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx +++ b/packages/react-core/src/components/Title/examples/TitleDefaultSizes.tsx @@ -3,11 +3,11 @@ import { Title } from '@patternfly/react-core'; export const TitleDefaultSizes: React.FunctionComponent = () => ( - h1 defaults to 2xl - h2 defaults to xl - h3 defaults to lg - h4 defaults to md - h5 defaults to md - h6 defaults to md + H1-styled title + H2-styled title + H3-styled title + H4-styled title + H5-styled title + H6-styled title ); From 33d7f7cfeedb879a436ba577cbec401eaca12cf1 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 13 Dec 2023 14:13:20 -0500 Subject: [PATCH 2/4] update snap --- .../__snapshots__/ListItem.test.tsx.snap | 6 +- .../__snapshots__/List.test.tsx.snap | 90 +++++++++++++++---- 2 files changed, 80 insertions(+), 16 deletions(-) diff --git a/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap b/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap index de6c8aa6505..5336d3dacb5 100644 --- a/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap +++ b/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap @@ -5,7 +5,11 @@ exports[`ListItem should match snapshot (auto-generated) 1`] = `
  • - ReactNode + + ReactNode +
    • `; diff --git a/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap b/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap index d6f885940e3..f703d5dc308 100644 --- a/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap +++ b/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap @@ -25,7 +25,11 @@ exports[`List icon large list 1`] = ` /> - Apple + + Apple +
  • - Banana + + Banana +
  • - Orange + + Orange +
    • @@ -101,7 +113,11 @@ exports[`List icon list 1`] = ` /> - Apple + + Apple +
  • - Banana + + Banana +
  • - Orange + + Orange +
    • @@ -162,17 +186,29 @@ exports[`List inline list 1`] = `
  • - First + + First +
  • - Second + + Second +
  • - Third + + Third +
    • @@ -188,17 +224,29 @@ exports[`List ordered list 1`] = `
  • - Apple + + Apple +
  • - Banana + + Banana +
  • - Orange + + Orange +
    • @@ -215,17 +263,29 @@ exports[`List simple list 1`] = `
  • - First + + First +
  • - Second + + Second +
  • - Third + + Third +
    • From 523c66061e2f87592072504a760db2075d281ae2 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 13 Dec 2023 14:34:00 -0500 Subject: [PATCH 3/4] update Title tests with new modifiers --- .../components/Title/__tests__/Title.test.tsx | 28 +++++++++---------- .../__snapshots__/Title.test.tsx.snap | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/react-core/src/components/Title/__tests__/Title.test.tsx b/packages/react-core/src/components/Title/__tests__/Title.test.tsx index 3bb98e367c5..bdddf8ecb9e 100644 --- a/packages/react-core/src/components/Title/__tests__/Title.test.tsx +++ b/packages/react-core/src/components/Title/__tests__/Title.test.tsx @@ -22,9 +22,9 @@ test(`Renders with the ${styles.title}`, () => { expect(screen.getByRole('heading')).toHaveClass(styles.title); }); -test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers['2xl']} by default`, () => { +test(`Renders with only the class ${styles.title} and the heading level modifier class ${styles.modifiers.h1} by default`, () => { render(Test); - expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers['2xl']}`, { exact: true }); + expect(screen.getByRole('heading')).toHaveClass(`${styles.title} ${styles.modifiers.h1}`, { exact: true }); }); test('Renders with custom class name when className prop is passed', () => { @@ -36,34 +36,34 @@ test('Renders with custom class name when className prop is passed', () => { expect(screen.getByRole('heading')).toHaveClass('test-class'); }); -test('Renders with class name pf-m-2xl by default when "h1" is passed as heading level', () => { +test('Renders with class name pf-m-h1 by default when "h1" is passed as heading level', () => { render(Test); - expect(screen.getByRole('heading')).toHaveClass('pf-m-2xl'); + expect(screen.getByRole('heading')).toHaveClass('pf-m-h1'); }); -test('Renders with class name pf-m-xl by default when "h2" is passed as heading level', () => { +test('Renders with class name pf-m-h2 by default when "h2" is passed as heading level', () => { render(Test); - expect(screen.getByRole('heading')).toHaveClass('pf-m-xl'); + expect(screen.getByRole('heading')).toHaveClass('pf-m-h2'); }); -test('Renders with class name pf-m-lg by default when "h3" is passed as heading level', () => { +test('Renders with class name pf-m-h3 by default when "h3" is passed as heading level', () => { render(Test); - expect(screen.getByRole('heading')).toHaveClass('pf-m-lg'); + expect(screen.getByRole('heading')).toHaveClass('pf-m-h3'); }); -test('Renders with class name pf-m-md by default when "h4" is passed as heading level', () => { +test('Renders with class name pf-m-h4 by default when "h4" is passed as heading level', () => { render(Test); - expect(screen.getByRole('heading')).toHaveClass('pf-m-md'); + expect(screen.getByRole('heading')).toHaveClass('pf-m-h4'); }); -test('Renders with class name pf-m-md by default when "h5" is passed as heading level', () => { +test('Renders with class name pf-m-h5 by default when "h5" is passed as heading level', () => { render(Test); - expect(screen.getByRole('heading')).toHaveClass('pf-m-md'); + expect(screen.getByRole('heading')).toHaveClass('pf-m-h5'); }); -test('Renders with class name pf-m-md by default when "h6" is passed as heading level', () => { +test('Renders with class name pf-m-h6 by default when "h6" is passed as heading level', () => { render(Test); - expect(screen.getByRole('heading')).toHaveClass('pf-m-md'); + expect(screen.getByRole('heading')).toHaveClass('pf-m-h6'); }); test('Renders with class name pf-m-md when "md" is passed as title size', () => { diff --git a/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap b/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap index a1a208ecbbd..e781b47c08e 100644 --- a/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap +++ b/packages/react-core/src/components/Title/__tests__/__snapshots__/Title.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Matches the snapshot 1`] = `

    Date: Fri, 15 Dec 2023 10:33:58 -0500 Subject: [PATCH 4/4] update to use styles obj for class, only apply class if icon is present --- .../src/components/List/ListItem.tsx | 2 +- .../__snapshots__/ListItem.test.tsx.snap | 4 +- .../__snapshots__/List.test.tsx.snap | 48 ++++++------------- 3 files changed, 17 insertions(+), 37 deletions(-) diff --git a/packages/react-core/src/components/List/ListItem.tsx b/packages/react-core/src/components/List/ListItem.tsx index 3f020d9d6f2..567f1d6f658 100644 --- a/packages/react-core/src/components/List/ListItem.tsx +++ b/packages/react-core/src/components/List/ListItem.tsx @@ -16,7 +16,7 @@ export const ListItem: React.FunctionComponent = ({ }: ListItemProps) => (
  • {icon && {icon}} - {children} + {children}
    • ); ListItem.displayName = 'ListItem'; diff --git a/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap b/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap index 5336d3dacb5..432ecd7f726 100644 --- a/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap +++ b/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap @@ -5,9 +5,7 @@ exports[`ListItem should match snapshot (auto-generated) 1`] = `
  • - + ReactNode
    • diff --git a/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap b/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap index f703d5dc308..f1b72566737 100644 --- a/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap +++ b/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap @@ -26,7 +26,7 @@ exports[`List icon large list 1`] = ` Apple @@ -52,7 +52,7 @@ exports[`List icon large list 1`] = ` Banana @@ -78,7 +78,7 @@ exports[`List icon large list 1`] = ` Orange @@ -114,7 +114,7 @@ exports[`List icon list 1`] = ` Apple @@ -140,7 +140,7 @@ exports[`List icon list 1`] = ` Banana @@ -166,7 +166,7 @@ exports[`List icon list 1`] = ` Orange @@ -186,27 +186,21 @@ exports[`List inline list 1`] = `
  • - + First
  • - + Second
  • - + Third
    • @@ -224,27 +218,21 @@ exports[`List ordered list 1`] = `
  • - + Apple
  • - + Banana
  • - + Orange
    • @@ -263,27 +251,21 @@ exports[`List simple list 1`] = `
  • - + First
  • - + Second
  • - + Third