From dd9867708b66543f5cbe978e0fa6ef34b37f9fc3 Mon Sep 17 00:00:00 2001 From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Date: Wed, 9 Nov 2022 13:46:57 -0600 Subject: [PATCH] fix(datetime): flip chevron icons when RTL is set on component directly (#26195) --- core/package-lock.json | 73 +++++++++---------- core/package.json | 2 +- core/src/components/datetime/datetime.tsx | 21 +++++- .../datetime/test/basic/datetime.e2e.ts | 15 ++++ 4 files changed, 68 insertions(+), 43 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 0486e3e907..f0f4ad5be3 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -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", diff --git a/core/package.json b/core/package.json index 175afec9f3..7114fc8679 100644 --- a/core/package.json +++ b/core/package.json @@ -32,7 +32,7 @@ ], "dependencies": { "@stencil/core": "^2.18.0", - "ionicons": "^6.0.3", + "ionicons": "^6.0.4", "tslib": "^2.1.0" }, "devDependencies": { diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 1b80022207..3245cdc0c7 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -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 (
@@ -1878,10 +1881,24 @@ export class Datetime implements ComponentInterface {
this.prevMonth()}> - + this.nextMonth()}> - +
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index 010e464d94..5548980f67 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -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(` + + `); + + 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/); + }); +});