Add expansion toggled signal of subpanels in an Accordion Panel (#614)

* add signal for toggling expansion of subpanels in an Accordion Panel

* Apply cosmetic reviews and add widget index to signal

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

* additional comsetic changes

* fixed syntax error

* delete unnecessary layout instance from expansionToggled test

* Bracket error for test group

* Fix API extraction

---------

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>
Co-authored-by: Frédéric Collonval <fcollonval@gmail.com>

packages/widgets/src/accordionpanel.ts

@@ -3,6 +3,7 @@
 
 import { ArrayExt } from '@lumino/algorithm';
 import { Message } from '@lumino/messaging';
+import { ISignal, Signal } from '@lumino/signaling';
 import { AccordionLayout } from './accordionlayout';
 import { SplitLayout } from './splitlayout';
 import { SplitPanel } from './splitpanel';
@@ -53,6 +54,13 @@ export class AccordionPanel extends SplitPanel {
     return (this.layout as AccordionLayout).titles;
   }
 
+  /**
+   * A signal emitted when a widget of the AccordionPanel is collapsed or expanded.
+   */
+  get expansionToggled(): ISignal<this, number> {
+    return this._expansionToggled;
+  }
+
   /**
    * Add a widget to the end of the panel.
    *
@@ -330,9 +338,13 @@ export class AccordionPanel extends SplitPanel {
       title.setAttribute('aria-expanded', 'false');
       widget.hide();
     }
+
+    // Emit the expansion state signal.
+    this._expansionToggled.emit(index);
   }
 
   private _widgetSizesCache: WeakMap<Widget, number> = new WeakMap();
+  private _expansionToggled = new Signal<this, number>(this);
 }
 
 /**

packages/widgets/tests/src/accordionpanel.spec.ts

@@ -230,6 +230,44 @@ describe('@lumino/widgets', () => {
       });
     });
 
+    describe('#expansionToggled', () => {
+      let panel: AccordionPanel;
+
+      beforeEach(() => {
+        panel = new AccordionPanel();
+        let widgets = [new Widget(), new Widget(), new Widget()];
+        widgets.forEach(w => {
+          panel.addWidget(w);
+        });
+        panel.setRelativeSizes([10, 10, 10, 20]);
+        Widget.attach(panel, document.body);
+        MessageLoop.flush();
+      });
+
+      afterEach(() => {
+        panel.dispose();
+      });
+
+      it('should be emitted when the a widget is collapsed', done => {
+        panel.expansionToggled.connect((sender, _) => {
+          expect(sender).to.equal(panel);
+          done();
+        });
+        panel.collapse(0);
+      });
+
+      it('should be emitted when the a widget is expanded', done => {
+        // first collapse a widget
+        panel.collapse(0);
+
+        panel.expansionToggled.connect((sender, _) => {
+          expect(sender).to.equal(panel);
+          done();
+        });
+        panel.expand(0);
+      });
+    });
+
     describe('#handleEvent()', () => {
       let panel: LogAccordionPanel;
       let layout: AccordionLayout;

review/api/widgets.api.md

@@ -56,6 +56,7 @@ export class AccordionPanel extends SplitPanel {
     addWidget(widget: Widget): void;
     collapse(index: number): void;
     expand(index: number): void;
+    get expansionToggled(): ISignal<this, number>;
     handleEvent(event: Event): void;
     insertWidget(index: number, widget: Widget): void;
     protected onAfterDetach(msg: Message): void;