Ripple for icons

src/components/dialog/Dialog.vue

@@ -7,10 +7,10 @@
                         <span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
                     </slot>
                     <div class="p-dialog-header-icons">
-                        <button class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" v-if="maximizable" type="button" tabindex="-1">
+                        <button class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" v-if="maximizable" type="button" tabindex="-1" v-ripple>
                             <span :class="maximizeIconClass"></span>
                         </button>
-                        <button class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" v-if="closable" :aria-label="ariaCloseLabel" type="button" tabindex="-1">
+                        <button class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" v-if="closable" :aria-label="ariaCloseLabel" type="button" tabindex="-1" v-ripple>
                             <span class="p-dialog-header-close-icon pi pi-times"></span>
                         </button>
                     </div>
@@ -28,6 +28,7 @@
 <script>
 import UniqueComponentId from '../utils/UniqueComponentId';
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     inheritAttrs: false,
@@ -245,6 +246,9 @@ export default {
         ariaLabelledById() {
             return this.header != null ? this.ariaId + '_header' : null;
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
@@ -298,6 +302,8 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
 
 /* Fluid */

src/components/multiselect/MultiSelect.vue

@@ -29,7 +29,7 @@
                         <input type="text" v-model="filterValue" class="p-multiselect-filter p-inputtext p-component" :placeholder="filterPlaceholder">
                         <span class="p-multiselect-filter-icon pi pi-search"></span>
                     </div>
-                    <button class="p-multiselect-close p-link" @click="onCloseClick" type="button">
+                    <button class="p-multiselect-close p-link" @click="onCloseClick" type="button" v-ripple>
                         <span class="p-multiselect-close-icon pi pi-times" />
                     </button>
                 </div>
@@ -500,6 +500,8 @@ export default {
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-fluid .p-multiselect {

src/components/overlaypanel/OverlayPanel.vue

@@ -4,7 +4,7 @@
             <div class="p-overlaypanel-content">
                 <slot></slot>
             </div>
-            <button class="p-overlaypanel-close p-link" @click="hide" v-if="showCloseIcon" :aria-label="ariaCloseLabel" type="button">
+            <button class="p-overlaypanel-close p-link" @click="hide" v-if="showCloseIcon" :aria-label="ariaCloseLabel" type="button" v-ripple>
                 <span class="p-overlaypanel-close-icon pi pi-times"></span>
             </button>
         </div>
@@ -13,6 +13,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -146,6 +147,9 @@ export default {
                     document.getElementById(this.appendTo).removeChild(this.$refs.container);
             }
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
@@ -165,6 +169,8 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
+    position: relative;
 }
 
 /* Animation */

src/components/panel/Panel.vue

@@ -7,7 +7,7 @@
             <div class="p-panel-icons">
                  <slot name="icons"></slot>
                 <a v-if="toggleable" tabindex="0" class="p-panel-header-icon p-panel-toggler" @click="toggle" @keydown.enter="toggle"
-                    :id="ariaId +  '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed">
+                    :id="ariaId +  '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed" v-ripple>
                     <span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
                 </a>
             </div>
@@ -24,6 +24,7 @@
 
 <script>
 import UniqueComponentId from '../utils/UniqueComponentId';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -58,6 +59,9 @@ export default {
                 value: this.d_collapsed
             });
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
@@ -79,5 +83,7 @@ export default {
     align-items: center;
     cursor: pointer;
     text-decoration: none;
+    overflow: hidden;
+    position: relative;
 }
 </style>

src/components/sidebar/Sidebar.vue

@@ -2,7 +2,7 @@
     <transition name="p-sidebar" @enter="onEnter" @leave="onLeave">
         <div :class="containerClass" v-if="visible" ref="container" role="complementary" :aria-modal="modal">
             <div class="p-sidebar-content">
-                <button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button">
+                <button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
                     <span class="p-sidebar-close-icon pi pi-times" />
                 </button>
                 <slot></slot>
@@ -13,6 +13,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -133,6 +134,9 @@ export default {
         fullScreen() {
             return this.position === 'full';
         }
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
@@ -154,6 +158,8 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-sidebar-mask {