feat(TabBar): emit $tabChanged signal when selected tab is changed

packages/@lightningjs/ui-components/src/components/TabBar/TabBar.js

@@ -62,7 +62,8 @@ export default class TabBar extends Base {
     this._isTabsFocused = true;
   }
 
-  _selectedTabChange() {
+  _selectedTabChange(selected, prevSelected) {
+    this.fireAncestors('$tabChanged', selected, prevSelected, this);
     if (
       typeof this._tabContent === 'object' &&
       typeof this._tabContent.then === 'function'

packages/@lightningjs/ui-components/src/components/TabBar/TabBar.mdx

@@ -107,6 +107,14 @@ class Example extends lng.Component {
 
 \* `TabBar` also accepts all properties supported by the [Row](/docs/components-row--basic) component. These properties will be applied to the Row which renders the Tabs
 
+### Signals
+
+- `$tabChanged`: each time the selected tab is changed, a signal named `$tabChanged` is emitted (via `fireAncestors`) with 3 arguments in the following order: the current selected tab, the previously selected tab, and an instance of the TabBar component
+
+```js
+fireAncestors('$tabChanged', selected, prevSelected, this);
+```
+
 ### Style Properties
 
 | name             | type   | description                                  |

packages/@lightningjs/ui-components/src/components/TabBar/TabBar.test.js

@@ -129,6 +129,22 @@ describe('TabBar', () => {
     expect(tabBar._Tabs.items[1].mode).toBe('unfocused');
   });
 
+  it('should emit a $tabChanged signal when the selected tab changes', () => {
+    const prevSelected = tabBar.tag('Tabs').selected;
+    jest.spyOn(tabBar, 'fireAncestors');
+    expect(tabBar.fireAncestors).not.toHaveBeenCalled();
+
+    tabBar.tag('Tabs').selectNext();
+    const selected = tabBar.tag('Tabs').selected;
+
+    expect(tabBar.fireAncestors).toHaveBeenCalledWith(
+      '$tabChanged',
+      selected,
+      prevSelected,
+      tabBar
+    );
+  });
+
   it('should propogate key events', () => {
     const onUp = jest.fn();
     const onDown = jest.fn();