fix(ExpandableSection): made toggle button conditional with truncate variant (#8570)

* fix(ExpandableSection): made toggle button conditional with truncate variant

* Refactored toggle checking, added integration test

Author: thatblindgeye

packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx

@@ -4,6 +4,8 @@ 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';
+import { debounce } from '../../helpers/util';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum ExpandableSectionVariant {
   default = 'default',
@@ -61,6 +63,8 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
 
 interface ExpandableSectionState {
   isExpanded: boolean;
+  hasToggle: boolean;
+  previousWidth: number;
 }
 
 const setLineClamp = (lines: number, element: HTMLDivElement) => {
@@ -77,11 +81,15 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     super(props);
 
     this.state = {
-      isExpanded: props.isExpanded
+      isExpanded: props.isExpanded,
+      hasToggle: true,
+      previousWidth: undefined
     };
   }
 
   expandableContentRef = React.createRef<HTMLDivElement>();
+  observer: any = () => {};
+
   static defaultProps: PickOptional<ExpandableSectionProps> = {
     className: '',
     toggleText: '',
@@ -114,9 +122,16 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
   }
 
   componentDidMount() {
-    if (this.props.variant === ExpandableSectionVariant.truncate && this.props.truncateMaxLines) {
+    if (this.props.variant === ExpandableSectionVariant.truncate) {
       const expandableContent = this.expandableContentRef.current;
-      setLineClamp(this.props.truncateMaxLines, expandableContent);
+      this.setState({ previousWidth: expandableContent.offsetWidth });
+      this.observer = getResizeObserver(expandableContent, this.handleResize, false);
+
+      if (this.props.truncateMaxLines) {
+        setLineClamp(this.props.truncateMaxLines, expandableContent);
+      }
+
+      this.checkToggleVisibility();
     }
   }
 
@@ -127,9 +142,38 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     ) {
       const expandableContent = this.expandableContentRef.current;
       setLineClamp(this.props.truncateMaxLines, expandableContent);
+      this.checkToggleVisibility();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.variant === ExpandableSectionVariant.truncate) {
+      this.observer();
     }
   }
 
+  checkToggleVisibility = () => {
+    if (this.expandableContentRef?.current) {
+      const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value);
+      const totalLines =
+        this.expandableContentRef.current.scrollHeight /
+        parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
+
+      this.setState({
+        hasToggle: totalLines > maxLines
+      });
+    }
+  };
+
+  resize = () => {
+    const { offsetWidth } = this.expandableContentRef.current;
+    if (this.state.previousWidth !== offsetWidth) {
+      this.setState({ previousWidth: offsetWidth });
+      this.checkToggleVisibility();
+    }
+  };
+  handleResize = debounce(this.resize, 250);
+
   render() {
     const {
       onToggle: onToggleProp,
@@ -210,7 +254,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
         >
           {children}
         </div>
-        {variant === ExpandableSectionVariant.truncate && expandableToggle}
+        {variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
       </div>
     );
   }

packages/react-integration/cypress/integration/expandablesectiontruncate.ts

@@ -0,0 +1,22 @@
+describe('Expandable Section Truncate Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/expandable-section-truncate-demo-nav-link');
+  });
+
+  it('Verify basic truncation expansion', () => {
+    cy.get('#expandable-section-truncate button').click();
+    cy.get('#expandable-section-truncate').should('have.class', 'pf-m-expanded');
+  });
+
+  it('Verify toggle button renders conditionally', () => {
+    cy.get('#expandable-section-truncate-resizable button').should('not.exist');
+    cy.viewport(400, 660);
+    cy.get('#expandable-section-truncate-resizable button')
+      .should('exist')
+      .click();
+    // Want to verify resizing doesn't remove the toggle button
+    cy.get('#expandable-section-truncate button').should('exist');
+    cy.viewport(800, 660);
+    cy.get('#expandable-section-truncate-resizable button').should('not.exist');
+  });
+});

packages/react-integration/demo-app-ts/src/Demos.ts

@@ -167,6 +167,11 @@ export const Demos: DemoInterface[] = [
     name: 'Expandable Section Demo',
     componentType: Examples.ExpandableSectionDemo
   },
+  {
+    id: 'expandable-section-truncate-demo',
+    name: 'Expandable Section Truncate Demo',
+    componentType: Examples.ExpandableSectionTruncateDemo
+  },
   {
     id: 'fileupload-demo',
     name: 'FileUpload Demo',

packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionTruncateDemo.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ExpandableSection, ExpandableSectionVariant } from '@patternfly/react-core';
+
+export const ExpandableSectionTruncateDemo: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isResizableExpanded, setIsResizableExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const onResizableToggle = (isResizableExpanded: boolean) => {
+    setIsResizableExpanded(isResizableExpanded);
+  };
+
+  return (
+    <>
+      <ExpandableSection
+        id="expandable-section-truncate"
+        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>
+      <br />
+      <ExpandableSection
+        id="expandable-section-truncate-resizable"
+        variant={ExpandableSectionVariant.truncate}
+        toggleText={isResizableExpanded ? 'Show less' : 'Show more'}
+        onToggle={onResizableToggle}
+        isExpanded={isResizableExpanded}
+      >
+        This content will not cause the toggle button to render on larger window widths. Once the window width has been
+        shrunk enough, the toggle button will render.
+      </ExpandableSection>
+    </>
+  );
+};
+ExpandableSectionTruncateDemo.displayName = 'ExpandableSectionTruncateDemo';

packages/react-integration/demo-app-ts/src/components/demos/index.ts

@@ -31,6 +31,7 @@ export * from './DualListSelectorDemo/DualListSelectorBasicDemo';
 export * from './DualListSelectorDemo/DualListSelectorTreeDemo';
 export * from './DualListSelectorDemo/DualListSelectorWithActionsDemo';
 export * from './ExpandableSectionDemo/ExpandableSectionDemo';
+export * from './ExpandableSectionDemo/ExpandableSectionTruncateDemo';
 export * from './FileUploadDemo/FileUploadDemo';
 export * from './FormDemo/FormDemo';
 export * from './InputGroupDemo/InputGroupDemo';