diff --git a/CHANGELOG.md b/CHANGELOG.md index 28a7f591195..c591d1b8c28 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ - Updated `logoElastic` to meet brand guidelines ([#3613](https://github.com/elastic/eui/pull/3613)) - Allowed user to enter hexcode for colors in `EuiStat` ([#3617](https://github.com/elastic/eui/pull/3617)) - Extended `CommonProps` in `EuiColorPalettePickerPaletteTextProps`, `EuiColorPalettePickerPaletteFixedProps` and `EuiColorPalettePickerPaletteGradientProps` types ([#3616](https://github.com/elastic/eui/pull/3616)) - +- Updated `onToggle` callback in `EuiAccordion` to allow for external state control ([#3614](https://github.com/elastic/eui/pull/3614)) **Bug fixes** diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js index e1e19e1a241..2a3ea4b4a9e 100644 --- a/src-docs/src/views/accordion/accordion_example.js +++ b/src-docs/src/views/accordion/accordion_example.js @@ -332,7 +332,7 @@ export const AccordionExample = { demo: , }, { - title: 'Force accordion state', + title: 'External state control', source: [ { type: GuideSectionTypes.JS, @@ -346,7 +346,8 @@ export const AccordionExample = { text: (

Use the forceState prop to control open and close - state. + state. The onToggle callback prop can still be used + to update external state or perform side effects.

), snippet: accordionForceStateSnippet, diff --git a/src-docs/src/views/accordion/accordion_forceState.js b/src-docs/src/views/accordion/accordion_forceState.js index 7d3ee0335d1..e0c5301795d 100644 --- a/src-docs/src/views/accordion/accordion_forceState.js +++ b/src-docs/src/views/accordion/accordion_forceState.js @@ -29,6 +29,12 @@ export default () => { setID(id); }; + const onToggle = isOpen => { + const newState = isOpen ? 'open' : 'closed'; + setTrigger(newState); + setID(`${idPrefix}--${newState}`); + }; + return (
{

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap index edc08525519..3e52ffc5477 100644 --- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap +++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = ` @@ -14,7 +14,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = ` className="euiAccordion__triggerWrapper" >