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
2025-11-10 00:27:41 +08:00 · 2018-09-26 14:01:54 -04:00
parent 6bfda48774
commit a3c85ae301
15 changed files with 67 additions and 43 deletions
--- a/circle.yml
+++ b/circle.yml
@ -3,7 +3,7 @@ jobs:
  build:
    working_directory: ~/ionic/
    docker:
-      - image: node:8
+      - image: circleci/node:latest-browsers
    branches:
      # ignore:
      #   - core
--- a/core/src/components/card/card.scss
+++ b/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();

--- a/core/src/components/content/content.scss
+++ b/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;
--- a/core/src/components/item-options/item-options.scss
+++ b/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) {
--- a/core/src/components/item/item.ios.scss
+++ b/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-bottom: 0;
+  --padding-top: 0px;
+  --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;
 }


--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@ -32,15 +32,15 @@
  --background-activated: #{current-color(tint)};
  --color: #{current-color(contrast)};
  --detail-icon-color: #{current-color(shade)};
-  --border-radius: 0;
-  --border-width: 0;
+  --border-radius: 0px;
+  --border-width: 0px;
  --border-style: solid;
  --border-color: #{current-color(shade)};
-  --inner-border-width: 0;
-  --padding-top: 0;
-  --padding-bottom: 0;
-  --padding-end: 0;
-  --padding-start: 0;
+  --inner-border-width: 0px;
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+  --padding-end: 0px;
+  --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;
--- a/core/src/components/list-header/list-header.ios.scss
+++ b/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;

--- a/core/src/components/menu/menu.scss
+++ b/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;
--- a/core/src/components/popover/animations/ios.enter.ts
+++ b/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 =
-    targetDim != null && 'top' in targetDim
-      ? targetDim.top
-      : bodyHeight / 2 - contentHeight / 2;
-  const targetLeft =
-    targetDim != null && 'left' in targetDim ? targetDim.left : bodyWidth / 2;
+  const targetTop = targetDim != null && 'top' in targetDim ? 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 >
-    bodyWidth
+    contentWidth + POPOVER_IOS_BODY_PADDING + popoverCSS.left + 25 > 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 (
-    (targetTop + targetHeight + contentHeight) > bodyHeight &&
-    (targetTop - contentHeight) > 0
-  ) {
+  if (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;
--- a/core/src/components/popover/popover.scss
+++ b/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;
+}
+
--- a/core/src/components/popover/popover.tsx
+++ b/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);
  }
--- a/core/src/components/split-pane/split-pane.tsx
+++ b/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.
--- a/core/src/components/toolbar/toolbar.scss
+++ b/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;

--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@ -96,7 +96,6 @@ ion-toast-controller,
  opacity: 0;
 }

-
 // Ionic Safe Margins
 // --------------------------------------------------