From c00f3822bf5cd54c38db646351905d63ed34ad49 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 26 Jun 2020 23:39:38 +0300
Subject: [PATCH] Ripple for icons

---
 src/components/dialog/Dialog.vue             | 10 ++++++++--
 src/components/multiselect/MultiSelect.vue   |  4 +++-
 src/components/overlaypanel/OverlayPanel.vue |  8 +++++++-
 src/components/panel/Panel.vue               |  8 +++++++-
 src/components/sidebar/Sidebar.vue           |  8 +++++++-
 5 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 88177ce86..e4d9ed3e3 100755
--- a/src/components/dialog/Dialog.vue
+++ b/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 */
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 761b20897..f667fde52 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/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 {
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 839aa20c6..683a8ca0c 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/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 */
diff --git a/src/components/panel/Panel.vue b/src/components/panel/Panel.vue
index 706d1fd43..8b85d0338 100755
--- a/src/components/panel/Panel.vue
+++ b/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>
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index c458ec525..605e12924 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/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 {