feature: opt-in trailingTextStyle and trailingAlign on list items - #66
Open
SRWieZ wants to merge 1 commit into
Open
feature: opt-in trailingTextStyle and trailingAlign on list items#66SRWieZ wants to merge 1 commit into
SRWieZ wants to merge 1 commit into
Conversation
Two platform defaults make a `native:list-item` read differently on Android than on iOS, and nothing in the element could change them: - `trailingText` is drawn in M3's labelSmall (11sp) trailing slot on Android, so a "Resume" label or a score looks like a footnote next to the headline; iOS draws it at 17pt. - A row with both an overline and supporting text is "three-line" to M3, which pins the leading and trailing slots to the top; iOS centres them. Both become explicit, per row. Unset keeps each platform's default, so existing screens are unchanged; set, both platforms draw the same thing: - `trailingTextStyle="headline"` sizes the trailing text like the headline (bodyLarge on Android); `label` draws a small caption (13pt on iOS). - `trailingAlign="center"` centres the leading and trailing slots. On Android the overline is rendered inside the headline slot (with the same labelSmall / onSurfaceVariant styling) so M3 treats the row as two-line, which also gives it two-line spacing. `top` top-aligns the HStack on iOS. Fluent builders `->trailingTextStyle()` / `->trailingAlign()` validate the values. Covered by tests/ListItemTrailingTest.php.
SRWieZ
changed the title
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
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.
What's wrong
A
native:list-itemwithtrailingTextreads differently on the two platforms, and there's no prop or class to change it:ListItemstyles the trailing slot aslabelSmall(11sp), so a "Resume" label or a score looks like a footnote next to the 16sp headline. iOS draws it at 17pt.What this does
Two props on
native:list-item. Unset keeps each platform's default, so nothing changes for existing screens. Set, both platforms draw the same thing:trailingTextStyle="headline"— trailing text at headline size (the iOS look).label— a small caption (the Material look).trailingAlign="center"— leading and trailing slots vertically centred (the iOS look; on Android the row then uses two-line spacing).top— top-aligned (the Material look).Fluent builders
->trailingTextStyle()/->trailingAlign()validate the values. Tests intests/ListItemTrailingTest.php. Docs (edge-components/list-item) need two lines for the new props — happy to PR that too.Screenshots (same Blade)
Android — default vs
trailingTextStyle="headline" trailingAlign="center":iOS —
trailingAlign="top" trailingTextStyle="label"vs default (unchanged):