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

fix(datetime): flip chevron icons when RTL is set on component directly (#26195)

Browse Source
This commit is contained in:
Amanda Johnston
2022-11-09 13:46:57 -06:00
committed by GitHub
parent d709ff64ae
commit dd9867708b
4 changed files with 68 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
core/package-lock.json generated
View File

@ -10,7 +10,7 @@
"license": "MIT",
"dependencies": {
"@stencil/core": "^2.18.0",
"ionicons": "^6.0.3",
"ionicons": "^6.0.4",
"tslib": "^2.1.0"
},
"devDependencies": {
@ -8508,23 +8508,11 @@
}
},
"node_modules/ionicons": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
"integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.4.tgz",
"integrity": "sha512-uDNOkBo0OVYV+kIhb51g9mb7r3Z0b+78GPZQBsjXuaetNmrB/mNTqN/uFtO+vxL/rQySKjzk8qeKJI5NWL9Ueg==",
"dependencies": {
"@stencil/core": "~2.16.0"
}
},
"node_modules/ionicons/node_modules/@stencil/core": {
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
"integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
"bin": {
"stencil": "bin/stencil"
},
"engines": {
"node": ">=12.10.0",
"npm": ">=6.0.0"
"@stencil/core": "^2.18.0"
}
},
"node_modules/ip": {
@ -18014,7 +18002,8 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@ionic/prettier-config/-/prettier-config-2.0.0.tgz",
"integrity": "sha512-ageMx54B9qqS1scnFW3kQW2NW8HyXwUM/p9c1YSWFKr6Yct7YVNbJFY3EcFapaNTiDnwo+GLlPRt+wST6E8AfA==",
"dev": true
"dev": true,
"requires": {}
},
"@istanbuljs/load-nyc-config": {
"version": "1.1.0",
@ -20007,7 +19996,8 @@
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-2.0.3.tgz",
"integrity": "sha512-pw6ziJcyjZtntQ//bkad9qXaBx665SgEL8C8KI5wO8G5iU5MPxvdWrQyVaAvjojGm9tJoS8M9Z/EEepbqieYmw==",
"dev": true
"dev": true,
"requires": {}
},
"@rollup/pluginutils": {
"version": "3.1.0",
@ -20042,7 +20032,8 @@
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.4.0.tgz",
"integrity": "sha512-zauaj0za46IWoPgv2IanDp3tiljwDRDNk4jB7WII6KeL66dkk7ffeqYZ0CgySTU5W2FjnKR6JEKbAnwUxjGIsA==",
"dev": true
"dev": true,
"requires": {}
},
"@stencil/core": {
"version": "2.18.0",
@ -20053,19 +20044,22 @@
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.2.1.tgz",
"integrity": "sha512-A6ut+ua3s9UPVXHmAco8g6phvRsr8Db1wM6Mws2bdSAawzc1n49afS+FbTMUMcjqKAGShMp5lsM0/QA0jx5SdQ==",
"dev": true
"dev": true,
"requires": {}
},
"@stencil/sass": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-1.5.2.tgz",
"integrity": "sha512-nJ93pUSylsGsMX0eLmhxh1oEljcUjj5mYjhB9ziCdoaydAdjukrUoqDCC7tdVbOcBo2hKptQyWqCtETnBGYsXQ==",
"dev": true
"dev": true,
"requires": {}
},
"@stencil/vue-output-target": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.6.2.tgz",
"integrity": "sha512-Oh7SLFbOUchCSCbGe/Dqal2xSYPKCFQiVKnvzvS0dsHP/XS7rfHqp3qptW6JCp9lBoo3wmmBurHfldqxhLlnag==",
"dev": true
"dev": true,
"requires": {}
},
"@stylelint/postcss-css-in-js": {
"version": "0.37.2",
@ -20654,7 +20648,8 @@
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
"dev": true
"dev": true,
"requires": {}
},
"acorn-walk": {
"version": "7.2.0",
@ -22515,7 +22510,8 @@
"version": "8.5.0",
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
"integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
"dev": true
"dev": true,
"requires": {}
},
"eslint-import-resolver-node": {
"version": "0.3.6",
@ -23748,18 +23744,11 @@
}
},
"ionicons": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
"integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
"version": "6.0.4",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.4.tgz",
"integrity": "sha512-uDNOkBo0OVYV+kIhb51g9mb7r3Z0b+78GPZQBsjXuaetNmrB/mNTqN/uFtO+vxL/rQySKjzk8qeKJI5NWL9Ueg==",
"requires": {
"@stencil/core": "~2.16.0"
},
"dependencies": {
"@stencil/core": {
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
"integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
}
"@stencil/core": "^2.18.0"
}
},
"ip": {
@ -25825,7 +25814,8 @@
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
"integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
"dev": true
"dev": true,
"requires": {}
},
"jest-regex-util": {
"version": "26.0.0",
@ -27789,7 +27779,8 @@
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.4.2.tgz",
"integrity": "sha512-Kbk4Nxyq7/ZWqr/tarI9yIt/+iNNFOjBXEWgTb4ydaNHBNGgvf2QHbS9fdfsndfjFlFwEd4Al+mw83YkaD10ZA==",
"dev": true
"dev": true,
"requires": {}
}
}
},
@ -27973,7 +27964,8 @@
"version": "0.36.2",
"resolved": "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.36.2.tgz",
"integrity": "sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==",
"dev": true
"dev": true,
"requires": {}
},
"postcss-value-parser": {
"version": "4.1.0",
@ -30438,7 +30430,8 @@
"version": "7.4.6",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
"integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
"dev": true
"dev": true,
"requires": {}
},
"xml-name-validator": {
"version": "3.0.0",

2
core/package.json
View File

@ -32,7 +32,7 @@
],
"dependencies": {
"@stencil/core": "^2.18.0",
"ionicons": "^6.0.3",
"ionicons": "^6.0.4",
"tslib": "^2.1.0"
},
"devDependencies": {

21
core/src/components/datetime/datetime.tsx
View File

@ -1859,6 +1859,9 @@ export class Datetime implements ComponentInterface {
const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
// don't use the inheritAttributes util because it removes dir from the host, and we still need that
const hostDir = this.el.getAttribute('dir') || undefined;
return (
<div class="calendar-header">
<div class="calendar-action-buttons">
@ -1878,10 +1881,24 @@ export class Datetime implements ComponentInterface {
<div class="calendar-next-prev">
<ion-buttons>
<ion-button aria-label="previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
<ion-icon aria-hidden="true" slot="icon-only" icon={chevronBack} lazy={false} flipRtl></ion-icon>
<ion-icon
dir={hostDir}
aria-hidden="true"
slot="icon-only"
icon={chevronBack}
lazy={false}
flipRtl
></ion-icon>
</ion-button>
<ion-button aria-label="next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
<ion-icon aria-hidden="true" slot="icon-only" icon={chevronForward} lazy={false} flipRtl></ion-icon>
<ion-icon
dir={hostDir}
aria-hidden="true"
slot="icon-only"
icon={chevronForward}
lazy={false}
flipRtl
></ion-icon>
</ion-button>
</ion-buttons>
</div>

15
core/src/components/datetime/test/basic/datetime.e2e.ts
View File

@ -312,3 +312,18 @@ test.describe('datetime: visibility', () => {
await expect(monthYearInterface).toBeHidden();
});
});
test.describe('datetime: RTL set on component', () => {
test('should flip icons when RTL is set on component directly', async ({ page, skip }) => {
skip.rtl(); // we're setting RTL on the component instead
skip.mode('md');
await page.setContent(`
<ion-datetime dir="rtl"></ion-datetime>
`);
const nextPrevIcons = page.locator('ion-datetime .calendar-next-prev ion-icon');
await expect(nextPrevIcons.first()).toHaveClass(/flip-rtl/);
await expect(nextPrevIcons.last()).toHaveClass(/flip-rtl/);
});
});