From fe53fcf69298565021b4fdc1d7327dade0177b75 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 3 Mar 2025 13:51:25 -0800 Subject: [PATCH 1/3] feat(modal): add expandToScroll playgrounds --- docs/api/modal.md | 8 + .../angular/example_component_html.md | 165 ++++++++++++++++ .../angular/example_component_ts.md | 36 ++++ .../v8/modal/sheet/expand-to-scroll/demo.html | 179 +++++++++++++++++ .../v8/modal/sheet/expand-to-scroll/index.md | 26 +++ .../sheet/expand-to-scroll/javascript.md | 140 +++++++++++++ .../v8/modal/sheet/expand-to-scroll/react.md | 185 ++++++++++++++++++ .../v8/modal/sheet/expand-to-scroll/vue.md | 181 +++++++++++++++++ 8 files changed, 920 insertions(+) create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_html.md create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/demo.html create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/index.md create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/javascript.md create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/react.md create mode 100644 static/usage/v8/modal/sheet/expand-to-scroll/vue.md diff --git a/docs/api/modal.md b/docs/api/modal.md index d8fb298ded3..1249e2a813b 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -157,6 +157,14 @@ import SheetHandleBehaviorExample from '@site/static/usage/v8/modal/sheet/handle +### Scrolling content at all breakpoints + +Sheet modals can be configured to allow scrolling content at all breakpoints, making them ideal for displaying content larger than the viewport. By setting the `expandToScroll` property to `false`, the content remains scrollable at every breakpoint. Otherwise, by default, scrolling is only enabled when the sheet modal is fully expanded. + +import SheetScrollingContentExample from '@site/static/usage/v8/modal/sheet/expand-to-scroll/index.md'; + + + ## Styling Modals are presented at the root of your application so they overlay your entire app. This behavior applies to both inline modals and modals presented from a controller. As a result, custom modal styles can not be scoped to a particular component as they will not apply to the modal. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient. diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_html.md b/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_html.md new file mode 100644 index 00000000000..5357e9e82ef --- /dev/null +++ b/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_html.md @@ -0,0 +1,165 @@ +```html + + + App + + + + Open Sheet Modal + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Jack Smith

+

Product Designer

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Claire Smith

+

Graphic Designer

+ + + + + + + +

Kim Smith

+

Software Engineer

+ + + + + + + +

Alex Smith

+

Software Engineer

+ + + + + + + +

Eric Smith

+

Product Manager

+ + + + + + + +

Grace Smith

+

Product Manager

+ + + + + + + +

Henry Smith

+

Product Owner

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + +

Oliver Smith

+

COO

+ + + + + + + +

Emma Smith

+

CTO

+ + + + + + + +``` diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_ts.md b/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_ts.md new file mode 100644 index 00000000000..c41fa70b4e3 --- /dev/null +++ b/static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_ts.md @@ -0,0 +1,36 @@ +```ts +import { Component } from '@angular/core'; +import { + IonAvatar, + IonButton, + IonContent, + IonHeader, + IonImg, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonButton, + IonContent, + IonHeader, + IonImg, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/demo.html b/static/usage/v8/modal/sheet/expand-to-scroll/demo.html new file mode 100644 index 00000000000..79516adaef7 --- /dev/null +++ b/static/usage/v8/modal/sheet/expand-to-scroll/demo.html @@ -0,0 +1,179 @@ + + + + + + Modal | Sheet + + + + + + + + + + + App + + + + Open Sheet Modal + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Jack Smith

+

Product Designer

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Claire Smith

+

Graphic Designer

+ + + + + + + +

Kim Smith

+

Software Engineer

+ + + + + + + +

Alex Smith

+

Software Engineer

+ + + + + + + +

Eric Smith

+

Product Manager

+ + + + + + + +

Grace Smith

+

Product Manager

+ + + + + + + +

Henry Smith

+

Product Owner

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + +

Oliver Smith

+

COO

+ + + + + + + +

Emma Smith

+

CTO

+ + + + + + + + + + + diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/index.md b/static/usage/v8/modal/sheet/expand-to-scroll/index.md new file mode 100644 index 00000000000..f656ead1a57 --- /dev/null +++ b/static/usage/v8/modal/sheet/expand-to-scroll/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/javascript.md b/static/usage/v8/modal/sheet/expand-to-scroll/javascript.md new file mode 100644 index 00000000000..b4f04b5a634 --- /dev/null +++ b/static/usage/v8/modal/sheet/expand-to-scroll/javascript.md @@ -0,0 +1,140 @@ +```html + + + App + + + + Open Sheet Modal + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Jack Smith

+

Product Designer

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Claire Smith

+

Graphic Designer

+ + + + + + + +

Kim Smith

+

Software Engineer

+ + + + + + + +

Alex Smith

+

Software Engineer

+ + + + + + + +

Eric Smith

+

Product Manager

+ + + + + + + +

Grace Smith

+

Product Manager

+ + + + + + + +

Henry Smith

+

Product Owner

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + +

Oliver Smith

+

COO

+ + + + + + + +

Emma Smith

+

CTO

+ + + + + + + + +``` diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/react.md b/static/usage/v8/modal/sheet/expand-to-scroll/react.md new file mode 100644 index 00000000000..e6afd40b516 --- /dev/null +++ b/static/usage/v8/modal/sheet/expand-to-scroll/react.md @@ -0,0 +1,185 @@ +```tsx +import React from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, + IonImg, +} from '@ionic/react'; + +function Example() { + return ( + + + + App + + + + + Open Sheet Modal + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Jack Smith

+

Product Designer

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Claire Smith

+

Graphic Designer

+ + + + + + + +

Kim Smith

+

Software Engineer

+ + + + + + + +

Alex Smith

+

Software Engineer

+ + + + + + + +

Eric Smith

+

Product Manager

+ + + + + + + +

Grace Smith

+

Product Manager

+ + + + + + + +

Henry Smith

+

Product Owner

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + +

Oliver Smith

+

COO

+ + + + + + + +

Emma Smith

+

CTO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/vue.md b/static/usage/v8/modal/sheet/expand-to-scroll/vue.md new file mode 100644 index 00000000000..57526a20fed --- /dev/null +++ b/static/usage/v8/modal/sheet/expand-to-scroll/vue.md @@ -0,0 +1,181 @@ +```html + + + +``` From fa783dd741f78957b201b2868ce768ed2b99ae15 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 6 Mar 2025 11:09:07 -0800 Subject: [PATCH 2/3] chore(modal): use dev build --- static/code/stackblitz/v8/angular/package.json | 4 ++-- static/code/stackblitz/v8/html/package.json | 2 +- static/code/stackblitz/v8/react/package.json | 4 ++-- static/code/stackblitz/v8/vue/package.json | 4 ++-- static/usage/v8/modal/sheet/expand-to-scroll/demo.html | 10 ++++++++-- 5 files changed, 15 insertions(+), 9 deletions(-) diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index b0c78d7f466..3ce7af61697 100644 --- a/static/code/stackblitz/v8/angular/package.json +++ b/static/code/stackblitz/v8/angular/package.json @@ -15,8 +15,8 @@ "@angular/platform-browser": "^19.0.0", "@angular/platform-browser-dynamic": "^19.0.0", "@angular/router": "^19.0.0", - "@ionic/angular": "^8.0.0", - "@ionic/core": "^8.0.0", + "@ionic/angular": "8.4.4-dev.11741222721.14322935", + "@ionic/core": "8.4.4-dev.11741222721.14322935", "ionicons": "7.4.0", "rxjs": "^7.8.1", "tslib": "^2.5.0", diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json index 422f9a91f55..acd15fb96a2 100644 --- a/static/code/stackblitz/v8/html/package.json +++ b/static/code/stackblitz/v8/html/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "@ionic/core": "8.4.1", + "@ionic/core": "8.4.4-dev.11741222721.14322935", "ionicons": "7.4.0" } } diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json index c0803683c63..eb5287ea9c8 100644 --- a/static/code/stackblitz/v8/react/package.json +++ b/static/code/stackblitz/v8/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "8.4.1", - "@ionic/react-router": "8.4.1", + "@ionic/react": "8.4.4-dev.11741222721.14322935", + "@ionic/react-router": "8.4.4-dev.11741222721.14322935", "@types/node": "^22.0.0", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json index b9394bad9da..a881d5d8926 100644 --- a/static/code/stackblitz/v8/vue/package.json +++ b/static/code/stackblitz/v8/vue/package.json @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "8.4.1", - "@ionic/vue-router": "8.4.1", + "@ionic/vue": "8.4.4-dev.11741222721.14322935", + "@ionic/vue-router": "8.4.4-dev.11741222721.14322935", "vue": "^3.2.25", "vue-router": "4.5.0" }, diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/demo.html b/static/usage/v8/modal/sheet/expand-to-scroll/demo.html index 79516adaef7..e029c0a008e 100644 --- a/static/usage/v8/modal/sheet/expand-to-scroll/demo.html +++ b/static/usage/v8/modal/sheet/expand-to-scroll/demo.html @@ -6,8 +6,14 @@ Modal | Sheet - - + + From 850d45d02324cf3ea672447e49edff3124e34333 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 11 Mar 2025 11:53:38 -0700 Subject: [PATCH 3/3] chore(modal): remove dev build --- static/code/stackblitz/v8/angular/package.json | 4 ++-- static/code/stackblitz/v8/html/package.json | 2 +- static/code/stackblitz/v8/react/package.json | 4 ++-- static/code/stackblitz/v8/vue/package.json | 4 ++-- static/usage/v8/modal/sheet/expand-to-scroll/demo.html | 10 ++-------- 5 files changed, 9 insertions(+), 15 deletions(-) diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index 3ce7af61697..b0c78d7f466 100644 --- a/static/code/stackblitz/v8/angular/package.json +++ b/static/code/stackblitz/v8/angular/package.json @@ -15,8 +15,8 @@ "@angular/platform-browser": "^19.0.0", "@angular/platform-browser-dynamic": "^19.0.0", "@angular/router": "^19.0.0", - "@ionic/angular": "8.4.4-dev.11741222721.14322935", - "@ionic/core": "8.4.4-dev.11741222721.14322935", + "@ionic/angular": "^8.0.0", + "@ionic/core": "^8.0.0", "ionicons": "7.4.0", "rxjs": "^7.8.1", "tslib": "^2.5.0", diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json index acd15fb96a2..422f9a91f55 100644 --- a/static/code/stackblitz/v8/html/package.json +++ b/static/code/stackblitz/v8/html/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "@ionic/core": "8.4.4-dev.11741222721.14322935", + "@ionic/core": "8.4.1", "ionicons": "7.4.0" } } diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json index eb5287ea9c8..c0803683c63 100644 --- a/static/code/stackblitz/v8/react/package.json +++ b/static/code/stackblitz/v8/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "8.4.4-dev.11741222721.14322935", - "@ionic/react-router": "8.4.4-dev.11741222721.14322935", + "@ionic/react": "8.4.1", + "@ionic/react-router": "8.4.1", "@types/node": "^22.0.0", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json index a881d5d8926..b9394bad9da 100644 --- a/static/code/stackblitz/v8/vue/package.json +++ b/static/code/stackblitz/v8/vue/package.json @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "8.4.4-dev.11741222721.14322935", - "@ionic/vue-router": "8.4.4-dev.11741222721.14322935", + "@ionic/vue": "8.4.1", + "@ionic/vue-router": "8.4.1", "vue": "^3.2.25", "vue-router": "4.5.0" }, diff --git a/static/usage/v8/modal/sheet/expand-to-scroll/demo.html b/static/usage/v8/modal/sheet/expand-to-scroll/demo.html index e029c0a008e..79516adaef7 100644 --- a/static/usage/v8/modal/sheet/expand-to-scroll/demo.html +++ b/static/usage/v8/modal/sheet/expand-to-scroll/demo.html @@ -6,14 +6,8 @@ Modal | Sheet - - + +