diff --git a/packages/react-core/src/components/List/ListItem.tsx b/packages/react-core/src/components/List/ListItem.tsx index 7b3aaeafbfa..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 de6c8aa6505..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,7 +5,9 @@ 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..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 @@ -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,23 @@ exports[`List inline list 1`] = `
  • - First + + First +
  • - Second + + Second +
  • - Third + + Third +
  • @@ -188,17 +218,23 @@ exports[`List ordered list 1`] = `
  • - Apple + + Apple +
  • - Banana + + Banana +
  • - Orange + + Orange +
  • @@ -215,17 +251,23 @@ exports[`List simple list 1`] = `
  • - First + + First +
  • - Second + + Second +
  • - Third + + Third +
  • 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/__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`] = `

    ( - 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 );