microsoft / microsoft/react-native-gallery

Replicate WinUI3 Gallery's design guidance sections and rebuild in JS as appropriate

Open
#437 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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

image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.