Merge pull request #427 from youda97/table-expand-hover

fix(table): Hover over expandable row does not highlight parent row

Author: zvonimirfras

src/table/expanded-row-hover.directive.ts

@@ -0,0 +1,19 @@
+import {
+	Directive,
+	HostListener
+} from "@angular/core";
+
+@Directive({
+	selector: "[ibmExpandedRowHover]"
+})
+export class ExpandedRowHover {
+	@HostListener("mouseenter", ["$event"])
+	addHoverClass(event) {
+		event.target.previousElementSibling.classList.add("bx--expandable-row--hover-v2");
+	}
+
+	@HostListener("mouseleave", ["$event"])
+	removeHoverClass(event) {
+		event.target.previousElementSibling.classList.remove("bx--expandable-row--hover-v2");
+	}
+}

src/table/table.component.spec.ts

@@ -7,7 +7,8 @@ import {
 	TableModel,
 	TableHeaderItem,
 	TableItem,
-	DataGridFocus
+	DataGridFocus,
+	ExpandedRowHover
 } from "./table.module";
 import { Table } from "./table.component";
 import { StaticIconModule } from "./../icon/static-icon.module";
@@ -49,7 +50,8 @@ describe("Table", () => {
 			declarations: [
 				Table,
 				TableTest,
-				DataGridFocus
+				DataGridFocus,
+				ExpandedRowHover
 			]
 		});
 

src/table/table.component.ts

@@ -370,6 +370,7 @@ import { I18n } from "./../i18n/i18n.module";
 				<tr
 				*ngIf="model.rowsExpanded[i] && !model.isRowFiltered(i)"
 				class="bx--expandable-row-v2"
+				ibmExpandedRowHover
 				[attr.data-child-row]="(model.rowsExpanded[i] ? 'true' : null)">
 					<td
 						[ibmDataGridFocus]="isDataGrid"

src/table/table.module.ts

@@ -11,6 +11,7 @@ import { TableToolbarActions } from "./toolbar/table-toolbar-actions.component";
 import { TableToolbarSearch } from "./toolbar/table-toolbar-search.component";
 import { TableToolbarContent } from "./toolbar/table-toolbar-content.component";
 import { DataGridFocus } from "./data-grid-focus.directive";
+import { ExpandedRowHover } from "./expanded-row-hover.directive";
 
 import { IconModule } from "./../icon/icon.module";
 import { StaticIconModule } from "..";
@@ -26,6 +27,7 @@ export { TableToolbarActions } from "./toolbar/table-toolbar-actions.component";
 export { TableToolbarSearch } from "./toolbar/table-toolbar-search.component";
 export { TableToolbarContent } from "./toolbar/table-toolbar-content.component";
 export { DataGridFocus } from "./data-grid-focus.directive";
+export { ExpandedRowHover } from "./expanded-row-hover.directive";
 
 @NgModule({
 	declarations: [
@@ -34,15 +36,17 @@ export { DataGridFocus } from "./data-grid-focus.directive";
 		TableToolbarActions,
 		TableToolbarSearch,
 		TableToolbarContent,
-		DataGridFocus
+		DataGridFocus,
+		ExpandedRowHover
 	],
 	exports: [
 		Table,
 		TableToolbar,
 		TableToolbarActions,
 		TableToolbarSearch,
 		TableToolbarContent,
-		DataGridFocus
+		DataGridFocus,
+		ExpandedRowHover
 	],
 	imports: [
 		CommonModule,