fix(menu): remove app dir from safe area padding (#28123)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The `--ion-safe-area-left` and `--ion-safe-area-right` variables in
`ion-menu` are being set as if they use the app's direction. It's been
determined that safe area is not logical and uses the device's
direction. The current implementation is adding padding in the wrong
sides for `ion-toolbar` and `ion-content` within a `ion-menu`.

Additionally, `ion-menu` does not use the entire screen so the safe area
only needs to be applied to the side that is touching the device screen.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Set the `--ion-safe-area-left` and `--ion-safe-area-right` variables
to the correct values based on the device's direction.
- Padding is only added to the side that is not in the safe area.
- `ion-toolbar` is adding `--ion-safe-area-left` and
`--ion-safe-area-right` based on the device's direction.
- `ion-toolbar` can now inherit the correct values from
`--ion-safe-area-left` and `--ion-safe-area-right`.
- `ion-content` can now inherit the correct values from
`--ion-safe-area-left` and `--ion-safe-area-right`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: 7.3.4-dev.11694015543.18bc484f
This commit is contained in:
Maria Hutt
2023-09-07 11:33:20 -07:00
committed by GitHub
parent 4b4ad75bf0
commit e0542a7867
2 changed files with 63 additions and 1 deletions

View File

@ -28,7 +28,6 @@
--opacity-scale: 1;
@include font-smoothing();
@include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
display: block;
@ -36,6 +35,11 @@
width: 100%;
// stylelint-disable-next-line property-disallowed-list
padding-right: var(--ion-safe-area-right);
// stylelint-disable-next-line property-disallowed-list
padding-left: var(--ion-safe-area-left);
color: var(--color);
font-family: $font-family-base;