From 1e2946e0f9ecf80ba92c8d95d6bd634777eea44c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 29 Jan 2020 14:24:45 -0500
Subject: [PATCH] docs(ripple-effect): update usage to avoid style conflicts
 with Ionic components (#20331)

closes ionic-team/ionic-docs#1154
---
 core/src/components/ripple-effect/readme.md   | 34 +++++++++----------
 .../components/ripple-effect/usage/angular.md | 10 +++---
 .../ripple-effect/usage/javascript.md         | 10 +++---
 .../components/ripple-effect/usage/react.md   | 10 +++---
 .../src/components/ripple-effect/usage/vue.md | 10 +++---
 5 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md
index b685dd452b..53447b1e6d 100644
--- a/core/src/components/ripple-effect/readme.md
+++ b/core/src/components/ripple-effect/readme.md
@@ -2,9 +2,9 @@
 
 The ripple effect component adds the [Material Design ink ripple interaction effect](https://material.io/develop/web/components/ripples/). This component can only be used inside of an `<ion-app>` and can be added to any component.
 
-It's important to note that the parent should have [relative positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) because the ripple effect is absolutely positioned and will cover the closest parent with relative positioning. The parent element should also be given the `ion-activatable` class, which tells the ripple effect that the element is clickable. It's recommended to add `overflow: hidden` to the parent element, as well, to avoid the ripple overflowing its container.
+It's important to note that the parent should have [relative positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) because the ripple effect is absolutely positioned and will cover the closest parent with relative positioning. The parent element should also be given the `ion-activatable` class, which tells the ripple effect that the element is clickable.
 
-The default type, `"bounded"`, will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, add an `"unbounded"` type.
+The default type, `"bounded"`, will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, add an `"unbounded"` type. It's recommended to add `overflow: hidden` to the parent element to avoid the ripple overflowing its container, especially with an unbounded ripple.
 
 <!-- Auto Generated Below -->
 
@@ -16,22 +16,22 @@ The default type, `"bounded"`, will expand the ripple effect from the click posi
 ```html
 <ion-app>
   <ion-content>
-    <div class="ion-activatable">
+    <div class="ion-activatable ripple-parent">
       A plain div with a bounded ripple effect
       <ion-ripple-effect></ion-ripple-effect>
     </div>
 
-    <button class="ion-activatable">
+    <button class="ion-activatable ripple-parent">
       A button with a bounded ripple effect
       <ion-ripple-effect></ion-ripple-effect>
     </button>
 
-    <div class="ion-activatable">
+    <div class="ion-activatable ripple-parent">
       A plain div with an unbounded ripple effect
       <ion-ripple-effect type="unbounded"></ion-ripple-effect>
     </div>
 
-    <button class="ion-activatable">
+    <button class="ion-activatable ripple-parent">
       A button with an unbounded ripple effect
       <ion-ripple-effect type="unbounded"></ion-ripple-effect>
     </button>
@@ -40,7 +40,7 @@ The default type, `"bounded"`, will expand the ripple effect from the click posi
 ```
 
 ```css
-.ion-activatable {
+.ripple-parent {
   position: relative;
   overflow: hidden;
 }
@@ -57,22 +57,22 @@ import './RippleEffectExample.css';
 export const RippleExample: React.FC = () => (
   <IonApp>
    <IonContent>
-      <div className="ion-activatable">
+      <div className="ion-activatable ripple-parent">
         A plain div with a bounded ripple effect
         <IonRippleEffect></IonRippleEffect>
       </div>
 
-      <button className="ion-activatable">
+      <button className="ion-activatable ripple-parent">
         A button with a bounded ripple effect
         <IonRippleEffect></IonRippleEffect>
       </button>
 
-      <div className="ion-activatable">
+      <div className="ion-activatable ripple-parent">
         A plain div with an unbounded ripple effect
         <IonRippleEffect type="unbounded"></IonRippleEffect>
       </div>
 
-      <button className="ion-activatable">
+      <button className="ion-activatable ripple-parent">
         A button with an unbounded ripple effect
         <IonRippleEffect type="unbounded"></IonRippleEffect>
       </button>
@@ -82,7 +82,7 @@ export const RippleExample: React.FC = () => (
 ```
 
 ```css
-.ion-activatable {
+.ripple-parent {
   position: relative;
   overflow: hidden;
 }
@@ -95,22 +95,22 @@ export const RippleExample: React.FC = () => (
 <template>
   <ion-app>
     <ion-content>
-      <div class="ion-activatable">
+      <div class="ion-activatable ripple-parent">
         A plain div with a bounded ripple effect
         <ion-ripple-effect></ion-ripple-effect>
       </div>
 
-      <button class="ion-activatable">
+      <button class="ion-activatable ripple-parent">
         A button with a bounded ripple effect
         <ion-ripple-effect></ion-ripple-effect>
       </button>
 
-      <div class="ion-activatable">
+      <div class="ion-activatable ripple-parent">
         A plain div with an unbounded ripple effect
         <ion-ripple-effect type="unbounded"></ion-ripple-effect>
       </div>
 
-      <button class="ion-activatable">
+      <button class="ion-activatable ripple-parent">
         A button with an unbounded ripple effect
         <ion-ripple-effect type="unbounded"></ion-ripple-effect>
       </button>
@@ -119,7 +119,7 @@ export const RippleExample: React.FC = () => (
 </template>
 
 <style>
-  .ion-activatable {
+  .ripple-parent {
     position: relative;
     overflow: hidden;
   }
diff --git a/core/src/components/ripple-effect/usage/angular.md b/core/src/components/ripple-effect/usage/angular.md
index 22b154f5fd..763f1518b0 100644
--- a/core/src/components/ripple-effect/usage/angular.md
+++ b/core/src/components/ripple-effect/usage/angular.md
@@ -1,22 +1,22 @@
 ```html
 <ion-app>
   <ion-content>
-    <div class="ion-activatable">
+    <div class="ion-activatable ripple-parent">
       A plain div with a bounded ripple effect
       <ion-ripple-effect></ion-ripple-effect>
     </div>
 
-    <button class="ion-activatable">
+    <button class="ion-activatable ripple-parent">
       A button with a bounded ripple effect
       <ion-ripple-effect></ion-ripple-effect>
     </button>
 
-    <div class="ion-activatable">
+    <div class="ion-activatable ripple-parent">
       A plain div with an unbounded ripple effect
       <ion-ripple-effect type="unbounded"></ion-ripple-effect>
     </div>
 
-    <button class="ion-activatable">
+    <button class="ion-activatable ripple-parent">
       A button with an unbounded ripple effect
       <ion-ripple-effect type="unbounded"></ion-ripple-effect>
     </button>
@@ -25,7 +25,7 @@
 ```
 
 ```css
-.ion-activatable {
+.ripple-parent {
   position: relative;
   overflow: hidden;
 }
diff --git a/core/src/components/ripple-effect/usage/javascript.md b/core/src/components/ripple-effect/usage/javascript.md
index 22b154f5fd..763f1518b0 100644
--- a/core/src/components/ripple-effect/usage/javascript.md
+++ b/core/src/components/ripple-effect/usage/javascript.md
@@ -1,22 +1,22 @@
 ```html
 <ion-app>
   <ion-content>
-    <div class="ion-activatable">
+    <div class="ion-activatable ripple-parent">
       A plain div with a bounded ripple effect
       <ion-ripple-effect></ion-ripple-effect>
     </div>
 
-    <button class="ion-activatable">
+    <button class="ion-activatable ripple-parent">
       A button with a bounded ripple effect
       <ion-ripple-effect></ion-ripple-effect>
     </button>
 
-    <div class="ion-activatable">
+    <div class="ion-activatable ripple-parent">
       A plain div with an unbounded ripple effect
       <ion-ripple-effect type="unbounded"></ion-ripple-effect>
     </div>
 
-    <button class="ion-activatable">
+    <button class="ion-activatable ripple-parent">
       A button with an unbounded ripple effect
       <ion-ripple-effect type="unbounded"></ion-ripple-effect>
     </button>
@@ -25,7 +25,7 @@
 ```
 
 ```css
-.ion-activatable {
+.ripple-parent {
   position: relative;
   overflow: hidden;
 }
diff --git a/core/src/components/ripple-effect/usage/react.md b/core/src/components/ripple-effect/usage/react.md
index c37be4b254..6601adb6a2 100644
--- a/core/src/components/ripple-effect/usage/react.md
+++ b/core/src/components/ripple-effect/usage/react.md
@@ -6,22 +6,22 @@ import './RippleEffectExample.css';
 export const RippleExample: React.FC = () => (
   <IonApp>
    <IonContent>
-      <div className="ion-activatable">
+      <div className="ion-activatable ripple-parent">
         A plain div with a bounded ripple effect
         <IonRippleEffect></IonRippleEffect>
       </div>
 
-      <button className="ion-activatable">
+      <button className="ion-activatable ripple-parent">
         A button with a bounded ripple effect
         <IonRippleEffect></IonRippleEffect>
       </button>
 
-      <div className="ion-activatable">
+      <div className="ion-activatable ripple-parent">
         A plain div with an unbounded ripple effect
         <IonRippleEffect type="unbounded"></IonRippleEffect>
       </div>
 
-      <button className="ion-activatable">
+      <button className="ion-activatable ripple-parent">
         A button with an unbounded ripple effect
         <IonRippleEffect type="unbounded"></IonRippleEffect>
       </button>
@@ -31,7 +31,7 @@ export const RippleExample: React.FC = () => (
 ```
 
 ```css
-.ion-activatable {
+.ripple-parent {
   position: relative;
   overflow: hidden;
 }
diff --git a/core/src/components/ripple-effect/usage/vue.md b/core/src/components/ripple-effect/usage/vue.md
index 041e41d839..f597564a41 100644
--- a/core/src/components/ripple-effect/usage/vue.md
+++ b/core/src/components/ripple-effect/usage/vue.md
@@ -2,22 +2,22 @@
 <template>
   <ion-app>
     <ion-content>
-      <div class="ion-activatable">
+      <div class="ion-activatable ripple-parent">
         A plain div with a bounded ripple effect
         <ion-ripple-effect></ion-ripple-effect>
       </div>
 
-      <button class="ion-activatable">
+      <button class="ion-activatable ripple-parent">
         A button with a bounded ripple effect
         <ion-ripple-effect></ion-ripple-effect>
       </button>
 
-      <div class="ion-activatable">
+      <div class="ion-activatable ripple-parent">
         A plain div with an unbounded ripple effect
         <ion-ripple-effect type="unbounded"></ion-ripple-effect>
       </div>
 
-      <button class="ion-activatable">
+      <button class="ion-activatable ripple-parent">
         A button with an unbounded ripple effect
         <ion-ripple-effect type="unbounded"></ion-ripple-effect>
       </button>
@@ -26,7 +26,7 @@
 </template>
 
 <style>
-  .ion-activatable {
+  .ripple-parent {
     position: relative;
     overflow: hidden;
   }