fix(ld-tabs): emit tab change event from within the ld-tabs component

emdgroup-liquid · Sep 20, 2021 · 6b31d70 · 6b31d70
1 parent 615f0b4
commit 6b31d70
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/src/liquid/components/ld-tabs/ld-tab.tsx b/src/liquid/components/ld-tabs/ld-tab.tsx
@@ -34,7 +34,7 @@ export class LdTab {
   /**
    * Emitted with the id of the selected tab.
    */
-  @Event() tabChange: EventEmitter<string>
+  @Event() tabSelect: EventEmitter<string>
 
   private handleTabClick(ev) {
     ev.preventDefault()
@@ -55,7 +55,7 @@ export class LdTab {
       this.el
     )
 
-    this.tabChange.emit(index)
+    this.tabSelect.emit(index)
   }
 
   render() {

diff --git a/src/liquid/components/ld-tabs/ld-tabs.tsx b/src/liquid/components/ld-tabs/ld-tabs.tsx
@@ -1,5 +1,13 @@
 import '../../components' // type definitions for type checks and intelliSense
-import { Component, Element, h, Host, Prop } from '@stencil/core'
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+} from '@stencil/core'
 import { getClassNames } from '../../utils/getClassNames'
 
 let tabsCount = 0
@@ -25,6 +33,11 @@ export class LdTabs {
   /** Sets border radii. */
   @Prop() rounded?: 'all' | 'all-lg' | 'top' | 'top-lg'
 
+  /**
+   * Emitted with the id of the selected tab.
+   */
+  @Event() tabChange: EventEmitter<string>
+
   private idDescriber = `ld-tabs-${tabsCount++}`
 
   private updateTabs(currentLdTab) {
@@ -50,10 +63,12 @@ export class LdTabs {
       .classList.remove('ld-tabpanel--hidden')
   }
 
-  private handleTabChange(ev) {
+  private handleTabSelect(ev) {
+    ev.stopImmediatePropagation()
     const currentLdTab = ev.target
     this.updateTabs(currentLdTab)
     this.updateTabPanels(currentLdTab)
+    this.tabChange.emit(ev.detail)
   }
 
   componentDidRender() {
@@ -82,7 +97,7 @@ export class LdTabs {
   render() {
     return (
       <Host
-        onTabChange={this.handleTabChange.bind(this)}
+        onTabSelect={this.handleTabSelect.bind(this)}
         class={getClassNames([
           'ld-tabs',
           this.size && `ld-tabs--${this.size}`,

diff --git a/src/liquid/components/ld-tabs/readme.md b/src/liquid/components/ld-tabs/readme.md
@@ -338,6 +338,13 @@ document.getElementById('nuts_button_2').addEventListener('click', ev => {
 | `size`    | `size`    | Size of the tabs.                                        | `"lg" \| "sm"`                           | `undefined` |
 
 
+## Events
+
+| Event       | Description                              | Type                  |
+| ----------- | ---------------------------------------- | --------------------- |
+| `tabChange` | Emitted with the id of the selected tab. | `CustomEvent<string>` |
+
+
 ----------------------------------------------