chore(ripple): update docs/demos for Safari flex vs grid

PiperOrigin-RevId: 561543073
material-components · Aug 31, 2023 · 3906b7f · 3906b7f
1 parent c233caf
commit 3906b7f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/docs/components/ripple.md b/docs/components/ripple.md
@@ -140,7 +140,8 @@ To create an unbounded circular ripple centered on an element, use the following
 
 ```css
 .container {
-  display: grid;
+  display: flex;
+  place-content: center;
   place-items: center;
   position: relative;
 }
@@ -182,7 +183,8 @@ md-ripple.unbounded {
     width: 32px;
 
     /* Needed for unbounded ripple */
-    display: grid;
+    display: flex;
+    place-content: center;
     place-items: center;
     position: relative;
   }

diff --git a/ripple/demo/stories.ts b/ripple/demo/stories.ts
@@ -51,7 +51,8 @@ const ripples: MaterialStoryInit<StoryKnobs> = {
       width: 24px;
 
       /* Recommended styles for an unbounded ripple's anchor. */
-      display: grid;
+      display: flex;
+      place-content: center;
       place-items: center;
       position: relative;
     }