feat(avatar): render initials from name - #1926
Open
bataevvlad wants to merge 2 commits into
Open
bataevvlad wants to merge 2 commits into
bataevvlad wants to merge 2 commits into
Conversation
Avatar was an Image only, so an account without a picture had nothing to show. `name` renders as initials in a frame of the same size and shape when there is no source or the image fails to load, coloured by the new `status` variant of the Avatar mapping. Closes #1806.
The basic status used text-basic-color on color-basic-default. In the Eva and Material dark themes both resolve to near-white, so the initials vanished. Use color-basic-800 like the filled basic Button.
This branch has not been deployed
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Problem
Avataris anImagewith a mapped size and shape; there is no way to show a user without a picture (#1806 asks for initials, as inreact-native-user-avatar).Fix
name?: string: rendered as initials (first letter of the first two words,initialsOfexported) in aViewwith the avatar's size, shape and border radius when there is nosourceor the image firesonError(the consumeronErrorstill runs). With a loading image,nameis only its accessible name. The fallback resets when the image uri changes, comparing by uri so an inlinesource={{ uri }}literal does not clear it on every parent render.status?: EvaStatus(defaultbasic): background and text colour of the initials frame.Avatarmappings:textFontSizeper size (10 / 13 / 16 / 22 / 30),textFontFamily/textFontWeight(text-font-family,text-subtitle-1-font-weight), and astatusvariant group (basic=color-basic-default/text-basic-color;primary...danger=color-<status>-default/text-control-color;control=color-control-default/color-basic-800). Edited in place inside theAvatarblock only.AvatarInitials(sizes without a source, statuses, a failing uri next to a loading asset) at the end ofSHOWCASES; StorybookInitialsandInitialsFallbackstories; docs rows and an "Initials" section inavatar.mdx.Verification
avatar.spec.tsx, 8 new, 5 fail on master): initials derivation; initials without a source; image kept when it loads; fallback ononErrorandonErrorforwarded; nothing but the image without a name; frame sized / rounded like the image with the mapped text size; status colours; fallback kept for the same uri passed as a new object and retried for a new uri.section-AvatarInitials): five sizes of "JD" in grey round frames, six statuses of "AL" in the status colours, the failing uri shows "BL" once the emulator's DNS lookup times out (a few seconds), the asset avatar keeps its image.yarn e2e:ios: see "iOS verification (2026-09-28)" below.yarn turbo run build --filter=@ui-kitten/components,yarn typecheck:all,yarn lint(0 errors, 50 pre-existing warnings),yarn test --runInBand(74 suites, 1894 tests) pass.Changeset:
@ui-kitten/componentsminor,@ui-kitten/evaminor,@ui-kitten/materialminor.Closes #1806
iOS verification (2026-09-28)
iPhone 17 simulator (iOS 26.2), debug build on Metro from a clean worktree of this branch, driven with agent-device.
section-AvatarInitials: five sizes ofJD, six statuses ofAL, the failing uri showsBLnext to the loaded asset, in Eva/Light, Eva/Dark, Material/Light, Material/Dark.status='basic'(the default) the initials were unreadable in both dark themes becausetext-basic-colorandcolor-basic-defaultboth resolve to near-white there. Fixed in e8e2c5d: the basictextColoriscolor-basic-800in both mappings (what the filled basicButtonuses); new spec renders with the Eva dark theme and asserts it.Avatarsection (image sizes and shapes) unchanged.yarn e2e:iosagainst a Metro serving this branch (the flags injected into a scratch copy of the scripts; without themagent-device testloads the bundle from:8081):smoke.adandicon-touchable.adpass (icon-touchable.adfailed once at a scroll step and passed on two solo reruns);modal-nested.ad(step 51) andautocomplete.adfail exactly as on master (both fixed in test(e2e): keep modals inside the snapshot budget #1918). An earlier run reported here had loaded another checkout's bundle from:8081and did not test this branch.Android verification (2026-09-28, second pass)
Pixel 7 emulator (API 34), debug build on Metro from a clean worktree of this branch, driven with agent-device.
section-AvatarInitialsin all four theme/mapping combos, including the dark-themebasicfix (e8e2c5d): initials readable. The failing uri showsBLonly after the emulator DNS timeout, as before.Avatarsection unchanged.popover-android.adis stale on master (its fixed scroll count stops at the List section) and was not a branch check; test(e2e): reach showcase sections through a deep link #1932 replaces the scrolls with a section deep link. The Android replay line previously reported here had also loaded another checkout's bundle from:8081.