chore: clean up styles to target main and ion-content buttons

ionic-team · Apr 30, 2024 · a344d6b · a344d6b
1 parent 92792d5
commit a344d6b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 39 deletions.
diff --git a/core/scripts/testing/styles.css b/core/scripts/testing/styles.css
diff --git a/core/src/components/modal/test/standalone/index.html b/core/src/components/modal/test/standalone/index.html
@@ -18,7 +18,9 @@
     window.modalController = modalController;
   </script>
   <body>
-    <button id="basic-modal" onclick="presentModal()">Present Modal</button>
+    <main>
+      <button id="basic-modal" onclick="presentModal()">Present Modal</button>
+    </main>
 
     <script>
       customElements.define(

diff --git a/core/src/components/popover/test/standalone/index.html b/core/src/components/popover/test/standalone/index.html
@@ -18,16 +18,18 @@
     window.popoverController = popoverController;
   </script>
   <body>
-    <button id="basic-popover" onclick="presentPopover({ component: 'profile-page', event: event })">
-      Show Popover
-    </button>
-    <button onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">
-      Show Translucent Popover
-    </button>
-    <button color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">
-      Show Long List Popover
-    </button>
-    <button color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</button>
+    <main>
+      <button id="basic-popover" onclick="presentPopover({ component: 'profile-page', event: event })">
+        Show Popover
+      </button>
+      <button onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">
+        Show Translucent Popover
+      </button>
+      <button color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">
+        Show Long List Popover
+      </button>
+      <button color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</button>
+    </main>
 
     <script>
       async function presentPopover(opts) {

diff --git a/core/src/components/toast/test/standalone/index.html b/core/src/components/toast/test/standalone/index.html
@@ -12,39 +12,41 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-  <script type="module">
-    import { toastController } from '../../../../dist/ionic/index.esm.js';
-    window.toastController = toastController;
-  </script>
-  <body>
-    <button id="basic-toast" onclick="openToast({ message: 'Hellooo', position: 'bottom', duration: 2000 })">
-      Show Toast Bottom
-    </button>
-    <button onclick="openToast({ message: 'Hellooo', position: 'top', duration: 2000 })">Show Toast Top</button>
-    <button onclick="openToast({ message: 'Hellooo', position: 'middle', duration: 2000 })">Show Toast Middle</button>
-    <button
-      onclick="openToast({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})"
-    >
-      Show Toast with long message
-    </button>
-    <button onclick="openToast({message: 'click to close', buttons: ['Close'] })">Show Toast with Close Button</button>
-    <button onclick="openToast({message: 'click to close', buttons: ['closing time'] })">
-      Show Toast with Custom Close Button Text
-    </button>
-    <button onclick="openToast({message: 'click to close', buttons: ['Close'], translucent: true})">
-      Show Translucent Toast
-    </button>
-    <button onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'custom'})">
-      Show Toast with Custom Properties
-    </button>
     <style>
       .custom {
         --background: papayawhip;
         --button-color: blue;
         --color: red;
       }
     </style>
+  </head>
+  <script type="module">
+    import { toastController } from '../../../../dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+  <body>
+    <main>
+      <button id="basic-toast" onclick="openToast({ message: 'Hellooo', position: 'bottom', duration: 2000 })">
+        Show Toast Bottom
+      </button>
+      <button onclick="openToast({ message: 'Hellooo', position: 'top', duration: 2000 })">Show Toast Top</button>
+      <button onclick="openToast({ message: 'Hellooo', position: 'middle', duration: 2000 })">Show Toast Middle</button>
+      <button
+        onclick="openToast({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})"
+      >
+        Show Toast with long message
+      </button>
+      <button onclick="openToast({message: 'click to close', buttons: ['Close'] })">Show Toast with Close Button</button>
+      <button onclick="openToast({message: 'click to close', buttons: ['closing time'] })">
+        Show Toast with Custom Close Button Text
+      </button>
+      <button onclick="openToast({message: 'click to close', buttons: ['Close'], translucent: true})">
+        Show Translucent Toast
+      </button>
+      <button onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'custom'})">
+        Show Toast with Custom Properties
+      </button>
+    </main>
 
     <script>
       window.addEventListener('ionToastDidDismiss', function (e) {