javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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

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/);
});
});