microsoft / microsoft/react-native-gallery
Replicate WinUI3 Gallery's design guidance sections and rebuild in JS as appropriate
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 257
- Forks
- 57
- Avg merge
- 18h 19m
- Merged PRs (30d)
- 10
Description
From https://github.com/microsoft/react-native-gallery/issues/405
The design guidance section of WinUI 3's gallery is super interesting. It's a great place to get the brush names for building pages and controls. It's very Fluent, by design. Having coverage for how to navigate that as an RNW app would be helpful.
Accessibility
The most useful section would be Accessibility. It covers screen readers, keyboard support, and has a color contrast checker (which is redundant if we just point folks to Accessibility Insights). "How do I make my RNW accessible?" is a topic we can and should cover in Gallery.
Typography
This page could be replicated... but we don't have the Style types that folks can copy. It'd just be design guidance. Unless we incorporate #425 and it has styles we can guide people with.
Iconography
There isn't an intrinsic FontIcon type like there is in XAML. But you can get good usage out of the icon font without having that simple wrapper. This page would more be a glyph finder, in app instead of here: https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-ui-symbol-font
Colors
This is a very useful page for finding brush colors, because XAML's brush naming patterns are not always obvious. What I think it means for an RNW app is "How do I effectively use PlatformColor?"
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing issue #405 and the referenced WinUI 3 design guidance, then inspect the existing Gallery structure to locate where these sections would belong. Consider how the issue's Accessibility, Typography, Iconography, and Colors topics map to an RNW app, including the dependency on #425. Done means the agreed guidance sections are represented in the Gallery with the RNW-specific focus described here.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- accessibility, design, documentation
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100