docs(modal): reorganize Styling and add Sizing to Content section - #4689
brandyscarney wants to merge 8 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| :::note | ||
| ### Styling | ||
|
|
||
| If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. |
There was a problem hiding this comment.
The Style Placement section has been removed since v6 so I deleted this entire note: 997fe9e
| <SheetScrollingContentExample /> | ||
|
|
||
| ## Styling | ||
| ## Theming |
There was a problem hiding this comment.
Reorganizing the sections into Theming -> Styling to match other components, see: https://ionicframework.com/docs/api/action-sheet#theming
I considered updating the playground directory structure but moving any would break the JP docs.
| <ThemeExample /> | ||
|
|
||
| ### Animations | ||
| ## Animations |
There was a problem hiding this comment.
I promoted Animations out of Theming because it doesn't actually change any styles.
There was a problem hiding this comment.
Updated older documentation so any future deployments would be accurate.
There was a problem hiding this comment.
Do you expect any of the archived versions to be unfrozen? I can understand v7 but v6 seems very unlikely.
There was a problem hiding this comment.
We had to unfreeze and fix the v6 deployment just last year so while I don't want to have to unfreeze it, I'd rather it have the correct documentation if we ever re-deploy it.
aeeb3cf to
8bc0246
Compare
8bc0246 to
80cb755
Compare
| [Controller modals](#controller-modals) are appended to the root of your application, outside of the component that presented them. Component-scoped styles will not reach these modals, so their styles must be applied globally, from a stylesheet that is not scoped to a component. | ||
|
|
||
| :::note | ||
| [Inline modals](#inline-modals-recommended) stay where they are declared in your template, so component-scoped styles do apply to them. |
There was a problem hiding this comment.
I can revert this if desired - but I don't know why inline modals were specified here as needing to be overridden globally. We can target ion-modal directly from the example component.
brandyscarney
changed the title
thetaPC
left a comment
thetaPC
left a comment
There was a problem hiding this comment.
LGTM, thank you! Minor things.
There was a problem hiding this comment.
Do you expect any of the archived versions to be unfrozen? I can understand v7 but v6 seems very unlikely.
…onic-team#31413) Issue number: resolves ionic-team#31149 --------- ## What is the current behavior? Setting `--height` to any of the following on an `ion-modal` containing an `ion-content` results in the `ion-content` collapsing to `0` height: `auto`, `fit-content`, `min-content`, or `max-content`. ## What is the new behavior? - Checks if modal `--height` is set to `auto`, `fit-content`, `min-content,` or `max-content` and styles the `ion-content`, `ion-nav` and `.ion-page` appropriately if so - Watches for changes to `--height` on `ion-modal` to dynamically add and remove the class that sizes the `ion-content` to its content - Updates modal `--max-height` to `100%` which allows the content to scroll instead of overflowing and being clipped - Adds a preview test for different scenarios where `ion-modal` has `--height` set - Adds e2e tests for the various `--height` scenarios - Updates `safe-area-utils` to account for the new content-sized modals - Adds spec tests for all new functions ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information **Dev build**: `9.0.1-dev.11788212611.154b1596` **Previews**: - [Modal: Content Height](https://ionic-framework-git-fw-7731-ionic1.vercel.app/src/components/modal/test/content-height) - [Modal: Safe Area](https://ionic-framework-git-fw-7731-ionic1.vercel.app/src/components/modal/test/safe-area) **Docs PR**: ionic-team/ionic-docs#4689 --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
3 participants
Description
Sizing to Contentsection detailing how to set--heightto a content size to have the modal resize to its rendered content & added a playground exampleOther information
Previews: