From 0a61cdeeadc8a28019104a02281cdeabc12235de Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Wed, 27 Mar 2024 14:59:29 -0400 Subject: [PATCH 1/6] feat(content): add fixedSlotPlacement prop --- core/src/components.d.ts | 8 ++++++++ core/src/components/content/content.tsx | 13 +++++++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 4b85721b497..4caf8186f1b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -762,6 +762,10 @@ export namespace Components { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; + /** + * To place a FAB or other fixed content before the main page content in the DOM, set this property to `beforeContent`. + */ + "fixedSlotPlacement": 'afterContent' | 'beforeContent'; /** * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting. */ @@ -5478,6 +5482,10 @@ declare namespace LocalJSX { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; + /** + * To place a FAB or other fixed content before the main page content in the DOM, set this property to `beforeContent`. + */ + "fixedSlotPlacement"?: 'afterContent' | 'beforeContent'; /** * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting. */ diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index d2a4193b6e5..952ed443cd0 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -75,6 +75,12 @@ export class Content implements ComponentInterface { */ @Prop() fullscreen = false; + /** + * To place a FAB or other fixed content before the main page content in the + * DOM, set this property to `beforeContent`. + */ + @Prop() fixedSlotPlacement: 'afterContent' | 'beforeContent' = 'afterContent'; + /** * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. * If the content exceeds the bounds of ionContent, nothing will change. @@ -423,7 +429,7 @@ export class Content implements ComponentInterface { } render() { - const { isMainContent, scrollX, scrollY, el } = this; + const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this; const rtl = isRTL(el) ? 'rtl' : 'ltr'; const mode = getIonMode(this); const forceOverscroll = this.shouldForceOverscroll(); @@ -446,6 +452,9 @@ export class Content implements ComponentInterface { }} >
(this.backgroundContentEl = el)} id="background-content" part="background">
+ + {fixedSlotPlacement === 'beforeContent' ? : null} +
) : null} - + {fixedSlotPlacement !== 'beforeContent' ? : null} ); } From 4c4f99728c9a2e8919da9b4539b62365260ae068 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Thu, 28 Mar 2024 08:48:07 -0400 Subject: [PATCH 2/6] build --- core/api.txt | 1 + packages/angular/src/directives/proxies.ts | 4 ++-- packages/angular/standalone/src/directives/proxies.ts | 4 ++-- packages/vue/src/proxies.ts | 1 + 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/core/api.txt b/core/api.txt index 4b6ca421436..e4e9b4717f9 100644 --- a/core/api.txt +++ b/core/api.txt @@ -361,6 +361,7 @@ ion-col,css-prop,--ion-grid-columns ion-content,shadow ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true +ion-content,prop,fixedSlotPlacement,"afterContent" | "beforeContent",'afterContent',false,false ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false ion-content,prop,fullscreen,boolean,false,false,false ion-content,prop,scrollEvents,boolean,false,false,false diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 8253b0876f2..a339b729b45 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -592,7 +592,7 @@ export declare interface IonCol extends Components.IonCol {} @ProxyCmp({ - inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], + inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint'] }) @Component({ @@ -600,7 +600,7 @@ export declare interface IonCol extends Components.IonCol {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], + inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], }) export class IonContent { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index c319aa55271..ce9e8ed625d 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -659,7 +659,7 @@ export declare interface IonCol extends Components.IonCol {} @ProxyCmp({ defineCustomElementFn: defineIonContent, - inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], + inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], methods: ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint'] }) @Component({ @@ -667,7 +667,7 @@ export declare interface IonCol extends Components.IonCol {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], + inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], standalone: true }) export class IonContent { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 30d640d44f2..dd08c7c973a 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -262,6 +262,7 @@ export const IonCol = /*@__PURE__*/ defineContainer('ion-col', defin export const IonContent = /*@__PURE__*/ defineContainer('ion-content', defineIonContent, [ 'color', 'fullscreen', + 'fixedSlotPlacement', 'forceOverscroll', 'scrollX', 'scrollY', From b5fd75b52332a27dc3100c03368d486e430f4cbc Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 1 Apr 2024 14:16:17 -0400 Subject: [PATCH 3/6] test(content): add tests --- .../components/content/test/content.spec.ts | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 core/src/components/content/test/content.spec.ts diff --git a/core/src/components/content/test/content.spec.ts b/core/src/components/content/test/content.spec.ts new file mode 100644 index 00000000000..da6626a4040 --- /dev/null +++ b/core/src/components/content/test/content.spec.ts @@ -0,0 +1,31 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { Content } from '../content'; + +describe('content: fixed slot placement', () => { + it('should should fixed slot after content', async () => { + const page = await newSpecPage({ + components: [Content], + html: '', + }); + + const content = page.body.querySelector('ion-content')!; + const fixedSlot = content.shadowRoot!.querySelector('slot[name="fixed"]')!; + const scrollEl = content.shadowRoot!.querySelector('[part="scroll"]')!; + + expect(fixedSlot.nextElementSibling).not.toBe(scrollEl); + }); + + it('should should fixed slot before content', async () => { + const page = await newSpecPage({ + components: [Content], + html: ``, + }); + + const content = page.body.querySelector('ion-content')!; + const fixedSlot = content.shadowRoot!.querySelector('slot[name="fixed"]')!; + const scrollEl = content.shadowRoot!.querySelector('[part="scroll"]')!; + + expect(fixedSlot.nextElementSibling).toBe(scrollEl); + }); +}); From 8f0adf46b8fcb2954902b5173c47ee22fdc9e900 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 1 Apr 2024 14:19:27 -0400 Subject: [PATCH 4/6] chore: add more comments --- core/src/components.d.ts | 4 ++-- core/src/components/content/content.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 4caf8186f1b..90752f23f2e 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -763,7 +763,7 @@ export namespace Components { */ "color"?: Color; /** - * To place a FAB or other fixed content before the main page content in the DOM, set this property to `beforeContent`. + * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'beforeContent'`. */ "fixedSlotPlacement": 'afterContent' | 'beforeContent'; /** @@ -5483,7 +5483,7 @@ declare namespace LocalJSX { */ "color"?: Color; /** - * To place a FAB or other fixed content before the main page content in the DOM, set this property to `beforeContent`. + * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'beforeContent'`. */ "fixedSlotPlacement"?: 'afterContent' | 'beforeContent'; /** diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 952ed443cd0..3af18a64d3c 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -76,8 +76,11 @@ export class Content implements ComponentInterface { @Prop() fullscreen = false; /** - * To place a FAB or other fixed content before the main page content in the - * DOM, set this property to `beforeContent`. + * Controls where the fixed content is placed relative to the main content + * in the DOM. This can be used to control the order in which fixed elements + * receive keyboard focus. + * For example, if a FAB in the fixed slot should receive keyboard focus before + * the main page content, set this property to `'beforeContent'`. */ @Prop() fixedSlotPlacement: 'afterContent' | 'beforeContent' = 'afterContent'; From 6ab5a4e4ccfab3358bf67a9b284c9516ada207b3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 1 Apr 2024 14:31:32 -0400 Subject: [PATCH 5/6] clean up --- core/src/components/content/content.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 3af18a64d3c..2f797a2c66e 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -479,7 +479,7 @@ export class Content implements ComponentInterface {
) : null} - {fixedSlotPlacement !== 'beforeContent' ? : null} + {fixedSlotPlacement === 'afterContent' ? : null} ); } From dd97c664f8e330ec1934b4b93ea98ce4a5666610 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 2 Apr 2024 11:40:18 -0400 Subject: [PATCH 6/6] refactor: rename to before and after --- core/api.txt | 2 +- core/src/components.d.ts | 8 ++++---- core/src/components/content/content.tsx | 8 ++++---- core/src/components/content/test/content.spec.ts | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/core/api.txt b/core/api.txt index cf5295ba2c4..9e98c453fa8 100644 --- a/core/api.txt +++ b/core/api.txt @@ -361,7 +361,7 @@ ion-col,css-prop,--ion-grid-columns ion-content,shadow ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true -ion-content,prop,fixedSlotPlacement,"afterContent" | "beforeContent",'afterContent',false,false +ion-content,prop,fixedSlotPlacement,"after" | "before",'after',false,false ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false ion-content,prop,fullscreen,boolean,false,false,false ion-content,prop,scrollEvents,boolean,false,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 78b8900003f..73af9bcf998 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -763,9 +763,9 @@ export namespace Components { */ "color"?: Color; /** - * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'beforeContent'`. + * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`. */ - "fixedSlotPlacement": 'afterContent' | 'beforeContent'; + "fixedSlotPlacement": 'after' | 'before'; /** * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting. */ @@ -5487,9 +5487,9 @@ declare namespace LocalJSX { */ "color"?: Color; /** - * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'beforeContent'`. + * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`. */ - "fixedSlotPlacement"?: 'afterContent' | 'beforeContent'; + "fixedSlotPlacement"?: 'after' | 'before'; /** * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting. */ diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 2f797a2c66e..9c9e1341140 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -80,9 +80,9 @@ export class Content implements ComponentInterface { * in the DOM. This can be used to control the order in which fixed elements * receive keyboard focus. * For example, if a FAB in the fixed slot should receive keyboard focus before - * the main page content, set this property to `'beforeContent'`. + * the main page content, set this property to `'before'`. */ - @Prop() fixedSlotPlacement: 'afterContent' | 'beforeContent' = 'afterContent'; + @Prop() fixedSlotPlacement: 'after' | 'before' = 'after'; /** * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. @@ -456,7 +456,7 @@ export class Content implements ComponentInterface { >
(this.backgroundContentEl = el)} id="background-content" part="background">
- {fixedSlotPlacement === 'beforeContent' ? : null} + {fixedSlotPlacement === 'before' ? : null}
) : null} - {fixedSlotPlacement === 'afterContent' ? : null} + {fixedSlotPlacement === 'after' ? : null} ); } diff --git a/core/src/components/content/test/content.spec.ts b/core/src/components/content/test/content.spec.ts index da6626a4040..4dcf7f3e0a6 100644 --- a/core/src/components/content/test/content.spec.ts +++ b/core/src/components/content/test/content.spec.ts @@ -19,7 +19,7 @@ describe('content: fixed slot placement', () => { it('should should fixed slot before content', async () => { const page = await newSpecPage({ components: [Content], - html: ``, + html: ``, }); const content = page.body.querySelector('ion-content')!;