From 41e2971cd2254649fe54e0e3a9638cf27fec2f07 Mon Sep 17 00:00:00 2001
From: REJack <info@rejack.de>
Date: Wed, 24 Nov 2021 22:44:04 +0100
Subject: [PATCH] feat(3973): enhance ExpandableTable with button click beside
 table row click

---
 build/js/ExpandableTable.js | 10 +++++++++-
 build/scss/_table.scss      | 22 +++++++++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/build/js/ExpandableTable.js b/build/js/ExpandableTable.js
index d7d882f21..9b0adf1a2 100644
--- a/build/js/ExpandableTable.js
+++ b/build/js/ExpandableTable.js
@@ -51,7 +51,15 @@ class ExpandableTable {
   }
 
   toggleRow() {
-    const $element = this._element
+    let $element = this._element
+
+    if ($element[0].nodeName !== 'TR') {
+      $element = $element.parent()
+      if ($element[0].nodeName !== 'TR') {
+        $element = $element.parent()
+      }
+    }
+
     const time = 500
     const $type = $element.attr(SELECTOR_ARIA_ATTR)
     const $body = $element.next(SELECTOR_EXPANDABLE_BODY).children().first().children()
diff --git a/build/scss/_table.scss b/build/scss/_table.scss
index 06ab53f58..1482d9cf7 100644
--- a/build/scss/_table.scss
+++ b/build/scss/_table.scss
@@ -86,7 +86,27 @@
     transition: transform $transition-speed linear;
   }
   &[aria-expanded="true"] {
-    td i.expandable-table-caret {
+    i.expandable-table-caret {
+      // stylelint-disable selector-max-attribute
+      &[class*="right"] {
+        transform: rotate(90deg);
+      }
+      &[class*="left"] {
+        transform: rotate(-90deg);
+      }
+      // stylelint-enable selector-max-attribute
+    }
+  }
+}
+
+[aria-expanded="true"] {
+  cursor: pointer;
+
+  i.expandable-table-caret {
+    transition: transform $transition-speed linear;
+  }
+  [data-widget="expandable-table"] {
+    i.expandable-table-caret {
       // stylelint-disable selector-max-attribute
       &[class*="right"] {
         transform: rotate(90deg);