feat(props): update accordion and table expand header props

carbon-design-system · Sep 14, 2021 · 18f72e7 · 18f72e7
1 parent ee69d34
commit 18f72e7
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 12 deletions.
diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
@@ -15,15 +15,17 @@ import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate.js';
 
 const { prefix } = settings;
-const defaultRenderExpando = (props) => <button type="button" {...props} />;
-
+const defaultRenderToggle = (props) => <button type="button" {...props} />;
+// const defaultRenderExpando = (props) => <button type="button" {...props} />;
+// const Toggle = renderExpando || renderToggle;
 function AccordionItem({
   children,
   className: customClassName,
   iconDescription, // eslint-disable-line
   open = false,
   onHeadingClick,
-  renderExpando: Expando = defaultRenderExpando,
+  // renderExpando,
+  renderToggle: Toggle = defaultRenderToggle,
   title = 'title',
   disabled,
   ...rest
@@ -75,7 +77,7 @@ function AccordionItem({
 
   return (
     <li className={className} {...rest} onAnimationEnd={handleAnimationEnd}>
-      <Expando
+      <Toggle
         disabled={disabled}
         aria-controls={id}
         aria-expanded={isOpen}
@@ -85,7 +87,7 @@ function AccordionItem({
         type="button">
         <ChevronRight16 className={`${prefix}--accordion__arrow`} />
         <div className={`${prefix}--accordion__title`}>{title}</div>
-      </Expando>
+      </Toggle>
       <div id={id} className={`${prefix}--accordion__content`}>
         {children}
       </div>
@@ -139,7 +141,16 @@ AccordionItem.propTypes = {
    * The callback function to render the expando button.
    * Can be a React component class.
    */
-  renderExpando: PropTypes.func,
+  renderExpando: deprecate(
+    PropTypes.func,
+    'The `renderExpando` prop has been deprecated in favor of `renderToggleBtn`. This prop will be removed in the next major release.'
+  ),
+
+  /**
+   * The callback function to render the toggle button.
+   * Can be a React component class.
+   */
+  renderToggle: PropTypes.func,
 
   /**
    * The accordion title.

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,20 @@ const TableExpandHeader = ({
             aria-label={expandIconDescription}
           />
         </button>
-      )}
+      ) : null}
+      {/* {!enableExpando ? null : (
+        <button
+          type="button"
+          className={`${prefix}--table-expand__button`}
+          onClick={onExpand}
+          title={expandIconDescription}
+          aria-label={ariaLabel}>
+          <ChevronRight16
+            className={`${prefix}--table-expand__svg`}
+            aria-label={expandIconDescription}
+          />
+        </button>
+      )} */}
       {children}
     </th>
   );
@@ -56,15 +71,28 @@ 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),
+  ]),
+  // ariaLabel: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string),
   children: PropTypes.node,
 
   className: PropTypes.string,
 
   /**
    * Specify whether an expand all button should be displayed
    */
-  enableExpando: PropTypes.bool,
+  // enableExpando:PropTypes.bool,
+  enableExpando: deprecate(
+    PropTypes.bool,
+    'The `renableExpando` 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
+   */
+  enableToggle: PropTypes.bool,
 
   /**
    * The description of the chevron right icon, to be put in its SVG `<title>` element.
@@ -75,12 +103,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;
diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
@@ -336,6 +336,7 @@ export const BatchExpansion = () => (
               <TableExpandHeader
                 enableExpando={true}
                 {...getExpandHeaderProps()}
+                ariaLabel={undefined}
               />
               {headers.map((header, i) => (
                 <TableHeader key={i} {...getHeaderProps({ header })}>