feat(props): update table expand header props (#9659)

Alessandra Davila · kodiakhq[bot] · web-flow · commit 75646c07af61 · 2021-10-06T06:58:49.000Z
* feat(props): update accordion and table expand header props

* chore(acordion-item): remove prop changes from accordion item

* chore(data-table): remove changes

* test(snapshot): update snapshots

* chore(date-table): fix typo in table expand header

Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1212,21 +1212,46 @@ Map {
     },
     "TableExpandHeader": Object {
       "propTypes": Object {
-        "ariaLabel": [Function],
+        "ariaLabel": Object {
+          "args": Array [
+            Array [
+              [Function],
+              [Function],
+            ],
+          ],
+          "type": "oneOfType",
+        },
         "children": Object {
           "type": "node",
         },
         "className": Object {
           "type": "string",
         },
-        "enableExpando": Object {
+        "enableExpando": [Function],
+        "enableToggle": Object {
           "type": "bool",
         },
         "expandIconDescription": Object {
           "type": "string",
         },
-        "isExpanded": [Function],
-        "onExpand": [Function],
+        "isExpanded": Object {
+          "args": Array [
+            Array [
+              [Function],
+              [Function],
+            ],
+          ],
+          "type": "oneOfType",
+        },
+        "onExpand": Object {
+          "args": Array [
+            Array [
+              [Function],
+              [Function],
+            ],
+          ],
+          "type": "oneOfType",
+        },
       },
     },
     "TableExpandRow": Object {
@@ -1852,21 +1877,46 @@ Map {
   },
   "TableExpandHeader" => Object {
     "propTypes": Object {
-      "ariaLabel": [Function],
+      "ariaLabel": Object {
+        "args": Array [
+          Array [
+            [Function],
+            [Function],
+          ],
+        ],
+        "type": "oneOfType",
+      },
       "children": Object {
         "type": "node",
       },
       "className": Object {
         "type": "string",
       },
-      "enableExpando": Object {
+      "enableExpando": [Function],
+      "enableToggle": Object {
         "type": "bool",
       },
       "expandIconDescription": Object {
         "type": "string",
       },
-      "isExpanded": [Function],
-      "onExpand": [Function],
+      "isExpanded": Object {
+        "args": Array [
+          Array [
+            [Function],
+            [Function],
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "onExpand": Object {
+        "args": Array [
+          Array [
+            [Function],
+            [Function],
+          ],
+        ],
+        "type": "oneOfType",
+      },
     },
   },
   "TableExpandRow" => Object {
diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
@@ -13,7 +13,7 @@ import React, { useState } from 'react';
 import { Text } from '../Text';
 import { match, keys } from '../../internal/keyboard';
 import { useId } from '../../internal/useId';
-import deprecate from '../../prop-types/deprecate.js';
+import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
 const defaultRenderExpando = (props) => <button type="button" {...props} />;
diff --git a/packages/react/src/components/DataTable/TableExpandHeader.js b/packages/react/src/components/DataTable/TableExpandHeader.js
@@ -8,6 +8,7 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
+import deprecate from '../../prop-types/deprecate';
 import React from 'react';
 import { ChevronRight16 } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
@@ -18,6 +19,7 @@ const TableExpandHeader = ({
   ariaLabel,
   className: headerClassName,
   enableExpando,
+  enableToggle,
   isExpanded,
   onExpand,
   expandIconDescription,
@@ -33,7 +35,7 @@ const TableExpandHeader = ({
       className={className}
       data-previous-value={previousValue}
       {...rest}>
-      {!enableExpando ? null : (
+      {enableExpando || enableToggle ? (
         <button
           type="button"
           className={`${prefix}--table-expand__button`}
@@ -45,7 +47,7 @@ const TableExpandHeader = ({
             aria-label={expandIconDescription}
           />
         </button>
-      )}
+      ) : null}
       {children}
     </th>
   );
@@ -56,15 +58,27 @@ TableExpandHeader.propTypes = {
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  ariaLabel: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string),
+  ariaLabel: PropTypes.oneOfType([
+    requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string),
+    requiredIfGivenPropIsTruthy('enableToggle', PropTypes.string),
+  ]),
+
   children: PropTypes.node,
 
   className: PropTypes.string,
 
+  /**
+   * The enableExpando prop is being replaced by enableToggle
+   */
+  enableExpando: deprecate(
+    PropTypes.bool,
+    'The `enableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release.'
+  ),
+
   /**
    * Specify whether an expand all button should be displayed
    */
-  enableExpando: PropTypes.bool,
+  enableToggle: PropTypes.bool,
 
   /**
    * The description of the chevron right icon, to be put in its SVG `<title>` element.
@@ -75,12 +89,18 @@ TableExpandHeader.propTypes = {
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
-  isExpanded: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.bool),
+  isExpanded: PropTypes.oneOfType([
+    requiredIfGivenPropIsTruthy('enableExpando', PropTypes.bool),
+    requiredIfGivenPropIsTruthy('enableToggle', PropTypes.bool),
+  ]),
 
   /**
    * Hook for when a listener initiates a request to expand the given row
    */
-  onExpand: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func),
+  onExpand: PropTypes.oneOfType([
+    requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func),
+    requiredIfGivenPropIsTruthy('enableToggle', PropTypes.func),
+  ]),
 };
 
 export default TableExpandHeader;
