fix(rtl): respect dir of ancestor elements throughout components - #31459
OS-jacobbell wants to merge 5 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
OS-jacobbell
changed the title
dir setting of ancestor elements throughout components
OS-jacobbell
changed the title
dir setting of ancestor elements throughout componentsdir of ancestor elements throughout components
ShaneK
left a comment
ShaneK
left a comment
There was a problem hiding this comment.
Nice sweep of this! Just a few comments inline, though I'd want the test coverage added before it goes in.
| expect(isRTL()).toBe(false); | ||
| expect(isRTL(null)).toBe(false); | ||
| expect(isRTL(document.createElement('div'))).toBe(false); | ||
| expect(isRTL(render('<div><div id="target"></div></div>'))).toBe(false); |
There was a problem hiding this comment.
The two tests going away here are right, they only covered the optional-param path that no longer typechecks. But nine components changed how they resolve direction in this PR and nothing covers any of them, which FW-7698 does ask for.
The existing suite won't catch a regression either, since the e2e harness sets RTL with document.documentElement.setAttribute('dir', 'rtl'). That's an ancestor, so the RTL screenshots would pass identically on main. The datetime "RTL set on component" test is a decent template.
| [`progress-bar-${type}`]: true, | ||
| 'progress-paused': paused, | ||
| 'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed, | ||
| 'progress-bar-reversed': isRTL(this.el) ? !reversed : reversed, |
There was a problem hiding this comment.
Nit: this render already destructures off this at the top, so reading this.el inline here breaks the pattern the rest of the method follows. Adding el to the existing destructure covers it, and the ion-item render has the same shape.
This isn't a rule anywhere yet, it's something we're trying to settle on going forward, and there'll be a card later to enforce it properly. A few places already do it this way, like content.tsx and toggle.tsx. Purely optional for now, feel free to skip it.
Co-authored-by: Shane <shane.king@outsystems.com>
This branch was successfully deployed
2 participants
Issue number: internal
What is the current behavior?
Some components check
document.dir === 'rtl'to determine whether to be left-to-right or right-to-left.What is the new behavior?
isRTL(this.el). This way, any element in the parent chain can define RTL, not just the root document element.isRTL.Does this introduce a breaking change?