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 index 0275acfe7001..b79aac6335c4 100644 --- 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,20 +11,20 @@ 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)); } /** @@ -32,14 +32,14 @@ class DataTableDemoExpandRowAllManager extends mixin( * @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 index 856e973f2f75..f1bdb3ef2dcc 100644 --- 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 index c2c8a472f8cf..ec111a7c9056 100644 --- a/packages/react/src/components/Accordion/AccordionItem.js +++ b/packages/react/src/components/Accordion/AccordionItem.js @@ -16,7 +16,7 @@ import { useId } from '../../internal/useId'; import deprecate from '../../prop-types/deprecate'; const { prefix } = settings; -const defaultRenderExpando = (props) => ; +const defaultRenderToggle = (props) => ; function AccordionItem({ children, @@ -24,7 +24,8 @@ function AccordionItem({ 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 (