feat(react): deprecate renderExpando and add renderToggle (#10357)

* chore(expando): removed it * fix(Expando): updated tests * Update packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js Co-authored-by: Josh Black <[email protected]> * fix(AccordionItem): deprecated renderExpando * chore(expando): yarn format * chore(expando): removed default prop for renderToggle Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Jan 13, 2022 · 11841d4 · 11841d4
1 parent a8bade7
commit 11841d4
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 28 deletions.
diff --git a/packages/components/demo/js/data-table-demo-expand-all-manager.js b/packages/components/demo/js/data-table-demo-expand-all-manager.js
@@ -11,35 +11,35 @@ class DataTableDemoExpandRowAllManager extends mixin(
   handles
 ) {
   /**
-   * The row expando handler for data table "expand all" feature demo.
+   * The row expand handler for data table "expand all" feature demo.
    * @extends CreateComponent
    * @extends InitComponentByEvent
    * @extends Handles
    * @param {HTMLElement} element The element working as the button for data table "expand all" feature demo.
    * @param {Object} [options] The component options.
-   * @param {string} [options.selectorExpandHeader] The CSS selector to find the header expando button.
-   * @param {string} [options.selectorExpandCells] The CSS selector to find the row expando button.
+   * @param {string} [options.selectorExpandHeader] The CSS selector to find the header expand button.
+   * @param {string} [options.selectorExpandCells] The CSS selector to find the row expand button.
    * @param {string} [options.selectorExpandCellsExpanded]
-   *   The CSS selector to find the row expando button with its expanded state.
+   *   The CSS selector to find the row expand button with its expanded state.
    */
   constructor(element, options) {
     super(element, options);
-    this.manage(on(element, 'click', this._handleClickRowExpando));
+    this.manage(on(element, 'click', this._handleClickRowExpand));
   }
 
   /**
    * A method called when this widget is created upon events.
    * @param {Event} event The event triggering the creation.
    */
   createdByEvent(event) {
-    this._handleClickRowExpando(event);
+    this._handleClickRowExpand(event);
   }
 
   /**
    * Handles `click` event on the row expand button.
    * @private
    */
-  _handleClickRowExpando = () => {
+  _handleClickRowExpand = () => {
     if (
       this.element.querySelectorAll(this.options.selectorExpandCells).length ===
       this.element.querySelectorAll(this.options.selectorExpandCellsExpanded)
@@ -66,10 +66,10 @@ class DataTableDemoExpandRowAllManager extends mixin(
    * and how {@linkcode DataTableDemoExpandRowAllManager.init .init()} works.
    * @member DataTableDemoExpandRowAllManager.options
    * @type {Object}
-   * @property {string} selectorInit The CSS selector to find the row expando handler for data table "expand all" feature demo.
-   * @property {string} [selectorExpandHeader] The CSS selector to find the header expando button.
-   * @property {string} [selectorExpandCells] The CSS selector to find the row expando button.
-   * @property {string} [selectorExpandCellsExpanded] The CSS selector to find the row expando button with its expanded state.
+   * @property {string} selectorInit The CSS selector to find the row expand handler for data table "expand all" feature demo.
+   * @property {string} [selectorExpandHeader] The CSS selector to find the header expand button.
+   * @property {string} [selectorExpandCells] The CSS selector to find the row expand button.
+   * @property {string} [selectorExpandCellsExpanded] The CSS selector to find the row expand button with its expanded state.
    * @property {string[]} initEventNames The event names that instantiates this component.
    */
   static get options() {

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -59,7 +59,8 @@ Map {
       "open": Object {
         "type": "bool",
       },
-      "renderExpando": Object {
+      "renderExpando": [Function],
+      "renderToggle": Object {
         "type": "func",
       },
       "title": Object {

diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
@@ -16,15 +16,16 @@ import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
-const defaultRenderExpando = (props) => <button type="button" {...props} />;
+const defaultRenderToggle = (props) => <button type="button" {...props} />;
 
 function AccordionItem({
   children,
   className: customClassName,
   iconDescription, // eslint-disable-line
   open = false,
   onHeadingClick,
-  renderExpando: Expando = defaultRenderExpando,
+  renderExpando = defaultRenderToggle, // remove renderExpando in next major release
+  renderToggle,
   title = 'title',
   disabled,
   ...rest
@@ -41,6 +42,8 @@ function AccordionItem({
     [customClassName]: !!customClassName,
   });
 
+  const Toggle = renderToggle || renderExpando; // remove renderExpando in next major release
+
   if (open !== prevIsOpen) {
     setAnimation(isOpen ? 'collapsing' : 'expanding');
     setIsOpen(open);
@@ -76,7 +79,7 @@ function AccordionItem({
 
   return (
     <li className={className} {...rest} onAnimationEnd={handleAnimationEnd}>
-      <Expando
+      <Toggle
         disabled={disabled}
         aria-controls={id}
         aria-expanded={isOpen}
@@ -88,7 +91,7 @@ function AccordionItem({
         <Text as="div" className={`${prefix}--accordion__title`}>
           {title}
         </Text>
-      </Expando>
+      </Toggle>
       <div id={id} className={`${prefix}--accordion__content`}>
         {children}
       </div>
@@ -113,7 +116,7 @@ AccordionItem.propTypes = {
   disabled: PropTypes.bool,
 
   /**
-   * The description of the expando icon.
+   * The description of the expand icon.
    */
   iconDescription: deprecate(
     PropTypes.string,
@@ -134,15 +137,24 @@ AccordionItem.propTypes = {
   onHeadingClick: PropTypes.func,
 
   /**
-   * `true` to open the expando.
+   * `true` to open the expand.
    */
   open: PropTypes.bool,
 
   /**
-   * The callback function to render the expando button.
+   * The callback function to render the expand button.
+   * Can be a React component class.
+   */
+  renderExpando: deprecate(
+    PropTypes.func,
+    'The `renderExpando` prop has been deprecated and will be removed in the next major release of Carbon. Use the `renderToggle` prop instead.'
+  ),
+
+  /**
+   * The callback function to render the expand button.
    * Can be a React component class.
    */
-  renderExpando: PropTypes.func,
+  renderToggle: PropTypes.func,
 
   /**
    * The accordion title.

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
@@ -9,7 +9,7 @@ exports[`AccordionItem should render 1`] = `
     className="bx--accordion__item extra-class"
     onAnimationEnd={[Function]}
   >
-    <defaultRenderExpando
+    <defaultRenderToggle
       aria-controls="accordion-item-1"
       aria-expanded={false}
       className="bx--accordion__heading"
@@ -66,7 +66,7 @@ exports[`AccordionItem should render 1`] = `
           </div>
         </Text>
       </button>
-    </defaultRenderExpando>
+    </defaultRenderToggle>
     <div
       className="bx--accordion__content"
       id="accordion-item-1"

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
@@ -333,10 +333,7 @@ export const BatchExpansion = () => (
         <Table {...getTableProps()}>
           <TableHead>
             <TableRow>
-              <TableExpandHeader
-                enableExpando={true}
-                {...getExpandHeaderProps()}
-              />
+              <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
               {headers.map((header, i) => (
                 <TableHeader key={i} {...getHeaderProps({ header })}>
                   {header.header}

diff --git a/packages/react/src/components/TreeView/TreeNode.js b/packages/react/src/components/TreeView/TreeNode.js
@@ -143,9 +143,9 @@ export default function TreeNode({
      * Dynamically calculate padding to recreate tree node indentation
      * - parent nodes have (depth + 1rem) left padding
      * - leaf nodes have (depth + 2.5rem) left padding without icons (because
-     *   of expando icon + spacing)
+     *   of expand icon + spacing)
      * - leaf nodes have (depth + 2rem) left padding with icons (because of
-     *   reduced spacing between the expando icon and the node icon + label)
+     *   reduced spacing between the expand icon and the node icon + label)
      */
     const calcOffset = () => {
       // parent node