fix(): add safe area cutouts (#15750)

* fix(): add safe area cutouts

* fix(): adjust safe-area padding

* fix(): safe area improvments

* fix(): safe-area-improvments for padding

* fix(): safe-area improvements for items

* fix(): safe-area fix for core css

* fix(): safe-area fix for list header

* fix(): safe-area fix for popover

* fix(): safe-area validates

* chore(): ci updates

* fix(): safe-area revert padding changes for now

* padding is being applied twice

* safe-area-left is applied to item

circle.yml

@@ -3,7 +3,7 @@ jobs:
   build:
     working_directory: ~/ionic/
     docker:
-      - image: node:8
+      - image: circleci/node:latest-browsers
     branches:
       # ignore:
       #   - core

core/src/components/card/card.scss

@@ -8,6 +8,8 @@
    * @prop --background: Background of the card
    * @prop --color: Color of the card
    */
+  --ion-safe-area-left: 0px;
+  --ion-safe-area-right: 0px;
 
   @include font-smoothing();
 

core/src/components/content/content.scss

@@ -36,6 +36,7 @@
 
   /* stylelint-disable */
   margin: 0 !important;
+
   padding: 0 !important;
   /* stylelint-enable */
 
@@ -55,7 +56,7 @@
 }
 
 .inner-scroll {
-  @include position(calc(var(--offset-top) * -1), 0,calc(var(--offset-bottom) * -1), 0);
+  @include position(calc(var(--offset-top) * -1), 0px,calc(var(--offset-bottom) * -1), 0px);
   @include padding(calc(var(--padding-top) + var(--offset-top)), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)), var(--padding-start));
 
   position: absolute;

core/src/components/item-options/item-options.scss

@@ -56,6 +56,16 @@ ion-item-options {
   }
 }
 
+.item-options-start ion-item-option:first-child {
+  @include padding-horizontal(null, var(--ion-safe-area-left));
+
+}
+
+.item-options-end ion-item-option:last-child {
+  @include padding-horizontal(null, var(--ion-safe-area-right));
+
+}
+
 .item-sliding-active-slide {
   @include rtl() {
     &.item-sliding-active-options-start ion-item-options:not(.item-options-end) {

core/src/components/item/item.ios.scss

@@ -8,7 +8,7 @@
   --transition: background-color 200ms linear;
   --padding-start: #{$item-ios-padding-start};
   --inner-padding-end: #{$item-ios-padding-end / 2};
-  --inner-border-width: #{0 0 $item-ios-border-bottom-width 0};
+  --inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px};
 
   font-size: $item-ios-font-size;
 }
@@ -32,11 +32,11 @@
 // Full lines - apply the border to the item
 // Inset lines - apply the border to the item inner
 :host(.item-lines-full) {
-  --border-width: #{0 0 $item-ios-border-bottom-width 0};
+  --border-width: #{0px 0px $item-ios-border-bottom-width 0px};
 }
 
 :host(.item-lines-inset) {
-  --inner-border-width: #{0 0 $item-ios-border-bottom-width 0};
+  --inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px};
 }
 
 // Full lines - remove the border from the item inner (inset list items)
@@ -44,12 +44,12 @@
 // No lines - remove the border on both (full / inset list items)
 :host(.item-lines-inset),
 :host(.item-lines-none) {
-  --border-width: 0;
+  --border-width: 0px;
 }
 
 :host(.item-lines-full),
 :host(.item-lines-none) {
-  --inner-border-width: 0;
+  --inner-border-width: 0px;
 }
 
 
@@ -79,8 +79,8 @@
 // --------------------------------------------------
 
 ::slotted(.button-small) {
-  --padding-top: 0;
+  --padding-top: 0px;
-  --padding-bottom: 0;
+  --padding-bottom: 0px;
   --padding-start: .5em;
   --padding-end: .5em;
   --height: 24px;
@@ -133,7 +133,7 @@
 
 :host(.item-radio) ::slotted(ion-label),
 :host(.item-toggle) ::slotted(ion-label) {
-  @include margin-horizontal(0, null);
+  @include margin-horizontal(0px, null);
 }
 
 
@@ -148,7 +148,7 @@
 :host(.item-label-floating) ::slotted(ion-select) {
   --padding-top: 8px;
   --padding-bottom: 8px;
-  --padding-start: 0;
+  --padding-start: 0px;
 }
 
 

core/src/components/item/item.scss

@@ -15,9 +15,9 @@
    * @prop --color: Color of the item
    * @prop --detail-icon-color: Color of the item detail icon
    * @prop --inner-border-width: Width of the item inner border
-   * @prop --inner-box-shadow: Box shadow of the item inner 
+   * @prop --inner-box-shadow: Box shadow of the item inner
-   * @prop --inner-padding-bottom: Bottom padding of the item inner 
+   * @prop --inner-padding-bottom: Bottom padding of the item inner
-   * @prop --inner-padding-end: End padding of the item inner 
+   * @prop --inner-padding-end: End padding of the item inner
    * @prop --inner-padding-start: Start padding of the item inner
    * @prop --inner-padding-top: Top padding of the item inner
    * @prop --min-height: Minimum height of the item
@@ -32,15 +32,15 @@
   --background-activated: #{current-color(tint)};
   --color: #{current-color(contrast)};
   --detail-icon-color: #{current-color(shade)};
-  --border-radius: 0;
+  --border-radius: 0px;
-  --border-width: 0;
+  --border-width: 0px;
   --border-style: solid;
   --border-color: #{current-color(shade)};
-  --inner-border-width: 0;
+  --inner-border-width: 0px;
-  --padding-top: 0;
+  --padding-top: 0px;
-  --padding-bottom: 0;
+  --padding-bottom: 0px;
-  --padding-end: 0;
+  --padding-end: 0px;
-  --padding-start: 0;
+  --padding-start: 0px;
   --inner-padding-top: 0px;
   --inner-padding-bottom: 0px;
   --inner-padding-start: 0px;
@@ -78,7 +78,12 @@
 
 
 .item-native {
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include padding(
+    var(--padding-top),
+    var(--padding-end),
+    var(--padding-bottom),
+    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
+  );
   @include border-radius(var(--border-radius));
   @include margin(0);
   @include text-inherit();
@@ -128,7 +133,7 @@ button, a {
     var(--inner-padding-top),
     calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)),
     var(--inner-padding-bottom),
-    calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-start))
+    var(--inner-padding-start)
   );
 
   display: flex;

core/src/components/list-header/list-header.ios.scss

@@ -8,7 +8,7 @@
   --background: #{$list-ios-header-background-color};
   --color: #{$list-ios-header-color};
 
-  @include padding-horizontal($list-ios-header-padding-start, null);
+  @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-ios-header-padding-start}), null)
 
   position: relative;
 

core/src/components/menu/menu.scss

@@ -40,6 +40,8 @@
 }
 
 :host(.menu-side-start) .menu-inner {
+  --ion-safe-area-right: 0px;
+
   @include multi-dir() {
     /* stylelint-disable property-blacklist */
     right: auto;
@@ -48,6 +50,8 @@
 }
 
 :host(.menu-side-end) .menu-inner {
+  --ion-safe-area-left: 0px;
+
   @include multi-dir() {
     right: 0;
     left: auto;

core/src/components/popover/animations/ios.enter.ts

@@ -18,12 +18,8 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev
   // If ev was passed, use that for target element
   const targetDim = ev && ev.target && (ev.target as HTMLElement).getBoundingClientRect();
 
-  const targetTop =
+  const targetTop = targetDim != null && 'top' in targetDim ? targetDim.top : bodyHeight / 2 - contentHeight / 2;
-    targetDim != null && 'top' in targetDim
+  const targetLeft = targetDim != null && 'left' in targetDim ? targetDim.left : bodyWidth / 2;
-      ? targetDim.top
-      : bodyHeight / 2 - contentHeight / 2;
-  const targetLeft =
-    targetDim != null && 'left' in targetDim ? targetDim.left : bodyWidth / 2;
   const targetWidth = (targetDim && targetDim.width) || 0;
   const targetHeight = (targetDim && targetDim.height) || 0;
 
@@ -63,8 +59,7 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev
     checkSafeAreaLeft = true;
     popoverCSS.left = POPOVER_IOS_BODY_PADDING;
   } else if (
-    contentWidth + POPOVER_IOS_BODY_PADDING + popoverCSS.left + 25 >
+    contentWidth + POPOVER_IOS_BODY_PADDING + popoverCSS.left + 25 > bodyWidth
-    bodyWidth
   ) {
     // Ok, so we're on the right side of the screen,
     // but now we need to make sure we're still a bit further right
@@ -75,10 +70,7 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev
   }
 
   // make it pop up if there's room above
-  if (
+  if (targetTop + targetHeight + contentHeight > bodyHeight && targetTop - contentHeight > 0) {
-    (targetTop + targetHeight + contentHeight) > bodyHeight &&
-    (targetTop - contentHeight) > 0
-  ) {
     arrowCSS.top = targetTop - (arrowHeight + 1);
     console.log(arrowCSS);
     console.log(targetTop);
@@ -99,11 +91,11 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev
   contentEl.style.left = popoverCSS.left + 'px';
 
   if (checkSafeAreaLeft) {
-    contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-left, 0px)`;
+    contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-left, 0px))`;
   }
 
   if (checkSafeAreaRight) {
-    contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-right, 0px)`;
+    contentEl.style.left = `calc(${popoverCSS.left}px - var(--ion-safe-area-right, 0px))`;
   }
 
   contentEl.style.transformOrigin = originY + ' ' + originX;

core/src/components/popover/popover.scss

@@ -29,3 +29,11 @@
   overflow: auto;
   z-index: $z-index-overlay-wrapper;
 }
+
+.popover-viewport {
+  --ion-safe-area-top: 0px;
+  --ion-safe-area-right: 0px;
+  --ion-safe-area-bottom: 0px;
+  --ion-safe-area-left: 0px;
+}
+

core/src/components/popover/popover.tsx

@@ -179,7 +179,7 @@ export class Popover implements ComponentInterface, OverlayInterface {
       ...this.componentProps,
       popover: this.el
     };
-    this.usersElement = await attachComponent(this.delegate, container, this.component, ['popover-viewport'], data);
+    this.usersElement = await attachComponent(this.delegate, container, this.component, ['popover-viewport', (this.el as any)['s-sc']], data);
     await deepReady(this.usersElement);
     return present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, this.event);
   }

core/src/components/split-pane/split-pane.tsx

@@ -43,7 +43,7 @@ export class SplitPane implements ComponentInterface {
    * Can be a CSS media query expression, or a shortcut expression.
    * Can also be a boolean expression.
    */
-  @Prop() when: string | boolean = QUERY['md'];
+  @Prop() when: string | boolean = QUERY['lg'];
 
   /**
    * Emitted when the split pane is visible.

core/src/components/toolbar/toolbar.scss

@@ -22,6 +22,10 @@
   --opacity: 1;
 
   @include font-smoothing();
+  @include padding-horizontal(
+    var(--ion-safe-area-left),
+    var(--ion-safe-area-right)
+  );
 
   display: block;
 
@@ -54,7 +58,6 @@
     var(--padding-bottom),
     var(--padding-start)
   );
-
   display: flex;
   position: relative;
 

core/src/css/core.scss

@@ -96,7 +96,6 @@ ion-toast-controller,
   opacity: 0;
 }
 
-
 // Ionic Safe Margins
 // --------------------------------------------------
 

core/src/css/padding.scss

@@ -128,4 +128,4 @@ $margin: var(--ion-margin, 16px);
   --margin-end: #{$margin};
 
   @include margin-horizontal($margin);
-}
+}