@patternfly/react-core 6.2.1-prerelease.9 → 6.2.2

package/src/components/Truncate/Truncate.tsx

@@ -22,18 +22,8 @@ export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
   className?: string;
   /** Text to truncate */
   content: string;
-  /** The number of characters displayed in the second half of a middle truncation. This will be overridden by
-   * the maxCharsDisplayed prop.
-   */
+  /** The number of characters displayed in the second half of the truncation */
   trailingNumChars?: number;
-  /** The maximum number of characters to display before truncating. This will always truncate content
-   * when its length exceeds the value passed to this prop, and container width/resizing will not affect truncation.
-   */
-  maxCharsDisplayed?: number;
-  /** The content to use to signify omission of characters when using the maxCharsDisplayed prop.
-   * By default this will render an ellipsis.
-   */
-  omissionContent?: string;
   /** Where the text will be truncated */
   position?: 'start' | 'middle' | 'end';
   /** Tooltip position */
@@ -59,15 +49,13 @@ export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
   refToGetParent?: React.RefObject<any>;
 }
 
-const sliceTrailingContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
+const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
 
 export const Truncate: React.FunctionComponent<TruncateProps> = ({
   className,
   position = 'end',
   tooltipPosition = 'top',
   trailingNumChars = 7,
-  maxCharsDisplayed,
-  omissionContent = '\u2026',
   content,
   refToGetParent,
   ...props
@@ -75,17 +63,11 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   const [isTruncated, setIsTruncated] = useState(true);
   const [parentElement, setParentElement] = useState<HTMLElement>(null);
   const [textElement, setTextElement] = useState<HTMLElement>(null);
-  const [shouldRenderByMaxChars, setShouldRenderByMaxChars] = useState(maxCharsDisplayed > 0);
 
   const textRef = useRef<HTMLElement>(null);
   const subParentRef = useRef<HTMLDivElement>(null);
   const observer = useRef(null);
 
-  if (maxCharsDisplayed <= 0) {
-    // eslint-disable-next-line no-console
-    console.warn('Truncate: the maxCharsDisplayed must be greater than 0, otherwise no content will be visible.');
-  }
-
   const getActualWidth = (element: Element) => {
     const computedStyle = getComputedStyle(element);
 
@@ -118,7 +100,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   }, [textRef, subParentRef, textElement, parentElement]);
 
   useEffect(() => {
-    if (textElement && parentElement && !observer.current && !shouldRenderByMaxChars) {
+    if (textElement && parentElement && !observer.current) {
       const totalTextWidth = calculateTotalTextWidth(textElement, trailingNumChars, content);
       const textWidth = position === 'middle' ? totalTextWidth : textElement.scrollWidth;
 
@@ -133,100 +115,31 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
         observer();
       };
     }
-  }, [textElement, parentElement, trailingNumChars, content, position, shouldRenderByMaxChars]);
+  }, [textElement, parentElement, trailingNumChars, content, position]);
 
-  useEffect(() => {
-    if (shouldRenderByMaxChars) {
-      setIsTruncated(content.length > maxCharsDisplayed);
-    }
-  }, [shouldRenderByMaxChars]);
-
-  useEffect(() => {
-    setShouldRenderByMaxChars(maxCharsDisplayed > 0);
-  }, [maxCharsDisplayed]);
-
-  const renderResizeObserverContent = () => {
-    if (position === TruncatePosition.end || position === TruncatePosition.start) {
-      return (
-        <>
-          <span ref={textRef} className={truncateStyles[position]}>
-            {content}
-            {position === TruncatePosition.start && <Fragment>&lrm;</Fragment>}
+  const truncateBody = (
+    <span ref={subParentRef} className={css(styles.truncate, className)} {...props}>
+      {(position === TruncatePosition.end || position === TruncatePosition.start) && (
+        <span ref={textRef} className={truncateStyles[position]}>
+          {content}
+          {position === TruncatePosition.start && <Fragment>&lrm;</Fragment>}
+        </span>
+      )}
+      {position === TruncatePosition.middle && content.length - trailingNumChars > minWidthCharacters && (
+        <Fragment>
+          <span ref={textRef} className={styles.truncateStart}>
+            {sliceContent(content, trailingNumChars)[0]}
           </span>
-        </>
-      );
-    }
-
-    const shouldSliceContent = content.length - trailingNumChars > minWidthCharacters;
-    return (
-      <>
+          <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
+        </Fragment>
+      )}
+      {position === TruncatePosition.middle && content.length - trailingNumChars <= minWidthCharacters && (
         <Fragment>
           <span ref={textRef} className={styles.truncateStart}>
-            {shouldSliceContent ? sliceTrailingContent(content, trailingNumChars)[0] : content}
+            {content}
           </span>
-          {shouldSliceContent && (
-            <span className={styles.truncateEnd}>{sliceTrailingContent(content, trailingNumChars)[1]}</span>
-          )}
         </Fragment>
-      </>
-    );
-  };
-
-  const renderMaxDisplayContent = () => {
-    const renderVisibleContent = (contentToRender: string) => (
-      <span className={`${styles.truncate}__text`}>{contentToRender}</span>
-    );
-    if (!isTruncated) {
-      return renderVisibleContent(content);
-    }
-
-    const omissionElement = (
-      <span className={`${styles.truncate}__omission`} aria-hidden="true">
-        {omissionContent}
-      </span>
-    );
-    const renderVisuallyHiddenContent = (contentToHide: string) => (
-      <span className="pf-v6-screen-reader">{contentToHide}</span>
-    );
-
-    if (position === TruncatePosition.start) {
-      return (
-        <>
-          {renderVisuallyHiddenContent(content.slice(0, maxCharsDisplayed * -1))}
-          {omissionElement}
-          {renderVisibleContent(content.slice(maxCharsDisplayed * -1))}
-        </>
-      );
-    }
-    if (position === TruncatePosition.end) {
-      return (
-        <>
-          {renderVisibleContent(content.slice(0, maxCharsDisplayed))}
-          {omissionElement}
-          {renderVisuallyHiddenContent(content.slice(maxCharsDisplayed))}
-        </>
-      );
-    }
-
-    const trueMiddleStart = Math.floor(maxCharsDisplayed / 2);
-    const trueMiddleEnd = Math.ceil(maxCharsDisplayed / 2) * -1;
-    return (
-      <>
-        {renderVisibleContent(content.slice(0, trueMiddleStart))}
-        {omissionElement}
-        {renderVisuallyHiddenContent(content.slice(trueMiddleStart, trueMiddleEnd))}
-        {renderVisibleContent(content.slice(trueMiddleEnd))}
-      </>
-    );
-  };
-
-  const truncateBody = (
-    <span
-      ref={subParentRef}
-      className={css(styles.truncate, shouldRenderByMaxChars && styles.modifiers.fixed, className)}
-      {...props}
-    >
-      {!shouldRenderByMaxChars ? renderResizeObserverContent() : renderMaxDisplayContent()}
+      )}
     </span>
   );
 

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

@@ -1,4 +1,4 @@
-import { render, screen, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import '@testing-library/jest-dom';
@@ -24,7 +24,7 @@ test(`renders with class ${styles.truncate}`, () => {
 
   const test = screen.getByLabelText('test-id');
 
-  expect(test).toHaveClass(styles.truncate, { exact: true });
+  expect(test).toHaveClass(styles.truncate);
 });
 
 test('renders with custom class name passed via prop', () => {
@@ -148,71 +148,3 @@ test('renders with inherited element props spread to the component', () => {
 
   expect(screen.getByTestId('test-id')).toHaveAccessibleName('labelling-id');
 });
-
-describe('Truncation with maxCharsDisplayed', () => {
-  test(`Does not render with class ${styles.modifiers.fixed} when maxCharsDisplayed is 0`, () => {
-    render(<Truncate maxCharsDisplayed={0} data-testid="truncate-component" content="Test content" />);
-
-    expect(screen.getByTestId('truncate-component')).not.toHaveClass(styles.modifiers.fixed);
-  });
-
-  test(`Renders with class ${styles.modifiers.fixed} when maxCharsDisplayed is greater than 0`, () => {
-    render(<Truncate maxCharsDisplayed={1} data-testid="truncate-component" content="Test content" />);
-
-    expect(screen.getByTestId('truncate-component')).toHaveClass(styles.modifiers.fixed);
-  });
-
-  test('Renders with hidden truncated content at end by default when maxCharsDisplayed is passed', () => {
-    render(<Truncate content="Default end position content truncated" maxCharsDisplayed={6} />);
-
-    expect(screen.getByText('Defaul')).toHaveClass(`${styles.truncate}__text`, { exact: true });
-    expect(screen.getByText('t end position content truncated')).toHaveClass('pf-v6-screen-reader');
-  });
-
-  test('Renders with hidden truncated content at middle position when maxCharsDisplayed is passed and position="middle"', () => {
-    render(<Truncate position="middle" content="Middle position contents being truncated" maxCharsDisplayed={10} />);
-
-    expect(screen.getByText('Middl')).toHaveClass(`${styles.truncate}__text`, { exact: true });
-    expect(screen.getByText('e position contents being trun')).toHaveClass('pf-v6-screen-reader');
-    expect(screen.getByText('cated')).toHaveClass(`${styles.truncate}__text`, { exact: true });
-  });
-
-  test('Renders with hidden truncated content at start when maxCharsDisplayed is passed and position="start"', () => {
-    render(<Truncate position="start" content="Start position content truncated" maxCharsDisplayed={6} />);
-
-    expect(screen.getByText('Start position content tru')).toHaveClass('pf-v6-screen-reader');
-    expect(screen.getByText('ncated')).toHaveClass(`${styles.truncate}__text`, { exact: true });
-  });
-
-  test('Renders full content when maxCharsDisplayed exceeds the length of the content', () => {
-    render(<Truncate content="This full content is rendered" maxCharsDisplayed={90} />);
-
-    expect(screen.getByText('This full content is rendered')).toHaveClass(`${styles.truncate}__text`, { exact: true });
-  });
-
-  test('Renders ellipsis as omission content by default', () => {
-    render(<Truncate content="Test truncation content" maxCharsDisplayed={5} />);
-
-    expect(screen.getByText('\u2026')).toHaveClass(`${styles.truncate}__omission`, { exact: true });
-    expect(screen.getByText('\u2026')).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  test('Renders custom omission content when omissionContent is passed', () => {
-    render(<Truncate omissionContent="---" content="Test truncation content" maxCharsDisplayed={5} />);
-
-    expect(screen.getByText('---')).toHaveClass(`${styles.truncate}__omission`, { exact: true });
-    expect(screen.getByText('---')).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  test('Does not render omission content when maxCharsDisplayed exceeds the length of the content ', () => {
-    render(<Truncate content="Test truncation content" maxCharsDisplayed={99} />);
-
-    expect(screen.queryByText('\u2026')).not.toBeInTheDocument();
-  });
-
-  test('Matches snapshot with default position', () => {
-    const { asFragment } = render(<Truncate content="Test truncation content" maxCharsDisplayed={3} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,42 +1,5 @@
 // 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,46 +9,50 @@ 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
-
-By default content will be truncated at its end when it cannot fit entirely inside its parent container.
-
-```ts file="./TruncateDefault.tsx"
-
+```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>
 ```
 
 ### Middle
-
-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"
-
+```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>
 ```
 
 ### Start
-
-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"
-
+```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>
 ```
 
-### 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"
+### Default with tooltip at the bottom
+```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.'}
+    tooltipPosition={'bottom'}
+  />
+</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 as any).isDisabled
+            (child) => isValidElement(child) && !child.props.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 aria-label={`${currentStep?.name} prop data`}>
+  <DescriptionList isHorizontal isCompact>
     <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 aria-label="Details">
+          <DescriptionList isAutoFit>
             <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' }} aria-label="Details">
+        <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
           <DescriptionListGroup>
             <DescriptionListTerm>Name</DescriptionListTerm>
             <DescriptionListDescription>test</DescriptionListDescription>

package/src/demos/SearchInput/SearchInput.md

@@ -172,7 +172,6 @@ SearchAutocomplete = () => {
       ref={searchInputRef}
       hint={hint}
       id="autocomplete-search"
-      aria-label='Search with autocomplete'
     />
   );
 
@@ -402,7 +401,6 @@ 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 aria-label="Cluster details for API1">
+        <DescriptionList>
           <DescriptionListGroup>
             <DescriptionListTerm>Cluster API Address</DescriptionListTerm>
             <DescriptionListDescription>
@@ -60,7 +60,7 @@ export const CardDetailsDemo: React.FunctionComponent = () => (
         </Title>
       </CardTitle>
       <CardBody>
-        <DescriptionList aria-label="Cluster details for API2">
+        <DescriptionList>
           <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 aria-label="Events view">
+            <DescriptionList>
               <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 aria-label="Activity logs">
+            <DescriptionList>
               <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 = (tabIndex: number) => (
-    <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }} aria-label={`Object ${tabIndex + 1} status`}>
+  const tabContent = (
+    <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }}>
       {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(tabIndex)}
+              {tabContent}
             </TabContent>
           ))}
         </CardBody>

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

@@ -1,51 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ListItem } from '../ListItem';
-import styles from '@patternfly/react-styles/css/components/List/list';
-
-test('Renders with children', () => {
-  render(<ListItem>List item content</ListItem>);
-
-  expect(screen.getByRole('listitem')).toHaveTextContent('List item content');
-});
-
-test(`Does not render with a class by default`, () => {
-  render(<ListItem>List item content</ListItem>);
-
-  expect(screen.getByRole('listitem')).not.toHaveClass();
-});
-
-test(`Renders with custom class when className is passed`, () => {
-  render(<ListItem className="test-class">List item content</ListItem>);
-
-  expect(screen.getByRole('listitem')).toHaveClass('test-class', { exact: true });
-});
-
-test(`Renders with icon content when icon prop is passed`, () => {
-  render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
-
-  expect(screen.getByRole('listitem')).toContainHTML('<div>Icon content</div>');
-});
-
-test(`Renders with class ${styles.listItem} when icon prop is passed`, () => {
-  render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
-
-  expect(screen.getByRole('listitem')).toHaveClass(styles.listItem, { exact: true });
-});
-
-test(`Spreads additional props when passed`, () => {
-  render(<ListItem id="test-ID">List item content</ListItem>);
-
-  expect(screen.getByRole('listitem')).toHaveAttribute('id', 'test-ID');
-});
-
-test('Matches snapshot without icon', () => {
-  const { asFragment } = render(<ListItem>List item content</ListItem>);
-
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Matches snapshot with icon', () => {
-  const { asFragment } = render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
-
-  expect(asFragment()).toMatchSnapshot();
-});

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

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Matches snapshot with icon 1`] = `
-<DocumentFragment>
-  <li
-    class="pf-v6-c-list__item"
-  >
-    <span
-      class="pf-v6-c-list__item-icon"
-    >
-      <div>
-        Icon content
-      </div>
-    </span>
-    <span
-      class="pf-v6-c-list__item-text"
-    >
-      List item content
-    </span>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`Matches snapshot without icon 1`] = `
-<DocumentFragment>
-  <li
-    class=""
-  >
-    <span>
-      List item content
-    </span>
-  </li>
-</DocumentFragment>
-`;

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

@@ -1,10 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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>
-);