Skip to content

fix(rtl): respect dir of ancestor elements throughout components - #31459

Open
OS-jacobbell wants to merge 6 commits into
mainfrom
FW-7698
Open

OS-jacobbell wants to merge 6 commits into
mainfrom
FW-7698

Conversation

@OS-jacobbell

Copy link
Copy Markdown
Contributor

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?

  • Components consistently use isRTL(this.el). This way, any element in the parent chain can define RTL, not just the root document element.
  • The host element is a required parameter to isRTL.

Does this introduce a breaking change?

  • Yes
  • No

@OS-jacobbell
OS-jacobbell requested a review from a team as a code owner September 18, 2026 18:47
@vercel

vercel Bot commented Sep 18, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
ionic-framework Ready Ready Preview Sep 24, 2026 4:51pm UTC

Request Review

@github-actions github-actions Bot added the package: core @ionic/core package label Sep 18, 2026
@OS-jacobbell OS-jacobbell changed the title fix(i18n): respect parent rtl setting throughout components fix(rtl): respect dir setting of ancestor elements throughout components Sep 21, 2026
@OS-jacobbell OS-jacobbell changed the title fix(rtl): respect dir setting of ancestor elements throughout components fix(rtl): respect dir of ancestor elements throughout components Sep 21, 2026

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread docs/component-guide.md Outdated
Comment thread core/src/components/progress-bar/progress-bar.tsx Outdated
Co-authored-by: Shane <shane.king@outsystems.com>

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generated this one with Claude. I don't get why the parameters to ion-col are needed, but it doesn't work without them.

@OS-jacobbell OS-jacobbell Sep 24, 2026 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generated; it seems too dependent on implementation details.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also generated. I feel like this should be a screenshot test, but not sure how that would fit into the test suite.

This branch was successfully deployed

1 active deployment
Preview — 287adf8b Deployed Sep 24, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants