diff --git a/BREAKING.md b/BREAKING.md index 0ca3742944..f769be99ce 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -15,6 +15,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Browser and Platform Support](#version-7x-browser-platform-support) - [Components](#version-7x-components) - [Accordion Group](#version-7x-accordion-group) + - [Action Sheet](#version-7x-action-sheet) - [Card Header](#version-7x-card-header) - [Checkbox](#version-7x-checkbox) - [Datetime](#version-7x-datetime) @@ -74,6 +75,16 @@ This section details the desktop browser, JavaScript framework, and mobile platf - Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly. +

Action Sheet

+ +- Action Sheet is updated to align with the design specification. + +**Design tokens** + +| Token | Previous Value | New Value | +| ---------- | -------------- | --------- | +| `--height` | `100%` | `auto` | +

Card Header

- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title. diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index 1b6226e05a..41dd720bec 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -43,7 +43,7 @@ --width: #{$action-sheet-width}; --max-width: #{$action-sheet-max-width}; --min-height: auto; - --height: 100%; + --height: auto; --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom))); @include font-smoothing(); @@ -126,7 +126,7 @@ justify-content: flex-end; height: 100%; - max-height: 100%; + max-height: 100vh; } .action-sheet-group {