@patternfly/react-core 6.0.0-alpha.58 → 6.0.0-alpha.59

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.57","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.58","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.57","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.58","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.57","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.58","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.58",
+  "version": "6.0.0-alpha.59",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.20",
-    "@patternfly/react-styles": "^6.0.0-alpha.20",
-    "@patternfly/react-tokens": "^6.0.0-alpha.20",
+    "@patternfly/react-icons": "^6.0.0-alpha.21",
+    "@patternfly/react-styles": "^6.0.0-alpha.21",
+    "@patternfly/react-tokens": "^6.0.0-alpha.21",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.117",
+    "@patternfly/patternfly": "6.0.0-alpha.135",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "085b43fa526d2b629825d72a19083f506379cd30"
+  "gitHead": "6101cfe558acec0474dd1c0649e44c38bf01383f"
 }

package/src/components/Menu/Menu.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
-import dropdownStyles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 import { MenuContext } from './MenuContext';
@@ -193,9 +192,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
 
     const parentMenu = this.activeMenu;
     const key = event.key;
-    const isFromBreadcrumb =
-      activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
-      activeElement.classList.contains(dropdownStyles.dropdownToggle);
+    const isFromBreadcrumb = activeElement.classList.contains(breadcrumbStyles.breadcrumbLink);
 
     if (key === ' ' || key === 'Enter') {
       event.preventDefault();
@@ -313,7 +310,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             noHorizontalArrowHandling={
               document.activeElement &&
               (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
-                document.activeElement.classList.contains(dropdownStyles.dropdownToggle) ||
                 document.activeElement.tagName === 'INPUT')
             }
             noEnterHandling

package/src/components/NotificationDrawer/NotificationDrawerHeader.tsx

@@ -3,8 +3,6 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-import { Text, TextVariants } from '../Text';
 import { Button, ButtonVariant } from '../Button';
 
 export interface NotificationDrawerHeaderProps extends React.HTMLProps<HTMLDivElement> {
@@ -38,9 +36,7 @@ export const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawe
   ...props
 }: NotificationDrawerHeaderProps) => (
   <div {...props} className={css(styles.notificationDrawerHeader, className)}>
-    <Text component={TextVariants.h1} className={css(styles.notificationDrawerHeaderTitle)}>
-      {title}
-    </Text>
+    <h1 className={css(styles.notificationDrawerHeaderTitle)}>{title}</h1>
     {(customText !== undefined || count !== undefined) && (
       <span className={css(styles.notificationDrawerHeaderStatus)} aria-live="polite">
         {customText || `${count} ${unreadText}`}

package/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerHeader.test.tsx.snap

@@ -7,10 +7,6 @@ exports[`NotificationDrawerHeader drawer header with count applied 1`] = `
   >
     <h1
       class="pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-3"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
     >
       Notifications
     </h1>
@@ -31,10 +27,6 @@ exports[`NotificationDrawerHeader drawer header with custom unread text applied
   >
     <h1
       class="pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-5"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
     >
       Notifications
     </h1>
@@ -55,10 +47,6 @@ exports[`NotificationDrawerHeader drawer header with title applied 1`] = `
   >
     <h1
       class="pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-4"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
     >
       Some Title
     </h1>
@@ -73,10 +61,6 @@ exports[`NotificationDrawerHeader renders with PatternFly Core styles 1`] = `
   >
     <h1
       class="pf-v6-c-notification-drawer__header-title"
-      data-ouia-component-id="OUIA-Generated-Text-1"
-      data-ouia-component-type="PF6/Text"
-      data-ouia-safe="true"
-      data-pf-content="true"
     >
       Notifications
     </h1>

package/src/components/Skeleton/examples/Skeleton.md

@@ -5,37 +5,42 @@ cssPrefix: pf-v5-c-skeleton
 propComponents: ['Skeleton']
 ---
 
-import global_FontSize_4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl';
-import global_FontSize_3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl';
-import global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl';
-import global_FontSize_xl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl';
-import global_FontSize_lg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg';
-import global_FontSize_md from '@patternfly/react-tokens/dist/esm/global_FontSize_md';
-import global_FontSize_sm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm';
+import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
+import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
+import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
+import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
+import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
+import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
+import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
 
 ## Examples
 
 ### Default
 
 ```ts file="./SkeletonDefault.tsx"
+
 ```
 
 ### Percentage widths
 
 ```ts file="./SkeletonPercentageWidth.tsx"
+
 ```
 
 ### Percentage heights
 
 ```ts file="./SkeletonPercentageHeight.tsx"
+
 ```
 
 ### Text modifiers
 
 ```ts file="./SkeletonText.tsx"
+
 ```
 
 ### Shapes
 
 ```ts file="./SkeletonShapes.tsx"
+
 ```

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -1,35 +1,35 @@
 import React from 'react';
 import { Skeleton } from '@patternfly/react-core';
 /* eslint-disable camelcase */
-import global_FontSize_4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl';
-import global_FontSize_3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl';
-import global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl';
-import global_FontSize_xl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl';
-import global_FontSize_lg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg';
-import global_FontSize_md from '@patternfly/react-tokens/dist/esm/global_FontSize_md';
-import global_FontSize_sm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm';
+import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
+import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
+import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
+import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
+import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
+import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
+import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
 
 export const SkeletonText: React.FunctionComponent = () => (
   <React.Fragment>
-    {global_FontSize_4xl.name}
+    {global_font_size_4xl.name}
     <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
     <br />
-    {global_FontSize_3xl.name}
+    {global_font_size_3xl.name}
     <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
     <br />
-    {global_FontSize_2xl.name}
+    {global_font_size_2xl.name}
     <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
     <br />
-    {global_FontSize_xl.name}
+    {global_font_size_xl.name}
     <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
     <br />
-    {global_FontSize_lg.name}
+    {global_font_size_lg.name}
     <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
     <br />
-    {global_FontSize_md.name}
+    {global_font_size_md.name}
     <Skeleton fontSize="md" screenreaderText="Loading font size md" />
     <br />
-    {global_FontSize_sm.name}
+    {global_font_size_sm.name}
     <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
   </React.Fragment>
 );

package/src/components/Slider/SliderStep.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
-import sliderStepLeft from '@patternfly/react-tokens/dist/esm/c_slider__step_Left';
+import sliderStepInsetInlineStart from '@patternfly/react-tokens/dist/esm/c_slider__step_InsetInlineStart';
 
 export interface SliderStepProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Additional classes added to the slider step. */
@@ -27,7 +27,9 @@ export const SliderStep: React.FunctionComponent<SliderStepProps> = ({
   isActive = false,
   ...props
 }: SliderStepProps) => {
-  const style = { [sliderStepLeft.name]: `${value ? value : sliderStepLeft.value}%` } as React.CSSProperties;
+  const style = {
+    [sliderStepInsetInlineStart.name]: `${value ? value : sliderStepInsetInlineStart.value}%`
+  } as React.CSSProperties;
   return (
     <div className={css(styles.sliderStep, isActive && styles.modifiers.active, className)} style={style} {...props}>
       {!isTickHidden && <div className={css(styles.sliderStepTick)} />}

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`slider renders continuous slider 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -32,7 +32,7 @@ exports[`slider renders continuous slider 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -96,7 +96,7 @@ exports[`slider renders continuous slider with custom steps 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -109,7 +109,7 @@ exports[`slider renders continuous slider with custom steps 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -159,7 +159,7 @@ exports[`slider renders disabled slider 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -169,7 +169,7 @@ exports[`slider renders disabled slider 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -216,7 +216,7 @@ exports[`slider renders discrete slider 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -226,7 +226,7 @@ exports[`slider renders discrete slider 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -290,7 +290,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -303,7 +303,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 25%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 25%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -311,7 +311,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 50%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 50%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -324,7 +324,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 75%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 75%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -332,7 +332,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -382,7 +382,7 @@ exports[`slider renders slider with input 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -392,7 +392,7 @@ exports[`slider renders slider with input 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -473,7 +473,7 @@ exports[`slider renders slider with input above thumb 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -483,7 +483,7 @@ exports[`slider renders slider with input above thumb 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -577,7 +577,7 @@ exports[`slider renders slider with input actions 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -587,7 +587,7 @@ exports[`slider renders slider with input actions 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -647,7 +647,7 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -657,7 +657,7 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"

package/src/components/Text/Text.tsx

@@ -32,6 +32,20 @@ export interface TextProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   ouiaSafe?: boolean;
 }
 
+const componentStyles = {
+  h1: styles.contentH1,
+  h2: styles.contentH2,
+  h3: styles.contentH3,
+  h4: styles.contentH4,
+  h5: styles.contentH5,
+  h6: styles.contentH6,
+  p: styles.contentP,
+  a: styles.contentA,
+  small: styles.contentSmall,
+  blockquote: styles.contentBlockquote,
+  pre: styles.contentPre
+};
+
 export const Text: React.FunctionComponent<TextProps> = ({
   children = null,
   className = '',
@@ -49,7 +63,11 @@ export const Text: React.FunctionComponent<TextProps> = ({
       {...ouiaProps}
       {...props}
       data-pf-content
-      className={css(isVisitedLink && component === TextVariants.a && styles.modifiers.visited, className)}
+      className={css(
+        isVisitedLink && component === TextVariants.a && styles.modifiers.visited,
+        componentStyles[component],
+        className
+      )}
     >
       {children}
     </Component>

package/src/components/Text/TextList.tsx

@@ -8,6 +8,12 @@ export enum TextListVariants {
   dl = 'dl'
 }
 
+const componentStyles = {
+  ul: styles.contentUl,
+  ol: styles.contentOl,
+  dl: styles.contentDl
+};
+
 export interface TextListProps extends React.HTMLProps<HTMLElement> {
   /** Content rendered within the TextList */
   children?: React.ReactNode;
@@ -29,7 +35,7 @@ export const TextList: React.FunctionComponent<TextListProps> = ({
   const Component: any = component;
 
   return (
-    <Component {...props} className={css(isPlain && styles.modifiers.plain, className)}>
+    <Component {...props} className={css(isPlain && styles.modifiers.plain, componentStyles[component], className)}>
       {children}
     </Component>
   );

package/src/components/Text/TextListItem.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Content/content';
 import { css } from '@patternfly/react-styles';
 
 export enum TextListItemVariants {
@@ -7,6 +8,12 @@ export enum TextListItemVariants {
   dd = 'dd'
 }
 
+const componentStyles = {
+  li: styles.contentLi,
+  dt: styles.contentDt,
+  dd: styles.contentDd
+};
+
 export interface TextListItemProps extends React.HTMLProps<HTMLElement> {
   /** Content rendered within the TextListItem */
   children?: React.ReactNode;
@@ -25,7 +32,7 @@ export const TextListItem: React.FunctionComponent<TextListItemProps> = ({
   const Component: any = component;
 
   return (
-    <Component {...props} className={css(className)}>
+    <Component {...props} className={css(componentStyles[component], className)}>
       {children}
     </Component>
   );

package/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TextList should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <ul
-    class="''"
+    class="pf-v6-c-content--ul ''"
   >
     ReactNode
   </ul>

package/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TextListItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
-    class="''"
+    class="pf-v6-c-content--li ''"
   >
     ReactNode
   </li>

package/src/components/Text/__tests__/Text.test.tsx

@@ -16,11 +16,6 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders without class name by default', () => {
-  render(<Text>Test</Text>);
-  expect(screen.getByText('Test')).not.toHaveClass();
-});
-
 test('Renders with custom class name when className prop is provided', () => {
   render(<Text className="custom-class">Test</Text>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/Text/__tests__/TextList.test.tsx

@@ -16,11 +16,6 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders without class name by default', () => {
-  render(<TextList>Test</TextList>);
-  expect(screen.getByText('Test')).not.toHaveClass();
-});
-
 test('Renders with custom class name when className prop is provided', () => {
   render(<TextList className="custom-class">Test</TextList>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/Text/__tests__/TextListItem.test.tsx

@@ -16,11 +16,6 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders without class name by default', () => {
-  render(<TextListItem>Test</TextListItem>);
-  expect(screen.getByText('Test')).not.toHaveClass();
-});
-
 test('Renders with custom class name when className prop is provided', () => {
   render(<TextListItem className="custom-class">Test</TextListItem>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <p
-    class=""
+    class="pf-v6-c-content--p"
     data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF6/Text"
     data-ouia-safe="true"

package/src/components/Text/__tests__/__snapshots__/TextList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <ul
-    class=""
+    class="pf-v6-c-content--ul"
   >
     Test
   </ul>

package/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <li
-    class=""
+    class="pf-v6-c-content--li"
   >
     Test
   </li>

package/src/components/Text/examples/Text.md

@@ -5,7 +5,7 @@ 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 (`<TextContent>`, `<TextList>`, and `<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.
 
@@ -25,8 +25,6 @@ For example, rather than nesting the `<List>` and `<Title>` components within `<
 
 ```
 
-Text components such as Text, TextList, TextListItem need to be placed within a TextContent
-
 ### Unordered list
 
 ```ts file="./TextUnorderedList.tsx"
@@ -51,6 +49,14 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 
 ```
 
+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"