Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(): create reusable test header #29240

Draft
wants to merge 1 commit into
base: next
Choose a base branch
from
Draft

chore(): create reusable test header #29240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion core/api.txt
View file
Open in desktop
Expand Up @@ -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
ion-toolbar,css-prop,--padding-top

test-header,scoped
test-header,prop,testTitle,string | undefined,undefined,false,false
15 changes: 15 additions & 0 deletions core/src/components.d.ts
View file
Open in desktop
Expand Up @@ -3760,6 +3760,9 @@ export namespace Components {
*/
"theme"?: "ios" | "md" | "ionic";
}
interface TestHeader {
"testTitle"?: string;
}
}
export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
detail: T;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -5231,6 +5240,7 @@ declare global {
"ion-toast": HTMLIonToastElement;
"ion-toggle": HTMLIonToggleElement;
"ion-toolbar": HTMLIonToolbarElement;
"test-header": HTMLTestHeaderElement;
}
}
declare namespace LocalJSX {
Expand Down Expand Up @@ -9074,6 +9084,9 @@ declare namespace LocalJSX {
*/
"theme"?: "ios" | "md" | "ionic";
}
interface TestHeader {
"testTitle"?: string;
}
interface IntrinsicElements {
"ion-accordion": IonAccordion;
"ion-accordion-group": IonAccordionGroup;
Expand Down Expand Up @@ -9168,6 +9181,7 @@ declare namespace LocalJSX {
"ion-toast": IonToast;
"ion-toggle": IonToggle;
"ion-toolbar": IonToolbar;
"test-header": TestHeader;
}
}
export { LocalJSX as JSX };
Expand Down Expand Up @@ -9267,6 +9281,7 @@ declare module "@stencil/core" {
"ion-toast": LocalJSX.IonToast & JSXBase.HTMLAttributes<HTMLIonToastElement>;
"ion-toggle": LocalJSX.IonToggle & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
"ion-toolbar": LocalJSX.IonToolbar & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
"test-header": LocalJSX.TestHeader & JSXBase.HTMLAttributes<HTMLTestHeaderElement>;
}
}
}
234 changes: 26 additions & 208 deletions core/src/components/datetime/test/basic/index.html
View file
Open in desktop
Expand Up @@ -31,10 +31,6 @@
}
}

.options-popover {
--width: 300px;
}

ion-modal.ios,
ion-popover.datetime-popover.ios {
--width: 350px;
Expand All @@ -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;
}
</style>
</head>
<body>
<ion-app>
<ion-header translucent="true">
<ion-toolbar>
<ion-title>Datetime - Basic</ion-title>
<ion-buttons slot="end">
<ion-button id="popover-trigger">Options</ion-button>
</ion-buttons>
<ion-popover class="options-popover" trigger="popover-trigger">
<ion-list lines="none">
<ion-item>
<ion-checkbox>Dark Mode</ion-checkbox>
</ion-item>
<ion-item detail="true" href="?ionic:mode=ios">
<ion-label>iOS Mode</ion-label>
</ion-item>
<ion-item detail="true" href="?ionic:mode=md">
<ion-label>MD Mode</ion-label>
</ion-item>

<ion-item>
<ion-toggle id="titleToggle">Show Default Title</ion-toggle>
</ion-item>

<ion-item>
<ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
</ion-item>

<ion-item>
<ion-input label="Locale" placeholder="default" id="locale"></ion-input>
</ion-item>

<ion-item>
<ion-select label="Color" id="color" value="primary">
<ion-select-option value="primary">Primary</ion-select-option>
<ion-select-option value="secondary">Secondary</ion-select-option>
<ion-select-option value="tertiary">Tertiary</ion-select-option>
<ion-select-option value="success">Success</ion-select-option>
<ion-select-option value="warning">Warning</ion-select-option>
<ion-select-option value="danger">Danger</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</ion-popover>
</ion-toolbar>
</ion-header>
<test-header test-title="Datetime - Basic">
<div slot="items">
<ion-item>
<ion-toggle id="titleToggle">Show Default Title</ion-toggle>
</ion-item>

<ion-item>
<ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
</ion-item>

<ion-item>
<ion-input label="Locale" placeholder="default" id="locale"></ion-input>
</ion-item>

<ion-item>
<ion-select label="Color" id="color" value="primary">
<ion-select-option value="primary">Primary</ion-select-option>
<ion-select-option value="secondary">Secondary</ion-select-option>
<ion-select-option value="tertiary">Tertiary</ion-select-option>
<ion-select-option value="success">Success</ion-select-option>
<ion-select-option value="warning">Warning</ion-select-option>
<ion-select-option value="danger">Danger</ion-select-option>
</ion-select>
</ion-item>
</div>
</test-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
Expand Down Expand Up @@ -333,14 +159,6 @@ <h2>formatOptions</h2>
});
});

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) => {
Expand Down
6 changes: 1 addition & 5 deletions core/src/components/picker/test/basic/index.html
View file
Open in desktop
Expand Up @@ -44,11 +44,7 @@

<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Picker - Basic</ion-title>
</ion-toolbar>
</ion-header>
<test-header test-title="Picker - Basic"></test-header>
<ion-content class="ion-padding">
<div class="grid">
<div class="grid-item">
Expand Down
3 changes: 3 additions & 0 deletions core/src/utils/test/test-header.scss
View file
Open in desktop
@@ -0,0 +1,3 @@
.options-popover {
--width: 300px;
}