@patternfly/react-core 4.232.13 → 4.234.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.232.13",
+  "version": "4.234.0",
   "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",
@@ -50,16 +50,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.83.13",
-    "@patternfly/react-styles": "^4.82.13",
-    "@patternfly/react-tokens": "^4.84.13",
+    "@patternfly/react-icons": "^4.85.0",
+    "@patternfly/react-styles": "^4.84.0",
+    "@patternfly/react-tokens": "^4.86.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.208.1",
+    "@patternfly/patternfly": "4.210.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -76,5 +76,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "0dd257e3f6ec904a5aa670c4c8364e75ced77404"
+  "gitHead": "fa6869951efc44e52696e065322c40478aa3fad3"
 }

package/src/components/Button/examples/Button.md

@@ -16,68 +16,99 @@ import { Link } from '@reach/router';
 
 ## Examples
 
-### Variations
+### Variant examples
+
+PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the `variant` property.
 
 ```ts file="./ButtonVariations.tsx"
 ```
 
-### Disabled
+| Variant | Description|
+| --- | ---|
+| Primary | Primary buttons are the most visually prominent variant. Use for the most important call to action.|
+| Secondary | Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons. |
+| Tertiary | Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons.  |
+| Danger | Danger buttons may be used for actions that are potentially destructive or difficult/impossible to undo. Danger is an independent variant, but all button variants may use the the `isDanger` property to apply similar styling. |
+| Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
+| Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.|
+| Plain | Plain buttons have no styling and are intended to be labeled with icons. |
+| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](https://www.patternfly.org/v4/components/input-group). | 
+
+### Disabled buttons
+
+To indicate that an action is currently unavailable, all button variations can be disabled using the `isDisabled` property.
 
 ```ts file="./ButtonDisabled.tsx"
 ```
 
-### Aria disabled
+### Small buttons
 
-```ts file="./ButtonAriaDisabled.tsx"
+To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `isSmall` property.
+
+```ts file="./ButtonSmall.tsx"
 ```
 
-### Aria disabled button with tooltip
+### Call to action (CTA) buttons
 
-```ts file="./ButtonAriaDisabledTooltip.tsx"
+CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `isLarge` property. 
+
+```ts file="./ButtonCallToAction.tsx"
 ```
 
-### Aria disabled link as button with tooltip
+### Block level buttons
 
-```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
+Block level buttons span the full width of the parent element and can be enabled using the `isBlock` property.
+
+```ts file="./ButtonBlock.tsx"
+```
+
+### Progress indicators
+
+Progress indicators can be added to buttons to identify that an action is in progress after a click. 
+
+```ts file="./ButtonProgress.tsx"
 ```
 
 ### Links as buttons
 
+Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use `component="a"` and an `href` property to designate the button's target link.
+
 ```ts file="./ButtonLinks.tsx"
 ```
 
 ### Inline link as span
 
+Inline links should use `component="span"` and the `isInline` property to wrap inline with surrounding text.
+
 ```ts file="./ButtonInlineSpanLink.tsx"
 ```
 
-### Block level
-
-```ts file="./ButtonBlock.tsx"
-```
+### Router link
 
-### Types
+Router links can be used for in-app linking in React environments to prevent page reloading.
 
-```ts file="./ButtonTypes.tsx"
+```ts file="./ButtonRouterLink.tsx"
 ```
 
-### Small
+### Aria-disabled examples
 
-```ts file="./ButtonSmall.tsx"
-```
+[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities.
 
-### Call to action
+Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the `isAriaDisabled` property.
 
-```ts file="./ButtonCallToAction.tsx"
+```ts file="./ButtonAriaDisabled.tsx"
 ```
 
-### Progress
+### Aria-disabled with tooltip
 
-```ts file="./ButtonProgress.tsx"
+Unlike normal disabled buttons, aria-disabled buttons can support tooltips.
+
+```ts file="./ButtonAriaDisabledTooltip.tsx"
 ```
 
-### Router link
+### Aria-disabled link as button with tooltip
 
-```ts file="./ButtonRouterLink.tsx"
-```
+Aria-disabled buttons can operate as links, which also support tooltips.
 
+```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
+```

package/src/components/ContextSelector/examples/ContextSelectorBasic.tsx

@@ -48,7 +48,7 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
     setSearchValue(value);
   };
 
-  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+  const onSearchButtonClick = () => {
     const filtered =
       searchValue === ''
         ? items
@@ -71,11 +71,11 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
       screenReaderLabel="Selected Project:"
     >
       {filteredItems.map((item, index) => {
-        const [text = null, href = null, isDisabled] =
-          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        const [text = null, href = undefined, isDisabled] =
+          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
         return (
           <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
-            {text || item}
+            {text}
           </ContextSelectorItem>
         );
       })}

package/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx

@@ -47,7 +47,7 @@ export const ContextSelectorPlainText: React.FunctionComponent = () => {
     setSearchValue(value);
   };
 
-  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+  const onSearchButtonClick = () => {
     const filtered =
       searchValue === ''
         ? items
@@ -72,8 +72,8 @@ export const ContextSelectorPlainText: React.FunctionComponent = () => {
       isText
     >
       {filteredItems.map((item, index) => {
-        const [text, href = null, isDisabled = false] =
-          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        const [text, href = undefined, isDisabled = false] =
+          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
         return (
           <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
             {text}

package/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx

@@ -47,7 +47,7 @@ export const ContextSelectorWithFooter: React.FunctionComponent = () => {
     setSearchValue(value);
   };
 
-  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+  const onSearchButtonClick = () => {
     const filtered =
       searchValue === ''
         ? items
@@ -78,11 +78,11 @@ export const ContextSelectorWithFooter: React.FunctionComponent = () => {
       }
     >
       {filteredItems.map((item, index) => {
-        const [text = null, href = null, isDisabled] =
-          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        const [text = null, href = undefined, isDisabled] =
+          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
         return (
           <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
-            {text || item}
+            {text}
           </ContextSelectorItem>
         );
       })}

package/src/components/DualListSelector/examples/DualListSelectorComposable.tsx

@@ -16,8 +16,14 @@ import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-d
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
 export const DualListSelectorComposable: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState([
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
     { text: 'Apple', selected: false, isVisible: true },
     { text: 'Banana', selected: false, isVisible: true },
     { text: 'Pineapple', selected: false, isVisible: true },
@@ -26,7 +32,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     { text: 'Peach', selected: false, isVisible: true },
     { text: 'Strawberry', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState([]);
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
   const [availableFilter, setAvailableFilter] = React.useState('');
   const [chosenFilter, setChosenFilter] = React.useState('');
 

package/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx

@@ -8,20 +8,14 @@ import {
   DualListSelectorList,
   DualListSelectorListItem,
   DualListSelectorControlsWrapper,
-  DualListSelectorControl
+  DualListSelectorControl,
+  DraggableItemPosition
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
-interface SourceType {
-  droppableId: string;
-  index: number;
-}
-
-interface DestinationType extends SourceType {}
-
 export const DualListSelectorComposableDragDrop: React.FunctionComponent = () => {
   const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = React.useState(false);
   const [availableOptions, setAvailableOptions] = React.useState([
@@ -87,7 +81,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
     }
   };
 
-  const onDrop = (source: SourceType, dest: DestinationType) => {
+  const onDrop = (source: DraggableItemPosition, dest?: DraggableItemPosition) => {
     if (dest) {
       const newList = [...chosenOptions];
       const [removed] = newList.splice(source.index, 1);

package/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

@@ -52,7 +52,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     if (!node.children || !node.children.length) {
       return [node.id];
     } else {
-      let childrenIds = [];
+      let childrenIds: string[] = [];
       node.children.forEach(child => {
         childrenIds = [...childrenIds, ...getDescendantLeafIds(child)];
       });
@@ -77,7 +77,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   // Builds a map of child leaf nodes by node id - memoized so that it only rebuilds the list if the data changes.
   const { memoizedLeavesById, memoizedAllLeaves, memoizedNodeText } = React.useMemo(() => {
     let leavesById = {};
-    let allLeaves = [];
+    let allLeaves: string[] = [];
     let nodeTexts = {};
     data.forEach(foodNode => {
       nodeTexts = { ...nodeTexts, ...buildTextById(foodNode) };
@@ -129,7 +129,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       return true;
     }
     if (areSomeDescendantsSelected(node, isChosen)) {
-      return null;
+      return false;
     }
     return false;
   };

package/src/components/DualListSelector/examples/DualListSelectorTreeExample.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
+import { DualListSelector, DualListSelectorTreeItemData } from '@patternfly/react-core';
 
 export const DualListSelectorTreeExample: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+  const [availableOptions, setAvailableOptions] = React.useState<DualListSelectorTreeItemData[]>([
     {
       id: 'F1',
       text: 'Folder 1',
@@ -38,7 +38,7 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
     }
   ]);
 
-  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([
+  const [chosenOptions, setChosenOptions] = React.useState<DualListSelectorTreeItemData[]>([
     {
       id: 'CF1',
       text: 'Chosen Folder 1',
@@ -73,7 +73,10 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
     }
   ]);
 
-  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+  const onListChange = (
+    newAvailableOptions: DualListSelectorTreeItemData[],
+    newChosenOptions: DualListSelectorTreeItemData[]
+  ) => {
     setAvailableOptions(newAvailableOptions.sort());
     setChosenOptions(newChosenOptions.sort());
   };
@@ -84,7 +87,7 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
       isTree
       availableOptions={availableOptions}
       chosenOptions={chosenOptions}
-      onListChange={onListChange}
+      onListChange={onListChange as any}
       id="dual-list-selector-tree"
     />
   );

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
 import { css } from '@patternfly/react-styles';
+import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { PickOptional } from '../../helpers/typeUtils';
 
+export enum ExpandableSectionVariant {
+  default = 'default',
+  truncate = 'truncate'
+}
+
 export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Expandable Component */
+  /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
-  /** Additional classes added to the Expandable Component */
+  /** Additional classes added to the expandable section. */
   className?: string;
   /** Flag to indicate if the content is expanded */
   isExpanded?: boolean;
@@ -19,7 +25,7 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
   toggleTextCollapsed?: string;
   /** React node that appears in the attached toggle in place of toggle text */
   toggleContent?: React.ReactNode;
-  /** Callback function to toggle the expandable content. Detached expandable sections should use the onToggle property of ExpandableSectionToggle. */
+  /** Callback function to toggle the expandable section. Detached expandable sections should use the onToggle property of the expandable section toggle sub-component. */
   onToggle?: (isExpanded: boolean) => void;
   /** Forces active state */
   isActive?: boolean;
@@ -33,12 +39,27 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
   isWidthLimited?: boolean;
   /** Flag to indicate if the content is indented */
   isIndented?: boolean;
+  /** @beta Determines the variant of the expandable section. When passing in "truncate" as the
+   * variant, the expandable content will be truncated after 3 lines by default.
+   */
+  variant?: 'default' | 'truncate';
+  /** @beta Truncates the expandable content to the specified number of lines when using the
+   * "truncate" variant. */
+  truncateMaxLines?: number;
 }
 
 interface ExpandableSectionState {
   isExpanded: boolean;
 }
 
+const setLineClamp = (lines: number, element: HTMLDivElement) => {
+  if (!element || lines < 1) {
+    return;
+  }
+
+  element.style.setProperty(lineClamp.name, lines.toString());
+};
+
 export class ExpandableSection extends React.Component<ExpandableSectionProps, ExpandableSectionState> {
   static displayName = 'ExpandableSection';
   constructor(props: ExpandableSectionProps) {
@@ -49,6 +70,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     };
   }
 
+  expandableContentRef = React.createRef<HTMLDivElement>();
   static defaultProps: PickOptional<ExpandableSectionProps> = {
     className: '',
     toggleText: '',
@@ -61,7 +83,8 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     displaySize: 'default',
     isWidthLimited: false,
     isIndented: false,
-    contentId: ''
+    contentId: '',
+    variant: 'default'
   };
 
   private calculateToggleText(
@@ -79,6 +102,23 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     return toggleText;
   }
 
+  componentDidMount() {
+    if (this.props.variant === ExpandableSectionVariant.truncate && this.props.truncateMaxLines) {
+      const expandableContent = this.expandableContentRef.current;
+      setLineClamp(this.props.truncateMaxLines, expandableContent);
+    }
+  }
+
+  componentDidUpdate(prevProps: ExpandableSectionProps) {
+    if (
+      this.props.variant === ExpandableSectionVariant.truncate &&
+      prevProps.truncateMaxLines !== this.props.truncateMaxLines
+    ) {
+      const expandableContent = this.expandableContentRef.current;
+      setLineClamp(this.props.truncateMaxLines, expandableContent);
+    }
+  }
+
   render() {
     const {
       onToggle: onToggleProp,
@@ -96,6 +136,9 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
       isWidthLimited,
       isIndented,
       contentId,
+      variant,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      truncateMaxLines,
       ...props
     } = this.props;
     let onToggle = onToggleProp;
@@ -116,9 +159,24 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
       propOrStateIsExpanded
     );
 
+    const expandableToggle = !isDetached && (
+      <button
+        className={css(styles.expandableSectionToggle)}
+        type="button"
+        aria-expanded={propOrStateIsExpanded}
+        onClick={() => onToggle(!propOrStateIsExpanded)}
+      >
+        {variant !== ExpandableSectionVariant.truncate && (
+          <span className={css(styles.expandableSectionToggleIcon)}>
+            <AngleRightIcon aria-hidden />
+          </span>
+        )}
+        <span className={css(styles.expandableSectionToggleText)}>{toggleContent || computedToggleText}</span>
+      </button>
+    );
+
     return (
       <div
-        {...props}
         className={css(
           styles.expandableSection,
           propOrStateIsExpanded && styles.modifiers.expanded,
@@ -127,25 +185,21 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
           displaySize === 'large' && styles.modifiers.displayLg,
           isWidthLimited && styles.modifiers.limitWidth,
           isIndented && styles.modifiers.indented,
+          variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
           className
         )}
+        {...props}
       >
-        {!isDetached && (
-          <button
-            className={css(styles.expandableSectionToggle)}
-            type="button"
-            aria-expanded={propOrStateIsExpanded}
-            onClick={() => onToggle(!propOrStateIsExpanded)}
-          >
-            <span className={css(styles.expandableSectionToggleIcon)}>
-              <AngleRightIcon aria-hidden />
-            </span>
-            <span className={css(styles.expandableSectionToggleText)}>{toggleContent || computedToggleText}</span>
-          </button>
-        )}
-        <div className={css(styles.expandableSectionContent)} hidden={!propOrStateIsExpanded} id={contentId}>
+        {variant === ExpandableSectionVariant.default && expandableToggle}
+        <div
+          ref={this.expandableContentRef}
+          className={css(styles.expandableSectionContent)}
+          hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
+          id={contentId}
+        >
           {children}
         </div>
+        {variant === ExpandableSectionVariant.truncate && expandableToggle}
       </div>
     );
   }

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -16,6 +16,8 @@ export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivEle
   contentId?: string;
   /** Direction the toggle arrow should point when the expandable section is expanded. */
   direction?: 'up' | 'down';
+  /** @beta Flag to determine toggle styling when the expandable content is truncated. */
+  hasTruncatedContent?: boolean;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -25,16 +27,18 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   onToggle,
   contentId,
   direction = 'down',
+  hasTruncatedContent = false,
   ...props
 }: ExpandableSectionToggleProps) => (
   <div
-    {...props}
     className={css(
       styles.expandableSection,
       isExpanded && styles.modifiers.expanded,
       styles.modifiers.detached,
+      hasTruncatedContent && styles.modifiers.truncate,
       className
     )}
+    {...props}
   >
     <button
       className={css(styles.expandableSectionToggle)}
@@ -43,14 +47,16 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
       aria-controls={contentId}
       onClick={() => onToggle(!isExpanded)}
     >
-      <span
-        className={css(
-          styles.expandableSectionToggleIcon,
-          isExpanded && direction === 'up' && styles.modifiers.expandTop
-        )}
-      >
-        <AngleRightIcon aria-hidden />
-      </span>
+      {!hasTruncatedContent && (
+        <span
+          className={css(
+            styles.expandableSectionToggleIcon,
+            isExpanded && direction === 'up' && styles.modifiers.expandTop
+          )}
+        >
+          <AngleRightIcon aria-hidden />
+        </span>
+      )}
       <span className={css(styles.expandableSectionToggleText)}>{children}</span>
     </button>
   </div>

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { ExpandableSection } from '../ExpandableSection';
+import { ExpandableSection, ExpandableSectionVariant } from '../ExpandableSection';
 import { ExpandableSectionToggle } from '../ExpandableSectionToggle';
 
 const props = {};
@@ -64,3 +64,29 @@ test('Renders ExpandableSection indented', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Does not render with pf-m-truncate class when variant is not passed', () => {
+  render(<ExpandableSection {...props}>test</ExpandableSection>);
+
+  expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
+});
+
+test('Does not render with pf-m-truncate class when variant is not truncate', () => {
+  render(
+    <ExpandableSection variant={ExpandableSectionVariant.default} {...props}>
+      test
+    </ExpandableSection>
+  );
+
+  expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
+});
+
+test('Renders with pf-m-truncate class when variant is truncate', () => {
+  render(
+    <ExpandableSection variant={ExpandableSectionVariant.truncate} {...props}>
+      test
+    </ExpandableSection>
+  );
+
+  expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate');
+});

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -45,3 +45,10 @@ By using the `toggleContent` prop, you can pass in content other than a simple s
 
 ```ts file="ExpandableSectionCustomToggle.tsx"
 ```
+
+### Truncate expansion
+
+By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.
+
+```ts file="ExpandableSectionTruncateExpansion.tsx" isBeta
+```

package/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ExpandableSection, ExpandableSectionVariant } from '@patternfly/react-core';
+
+export const ExpandableSectionTruncateExpansion: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      variant={ExpandableSectionVariant.truncate}
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.
+      Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient
+      montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla,
+      eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam,
+      tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus.
+      Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante
+      commodo tincidunt. Integer tincidunt at ipsum non aliquet.
+    </ExpandableSection>
+  );
+};