Skip to content

Add icon-position to <wa-details> #1210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Jul 22, 2025
Merged

Add icon-position to <wa-details> #1210

merged 2 commits into from
Jul 22, 2025

Conversation

lindsaym-fa
Copy link
Contributor

Per conversation in #1099

Adds icon-position="start | end" to <wa-details>

@vercel Vercel
Copy link

vercel bot commented Jul 21, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
webawesome ✅ Ready (Inspect) Visit Preview Jul 21, 2025 10:26pm

@lindsaym-fa lindsaym-fa requested a review from claviska July 22, 2025 13:44
claviska
claviska requested changes Jul 22, 2025
View reviewed changes
Copy link
Member

@claviska claviska left a comment

Choose a reason for hiding this comment

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

This is an exemplary PR!

The only thing I noticed is that, in RTL, the icons should be mirrored.

CleanShot 2025-07-22 at 09 42 19@2x

One thing to look out for — we need to make sure it continues to work properly with custom expand/collapse icons, so flipping with CSS probably isn't the way to go here.

I'm happy to help if you'd like me to take a look!

@lindsaym-fa
Copy link
Contributor Author

@claviska I'll need a hand with this.

Setting dir="rtl" on the root element or <wa-details> itself renders the chevron-left icon as intended —

Here's dir="rtl" on <wa-details> (example in the docs):
Screenshot 2025-07-22 at 11 43 40 AM

Here's dir="rtl" on <html>:
Screenshot 2025-07-22 at 11 44 18 AM

But setting dir="rtl" on any other ancestor or parent doesn't have the same effect. Here, I've set dir="rtl" on the .code-example-preview wrapper:
Screenshot 2025-07-22 at 11 44 53 AM

(This is also the case in beta.3.)

Any ideas? 🤔

@claviska
Copy link
Member

Oh no...you're right! Due to platform limitations that I've complained about before, we only support lang and dir on the <html> element and on the host element itself. Applying language or directionality on an ancestor (other than <html>) isn't supported. 🤦🏻‍♂️

From our docs: https://webawesome.com/docs/localization#multiple-locales-per-page

For performance reasons, the lang and dir attributes must be on the component itself, not on an ancestor element.

Carry on!

@lindsaym-fa lindsaym-fa merged commit e10aba0 into next Jul 22, 2025
2 checks passed
@lindsaym-fa lindsaym-fa deleted the lm/details-icon-position branch August 8, 2025 19:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@claviska claviska claviska approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@lindsaym-fa @claviska