From 02c642ce8aec741a7f258bee9bf8bb470b0e5e5a Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Thu, 28 Mar 2024 09:57:56 -0400 Subject: [PATCH 1/6] docs(content,fab): fixed slot placement --- docs/api/content.md | 2 + docs/api/fab.md | 10 +++ .../angular/example_component_html.md | 20 +++++ .../angular/example_component_ts.md | 31 ++++++++ static/usage/v8/fab/before-content/demo.html | 66 ++++++++++++++++ static/usage/v8/fab/before-content/index.md | 24 ++++++ .../usage/v8/fab/before-content/javascript.md | 52 +++++++++++++ static/usage/v8/fab/before-content/react.md | 61 +++++++++++++++ static/usage/v8/fab/before-content/vue.md | 75 +++++++++++++++++++ 9 files changed, 341 insertions(+) create mode 100644 static/usage/v8/fab/before-content/angular/example_component_html.md create mode 100644 static/usage/v8/fab/before-content/angular/example_component_ts.md create mode 100644 static/usage/v8/fab/before-content/demo.html create mode 100644 static/usage/v8/fab/before-content/index.md create mode 100644 static/usage/v8/fab/before-content/javascript.md create mode 100644 static/usage/v8/fab/before-content/react.md create mode 100644 static/usage/v8/fab/before-content/vue.md diff --git a/docs/api/content.md b/docs/api/content.md index 832e22cd9d1..3614ef6767c 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -54,6 +54,8 @@ import Fullscreen from '@site/static/usage/v8/content/fullscreen/index.md'; To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties. +The `fixedSlotPlacement` prop is used to determine if items in the `fixed` slot are placed before or after other content in the DOM. When set to `beforeContent`, it ensures that when a user is navigating using the keyboard, they will reach items in the fixed slot before items in the main content. For example, this can be useful when the main content contains an infinitely-scrolling list, preventing a FAB or other fixed content from being reachable by pressing the tab key. + import Fixed from '@site/static/usage/v8/content/fixed/index.md'; diff --git a/docs/api/fab.md b/docs/api/fab.md index 3e665ad8159..e22838bbff7 100644 --- a/docs/api/fab.md +++ b/docs/api/fab.md @@ -67,6 +67,16 @@ import SafeArea from '@site/static/usage/v8/fab/safe-area/index.md'; +### Relative to Infinite List + +In scenarios where a view contains many interactive elements, such as an infinitely-scrolling list, it may be challenging for users to navigate to the Floating Action Button (FAB) if it is placed below all the items in the DOM. + +By setting the `fixedSlotPlacement` prop on the `ion-content` component to `beforeContent`, the FAB will be placed before the main content in the DOM. This ensures that when users navigate using the keyboard, they will reach the FAB before navigating to the other interactive elements, making it easier for them to access the FAB. + +import BeforeContent from '@site/static/usage/v8/fab/before-content/index.md'; + + + ## Button Sizing Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons. diff --git a/static/usage/v8/fab/before-content/angular/example_component_html.md b/static/usage/v8/fab/before-content/angular/example_component_html.md new file mode 100644 index 00000000000..fb80cb88ecb --- /dev/null +++ b/static/usage/v8/fab/before-content/angular/example_component_html.md @@ -0,0 +1,20 @@ +```html + + + + + + + + + + avatar + + {{ item }} + + + + + + +``` diff --git a/static/usage/v8/fab/before-content/angular/example_component_ts.md b/static/usage/v8/fab/before-content/angular/example_component_ts.md new file mode 100644 index 00000000000..7a4ee72cdd0 --- /dev/null +++ b/static/usage/v8/fab/before-content/angular/example_component_ts.md @@ -0,0 +1,31 @@ +```tsx +import { Component, OnInit } from '@angular/core'; + +import { InfiniteScrollCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent implements OnInit { + items = []; + + ngOnInit() { + this.generateItems(); + } + + private generateItems() { + const count = this.items.length + 1; + for (let i = 0; i < 50; i++) { + this.items.push(`Item ${count + i}`); + } + } + + onIonInfinite(ev) { + this.generateItems(); + setTimeout(() => { + (ev as InfiniteScrollCustomEvent).target.complete(); + }, 500); + } +} +``` diff --git a/static/usage/v8/fab/before-content/demo.html b/static/usage/v8/fab/before-content/demo.html new file mode 100644 index 00000000000..eb88c8bbe49 --- /dev/null +++ b/static/usage/v8/fab/before-content/demo.html @@ -0,0 +1,66 @@ + + + + + + Fab + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v8/fab/before-content/index.md b/static/usage/v8/fab/before-content/index.md new file mode 100644 index 00000000000..4b68c0f5836 --- /dev/null +++ b/static/usage/v8/fab/before-content/index.md @@ -0,0 +1,24 @@ +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/fab/before-content/javascript.md b/static/usage/v8/fab/before-content/javascript.md new file mode 100644 index 00000000000..46aed2e8444 --- /dev/null +++ b/static/usage/v8/fab/before-content/javascript.md @@ -0,0 +1,52 @@ +```html + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/before-content/react.md b/static/usage/v8/fab/before-content/react.md new file mode 100644 index 00000000000..8abe9fcfab4 --- /dev/null +++ b/static/usage/v8/fab/before-content/react.md @@ -0,0 +1,61 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { + IonAvatar, + IonContent, + IonFab, + IonFabButton, + IonIcon, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, +} from '@ionic/react'; + +function Example() { + const [items, setItems] = useState([]); + + const generateItems = () => { + const newItems = []; + for (let i = 0; i < 50; i++) { + newItems.push(`Item ${1 + items.length + i}`); + } + setItems([...items, ...newItems]); + }; + + useEffect(() => { + generateItems(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + + + + + + + {items.map((item, index) => ( + + + avatar + + {item} + + ))} + + { + generateItems(); + setTimeout(() => ev.target.complete(), 500); + }} + > + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/fab/before-content/vue.md b/static/usage/v8/fab/before-content/vue.md new file mode 100644 index 00000000000..3bcc9175771 --- /dev/null +++ b/static/usage/v8/fab/before-content/vue.md @@ -0,0 +1,75 @@ +```html + + + +``` From c9f714ae8f1c03738349b11cdc4614f97f181af2 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 1 Apr 2024 14:51:55 -0400 Subject: [PATCH 2/6] wording --- docs/api/content.md | 2 +- docs/api/fab.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/content.md b/docs/api/content.md index 3614ef6767c..9e46fdffa23 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -54,7 +54,7 @@ import Fullscreen from '@site/static/usage/v8/content/fullscreen/index.md'; To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties. -The `fixedSlotPlacement` prop is used to determine if items in the `fixed` slot are placed before or after other content in the DOM. When set to `beforeContent`, it ensures that when a user is navigating using the keyboard, they will reach items in the fixed slot before items in the main content. For example, this can be useful when the main content contains an infinitely-scrolling list, preventing a FAB or other fixed content from being reachable by pressing the tab key. +The `fixedSlotPlacement` property is used to determine if content in the `fixed` slot is placed before or after the main content in the DOM. When set to `beforeContent`, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a [FAB](./fab) or other fixed content from being reachable by pressing the tab key. import Fixed from '@site/static/usage/v8/content/fixed/index.md'; diff --git a/docs/api/fab.md b/docs/api/fab.md index e22838bbff7..08225ba3630 100644 --- a/docs/api/fab.md +++ b/docs/api/fab.md @@ -71,7 +71,7 @@ import SafeArea from '@site/static/usage/v8/fab/safe-area/index.md'; In scenarios where a view contains many interactive elements, such as an infinitely-scrolling list, it may be challenging for users to navigate to the Floating Action Button (FAB) if it is placed below all the items in the DOM. -By setting the `fixedSlotPlacement` prop on the `ion-content` component to `beforeContent`, the FAB will be placed before the main content in the DOM. This ensures that when users navigate using the keyboard, they will reach the FAB before navigating to the other interactive elements, making it easier for them to access the FAB. +By setting the `fixedSlotPlacement` property on [Content](./content) to `beforeContent`, the FAB will be placed before the main content in the DOM. This ensures that the FAB receives keyboard focus before other interactive elements receive focus, making it easier for users to access the FAB. import BeforeContent from '@site/static/usage/v8/fab/before-content/index.md'; From 1fc83031f6b2aa537f9871b7f9e186745a96c481 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 1 Apr 2024 14:56:19 -0400 Subject: [PATCH 3/6] increase size of demo --- static/usage/v8/fab/before-content/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/static/usage/v8/fab/before-content/index.md b/static/usage/v8/fab/before-content/index.md index 4b68c0f5836..79e37a29118 100644 --- a/static/usage/v8/fab/before-content/index.md +++ b/static/usage/v8/fab/before-content/index.md @@ -21,4 +21,5 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }} src="usage/v8/fab/before-content/demo.html" + size="medium" /> From f2cb3d8888fcf0621596981b58d9dff7c49168ee Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 1 Apr 2024 14:56:29 -0400 Subject: [PATCH 4/6] fix list appending for vanilla js --- static/usage/v8/fab/before-content/demo.html | 6 ++++-- static/usage/v8/fab/before-content/javascript.md | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/static/usage/v8/fab/before-content/demo.html b/static/usage/v8/fab/before-content/demo.html index eb88c8bbe49..aa636e21241 100644 --- a/static/usage/v8/fab/before-content/demo.html +++ b/static/usage/v8/fab/before-content/demo.html @@ -40,7 +40,7 @@ const total = count + 50; for (let i = count; i < total; i++) { const el = document.createElement('ion-item'); - el.setAttribute('button', ''); + el.button = true; const avatar = document.createElement('ion-avatar'); avatar.slot = 'start'; @@ -52,10 +52,12 @@ el.appendChild(avatar); const text = document.createElement('ion-label'); - text.textContent = `Item ${i}`; + text.innerText = `Item ${i}`; el.appendChild(text); + + list.appendChild(el); } } diff --git a/static/usage/v8/fab/before-content/javascript.md b/static/usage/v8/fab/before-content/javascript.md index 46aed2e8444..8d1cff3cd53 100644 --- a/static/usage/v8/fab/before-content/javascript.md +++ b/static/usage/v8/fab/before-content/javascript.md @@ -39,7 +39,7 @@ el.appendChild(avatar); const text = document.createElement('ion-label'); - text.textContent = `Item ${i}`; + text.innerText = `Item ${i}`; el.appendChild(text); From 499d2abfd3cac651325526f3897589062ec38072 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 1 Apr 2024 14:59:07 -0400 Subject: [PATCH 5/6] lint --- static/usage/v8/fab/before-content/demo.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/static/usage/v8/fab/before-content/demo.html b/static/usage/v8/fab/before-content/demo.html index aa636e21241..f3275acc759 100644 --- a/static/usage/v8/fab/before-content/demo.html +++ b/static/usage/v8/fab/before-content/demo.html @@ -56,8 +56,6 @@ el.appendChild(text); - - list.appendChild(el); } } From 1aa8c1ad365fe47a35eb292acdc23ecbc37dc1b3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 2 Apr 2024 11:41:29 -0400 Subject: [PATCH 6/6] chore: rename --- docs/api/content.md | 2 +- docs/api/fab.md | 2 +- .../v8/fab/before-content/angular/example_component_html.md | 2 +- static/usage/v8/fab/before-content/demo.html | 2 +- static/usage/v8/fab/before-content/javascript.md | 2 +- static/usage/v8/fab/before-content/react.md | 2 +- static/usage/v8/fab/before-content/vue.md | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/api/content.md b/docs/api/content.md index 9e46fdffa23..c8e9568530f 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -54,7 +54,7 @@ import Fullscreen from '@site/static/usage/v8/content/fullscreen/index.md'; To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties. -The `fixedSlotPlacement` property is used to determine if content in the `fixed` slot is placed before or after the main content in the DOM. When set to `beforeContent`, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a [FAB](./fab) or other fixed content from being reachable by pressing the tab key. +The `fixedSlotPlacement` property is used to determine if content in the `fixed` slot is placed before or after the main content in the DOM. When set to `before`, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a [FAB](./fab) or other fixed content from being reachable by pressing the tab key. import Fixed from '@site/static/usage/v8/content/fixed/index.md'; diff --git a/docs/api/fab.md b/docs/api/fab.md index 08225ba3630..d3f5e77ced6 100644 --- a/docs/api/fab.md +++ b/docs/api/fab.md @@ -71,7 +71,7 @@ import SafeArea from '@site/static/usage/v8/fab/safe-area/index.md'; In scenarios where a view contains many interactive elements, such as an infinitely-scrolling list, it may be challenging for users to navigate to the Floating Action Button (FAB) if it is placed below all the items in the DOM. -By setting the `fixedSlotPlacement` property on [Content](./content) to `beforeContent`, the FAB will be placed before the main content in the DOM. This ensures that the FAB receives keyboard focus before other interactive elements receive focus, making it easier for users to access the FAB. +By setting the `fixedSlotPlacement` property on [Content](./content) to `before`, the FAB will be placed before the main content in the DOM. This ensures that the FAB receives keyboard focus before other interactive elements receive focus, making it easier for users to access the FAB. import BeforeContent from '@site/static/usage/v8/fab/before-content/index.md'; diff --git a/static/usage/v8/fab/before-content/angular/example_component_html.md b/static/usage/v8/fab/before-content/angular/example_component_html.md index fb80cb88ecb..494d73158e6 100644 --- a/static/usage/v8/fab/before-content/angular/example_component_html.md +++ b/static/usage/v8/fab/before-content/angular/example_component_html.md @@ -1,5 +1,5 @@ ```html - + diff --git a/static/usage/v8/fab/before-content/demo.html b/static/usage/v8/fab/before-content/demo.html index f3275acc759..1c7e04ef66b 100644 --- a/static/usage/v8/fab/before-content/demo.html +++ b/static/usage/v8/fab/before-content/demo.html @@ -12,7 +12,7 @@ - + diff --git a/static/usage/v8/fab/before-content/javascript.md b/static/usage/v8/fab/before-content/javascript.md index 8d1cff3cd53..dd3581091eb 100644 --- a/static/usage/v8/fab/before-content/javascript.md +++ b/static/usage/v8/fab/before-content/javascript.md @@ -1,5 +1,5 @@ ```html - + diff --git a/static/usage/v8/fab/before-content/react.md b/static/usage/v8/fab/before-content/react.md index 8abe9fcfab4..b3eef14cc40 100644 --- a/static/usage/v8/fab/before-content/react.md +++ b/static/usage/v8/fab/before-content/react.md @@ -30,7 +30,7 @@ function Example() { }, []); return ( - + diff --git a/static/usage/v8/fab/before-content/vue.md b/static/usage/v8/fab/before-content/vue.md index 3bcc9175771..f8ff0c5ae4f 100644 --- a/static/usage/v8/fab/before-content/vue.md +++ b/static/usage/v8/fab/before-content/vue.md @@ -1,6 +1,6 @@ ```html