fix(title): inherit padding for iOS title in a toolbar (#23343)

brandyscarney · web-flow · commit 82cfa5565347 · 2021-06-03T11:28:57.000-04:00
resolves #23072
diff --git a/core/src/components/modal/test/custom/index.html b/core/src/components/modal/test/custom/index.html
@@ -3,30 +3,35 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Modal - Basic</title>
+  <title>Modal - Custom</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <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>
   <style>
-  .custom-modal {
-    --height: 70%;
-    --border-style: solid;
-    --border-width: 7px 0 0 0;
-    --border-color: #0d51aa;
-    --border-radius: 20px 20px 0 0;
+    .custom-modal {
+      --height: 70%;
+      --border-style: solid;
+      --border-width: 7px 0 0 0;
+      --border-color: #0d51aa;
+      --border-radius: 20px 20px 0 0;
 
-    align-items: flex-end;
-  }
+      align-items: flex-end;
+    }
 
-  @media (max-width: 400px) {
-    .custom-modal {
-      --max-width: 98%;
-      --height: 98%;
+    .custom-modal ion-toolbar {
+      --padding-top: 46px;
+      --padding-bottom: 10px;
+    }
+
+    @media (max-width: 400px) {
+      .custom-modal {
+        --max-width: 98%;
+        --height: 98%;
+      }
     }
-  }
   </style>
 </head>
 
@@ -35,7 +40,7 @@
 
     <ion-header>
       <ion-toolbar>
-        <ion-title>Modal - Basic</ion-title>
+        <ion-title>Modal - Custom</ion-title>
       </ion-toolbar>
     </ion-header>
 
@@ -55,13 +60,23 @@
       element.innerHTML = `
       <ion-header>
         <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button>
+              <ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
+            </ion-button>
+          </ion-buttons>
           <ion-title>Super Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button class="dismiss">
+              Close
+            </ion-button>
+          </ion-buttons>
         </ion-toolbar>
       </ion-header>
       <ion-content>
         <h1>Content of doom</h1>
         <div>Here's some more content</div>
-        <ion-button class="dismiss">Dismiss Modal</ion-button>
+        <ion-button class="dismiss" class="dismiss">Dismiss Modal</ion-button>
       </ion-content>
       `;
 
@@ -72,10 +87,12 @@ <h1>Content of doom</h1>
       });
 
       // listen for close event
-      const button = element.querySelector('ion-button');
-      button.addEventListener('click', () => {
-        modalElement.dismiss();
-      });
+      const buttons = element.querySelectorAll('.dismiss');
+      for (var button of buttons) {
+        button.addEventListener('click', () => {
+          modalElement.dismiss();
+        });
+      }
       document.body.appendChild(modalElement);
       return modalElement;
     }
diff --git a/core/src/components/title/title.ios.scss b/core/src/components/title/title.ios.scss
@@ -5,7 +5,7 @@
 
 :host {
   @include position(0, null, null, 0);
-  @include padding(0, 90px, 0);
+  @include padding(var(--padding-top), 90px, var(--padding-bottom));
 
   position: absolute;
 
