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` |
+
- 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 {