@patternfly/react-core 6.2.1-prerelease.1 → 6.2.1-prerelease.10

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

@@ -1,5 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Truncation with maxCharsDisplayed Matches snapshot with default position 1`] = `
+<DocumentFragment>
+  <div
+    data-testid="Tooltip-mock"
+  >
+    <div
+      data-testid="Tooltip-mock-content-container"
+    >
+      Test Test truncation content
+    </div>
+    <p>
+      position: top
+    </p>
+    <span
+      class="pf-v6-c-truncate pf-m-fixed"
+    >
+      <span
+        class="pf-v6-c-truncate__text"
+      >
+        Tes
+      </span>
+      <span
+        aria-hidden="true"
+        class="pf-v6-c-truncate__omission"
+      >
+        …
+      </span>
+      <span
+        class="pf-v6-screen-reader"
+      >
+        t truncation content
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`renders default truncation 1`] = `
 <DocumentFragment>
   <div

package/src/components/Truncate/examples/Truncate.md

@@ -9,50 +9,46 @@ import './TruncateExamples.css';
 
 ## Examples
 
+The default behavior of the `Truncate` component is to truncate based on whether the content can fit within the width of its parent container, and to prevent text from wrapping. The following examples that use this default behavior render the `<Truncate>` component inside a resizable container, allowing you to see how the parent container width affects the truncation.
+
 ### Default
-```js
-import { Truncate } from '@patternfly/react-core';
-
-<div className="truncate-example-resize">
-  <Truncate
-    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
-  />
-</div>
+
+By default content will be truncated at its end when it cannot fit entirely inside its parent container.
+
+```ts file="./TruncateDefault.tsx"
+
 ```
 
 ### Middle
-```js
-import { Truncate } from '@patternfly/react-core';
-
-<div className="truncate-example-resize">
-  <Truncate
-    content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
-    trailingNumChars={10}
-    position={'middle'}
-  />
-</div>
+
+When passing a `position` property with a value of "middle", the position of the truncation will change based on the parent container's width and the amount of `trailingNumChars` passed in. The `trailingNumChars` will always be displayed, while the rest of the content will be truncated based on the parent container width.
+
+```ts file="./TruncateMiddle.tsx"
+
 ```
 
 ### Start
-```js
-import { Truncate } from '@patternfly/react-core';
-
-<div className="truncate-example-resize">
-  <Truncate
-    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
-    position={'start'}
-  />
-</div>
+
+You can truncate content at its start by passing the `position` property with a value of "start". This can be useful if you have several strings to truncate that have similar text at the start, but unique text at the end that you want to have visible.
+
+```ts file="./TruncateStart.tsx"
+
 ```
 
-### Default with tooltip at the bottom
-```js
-import { Truncate } from '@patternfly/react-core';
+### With custom tooltip position
+
+You can customize the position of the `<Tooltip>` that is rendered by passing in the `tooltipPosition` property. The following example overrides the default "top" position with a "bottom" position.
+
+```ts file="./TruncateCustomTooltipPosition.tsx"
+
+```
+
+### Based on max characters
+
+Rather than observing container width, you can have truncation be based on a maximum amount of characters that should always be displayed via the `maxCharsDisplayed` property. While the content's parent container width will not have an affect on whether truncation occurs, it will affect whether the content wraps. This property must be set to a value larger than `0`, otherwise the component will fall back to observing container width.
+
+Truncating based on a maximum amount of characters will truncate the content at the end by default. When the `position` property is set to "middle", the truncation will split the content as evenly as possible, providing a more "true middle" truncation.
+
+```ts file="./TruncateMaxChars.tsx"
 
-<div className="truncate-example-resize">
-  <Truncate
-    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
-    tooltipPosition={'bottom'}
-  />
-</div>
 ```

package/src/components/Truncate/examples/TruncateCustomTooltipPosition.tsx

@@ -0,0 +1,10 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateCustomTooltipPosition: React.FunctionComponent = () => (
+  <div className="truncate-example-resize">
+    <Truncate
+      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
+      tooltipPosition={'bottom'}
+    />
+  </div>
+);

package/src/components/Truncate/examples/TruncateDefault.tsx

@@ -0,0 +1,7 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateDefault: React.FunctionComponent = () => (
+  <div className="truncate-example-resize">
+    <Truncate content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'} />
+  </div>
+);

package/src/components/Truncate/examples/TruncateMaxChars.tsx

@@ -0,0 +1,27 @@
+import { Truncate, TruncatePosition } from '@patternfly/react-core';
+
+export const TruncateMaxChars: React.FunctionComponent = () => (
+  <>
+    <div>Truncated at end position:</div>
+    <Truncate
+      maxCharsDisplayed={15}
+      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
+    />
+    <br />
+    <br />
+    <div>Truncated at middle position:</div>
+    <Truncate
+      maxCharsDisplayed={15}
+      position={TruncatePosition.middle}
+      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
+    />
+    <br />
+    <br />
+    <div>Truncated at start position:</div>
+    <Truncate
+      maxCharsDisplayed={15}
+      position={TruncatePosition.start}
+      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
+    />
+  </>
+);

package/src/components/Truncate/examples/TruncateMiddle.tsx

@@ -0,0 +1,11 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateMiddle: React.FunctionComponent = () => (
+  <div className="truncate-example-resize">
+    <Truncate
+      content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
+      trailingNumChars={10}
+      position={'middle'}
+    />
+  </div>
+);

package/src/components/Truncate/examples/TruncateStart.tsx

@@ -0,0 +1,7 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateStart: React.FunctionComponent = () => (
+  <div className="truncate-example-resize">
+    <Truncate content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'} position={'start'} />
+  </div>
+);

package/src/components/Wizard/WizardNavInternal.tsx

@@ -96,7 +96,7 @@ export const WizardNavInternal = ({
             }
           });
           const hasEnabledChildren = Children.toArray(subNavItems).some(
-            (child) => isValidElement(child) && !child.props.isDisabled
+            (child) => isValidElement(child) && !(child.props as any).isDisabled
           );
 
           if (!isProgressive || (isProgressive && step.index <= activeStep.index)) {

package/src/components/Wizard/examples/WizardGetCurrentStep.tsx

@@ -10,7 +10,7 @@ import {
 } from '@patternfly/react-core';
 
 const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepType | undefined }) => (
-  <DescriptionList isHorizontal isCompact>
+  <DescriptionList isHorizontal isCompact aria-label={`${currentStep?.name} prop data`}>
     <DescriptionListGroup>
       <DescriptionListTerm>Index</DescriptionListTerm>
       <DescriptionListDescription>{currentStep?.index}</DescriptionListDescription>

package/src/demos/DescriptionList/examples/DescriptionListBasic.tsx

@@ -33,7 +33,7 @@ export const DescriptionListBasic: React.FunctionComponent = () => (
         </CardHeader>
         <Divider />
         <CardBody>
-          <DescriptionList isAutoFit>
+          <DescriptionList isAutoFit aria-label="Details">
             <DescriptionListGroup>
               <DescriptionListTerm>Name</DescriptionListTerm>
               <DescriptionListDescription>mary-test</DescriptionListDescription>

package/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx

@@ -51,7 +51,7 @@ export const DescriptionListInDrawer: React.FunctionComponent = () => {
         </DrawerActions>
       </DrawerHead>
       <DrawerPanelBody>
-        <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
+        <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }} aria-label="Details">
           <DescriptionListGroup>
             <DescriptionListTerm>Name</DescriptionListTerm>
             <DescriptionListDescription>test</DescriptionListDescription>

package/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx

@@ -13,7 +13,7 @@ export const ExpandableTextDemo: React.FunctionComponent = () => {
   return (
     <ExpandableSection
       variant={ExpandableSectionVariant.truncate}
-      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      toggleText={isExpanded ? 'Show less truncated content' : 'Show more truncated content'}
       onToggle={onToggle}
       isExpanded={isExpanded}
       truncateMaxLines={-1}

package/src/demos/SearchInput/SearchInput.md

@@ -172,6 +172,7 @@ SearchAutocomplete = () => {
       ref={searchInputRef}
       hint={hint}
       id="autocomplete-search"
+      aria-label='Search with autocomplete'
     />
   );
 
@@ -401,6 +402,7 @@ AdvancedComposableSearchInput = () => {
       onSearch={onSubmit}
       ref={searchInputRef}
       id="custom-advanced-search"
+      aria-label='Composable advanced search'
     />
   );
 

package/src/demos/examples/Card/CardDetails.tsx

@@ -23,7 +23,7 @@ export const CardDetailsDemo: React.FunctionComponent = () => (
         </Title>
       </CardTitle>
       <CardBody>
-        <DescriptionList>
+        <DescriptionList aria-label="Cluster details for API1">
           <DescriptionListGroup>
             <DescriptionListTerm>Cluster API Address</DescriptionListTerm>
             <DescriptionListDescription>
@@ -60,7 +60,7 @@ export const CardDetailsDemo: React.FunctionComponent = () => (
         </Title>
       </CardTitle>
       <CardBody>
-        <DescriptionList>
+        <DescriptionList aria-label="Cluster details for API2">
           <DescriptionListGroup>
             <DescriptionListTerm>Cluster API Address</DescriptionListTerm>
             <DescriptionListDescription>

package/src/demos/examples/Card/CardEventsView.tsx

@@ -72,7 +72,7 @@ export const CardEventsView: React.FunctionComponent = () => {
             </CardTitle>
           </CardHeader>
           <CardBody>
-            <DescriptionList>
+            <DescriptionList aria-label="Events view">
               <DescriptionListGroup>
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>

package/src/demos/examples/Card/CardLogView.tsx

@@ -71,7 +71,7 @@ export const CardLogView: React.FunctionComponent = () => {
             </CardTitle>
           </CardHeader>
           <CardBody>
-            <DescriptionList>
+            <DescriptionList aria-label="Activity logs">
               <DescriptionListGroup>
                 <DescriptionListTerm>Readiness probe failed</DescriptionListTerm>
                 <DescriptionListDescription>

package/src/demos/examples/Card/CardStatusTabbed.tsx

@@ -68,8 +68,8 @@ export const CardStatusTabbed: React.FunctionComponent = () => {
     setActiveTabKey(Number(tabIndex));
   };
 
-  const tabContent = (
-    <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }}>
+  const tabContent = (tabIndex: number) => (
+    <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }} aria-label={`Object ${tabIndex + 1} status`}>
       {descriptionListData.map(({ status, resourceName, detail, icon }, index) => (
         <DescriptionListGroup key={index}>
           <DescriptionListTerm>
@@ -120,7 +120,7 @@ export const CardStatusTabbed: React.FunctionComponent = () => {
               activeKey={activeTabKey}
               hidden={tabIndex !== activeTabKey}
             >
-              {tabContent}
+              {tabContent(tabIndex)}
             </TabContent>
           ))}
         </CardBody>

package/src/demos/examples/Skeleton/SkeletonCard.tsx

@@ -7,9 +7,9 @@ export const SkeletonCard: React.FunctionComponent = () => {
       <CardBody>
         <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
           <Skeleton screenreaderText="Loading content" />
-          <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
-          <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
-          <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+          <Skeleton width="66%" />
+          <Skeleton width="25%" />
+          <Skeleton width="50%" />
         </Flex>
       </CardBody>
       <CardBody>
@@ -18,9 +18,9 @@ export const SkeletonCard: React.FunctionComponent = () => {
       <CardBody>
         <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
           <Skeleton screenreaderText="Loading content" />
-          <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
-          <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
-          <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+          <Skeleton width="25%" />
+          <Skeleton width="75%" />
+          <Skeleton width="50%" />
         </Flex>
       </CardBody>
     </Card>

package/src/deprecated/components/Wizard/WizardNavItem.tsx

@@ -89,18 +89,20 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         {...(isExpandable && { 'aria-expanded': isExpanded })}
         {...ouiaProps}
       >
-        {isExpandable ? (
-          <>
-            <span className={css(styles.wizardNavLinkText)}>{content}</span>
-            <span className={css(styles.wizardNavLinkToggle)}>
-              <span className={css(styles.wizardNavLinkToggleIcon)}>
-                <AngleRightIcon />
+        <span className={css(styles.wizardNavLinkMain)}>
+          {isExpandable ? (
+            <>
+              <span className={css(styles.wizardNavLinkText)}>{content}</span>
+              <span className={css(styles.wizardNavLinkToggle)}>
+                <span className={css(styles.wizardNavLinkToggleIcon)}>
+                  <AngleRightIcon />
+                </span>
               </span>
-            </span>
-          </>
-        ) : (
-          content
-        )}
+            </>
+          ) : (
+            content
+          )}
+        </span>
       </NavItemComponent>
       {children}
     </li>

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap

@@ -12,7 +12,11 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = `
       data-ouia-component-type="PF6/WizardNavItem"
       data-ouia-safe="true"
       type="button"
-    />
+    >
+      <span
+        class="pf-v6-c-wizard__nav-link-main"
+      />
+    </button>
     ReactNode
   </li>
 </DocumentFragment>

package/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap

@@ -120,7 +120,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                A
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  A
+                </span>
               </button>
             </li>
             <li
@@ -136,29 +140,33 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 type="button"
               >
                 <span
-                  class="pf-v6-c-wizard__nav-link-text"
-                >
-                  B
-                </span>
-                <span
-                  class="pf-v6-c-wizard__nav-link-toggle"
+                  class="pf-v6-c-wizard__nav-link-main"
                 >
                   <span
-                    class="pf-v6-c-wizard__nav-link-toggle-icon"
+                    class="pf-v6-c-wizard__nav-link-text"
+                  >
+                    B
+                  </span>
+                  <span
+                    class="pf-v6-c-wizard__nav-link-toggle"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v6-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 256 512"
-                      width="1em"
+                    <span
+                      class="pf-v6-c-wizard__nav-link-toggle-icon"
                     >
-                      <path
-                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                        />
+                      </svg>
+                    </span>
                   </span>
                 </span>
               </button>
@@ -177,7 +185,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                     data-ouia-safe="true"
                     type="button"
                   >
-                    B-1
+                    <span
+                      class="pf-v6-c-wizard__nav-link-main"
+                    >
+                      B-1
+                    </span>
                   </button>
                 </li>
                 <li
@@ -191,7 +203,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                     data-ouia-safe="true"
                     type="button"
                   >
-                    B-2
+                    <span
+                      class="pf-v6-c-wizard__nav-link-main"
+                    >
+                      B-2
+                    </span>
                   </button>
                 </li>
               </ol>
@@ -207,7 +223,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                C
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  C
+                </span>
               </button>
             </li>
             <li
@@ -221,7 +241,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                D
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  D
+                </span>
               </button>
             </li>
           </ol>
@@ -432,7 +456,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 id="step-A"
                 type="button"
               >
-                A
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  A
+                </span>
               </button>
             </li>
             <li
@@ -447,7 +475,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 id="step-B"
                 type="button"
               >
-                B
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  B
+                </span>
               </button>
               <ol
                 class="pf-v6-c-wizard__nav-list"
@@ -465,7 +497,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                     id="step-B-1"
                     type="button"
                   >
-                    B-1
+                    <span
+                      class="pf-v6-c-wizard__nav-link-main"
+                    >
+                      B-1
+                    </span>
                   </button>
                 </li>
                 <li
@@ -480,7 +516,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                     id="step-B-2"
                     type="button"
                   >
-                    B-2
+                    <span
+                      class="pf-v6-c-wizard__nav-link-main"
+                    >
+                      B-2
+                    </span>
                   </button>
                 </li>
               </ol>
@@ -497,7 +537,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 id="step-C"
                 type="button"
               >
-                C
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  C
+                </span>
               </button>
             </li>
             <li
@@ -512,7 +556,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 id="step-D"
                 type="button"
               >
-                D
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  D
+                </span>
               </button>
             </li>
           </ol>
@@ -672,7 +720,11 @@ exports[`Wizard bare wiz 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                A
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  A
+                </span>
               </button>
             </li>
           </ol>

package/src/components/List/__tests__/Generated/ListItem.test.tsx

@@ -1,12 +0,0 @@
-/**
- * This test was generated
- */
-import { render } from '@testing-library/react';
-import { ListItem } from '../../ListItem';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('ListItem should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<ListItem children={<>ReactNode</>} />);
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ListItem should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <li
-    class=""
-  >
-    <span>
-      ReactNode
-    </span>
-  </li>
-</DocumentFragment>
-`;