feat(Expandable): Allow for dynamic toggle text in uncontrolled version

Added two new props that allow user to specify collapsed and expanded toggle text for uncontrolled expandable. Fixes #2914
patternfly · Oct 3, 2019 · 70d7398 · 70d7398
1 parent 26d7a7f
commit 70d7398
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Expandable/Expandable.md b/packages/patternfly-4/react-core/src/components/Expandable/Expandable.md
@@ -36,7 +36,7 @@ class SimpleExpandable extends React.Component {
 }
 ```
 
-## Uncontrolled expandable
+## Simple uncontrolled expandable
 ```js
 import React from 'react';
 import { Expandable } from '@patternfly/react-core';
@@ -45,4 +45,15 @@ import { Expandable } from '@patternfly/react-core';
 <Expandable toggleText="Show More">
   This content is visible only when the component is expanded.
 </Expandable>
-```
+```
+
+## Uncontrolled expandable with dynamic toggle text
+```js
+import React from 'react';
+import { Expandable } from '@patternfly/react-core';
+
+
+<Expandable toggleTextExpanded="Show Less" toggleTextCollapsed="Show More">
+  This content is visible only when the component is expanded.
+</Expandable>
+```
diff --git a/packages/patternfly-4/react-core/src/components/Expandable/Expandable.tsx b/packages/patternfly-4/react-core/src/components/Expandable/Expandable.tsx
@@ -10,8 +10,12 @@ export interface ExpandableProps {
   className?: string;
   /** Flag to indicate if the content is expanded */
   isExpanded?: boolean;
-  /** Text that appears in the  toggle */
+  /** Text that appears in the toggle */
   toggleText?: string;
+  /** Text that appears in the toggle when expanded (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text) */
+  toggleTextExpanded?: string;
+  /** Text that appears in the toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text) */
+  toggleTextCollapsed?: string;
   /** Callback function to toggle the expandable content */
   onToggle?: () => void;
   /** Forces focus state */
@@ -38,12 +42,24 @@ export class Expandable extends React.Component<ExpandableProps, ExpandableState
   static defaultProps = {
     className: '',
     toggleText: '',
+    toggleTextExpanded: '',
+    toggleTextCollapsed: '',
     onToggle: (): any => undefined,
     isFocused: false,
     isActive: false,
     isHovered: false
   };
 
+  private calculateToggleText(toggleText: string, toggleTextExpanded: string, toggleTextCollapsed: string, propOrStateIsExpanded: boolean) {
+    if (propOrStateIsExpanded && toggleTextExpanded !== '') {
+      return toggleTextExpanded;
+    }
+    if (!propOrStateIsExpanded && toggleTextCollapsed !== '') {
+      return toggleTextCollapsed;
+    }
+    return toggleText;
+  }
+
   render() {
     const {
       onToggle: onToggleProp,
@@ -52,6 +68,8 @@ export class Expandable extends React.Component<ExpandableProps, ExpandableState
       isActive,
       className,
       toggleText,
+      toggleTextExpanded,
+      toggleTextCollapsed,
       children,
       isExpanded,
       ...props
@@ -68,6 +86,8 @@ export class Expandable extends React.Component<ExpandableProps, ExpandableState
       };
     }
 
+    let computedToggleText = this.calculateToggleText(toggleText, toggleTextExpanded, toggleTextCollapsed, propOrStateIsExpanded);
+
     return (
       <div {...props} className={css(styles.expandable, propOrStateIsExpanded && styles.modifiers.expanded, className)}>
         <button
@@ -82,7 +102,7 @@ export class Expandable extends React.Component<ExpandableProps, ExpandableState
           onClick={onToggle}
         >
           <AngleRightIcon className={css(styles.expandableToggleIcon)} aria-hidden />
-          <span>{toggleText}</span>
+          <span>{computedToggleText}</span>
         </button>
         <div className={css(styles.expandableContent)} hidden={!propOrStateIsExpanded}>
           {children}

diff --git a/packages/patternfly-4/react-integration/cypress/integration/expandable.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/expandable.spec.ts
@@ -22,4 +22,16 @@ describe('Expandable Demo Test', () => {
       .last()
       .should('have.class', 'pf-m-expanded');
   });
+
+  it('Verify dynamic uncontrolled expandable', () => {
+    cy.get('.pf-c-expandable__toggle')
+      .find('span')
+      .should('contain', 'Show More');
+    cy.get('.pf-c-expandable__toggle')
+      .last()
+      .click();
+    cy.get('.pf-c-expandable__toggle')
+      .find('span')
+      .should('contain', 'Show Less');
+  });
 });
diff --git a/...ly-4/react-integration/demo-app-ts/src/components/demos/ExpandableDemo/ExpandableDemo.tsx b/...ly-4/react-integration/demo-app-ts/src/components/demos/ExpandableDemo/ExpandableDemo.tsx
@@ -31,6 +31,8 @@ export class ExpandableDemo extends React.Component<null, ExpandableState> {
         <br />
         <h1> Uncontrolled Expandable Example: </h1>
         <Expandable toggleText="Show More">This content is visible only when the component is expanded.</Expandable>
+        <h1> Uncontrolled Dynamic Expandable Example: </h1>
+        <Expandable toggleTextExpanded="Show Less" toggleTextCollapsed="Show More">This content is visible only when the component is expanded.</Expandable>
       </React.Fragment>
     );
   }