feat(Title, Text): apply penta updates (#9889)

* feat(Title, Text): apply penta updates * update snap * update Title tests with new modifiers * update to use styles obj for class, only apply class if icon is present
patternfly · Dec 20, 2023 · edac507 · edac507
1 parent cddbcdf
commit edac507
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 59 deletions.
diff --git 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> = ({
 }: ListItemProps) => (
   <li className={css(icon && styles.listItem)} {...props}>
     {icon && <span className={css(styles.listItemIcon)}>{icon}</span>}
-    {children}
+    <span className={icon && css(`${styles.list}__item-text`)}>{children}</span>
   </li>
 );
 ListItem.displayName = 'ListItem';
diff --git a/...s/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap b/...s/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap
@@ -5,7 +5,9 @@ exports[`ListItem should match snapshot (auto-generated) 1`] = `
   <li
     class=""
   >
-    ReactNode
+    <span>
+      ReactNode
+    </span>
   </li>
 </DocumentFragment>
 `;
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
@@ -25,7 +25,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Apple
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Apple
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -47,7 +51,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Banana
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Banana
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -69,7 +77,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Orange
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Orange
+      </span>
     </li>
   </ul>
 </DocumentFragment>
@@ -101,7 +113,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Apple
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Apple
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -123,7 +139,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Banana
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Banana
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -145,7 +165,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Orange
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Orange
+      </span>
     </li>
   </ul>
 </DocumentFragment>
@@ -162,17 +186,23 @@ exports[`List inline list 1`] = `
       <li
         class=""
       >
-        First
+        <span>
+          First
+        </span>
       </li>
       <li
         class=""
       >
-        Second
+        <span>
+          Second
+        </span>
       </li>
       <li
         class=""
       >
-        Third
+        <span>
+          Third
+        </span>
       </li>
     </ul>
   </ul>
@@ -188,17 +218,23 @@ exports[`List ordered list 1`] = `
     <li
       class=""
     >
-      Apple
+      <span>
+        Apple
+      </span>
     </li>
     <li
       class=""
     >
-      Banana
+      <span>
+        Banana
+      </span>
     </li>
     <li
       class=""
     >
-      Orange
+      <span>
+        Orange
+      </span>
     </li>
   </ol>
 </DocumentFragment>
@@ -215,17 +251,23 @@ exports[`List simple list 1`] = `
       <li
         class=""
       >
-        First
+        <span>
+          First
+        </span>
       </li>
       <li
         class=""
       >
-        Second
+        <span>
+          Second
+        </span>
       </li>
       <li
         class=""
       >
-        Third
+        <span>
+          Third
+        </span>
       </li>
     </ul>
   </ul>

diff --git 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
@@ -4,16 +4,16 @@ import { TextContent, Text, TextVariants } from '@patternfly/react-core';
 export const TextVisited: React.FunctionComponent = () => (
   <>
     <TextContent>
-      <Text component={TextVariants.h3}>Visited link example</Text>
+      <Text component={TextVariants.h3}>Link example</Text>
       <Text component={TextVariants.p}>
         <Text component={TextVariants.a} isVisitedLink href="#">
-          Visited link
+          Click to visit link
         </Text>
       </Text>
     </TextContent>
     <br />
     <TextContent isVisited>
-      <Text component={TextVariants.h3}>Visited content example</Text>
+      <Text component={TextVariants.h3}>Link content example</Text>
       <Text component={TextVariants.p}>
         <Text component={TextVariants.a} href="#">
           content link 1

diff --git 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<React.HTMLProps<HTMLHeadingElement>, 'size' | 'className'>, OUIAProps {
@@ -42,7 +33,7 @@ export const Title: React.FunctionComponent<TitleProps> = ({
   className = '',
   children = '',
   headingLevel: HeadingLevel,
-  size = headingLevelSizeMap[HeadingLevel],
+  size,
   ouiaId,
   ouiaSafe = true,
   ...props
@@ -52,7 +43,7 @@ export const Title: React.FunctionComponent<TitleProps> = ({
     <HeadingLevel
       {...ouiaProps}
       {...props}
-      className={css(styles.title, size && styles.modifiers[size as Size], className)}
+      className={css(styles.title, size ? styles.modifiers[size as Size] : styles.modifiers[HeadingLevel], className)}
     >
       {children}
     </HeadingLevel>

diff --git 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(<Title headingLevel="h1">Test</Title>);
-  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(<Title headingLevel="h1">Test</Title>);
-  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(<Title headingLevel="h2">Test</Title>);
-  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(<Title headingLevel="h3">Test</Title>);
-  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(<Title headingLevel="h4">Test</Title>);
-  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(<Title headingLevel="h5">Test</Title>);
-  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(<Title headingLevel="h6">Test</Title>);
-  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
@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v5-c-title pf-m-2xl"
+    class="pf-v5-c-title pf-m-h1"
     data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF5/Title"
     data-ouia-safe="true"

diff --git 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 = () => (
   <React.Fragment>
     <Title headingLevel="h1" size={TitleSizes['4xl']}>
-      h1 as 4xl
+      4xl title
     </Title>
     <Title headingLevel="h2" size="3xl">
-      h2 as 3xl
+      3xl title
     </Title>
     <Title headingLevel="h3" size={TitleSizes['2xl']}>
-      h3 as 2xl
+      2xl title
     </Title>
     <Title headingLevel="h4" size="xl">
-      h4 as xl
+      xl title
     </Title>
     <Title headingLevel="h5" size={TitleSizes.lg}>
-      h5 as lg
+      lg title
     </Title>
     <Title headingLevel="h6" size="md">
-      h6 as md Title
+      md title
     </Title>
   </React.Fragment>
 );
diff --git 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 = () => (
   <React.Fragment>
-    <Title headingLevel="h1">h1 defaults to 2xl</Title>
-    <Title headingLevel="h2">h2 defaults to xl</Title>
-    <Title headingLevel="h3">h3 defaults to lg</Title>
-    <Title headingLevel="h4">h4 defaults to md</Title>
-    <Title headingLevel="h5">h5 defaults to md</Title>
-    <Title headingLevel="h6">h6 defaults to md</Title>
+    <Title headingLevel="h1">H1-styled title</Title>
+    <Title headingLevel="h2">H2-styled title</Title>
+    <Title headingLevel="h3">H3-styled title</Title>
+    <Title headingLevel="h4">H4-styled title</Title>
+    <Title headingLevel="h5">H5-styled title</Title>
+    <Title headingLevel="h6">H6-styled title</Title>
   </React.Fragment>
 );