fix(NfdAvatar): add data-wallet-ui for CSS utility scoping #31
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The fallback avatar div uses Tailwind utility classes (flex, items-center, justify-center, rounded-full) that require the [data-wallet-ui] attribute for CSS scoping. Without this, the classes don't apply when NfdAvatar is used directly in consumer code outside of library components. This fixes the avatar icon not being centered in CSS-only setups.
txnlab-release-bot bot
added a commit
that referenced
this pull request
Jan 20, 2026
# [1.0.0-beta.2](v1.0.0-beta.1...v1.0.0-beta.2) (2026-01-20) ### Bug Fixes * **NfdAvatar:** add data-wallet-ui for CSS utility scoping ([#31](#31)) ([b58b7a0](b58b7a0))
Contributor
|
🎉 This PR is included in version 1.0.0-beta.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
txnlab-release-bot bot
added a commit
that referenced
this pull request
Jan 21, 2026
# [1.0.0](v0.4.2...v1.0.0) (2026-01-21) ### Bug Fixes * **css:** inject styles at start of head for consumer overrides ([#32](#32)) ([820c6c7](820c6c7)) * **NfdAvatar:** add data-wallet-ui for CSS utility scoping ([#31](#31)) ([b58b7a0](b58b7a0)) * **css:** use :where() for button reset to allow utility overrides ([#25](#25)) ([221c660](221c660)) * **css:** use Tailwind v3-compatible CSS variable syntax ([#24](#24)) ([a4aeeb7](a4aeeb7)) * feat(css)!: redesign CSS architecture for v1.0 ([fb6ccc3](fb6ccc3)) ### BREAKING CHANGES * CSS architecture has been redesigned for better customization support and isolation.
Contributor
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes the default avatar placeholder not being styled correctly in CSS-only setups. The fallback avatar icon was not centered and border-radius wasn't applied when
NfdAvatarwas used directly in consumer code.Problem
The
NfdAvatarfallback div uses Tailwind utility classes (flex,items-center,justify-center,rounded-full) that require the[data-wallet-ui]attribute for CSS scoping. When consumers useNfdAvatardirectly in their code (outside of library button components), the element lacks a[data-wallet-ui]ancestor, so the scoped utility classes don't match.Solution
Add
data-wallet-uiattribute directly to the fallback avatar div, enabling the utility classes to match via the[data-wallet-ui].classselector pattern.Test Plan
react-css-onlyexamplereactexample still works