fix(backdrop): make backdrop visible in basic playground (#3200)

averyjohnston · brandyscarney · web-flow · commit f3d1848ff996 · 2023-10-17T14:49:32.000-05:00
Co-authored-by: Brandy Carney &lt;brandyscarney@users.noreply.github.com&gt;
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
@@ -16,7 +16,7 @@ Backdrops are full screen components that overlay other components. They are use
 
 ## Basic Usage
 
-The backdrop is transparent by default. The backdrop will prevent clicking or tapping on the content behind it.
+The backdrop prevents clicking or tapping on the content behind it. It is transparent by default, so the below demo includes CSS to make it visible.
 
 import Basic from '@site/static/usage/v7/backdrop/basic/index.md';
 
diff --git a/static/usage/v7/backdrop/basic/angular/example_component_css.md b/static/usage/v7/backdrop/basic/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-backdrop {
+  background: var(--ion-color-dark);
+  opacity: 0.3;
+}
+```
diff --git a/static/usage/v7/backdrop/basic/angular/example_component_html.md b/static/usage/v7/backdrop/basic/angular/example_component_html.md
diff --git a/static/usage/v7/backdrop/basic/demo.html b/static/usage/v7/backdrop/basic/demo.html
@@ -8,6 +8,13 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-backdrop {
+        background: var(--ion-color-dark);
+        opacity: 0.3;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/backdrop/basic/index.md b/static/usage/v7/backdrop/basic/index.md
@@ -1,13 +1,33 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
-import react from './react.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
 import vue from './vue.md';
-import angular from './angular.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
 
 <Playground
   version="7"
-  code={{ javascript, react, vue, angular }}
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
   src="usage/v7/backdrop/basic/demo.html"
   devicePreview={true}
 />
diff --git a/static/usage/v7/backdrop/basic/javascript.md b/static/usage/v7/backdrop/basic/javascript.md
@@ -1,4 +1,11 @@
 ```html
+<style>
+  ion-backdrop {
+    background: var(--ion-color-dark);
+    opacity: 0.3;
+  }
+</style>
+
 <ion-backdrop visible="true"></ion-backdrop>
 <div class="ion-page">
   <ion-header>
diff --git a/static/usage/v7/backdrop/basic/react/main_css.md b/static/usage/v7/backdrop/basic/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-backdrop {
+  background: var(--ion-color-dark);
+  opacity: 0.3;
+}
+```
diff --git a/static/usage/v7/backdrop/basic/react/main_tsx.md b/static/usage/v7/backdrop/basic/react/main_tsx.md
@@ -11,6 +11,8 @@ import {
   IonButton,
 } from '@ionic/react';
 
+import './main.css';
+
 function Example() {
   return (
     <>
diff --git a/static/usage/v7/backdrop/basic/vue.md b/static/usage/v7/backdrop/basic/vue.md
@@ -1,4 +1,11 @@
 ```html
+<style>
+  ion-backdrop {
+    background: var(--ion-color-dark);
+    opacity: 0.3;
+  }
+</style>
+
 <template>
   <ion-backdrop :visible="true"></ion-backdrop>
   <div class="ion-page">
