Skip to content

Enhance chip label for RTL direction#6701

Open
shlomoi10 wants to merge 1 commit into
heroui-inc:v3from
shlomoi10:v3
Open

Enhance chip label for RTL direction#6701
shlomoi10 wants to merge 1 commit into
heroui-inc:v3from
shlomoi10:v3

Conversation

@shlomoi10

Copy link
Copy Markdown
Contributor

Add RTL support for Chip label bidi rendering.

Closes #

📝 Description

Fix incorrect bidi ordering for numeric-leading email-like strings inside Chip when the document direction is RTL.
Example: 123@example.com can render with characters visually reordered in RTL contexts.

This PR adds an RTL-specific CSS rule to the Chip label slot to ensure the browser resolves bidi direction per text run.

⛳️ Current behavior (updates)

When dir="rtl" is applied at the document/app level, a Chip that displays values like:

  • 123@example.com
  • 123@domain.co.il

may appear visually reversed or incorrectly ordered, even though the string contains no Hebrew characters.

This is caused by the Unicode bidirectional algorithm interacting with RTL context + numeric-leading tokens.

🚀 New behavior

In RTL context, Chip label text uses unicode-bidi: plaintext, which makes the browser determine directionality based on the label’s content, preventing the reorder issue for numeric-leading email-like strings.

Suggested change (in Chip styles, next to .chip__label):

:dir(rtl) .chip__label {
  unicode-bidi: plaintext;
}

Add RTL support for chip label.
@shlomoi10 shlomoi10 requested a review from jrgarciadev as a code owner July 9, 2026 12:32
@vercel

vercel Bot commented Jul 9, 2026

Copy link
Copy Markdown

@shlomoi10 is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

@shlomoi10

Copy link
Copy Markdown
Contributor Author
image

@pkg-pr-new

pkg-pr-new Bot commented Jul 9, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@heroui/react@6701
npm i https://pkg.pr.new/@heroui/styles@6701

commit: 608a6a0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant