javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(action-sheet): container animates in correctly (#26347)

Browse Source 
resolves #25368
This commit is contained in:
Liam DeBeasi
2022-11-23 12:12:48 -05:00
committed by GitHub
parent e6f2a1f6a1
commit 1e855e7699
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
BREAKING.md
View File

@ -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) - [Browser and Platform Support](#version-7x-browser-platform-support)
- [Components](#version-7x-components) - [Components](#version-7x-components)
- [Accordion Group](#version-7x-accordion-group) - [Accordion Group](#version-7x-accordion-group)
- [Action Sheet](#version-7x-action-sheet)
- [Card Header](#version-7x-card-header) - [Card Header](#version-7x-card-header)
- [Checkbox](#version-7x-checkbox) - [Checkbox](#version-7x-checkbox)
- [Datetime](#version-7x-datetime) - [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. - 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.
<h4 id="version-7x-action-sheet">Action Sheet</h4>
- Action Sheet is updated to align with the design specification.
**Design tokens**
| Token | Previous Value | New Value |
| ---------- | -------------- | --------- |
| `--height` | `100%` | `auto` |
<h4 id="version-7x-card-header">Card Header</h4> <h4 id="version-7x-card-header">Card Header</h4>
- 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. - 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.

4
core/src/components/action-sheet/action-sheet.scss
View File

@ -43,7 +43,7 @@
--width: #{$action-sheet-width}; --width: #{$action-sheet-width};
--max-width: #{$action-sheet-max-width}; --max-width: #{$action-sheet-max-width};
--min-height: auto; --min-height: auto;
--height: 100%; --height: auto;
--max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom))); --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
@include font-smoothing(); @include font-smoothing();
@ -126,7 +126,7 @@
justify-content: flex-end; justify-content: flex-end;
height: 100%; height: 100%;
max-height: 100%; max-height: 100vh;
} }
.action-sheet-group { .action-sheet-group {