Ripple for action icons

src/components/datatable/BodyCell.vue

@@ -10,18 +10,18 @@
             <i :class="['p-datatable-reorderablerow-handle', column.rowReorderIcon]"></i>
         </template>
         <template v-else-if="column.expander">
-            <button class="p-row-toggler p-link" @click="toggleRow">
+            <button class="p-row-toggler p-link" @click="toggleRow" v-ripple>
                 <span :class="rowTogglerIcon"></span>
             </button>
         </template>
         <template v-else-if="editMode === 'row' && column.rowEditor">
-            <button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button">
+            <button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button" v-ripple>
                 <span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
             </button>
-            <button class="p-row-editor-save p-link" v-if="d_editing" @click="onRowEditSave" type="button">
+            <button class="p-row-editor-save p-link" v-if="d_editing" @click="onRowEditSave" type="button" v-ripple>
                 <span class="p-row-editor-save-icon pi pi-fw pi-check"></span>
             </button>
-            <button class="p-row-editor-cancel p-link" v-if="d_editing" @click="onRowEditCancel" type="button">
+            <button class="p-row-editor-cancel p-link" v-if="d_editing" @click="onRowEditCancel" type="button" v-ripple>
                 <span class="p-row-editor-cancel-icon pi pi-fw pi-times"></span>
             </button>
         </template>
@@ -35,6 +35,7 @@ import ObjectUtils from '../utils/ObjectUtils';
 import ColumnSlot from './ColumnSlot.vue';
 import RowRadioButton from './RowRadioButton';
 import RowCheckbox from './RowCheckbox.vue';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -278,6 +279,9 @@ export default {
         'ColumnSlot': ColumnSlot,
         'DTRadioButton': RowRadioButton,
         'DTCheckbox': RowCheckbox
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>

src/components/datatable/DataTable.vue

@@ -1972,6 +1972,8 @@ export default {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
 
 /* Expand */
@@ -1979,6 +1981,8 @@ export default {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
 
 /* Reorder */

src/components/tree/Tree.vue

@@ -303,6 +303,8 @@ export default {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-treenode-leaf > .p-treenode-content .p-tree-toggler {

src/components/tree/TreeNode.vue

@@ -2,7 +2,7 @@
     <li :class="containerClass">
         <div :class="contentClass" tabindex="0" role="treeitem" :aria-expanded="expanded"
             @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style">
-            <button class="p-tree-toggler p-link" @click="toggle" tabindex="-1">
+            <button class="p-tree-toggler p-link" @click="toggle" tabindex="-1" v-ripple>
                 <span :class="toggleIcon"></span>
             </button>
             <div class="p-checkbox p-component" v-if="checkboxMode">
@@ -26,6 +26,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 const TreeNodeTemplate = {
     functional: true,
@@ -311,6 +312,9 @@ export default {
     },
     components: {
         'TreeNodeTemplate': TreeNodeTemplate
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>

src/components/treetable/TreeTable.vue

@@ -932,6 +932,8 @@ export default {
     align-items: center;
     justify-content: center;
     vertical-align: middle;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-treetable-toggler + .p-checkbox {

src/components/treetable/TreeTableRow.vue

@@ -1,7 +1,7 @@
 <template>
     <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
         <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle" :class="col.bodyClass">
-            <button class="p-treetable-toggler p-link" @click="toggle" v-if="col.expander" :style="togglerStyle" tabindex="-1">
+            <button class="p-treetable-toggler p-link" @click="toggle" v-if="col.expander" :style="togglerStyle" tabindex="-1" v-ripple>
                 <i :class="togglerIcon"></i>
             </button>
             <div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && col.expander" role="checkbox" :aria-checked="checked">
@@ -22,6 +22,7 @@
 import ObjectUtils from '../utils/ObjectUtils';
 import DomHandler from '../utils/DomHandler';
 import TreeTableColumnSlot from './TreeTableColumnSlot';
+import Ripple from '../ripple/Ripple';
 
 export default {
     name: 'sub-ttnode',
@@ -247,6 +248,9 @@ export default {
     },
     components: {
         'TTColumnSlot': TreeTableColumnSlot
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>