From 18c9384d400688b2ba8b639f9e62f909d8358302 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Mon, 31 Oct 2022 14:26:41 -0500 Subject: [PATCH 1/6] fix(datetime): flip chevron icons when RTL is set on component directly --- core/src/components/datetime/datetime.tsx | 26 ++++++++++++++++--- .../datetime/test/basic/datetime.e2e.ts | 15 +++++++++++ 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 1b80022207f..0d568442179 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -13,7 +13,8 @@ import type { TitleSelectedDatesFormatter, } from '../../interface'; import { startFocusVisible } from '../../utils/focus-visible'; -import { getElementRoot, raf, renderHiddenInput } from '../../utils/helpers'; +import type { Attributes } from '../../utils/helpers'; +import { getElementRoot, inheritAttributes, raf, renderHiddenInput } from '../../utils/helpers'; import { printIonError, printIonWarning } from '../../utils/logging'; import { isRTL } from '../../utils/rtl'; import { createColorClasses } from '../../utils/theme'; @@ -83,6 +84,7 @@ import { }) export class Datetime implements ComponentInterface { private inputId = `ion-dt-${datetimeIds++}`; + private inheritedAttributes: Attributes = {}; private calendarBodyRef?: HTMLElement; private popoverRef?: HTMLIonPopoverElement; private clearFocusVisible?: () => void; @@ -1236,6 +1238,8 @@ export class Datetime implements ComponentInterface { } } + this.inheritedAttributes = inheritAttributes(el, ['dir']); + this.processMinParts(); this.processMaxParts(); const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues)); @@ -1853,6 +1857,8 @@ export class Datetime implements ComponentInterface { */ private renderCalendarHeader(mode: Mode) { + const { inheritedAttributes } = this; + const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp; const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp; @@ -1878,10 +1884,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 010e464d946..11785bdb417 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/); + }); +}); \ No newline at end of file From 2bbc1a9bc873fe45a664ce7f519de406618b92d4 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Mon, 31 Oct 2022 14:51:48 -0500 Subject: [PATCH 2/6] chore(): lint --- core/src/components/datetime/test/basic/datetime.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index 11785bdb417..5548980f679 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -326,4 +326,4 @@ test.describe('datetime: RTL set on component', () => { await expect(nextPrevIcons.first()).toHaveClass(/flip-rtl/); await expect(nextPrevIcons.last()).toHaveClass(/flip-rtl/); }); -}); \ No newline at end of file +}); From be594177d68779349a58296fc731ab673c87a195 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 8 Nov 2022 14:24:14 -0600 Subject: [PATCH 3/6] chore(): update Ionicons --- core/package-lock.json | 73 +++++++++++++++++++----------------------- core/package.json | 2 +- 2 files changed, 34 insertions(+), 41 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 7140e954376..7064def7cec 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 9c630fc5e5e..ecf4cddfb8b 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": { From 9ca5f8a3899faa3aeb1142f4a409168768f60f2d Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 8 Nov 2022 14:24:42 -0600 Subject: [PATCH 4/6] fix(datetime): avoid dir getting removed from host el --- core/src/components/datetime/datetime.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 0d568442179..de0da67354f 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -14,7 +14,7 @@ import type { } from '../../interface'; import { startFocusVisible } from '../../utils/focus-visible'; import type { Attributes } from '../../utils/helpers'; -import { getElementRoot, inheritAttributes, raf, renderHiddenInput } from '../../utils/helpers'; +import { getElementRoot, raf, renderHiddenInput } from '../../utils/helpers'; import { printIonError, printIonWarning } from '../../utils/logging'; import { isRTL } from '../../utils/rtl'; import { createColorClasses } from '../../utils/theme'; @@ -1238,8 +1238,6 @@ export class Datetime implements ComponentInterface { } } - this.inheritedAttributes = inheritAttributes(el, ['dir']); - this.processMinParts(); this.processMaxParts(); const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues)); @@ -1857,14 +1855,15 @@ export class Datetime implements ComponentInterface { */ private renderCalendarHeader(mode: Mode) { - const { inheritedAttributes } = this; - const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp; const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp; 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 (
@@ -1885,7 +1884,7 @@ export class Datetime implements ComponentInterface { this.prevMonth()}>