javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-14 16:52:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): sync with main (#25450)

Browse Source
This commit is contained in:
Sean Perkins
2022-06-10 14:20:04 -04:00
committed by GitHub
parent 524f2abc95
commit ec4a36ea4e
7 changed files with 119 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/.prettierrc.js Normal file
View File

@ -0,0 +1,11 @@
module.exports = {
...require('@ionic/prettier-config'),
overrides: [
{
files: ['**/*.scss'],
options: {
singleQuote: false,
},
},
],
};

0
core/.prettierrc.json
View File

3
core/package.json
View File

@ -117,6 +117,5 @@
"homepage": "https://ionicframework.com/",
"jest": {
"preset": "@stencil/core/testing"
},
"prettier": "@ionic/prettier-config"
}
}

59
core/src/components/popover/test/adjustment/index.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Popover - Adjustment</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<script type="module">
import { popoverController } from '../../../../dist/ionic/index.esm.js';
window.popoverController = popoverController;
</script>
</head>
<body>
<ion-app>
<ion-content>
<p style="text-align: center">Click everywhere to open the popover.</p>
</ion-content>
</ion-app>
<script>
document.querySelector('ion-content').addEventListener('click', handleButtonClick);
async function handleButtonClick(ev) {
const popover = await popoverController.create({
component: 'popover-example-page',
event: ev,
reference: 'event',
});
popover.present();
}
customElements.define(
'popover-example-page',
class PopoverContent extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-list>
<ion-list-header>Ionic</ion-list-header>
<ion-item button>Learn Ionic</ion-item>
<ion-item button>Documentation</ion-item>
<ion-item button>Showcase</ion-item>
<ion-item button>GitHub Repo</ion-item>
<ion-item button>Another Item</ion-item>
</ion-list>
`;
}
}
);
</script>
</body>
</html>

32
core/src/components/popover/test/adjustment/popover.e2e.ts Normal file
View File

@ -0,0 +1,32 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('popover: adjustment', async () => {
test('should not render the popover offscreen', async ({ page }) => {
await page.goto('/src/components/popover/test/adjustment');
/**
* We need to click in an area where
* there is not enough room to show the popover
* below the click coordinates but not enough
* room above the click coordinates that we
* can just move the popover to without it going
* offscreen.
*/
await page.setViewportSize({
width: 500,
height: 400,
});
const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
await page.mouse.click(300, 300);
await ionPopoverDidPresent.next();
const popoverContent = page.locator('ion-popover .popover-content');
const box = (await popoverContent.boundingBox())!;
expect(box.y > 0).toBe(true);
});
});

12
core/src/components/popover/utils.ts
View File

@ -863,7 +863,17 @@ export const calculateWindowAdjustment = (
*/
if (triggerTop + triggerHeight + contentHeight > bodyHeight && (side === 'top' || side === 'bottom')) {
if (triggerTop - contentHeight > 0) {
top = triggerTop - contentHeight - triggerHeight - (arrowHeight - 1);
/**
* While we strive to align the popover with the trigger
* on smaller screens this is not always possible. As a result,
* we adjust the popover up so that it does not hang
* off the bottom of the screen. However, we do not want to move
* the popover up so much that it goes off the top of the screen.
*
* We chose 12 here so that the popover position looks a bit nicer as
* it is not right up against the edge of the screen.
*/
top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
arrowTop = top + contentHeight;
originY = 'bottom';
addPopoverBottomClass = true;

24
core/src/components/range/range.scss
View File

@ -14,8 +14,8 @@
* @prop --knob-border-radius: Border radius of the range knob
* @prop --knob-box-shadow: Box shadow of the range knob
* @prop --knob-size: Size of the range knob
* @prop --pin-background: Background of the range pin
* @prop --pin-color: Color of the range pin
* @prop --pin-background: Background of the range pin (only available in MD mode)
* @prop --pin-color: Color of the range pin (only available in MD mode)
*/
--knob-handle-size: calc(var(--knob-size) * 2);
@ -72,14 +72,8 @@
}
.range-knob-handle {
@include position(
calc((var(--height) - var(--knob-handle-size)) / 2),
null, null, 0
);
@include margin-horizontal(
calc(0px - var(--knob-handle-size) / 2),
null
);
@include position(calc((var(--height) - var(--knob-handle-size)) / 2), null, null, 0);
@include margin-horizontal(calc(0px - var(--knob-handle-size) / 2), null);
@include rtl() {
/* stylelint-disable-next-line property-disallowed-list */
@ -120,11 +114,7 @@
.range-knob {
@include border-radius(var(--knob-border-radius));
@include position(
calc(50% - var(--knob-size) / 2),
null, null,
calc(50% - var(--knob-size) / 2)
);
@include position(calc(50% - var(--knob-size) / 2), null, null, calc(50% - var(--knob-size) / 2));
@include rtl() {
/* stylelint-disable-next-line property-disallowed-list */
@ -147,7 +137,6 @@
will-change: left, right;
}
// Range in Item
// ----------------------------
@ -165,13 +154,10 @@
// width: 100%;
// }
:host(.in-item) {
width: 100%;
}
:host(.in-item) ::slotted(ion-label) {
align-self: center;
}