From 90bb6081787f7ff353b467e05d6babe99aa7d1fd Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 11 Apr 2023 11:38:54 -0700 Subject: [PATCH 1/3] docs(EN-3565): playground for auto height sheets --- docs/api/modal.md | 6 +++ .../angular/example_component_css.md | 13 +++++ .../angular/example_component_html.md | 16 ++++++ .../v7/modal/sheet/auto-height/demo.html | 51 ++++++++++++++++++ .../usage/v7/modal/sheet/auto-height/index.md | 25 +++++++++ .../v7/modal/sheet/auto-height/javascript.md | 35 ++++++++++++ .../usage/v7/modal/sheet/auto-height/react.md | 54 +++++++++++++++++++ .../usage/v7/modal/sheet/auto-height/vue.md | 53 ++++++++++++++++++ 8 files changed, 253 insertions(+) create mode 100644 static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md create mode 100644 static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md create mode 100644 static/usage/v7/modal/sheet/auto-height/demo.html create mode 100644 static/usage/v7/modal/sheet/auto-height/index.md create mode 100644 static/usage/v7/modal/sheet/auto-height/javascript.md create mode 100644 static/usage/v7/modal/sheet/auto-height/react.md create mode 100644 static/usage/v7/modal/sheet/auto-height/vue.md diff --git a/docs/api/modal.md b/docs/api/modal.md index cc63089bedf..847b49b460e 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -125,6 +125,12 @@ import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/bac +#### Auto Height Sheet + +import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.md'; + + + #### Handle Behavior Sheet modals can optionally render a handle indicator used for dragging the sheet between breakpoints. The `handleBehavior` property can be used to configure the behavior of when the handle is activated by the user. diff --git a/static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md b/static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md new file mode 100644 index 00000000000..88d0e5c0594 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +.block { + width: 100%; + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +ion-modal { + --height: auto; +} +``` diff --git a/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md b/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md new file mode 100644 index 00000000000..f41716a9a53 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + + App + + + + Open Sheet Modal + + + +
Block of Content
+ + + +``` diff --git a/static/usage/v7/modal/sheet/auto-height/demo.html b/static/usage/v7/modal/sheet/auto-height/demo.html new file mode 100644 index 00000000000..3f91877e520 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/demo.html @@ -0,0 +1,51 @@ + + + + + + + Modal | Sheet + + + + + + + + + + + + App + + + + Open Sheet Modal + + +
Block of Content
+ + + + + + + + \ No newline at end of file diff --git a/static/usage/v7/modal/sheet/auto-height/index.md b/static/usage/v7/modal/sheet/auto-height/index.md new file mode 100644 index 00000000000..3c16f31243c --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v7/modal/sheet/auto-height/javascript.md b/static/usage/v7/modal/sheet/auto-height/javascript.md new file mode 100644 index 00000000000..ec474f8a6b7 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/javascript.md @@ -0,0 +1,35 @@ +```html + + + + + App + + + + Open Sheet Modal + + +
Block of Content
+ + + + +``` diff --git a/static/usage/v7/modal/sheet/auto-height/react.md b/static/usage/v7/modal/sheet/auto-height/react.md new file mode 100644 index 00000000000..13763dc16e4 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/react.md @@ -0,0 +1,54 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + + return ( + + + + App + + + + + Open Sheet Modal + + +
+ Block of Content +
+ + + + ); +} + +export default Example; +``` diff --git a/static/usage/v7/modal/sheet/auto-height/vue.md b/static/usage/v7/modal/sheet/auto-height/vue.md new file mode 100644 index 00000000000..f15f16ed7e9 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/vue.md @@ -0,0 +1,53 @@ +```html + + + + + +``` From 8c3241148c7211bc47e63250b92bdb059facd3b5 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 11 Apr 2023 11:42:58 -0700 Subject: [PATCH 2/3] fix(modal): missing new line --- static/usage/v7/modal/sheet/auto-height/demo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/usage/v7/modal/sheet/auto-height/demo.html b/static/usage/v7/modal/sheet/auto-height/demo.html index 3f91877e520..ae6eb5ff6d7 100644 --- a/static/usage/v7/modal/sheet/auto-height/demo.html +++ b/static/usage/v7/modal/sheet/auto-height/demo.html @@ -48,4 +48,4 @@ - \ No newline at end of file + From 979659d522d050e7b280fc73e241a7847fc19302 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 12 Apr 2023 11:25:47 -0700 Subject: [PATCH 3/3] docs(modal): file structure --- .../angular/example_component_html.md | 2 +- .../usage/v7/modal/sheet/auto-height/index.md | 12 ++++++++++-- .../modal/sheet/auto-height/react/main_css.md | 13 +++++++++++++ .../auto-height/{react.md => react/main_tsx.md} | 17 +++-------------- static/usage/v7/modal/sheet/auto-height/vue.md | 2 +- 5 files changed, 28 insertions(+), 18 deletions(-) create mode 100644 static/usage/v7/modal/sheet/auto-height/react/main_css.md rename static/usage/v7/modal/sheet/auto-height/{react.md => react/main_tsx.md} (68%) diff --git a/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md b/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md index f41716a9a53..3280a3f9e85 100644 --- a/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md +++ b/static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md @@ -7,7 +7,7 @@ Open Sheet Modal - +
Block of Content
 diff --git a/static/usage/v7/modal/sheet/auto-height/index.md b/static/usage/v7/modal/sheet/auto-height/index.md index 3c16f31243c..35cec0645c0 100644 --- a/static/usage/v7/modal/sheet/auto-height/index.md +++ b/static/usage/v7/modal/sheet/auto-height/index.md @@ -2,7 +2,10 @@ import Playground from '@site/src/components/global/Playground'; import javascript from './javascript.md'; import vue from './vue.md'; -import react from './react.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + import angular_example_component_html from './angular/example_component_html.md'; import angular_example_component_css from './angular/example_component_css.md'; @@ -10,8 +13,13 @@ import angular_example_component_css from './angular/example_component_css.md'; version="7" code={{ javascript, - react, vue, + react: { + files: { + 'src/main.tsx': react_main_tsx, + 'src/main.css': react_main_css, + }, + }, angular: { files: { 'src/app/example.component.html': angular_example_component_html, diff --git a/static/usage/v7/modal/sheet/auto-height/react/main_css.md b/static/usage/v7/modal/sheet/auto-height/react/main_css.md new file mode 100644 index 00000000000..9731921d1c3 --- /dev/null +++ b/static/usage/v7/modal/sheet/auto-height/react/main_css.md @@ -0,0 +1,13 @@ +```css +.block { + width: 100%; + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +ion-modal { + --height: auto; +} +``` \ No newline at end of file diff --git a/static/usage/v7/modal/sheet/auto-height/react.md b/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md similarity index 68% rename from static/usage/v7/modal/sheet/auto-height/react.md rename to static/usage/v7/modal/sheet/auto-height/react/main_tsx.md index 13763dc16e4..c368d65d6c5 100644 --- a/static/usage/v7/modal/sheet/auto-height/react.md +++ b/static/usage/v7/modal/sheet/auto-height/react/main_tsx.md @@ -10,6 +10,8 @@ import { IonPage, } from '@ionic/react'; +import './main.css'; + function Example() { const modal = useRef(null); @@ -29,21 +31,8 @@ function Example() { trigger="open-modal" initialBreakpoint={1} breakpoints={[0, 1]} - style={{ - '--height': 'auto', - }} > -
- Block of Content -
+
Block of Content
diff --git a/static/usage/v7/modal/sheet/auto-height/vue.md b/static/usage/v7/modal/sheet/auto-height/vue.md index f15f16ed7e9..23b3c38c147 100644 --- a/static/usage/v7/modal/sheet/auto-height/vue.md +++ b/static/usage/v7/modal/sheet/auto-height/vue.md @@ -22,7 +22,7 @@ Open Sheet Modal - +
Block of Content