From 4dffb10875717e675044cec3e60ebd4989435189 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Fri, 29 Mar 2024 13:39:14 -0400 Subject: [PATCH] chore(): create reusable test header --- core/api.txt | 5 +- core/src/components.d.ts | 15 ++ .../components/datetime/test/basic/index.html | 228 ++---------------- .../components/picker/test/basic/index.html | 6 +- core/src/utils/test/test-header.scss | 3 + core/src/utils/test/test-header.tsx | 81 +++++++ .../angular/src/directives/proxies-list.ts | 3 +- packages/angular/src/directives/proxies.ts | 22 ++ .../standalone/src/directives/proxies.ts | 25 ++ packages/react/src/components/proxies.ts | 2 + packages/vue/src/proxies.ts | 6 + 11 files changed, 184 insertions(+), 212 deletions(-) create mode 100644 core/src/utils/test/test-header.scss create mode 100644 core/src/utils/test/test-header.tsx diff --git a/core/api.txt b/core/api.txt index f3fdbbd60a..2f0e1ac158 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1677,4 +1677,7 @@ ion-toolbar,css-prop,--opacity ion-toolbar,css-prop,--padding-bottom ion-toolbar,css-prop,--padding-end ion-toolbar,css-prop,--padding-start -ion-toolbar,css-prop,--padding-top \ No newline at end of file +ion-toolbar,css-prop,--padding-top + +test-header,scoped +test-header,prop,testTitle,string | undefined,undefined,false,false \ No newline at end of file diff --git a/core/src/components.d.ts b/core/src/components.d.ts index eec75790d3..48d59cfbb6 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3760,6 +3760,9 @@ export namespace Components { */ "theme"?: "ios" | "md" | "ionic"; } + interface TestHeader { + "testTitle"?: string; + } } export interface IonAccordionGroupCustomEvent extends CustomEvent { detail: T; @@ -5137,6 +5140,12 @@ declare global { prototype: HTMLIonToolbarElement; new (): HTMLIonToolbarElement; }; + interface HTMLTestHeaderElement extends Components.TestHeader, HTMLStencilElement { + } + var HTMLTestHeaderElement: { + prototype: HTMLTestHeaderElement; + new (): HTMLTestHeaderElement; + }; interface HTMLElementTagNameMap { "ion-accordion": HTMLIonAccordionElement; "ion-accordion-group": HTMLIonAccordionGroupElement; @@ -5231,6 +5240,7 @@ declare global { "ion-toast": HTMLIonToastElement; "ion-toggle": HTMLIonToggleElement; "ion-toolbar": HTMLIonToolbarElement; + "test-header": HTMLTestHeaderElement; } } declare namespace LocalJSX { @@ -9074,6 +9084,9 @@ declare namespace LocalJSX { */ "theme"?: "ios" | "md" | "ionic"; } + interface TestHeader { + "testTitle"?: string; + } interface IntrinsicElements { "ion-accordion": IonAccordion; "ion-accordion-group": IonAccordionGroup; @@ -9168,6 +9181,7 @@ declare namespace LocalJSX { "ion-toast": IonToast; "ion-toggle": IonToggle; "ion-toolbar": IonToolbar; + "test-header": TestHeader; } } export { LocalJSX as JSX }; @@ -9267,6 +9281,7 @@ declare module "@stencil/core" { "ion-toast": LocalJSX.IonToast & JSXBase.HTMLAttributes; "ion-toggle": LocalJSX.IonToggle & JSXBase.HTMLAttributes; "ion-toolbar": LocalJSX.IonToolbar & JSXBase.HTMLAttributes; + "test-header": LocalJSX.TestHeader & JSXBase.HTMLAttributes; } } } diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html index b3afa76688..c963ce630a 100644 --- a/core/src/components/datetime/test/basic/index.html +++ b/core/src/components/datetime/test/basic/index.html @@ -31,10 +31,6 @@ } } - .options-popover { - --width: 300px; - } - ion-modal.ios, ion-popover.datetime-popover.ios { --width: 350px; @@ -49,206 +45,36 @@ ion-datetime { width: 350px; } - - body.dark { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66, 140, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80, 200, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106, 100, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47, 223, 117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0, 0, 0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255, 213, 52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255, 73, 97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244, 245, 248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0, 0, 0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152, 154, 162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0, 0, 0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34, 36, 40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255, 255, 255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body.dark { - --ion-background-color: #000000; - --ion-background-color-rgb: 0, 0, 0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios body.dark ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - --ion-item-background: var(--ion-color-step-150); - } - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body.dark { - --ion-background-color: #121212; - --ion-background-color-rgb: 18, 18, 18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255, 255, 255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } - - - Datetime - Basic - - Options - - - - - Dark Mode - - - iOS Mode - - - MD Mode - + +
+ + Show Default Title + - - Show Default Title - + + Show Default Buttons + - - Show Default Buttons - + + + - - - - - - - Primary - Secondary - Tertiary - Success - Warning - Danger - - - - - - + + + Primary + Secondary + Tertiary + Success + Warning + Danger + + +
+
@@ -333,14 +159,6 @@ }); }); - const darkModeCheckbox = document.querySelector('ion-checkbox'); - darkModeCheckbox.addEventListener('ionChange', (ev) => { - if (ev.detail.checked) { - document.body.classList.add('dark'); - } else { - document.body.classList.remove('dark'); - } - }); color.addEventListener('ionChange', (ev) => { datetime.color = ev.target.value; buttons.forEach((button) => { diff --git a/core/src/components/picker/test/basic/index.html b/core/src/components/picker/test/basic/index.html index cc8bfb9548..dc9a75d2b9 100644 --- a/core/src/components/picker/test/basic/index.html +++ b/core/src/components/picker/test/basic/index.html @@ -44,11 +44,7 @@ - - - Picker - Basic - - +
diff --git a/core/src/utils/test/test-header.scss b/core/src/utils/test/test-header.scss new file mode 100644 index 0000000000..8995db6067 --- /dev/null +++ b/core/src/utils/test/test-header.scss @@ -0,0 +1,3 @@ +.options-popover { + --width: 300px; +} diff --git a/core/src/utils/test/test-header.tsx b/core/src/utils/test/test-header.tsx new file mode 100644 index 0000000000..187b265a97 --- /dev/null +++ b/core/src/utils/test/test-header.tsx @@ -0,0 +1,81 @@ +import type { ComponentInterface } from '@stencil/core'; +import { Component, Host, Prop, h } from '@stencil/core'; +import { getIonMode } from 'src/global/ionic-global'; + +@Component({ + tag: 'test-header', + styleUrl: 'test-header.scss', + scoped: true, +}) +export class TestHeader implements ComponentInterface { + @Prop() testTitle?: string; + + locale = document.querySelector('#locale'); + + setTheme = (ev: CustomEvent) => { + window.location.search = `?ionic:theme=${ev.detail.value}`; + }; + + toggleDir = (ev: CustomEvent) => { + if (ev.detail.checked) { + document.body.setAttribute('dir', 'rtl'); + } else { + document.body.setAttribute('dir', 'ltr'); + } + }; + + togglePalette = (ev: CustomEvent) => { + const paletteLinkEl = document.getElementById('palette'); + if (ev.detail.checked) { + paletteLinkEl?.setAttribute('href', 'https://cdn.jsdelivr.net/npm/@ionic/core@next/css/palettes/dark.always.css'); + paletteLinkEl?.setAttribute('rel', 'stylesheet'); + paletteLinkEl?.setAttribute('type', 'text/css'); + } else { + paletteLinkEl?.removeAttribute('href'); + paletteLinkEl?.removeAttribute('rel'); + paletteLinkEl?.removeAttribute('type'); + } + }; + + render() { + return ( + + + + {this.testTitle} + + Options + + {/* @ts-ignore */} + + + + Dark Mode + + + RTL + + {/* + iOS Mode + + + MD Mode + */} + + + iOS Theme + MD Theme + Ionic Theme + + + + + + + + + + + ); + } +} diff --git a/packages/angular/src/directives/proxies-list.ts b/packages/angular/src/directives/proxies-list.ts index 8a0d9eb03e..72dab79a6e 100644 --- a/packages/angular/src/directives/proxies-list.ts +++ b/packages/angular/src/directives/proxies-list.ts @@ -82,5 +82,6 @@ export const DIRECTIVES = [ d.IonTitle, d.IonToast, d.IonToggle, - d.IonToolbar + d.IonToolbar, + d.TestHeader ]; diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index acec987bcf..e2acfa47d4 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -2427,3 +2427,25 @@ export class IonToolbar { export declare interface IonToolbar extends Components.IonToolbar {} +@ProxyCmp({ + inputs: ['testTitle'] +}) +@Component({ + selector: 'test-header', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['testTitle'], +}) +export class TestHeader { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface TestHeader extends Components.TestHeader {} + + diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index d735d65f0b..1574c86bd0 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -76,6 +76,7 @@ import { defineCustomElement as defineIonThumbnail } from '@ionic/core/component import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js'; import { defineCustomElement as defineIonToast } from '@ionic/core/components/ion-toast.js'; import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js'; +import { defineCustomElement as defineTestHeader } from '@ionic/core/components/test-header.js'; @ProxyCmp({ defineCustomElementFn: defineIonAccordion, inputs: ['disabled', 'mode', 'readonly', 'theme', 'toggleIcon', 'toggleIconSlot', 'value'] @@ -2152,3 +2153,27 @@ export class IonToolbar { export declare interface IonToolbar extends Components.IonToolbar {} +@ProxyCmp({ + defineCustomElementFn: defineTestHeader, + inputs: ['testTitle'] +}) +@Component({ + selector: 'test-header', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['testTitle'], + standalone: true +}) +export class TestHeader { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface TestHeader extends Components.TestHeader {} + + diff --git a/packages/react/src/components/proxies.ts b/packages/react/src/components/proxies.ts index 05800f3877..fc03e0e6c9 100644 --- a/packages/react/src/components/proxies.ts +++ b/packages/react/src/components/proxies.ts @@ -73,6 +73,7 @@ import { defineCustomElement as defineIonThumbnail } from '@ionic/core/component import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js'; import { defineCustomElement as defineIonToggle } from '@ionic/core/components/ion-toggle.js'; import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js'; +import { defineCustomElement as defineTestHeader } from '@ionic/core/components/test-header.js'; export const IonAccordion = /*@__PURE__*/createReactComponent('ion-accordion', undefined, undefined, defineIonAccordion); export const IonAccordionGroup = /*@__PURE__*/createReactComponent('ion-accordion-group', undefined, undefined, defineIonAccordionGroup); @@ -142,3 +143,4 @@ export const IonThumbnail = /*@__PURE__*/createReactComponent('ion-title', undefined, undefined, defineIonTitle); export const IonToggle = /*@__PURE__*/createReactComponent('ion-toggle', undefined, undefined, defineIonToggle); export const IonToolbar = /*@__PURE__*/createReactComponent('ion-toolbar', undefined, undefined, defineIonToolbar); +export const TestHeader = /*@__PURE__*/createReactComponent('test-header', undefined, undefined, defineTestHeader); diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 30d640d44f..a9bb1ce5c8 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -78,6 +78,7 @@ import { defineCustomElement as defineIonThumbnail } from '@ionic/core/component import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js'; import { defineCustomElement as defineIonToggle } from '@ionic/core/components/ion-toggle.js'; import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js'; +import { defineCustomElement as defineTestHeader } from '@ionic/core/components/test-header.js'; export const IonAccordion = /*@__PURE__*/ defineContainer('ion-accordion', defineIonAccordion, [ @@ -880,3 +881,8 @@ export const IonToolbar = /*@__PURE__*/ defineContainer('ion-too 'color' ]); + +export const TestHeader = /*@__PURE__*/ defineContainer('test-header', defineTestHeader, [ + 'testTitle' +]); +