Merge branch 'main' into chore-update-next-from-main

core/src/components/loading/loading.ios.vars.scss

@@ -4,49 +4,49 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the loading wrapper
-$loading-ios-font-size: dynamic-font(14px) !default;
+$loading-ios-font-size: dynamic-font(14px);
 
 /// @prop - Padding top of the loading wrapper
-$loading-ios-padding-top: 24px !default;
+$loading-ios-padding-top: 24px;
 
 /// @prop - Padding end of the loading wrapper
-$loading-ios-padding-end: 34px !default;
+$loading-ios-padding-end: 34px;
 
 /// @prop - Padding bottom of the loading wrapper
-$loading-ios-padding-bottom: $loading-ios-padding-top !default;
+$loading-ios-padding-bottom: $loading-ios-padding-top;
 
 /// @prop - Padding start of the loading wrapper
-$loading-ios-padding-start: $loading-ios-padding-end !default;
+$loading-ios-padding-start: $loading-ios-padding-end;
 
 /// @prop - Max width of the loading wrapper
-$loading-ios-max-width: 270px !default;
+$loading-ios-max-width: 270px;
 
 /// @prop - Maximum height of the loading wrapper
-$loading-ios-max-height: 90% !default;
+$loading-ios-max-height: 90%;
 
 /// @prop - Border radius of the loading wrapper
-$loading-ios-border-radius: 8px !default;
+$loading-ios-border-radius: 8px;
 
 /// @prop - Text color of the loading wrapper
-$loading-ios-text-color: $text-color !default;
+$loading-ios-text-color: $text-color;
 
 /// @prop - Background of the loading wrapper
-$loading-ios-background-color: $overlay-ios-background-color !default;
+$loading-ios-background-color: $overlay-ios-background-color;
 
 /// @prop - Background color alpha of the translucent loading wrapper
-$loading-ios-translucent-background-color-alpha: 0.8 !default;
+$loading-ios-translucent-background-color-alpha: 0.8;
 
 /// @prop - Background color of the translucent loading wrapper
 $loading-ios-translucent-background-color: rgba(
   $background-color-rgb,
   $loading-ios-translucent-background-color-alpha
-) !default;
+);
 
 /// @prop - Font weight of the loading content
-$loading-ios-content-font-weight: bold !default;
+$loading-ios-content-font-weight: bold;
 
 /// @prop - Color of the loading spinner
-$loading-ios-spinner-color: $text-color-step-400 !default;
+$loading-ios-spinner-color: $text-color-step-400;
 
 /// @prop - Filter of the translucent loading
-$loading-ios-translucent-filter: saturate(180%) blur(20px) !default;
+$loading-ios-translucent-filter: saturate(180%) blur(20px);

core/src/components/loading/loading.md.vars.scss

@@ -4,40 +4,40 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the loading wrapper
-$loading-md-font-size: dynamic-font(14px) !default;
+$loading-md-font-size: dynamic-font(14px);
 
 /// @prop - Padding top of the loading wrapper
-$loading-md-padding-top: 24px !default;
+$loading-md-padding-top: 24px;
 
 /// @prop - Padding end of the loading wrapper
-$loading-md-padding-end: $loading-md-padding-top !default;
+$loading-md-padding-end: $loading-md-padding-top;
 
 /// @prop - Padding bottom of the loading wrapper
-$loading-md-padding-bottom: $loading-md-padding-top !default;
+$loading-md-padding-bottom: $loading-md-padding-top;
 
 /// @prop - Padding start of the loading wrapper
-$loading-md-padding-start: $loading-md-padding-end !default;
+$loading-md-padding-start: $loading-md-padding-end;
 
 /// @prop - Max width of the loading wrapper
-$loading-md-max-width: 280px !default;
+$loading-md-max-width: 280px;
 
 /// @prop - Maximum height of the loading wrapper
-$loading-md-max-height: 90% !default;
+$loading-md-max-height: 90%;
 
 /// @prop - Border radius of the loading wrapper
-$loading-md-border-radius: 2px !default;
+$loading-md-border-radius: 2px;
 
 /// @prop - Text color of the loading wrapper
-$loading-md-text-color: $text-color-step-150 !default;
+$loading-md-text-color: $text-color-step-150;
 
 /// @prop - Background of the loading wrapper
-$loading-md-background: $background-color-step-50 !default;
+$loading-md-background: $background-color-step-50;
 
 /// @prop - Box shadow color of the loading wrapper
-$loading-md-box-shadow-color: rgba(0, 0, 0, 0.4) !default;
+$loading-md-box-shadow-color: rgba(0, 0, 0, 0.4);
 
 /// @prop - Box shadow of the loading wrapper
-$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default;
+$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color;
 
 /// @prop - Color of the loading spinner
-$loading-md-spinner-color: ion-color(primary, base) !default;
+$loading-md-spinner-color: ion-color(primary, base);

core/src/components/loading/test/basic/index.html

@@ -12,105 +12,6 @@
     <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 { loadingController } from '../../../../../dist/ionic/index.esm.js';
-    window.loadingController = loadingController;
-  </script>
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Loading - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding">
-        <ion-button
-          id="basic-loading"
-          expand="block"
-          onclick="openLoading({ message: 'Hellooo', duration: 2000, htmlAttributes: { 'data-testid': 'basic-loading' } })"
-          >Show Loading</ion-button
-        >
-        <ion-button id="default" expand="block" onclick="openLoading({duration: 2000, content: 'Please wait...'})"
-          >Show Default Loading</ion-button
-        >
-        <ion-button
-          id="long-content-loading"
-          expand="block"
-          onclick="openLoading({duration: 2000, 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.'})"
-          >Show Loading with long message</ion-button
-        >
-        <ion-button
-          id="no-spinner-loading"
-          expand="block"
-          onclick="openLoading({duration: 2000, message: 'Please wait...', spinner: null})"
-          >Show Loading with no spinner</ion-button
-        >
-        <ion-button
-          id="translucent-loading"
-          expand="block"
-          onclick="openLoading({duration: 5000, message: 'Please wait...', translucent: true})"
-          >Show Loading with translucent</ion-button
-        >
-        <ion-button
-          id="custom-class-loading"
-          expand="block"
-          onclick="openLoading({duration: 5000,message: 'Please wait...', spinner: 'lines-sharp', cssClass: 'custom-class custom-loading'})"
-          >Show Loading with cssClass</ion-button
-        >
-        <ion-button id="backdrop-loading" expand="block" onclick="openLoading({backdropDismiss: true})"
-          >Show Backdrop Click Loading</ion-button
-        >
-        <ion-button
-          id="html-content-loading"
-          expand="block"
-          onclick="openLoading({cssClass: 'html-loading', duration: 5000, message: '<ion-button>Click impatiently to load faster</ion-button>'})"
-          >Show Loading with HTML content</ion-button
-        >
-
-        <ion-grid>
-          <ion-row>
-            <ion-col size="6">
-              <f class="red"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="green"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="blue"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="yellow"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="pink"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="purple"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="black"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="orange"></f>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-content>
-    </ion-app>
-    <script>
-      window.Ionic = {
-        config: {
-          innerHTMLTemplatesEnabled: true,
-        },
-      };
-
-      async function openLoading(opts) {
-        const loading = await loadingController.create(opts);
-        await loading.present();
-      }
-    </script>
 
     <style>
       .html-loading {
@@ -170,5 +71,110 @@
         background-color: #f69234;
       }
     </style>
+  </head>
+  <script type="module">
+    import { loadingController } from '../../../../../dist/ionic/index.esm.js';
+    window.loadingController = loadingController;
+  </script>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Loading - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <button
+          id="basic-loading"
+          class="expand"
+          onclick="openLoading({ message: 'Hellooo', duration: 2000, htmlAttributes: { 'data-testid': 'basic-loading' } })"
+        >
+          Show Loading
+        </button>
+        <button id="default" class="expand" onclick="openLoading({duration: 2000, content: 'Please wait...'})">
+          Show Default Loading
+        </button>
+        <button
+          id="long-content-loading"
+          class="expand"
+          onclick="openLoading({duration: 2000, 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.'})"
+        >
+          Show Loading with long message
+        </button>
+        <button
+          id="no-spinner-loading"
+          class="expand"
+          onclick="openLoading({duration: 2000, message: 'Please wait...', spinner: null})"
+        >
+          Show Loading with no spinner
+        </button>
+        <button
+          id="translucent-loading"
+          class="expand"
+          onclick="openLoading({duration: 5000, message: 'Please wait...', translucent: true})"
+        >
+          Show Loading with translucent
+        </button>
+        <button
+          id="custom-class-loading"
+          class="expand"
+          onclick="openLoading({duration: 5000,message: 'Please wait...', spinner: 'lines-sharp', cssClass: 'custom-class custom-loading'})"
+        >
+          Show Loading with cssClass
+        </button>
+        <button id="backdrop-loading" class="expand" onclick="openLoading({backdropDismiss: true})">
+          Show Backdrop Click Loading
+        </button>
+        <button
+          id="html-content-loading"
+          class="expand"
+          onclick="openLoading({cssClass: 'html-loading', duration: 5000, message: '<button>Click impatiently to load faster</button>'})"
+        >
+          Show Loading with HTML content
+        </button>
+
+        <ion-grid>
+          <ion-row>
+            <ion-col size="6">
+              <f class="red"></f>
+            </ion-col>
+            <ion-col size="6">
+              <f class="green"></f>
+            </ion-col>
+            <ion-col size="6">
+              <f class="blue"></f>
+            </ion-col>
+            <ion-col size="6">
+              <f class="yellow"></f>
+            </ion-col>
+            <ion-col size="6">
+              <f class="pink"></f>
+            </ion-col>
+            <ion-col size="6">
+              <f class="purple"></f>
+            </ion-col>
+            <ion-col size="6">
+              <f class="black"></f>
+            </ion-col>
+            <ion-col size="6">
+              <f class="orange"></f>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </ion-content>
+    </ion-app>
+    <script>
+      window.Ionic = {
+        config: {
+          innerHTMLTemplatesEnabled: true,
+        },
+      };
+
+      async function openLoading(opts) {
+        const loading = await loadingController.create(opts);
+        await loading.present();
+      }
+    </script>
   </body>
 </html>

core/src/components/loading/test/is-open/index.html

@@ -47,11 +47,11 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-button id="default" onclick="openLoading()">Open Loading</ion-button>
+            <button id="default" onclick="openLoading()">Open Loading</button>
           </div>
           <div class="grid-item">
             <h2>Open, then close after 500ms</h2>
-            <ion-button id="timeout" onclick="openLoading(500)">Open Loading</ion-button>
+            <button id="timeout" onclick="openLoading(500)">Open Loading</button>
           </div>
         </div>
 

core/src/components/loading/test/standalone/index.html

@@ -18,45 +18,39 @@
     window.loadingController = loadingController;
   </script>
   <body>
-    <button id="basic-loading" onclick="openLoading({ message: 'Hellooo', duration: 5000 })">Show Loading</button>
-    <button
-      id="long-content-loading"
-      onclick="openLoading({duration: 2000, content: '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.'})"
-    >
-      Show Loading with long content
-    </button>
-    <button
-      id="no-spinner-loading"
-      onclick="openLoading({duration: 2000, content: 'Loading Please Wait...', spinner: null})"
-    >
-      Show Loading with no spinner
-    </button>
-    <button
-      id="translucent-loading"
-      onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true})"
-    >
-      Show Loading with translucent
-    </button>
-    <button
-      id="custom-class-loading"
-      onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})"
-    >
-      Show Loading with cssClass
-    </button>
-
-    <style>
-      body > button {
-        display: block;
-        clear: both;
-        width: 100%;
-        padding: 12px 8px;
-        font-size: 1em;
-        background: #f8f8f8;
-        border: 1px solid #eee;
-        border-radius: 4px;
-        margin-bottom: 8px;
-      }
-    </style>
+    <main>
+      <button class="expand" id="basic-loading" onclick="openLoading({ message: 'Hellooo', duration: 5000 })">
+        Show Loading
+      </button>
+      <button
+        class="expand"
+        id="long-content-loading"
+        onclick="openLoading({duration: 2000, content: '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.'})"
+      >
+        Show Loading with long content
+      </button>
+      <button
+        class="expand"
+        id="no-spinner-loading"
+        onclick="openLoading({duration: 2000, content: 'Loading Please Wait...', spinner: null})"
+      >
+        Show Loading with no spinner
+      </button>
+      <button
+        class="expand"
+        id="translucent-loading"
+        onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true})"
+      >
+        Show Loading with translucent
+      </button>
+      <button
+        class="expand"
+        id="custom-class-loading"
+        onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})"
+      >
+        Show Loading with cssClass
+      </button>
+    </main>
 
     <script>
       async function openLoading(opts) {

core/src/components/loading/test/trigger/index.html

@@ -47,11 +47,11 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-button id="default">Open Loading</ion-button>
+            <button id="default">Open Loading</button>
           </div>
           <div class="grid-item">
             <h2>Open, then close after 500ms</h2>
-            <ion-button id="timeout">Open Loading</ion-button>
+            <button id="timeout">Open Loading</button>
           </div>
         </div>