From 20a0e94aa4875c540626aa2971a7277e7d76f86d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 1 Apr 2024 14:14:04 +0300
Subject: [PATCH] Message for ripple

---
 doc/ripple/CustomDoc.vue  | 69 ++++++++++++++++++++-------------------
 doc/ripple/DefaultDoc.vue |  3 +-
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index 45d533c5a..6d3859572 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -2,39 +2,42 @@
     <DocSectionText v-bind="$attrs">
         <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center align-items-center gap-2">
-        <div
-            v-ripple="{
-                pt: {
-                    root: { style: 'background: rgba(75, 175, 80, 0.3)' }
-                }
-            }"
-            class="p-ripple box"
-            style="border: 1px solid rgba(75, 175, 80, 0.3)"
-        >
-            Green
-        </div>
-        <div
-            v-ripple="{
-                pt: {
-                    root: { style: 'background: rgba(255, 193, 6, 0.3)' }
-                }
-            }"
-            class="p-ripple box"
-            style="border: 1px solid rgba(255, 193, 6, 0.3)"
-        >
-            Orange
-        </div>
-        <div
-            v-ripple="{
-                pt: {
-                    root: { style: 'background: rgba(156, 39, 176, 0.3)' }
-                }
-            }"
-            class="p-ripple box"
-            style="border: 1px solid rgba(156, 39, 176, 0.3)"
-        >
-            Purple
+    <div class="card flex flex-column gap-3 align-items-center">
+        <span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
+        <div class="flex justify-content-center gap-2">
+            <div
+                v-ripple="{
+                    pt: {
+                        root: { style: 'background: rgba(75, 175, 80, 0.3)' }
+                    }
+                }"
+                class="p-ripple box"
+                style="border: 1px solid rgba(75, 175, 80, 0.3)"
+            >
+                Green
+            </div>
+            <div
+                v-ripple="{
+                    pt: {
+                        root: { style: 'background: rgba(255, 193, 6, 0.3)' }
+                    }
+                }"
+                class="p-ripple box"
+                style="border: 1px solid rgba(255, 193, 6, 0.3)"
+            >
+                Orange
+            </div>
+            <div
+                v-ripple="{
+                    pt: {
+                        root: { style: 'background: rgba(156, 39, 176, 0.3)' }
+                    }
+                }"
+                class="p-ripple box"
+                style="border: 1px solid rgba(156, 39, 176, 0.3)"
+            >
+                Purple
+            </div>
         </div>
     </div>
     <DocSectionCode :code="code" />
diff --git a/doc/ripple/DefaultDoc.vue b/doc/ripple/DefaultDoc.vue
index 657ca0f9f..db3494c04 100644
--- a/doc/ripple/DefaultDoc.vue
+++ b/doc/ripple/DefaultDoc.vue
@@ -2,7 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Ripple is enabled by adding add <i>p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center align-items-center">
+    <div class="card flex flex-column align-items-center gap-3">
+        <span>Ripple option at the <i class="pi pi-palette"></i> configurator needs to be turned on for the demo.</span>
         <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
     </div>
     <DocSectionCode :code="code" />