microsoft / microsoft/fluentui-react-native
Components: Missing components
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 179
- Avg merge
- 16h 17m
- Merged PRs (30d)
- 30
Description
Summary
Track and order the 32 canonical Fluent Flex components that are still missing from the agentic library, with one implementation task and a current blocker assessment for each. The work closes the catalog gap without hiding prerequisites: 14 components first need local specs, while the remaining waves depend chiefly on overlay infrastructure, roving focus, status icons, or React Native contract retargeting.
Observed. The canonical catalog contains 50 components. 18 are generated.
The gap is 32, of which 18 already have a staged spec folder in this repository and
14 have no local presence at all.
Goal
Enumerate, scope, and order every component in the canonical Fluent Flex catalog that
packages/agentic/components has not generated, one issue-ready task per component,
with each recorded blocker reassessed against current repository evidence.
Stage
Stage 0 for the inclusion rules and the count; Stage 2 for waves 1 and 2; Stage 3 for
waves 3 and 4.
Canonical source
Observed. The catalog is x3-design/fluent-design, default branch main, HEAD
d334acf
at retrieval on 2026-08-20. The authoritative enumeration is
component-map.yaml,
which contains exactly 50 component keys, each pointing at
plugins/components/skills/<name>/SKILL.md. Tier (atom / molecule), platform
coverage, and the component description come from
components-index/SKILL.md.
Inclusion and exclusion rules
These rules were fixed before the gap list was produced, so the count is derived
rather than curated.
Included
- Catalog membership decides the universe. The universe is exactly the 50 keys in
upstreamcomponent-map.yamlat the pinned SHA. Nothing is added from Fluent UI
React v9, from the legacy FURN catalogs, or from judgement. - "Missing" means no directory under
src/componentswhose
name matches the upstream kebab-case key. Having a staged spec under
specs/does not count as
generated. - Upstream first-class entries get their own task, even when they look like a
subcomponent of another entry. Upstream catalogslist-item,listbox-item,
menu-item, andnav-itemas independent components, sonav-itemis its own task
rather than being folded intonav. - Upstream first-class entries get their own task, even when they look like a
variant of another entry.destructive-button,toggle-button, and
split-buttonare separate catalog entries. Each task must resolve, as an explicit
decision, whether FURN implements it as a distinct component or as an axis on
button; it does not get silently merged here. - Components that need native or platform host work stay in scope.
scrollbarand
selectare kept as tasks in wave 4 with a decision gate, rather than dropped,
because dropping them silently would remove them from the catalog reconciliation.
Excluded
- FURN-only primitives.
checkbox-indicator,compound-item-layout,
focus-visual,icon, andlayout-stable-texthave no upstream catalog entry.
They are implementation building blocks, not gap items, and get no task here.
Upstream has no primitives tier at all; it classifies components only asatomor
molecule. - Sub-parts that upstream does not catalog separately. Anatomy elements described
inside another component's spec - a breadcrumb item, a menu section header, a
toolbar separator, a card header - are owned by their parent component's task and do
not get their own file. If upstream later promotes one to a catalog key, it becomes a
task then. - Aliases. No upstream key is an alias of another; every key has its own
SKILL.md. Should an alias appear, it would be folded into the aliased component's
task. - Platform companions. Upstream
mobile/iosandmobile/androidcompanion specs
do not create separate tasks. FURN's agentic library targets Windows and macOS
(platform: react-native (Windows, macOS)in every localSPEC.md), so theweb
companion is the applicable source. Every one of the 50 catalog entries hasweb
coverage, so no entry is excluded on platform grounds. - Speculative additions. Nothing that is not in the catalog appears here.
Cross-cutting proposals live in the workstream README Suggested
Additions section.
Resulting count
50 catalog entries - 18 generated = 32 tasks, listed below and each linked to
exactly one file in this directory.
Catalog reconciliation
Observed. Full mapping of the 50 upstream keys to local state.
| Upstream key | Tier | Local state |
|---|---|---|
accordion |
atom | Generated |
avatar |
atom | Generated |
avatar-group |
molecule | Missing, no local spec |
badge |
atom | Generated |
breadcrumb |
molecule | Missing, spec staged |
button |
atom | Generated (contract drifted from upstream) |
card |
molecule | Generated |
checkbox |
molecule | Generated |
combobox |
molecule | Missing, no local spec |
destructive-button |
atom | Missing, no local spec |
dialog |
molecule | Missing, no local spec |
divider |
atom | Generated |
drawer |
molecule | Missing, spec staged |
dropdown |
molecule | Missing, spec staged |
field |
molecule | Missing, no local spec |
info-label |
molecule | Missing, spec staged |
input |
atom | Generated |
interaction-tag |
molecule | Missing, spec staged |
label |
atom | Missing, spec staged |
link |
atom | Missing, spec staged |
list |
molecule | Missing, spec staged |
list-item |
molecule | Generated |
listbox-item |
atom | Generated |
menu |
molecule | Missing, spec staged |
menu-button |
molecule | Missing, spec staged |
menu-item |
atom | Generated |
message-bar |
molecule | Missing, spec staged |
nav |
molecule | Missing, no local spec |
nav-item |
molecule | Missing, no local spec |
popover |
atom | Missing, spec staged |
progress-bar |
atom | Generated |
radio |
molecule | Generated |
radio-group |
molecule | Missing, spec staged |
scrollbar |
atom | Missing, spec staged |
search-box |
molecule | Missing, no local spec |
select |
atom | Missing, no local spec |
simple-nav |
molecule | Missing, no local spec |
skeleton |
atom | Generated |
spinner |
atom | Generated |
split-button |
atom | Missing, no local spec |
switch |
atom | Generated |
tab |
atom | Generated |
tablist |
molecule | Missing, spec staged |
tag |
atom | Generated |
teaching-popover |
molecule | Missing, no local spec |
textarea |
atom | Missing, spec staged |
toast |
molecule | Missing, no local spec |
toggle-button |
atom | Missing, no local spec |
toolbar |
molecule | Missing, spec staged |
tooltip |
atom | Missing, spec staged |
Reverse gap
Observed. Five local items have no upstream catalog entry:
checkbox-indicator, compound-item-layout, focus-visual, icon, and
layout-stable-text, all under
src/primitives. Per
exclusion rule 1 they are not gap items. Whether they should be public API at all is a
Suggested Addition in the workstream README.
Blocker reassessment
Observed. Every one of the 18 staged specs carries a blockers.md. Reading all 18
shows they fall into three classes:
| Class | Meaning | Components |
|---|---|---|
| A - Scope artifact, now stale | Blocked because a dependency did not exist in the package, or because the generation session was forbidden from editing src/index.ts. Those dependencies now exist. |
interaction-tag, list, menu (partly), radio-group (partly), tablist |
| B - Real missing infrastructure | Blocked on overlay/anchoring, focus orchestration, or icon assets that still do not exist. | breadcrumb, drawer, dropdown, info-label, menu, menu-button, message-bar, popover, toolbar, tooltip |
| C - Contract conflict with React Native | The authored contract assumes web-native behavior that React Native does not provide, so the spec must be retargeted before implementation. | label, link, scrollbar, textarea |
Observed examples of class A going stale: specs/list/blockers.md cites the absence
of a ListItem implementation, and src/components/list-item now exists;
specs/tablist/blockers.md cites the absence of a Tab, and src/components/tab now
exists; specs/radio-group/blockers.md cites the absence of a Radio, and
src/components/radio now exists; specs/interaction-tag/blockers.md cites only that
"the task explicitly forbids editing shared exports/manifests/config".
Observed. Several blocker files also describe the package as containing "only
Button and Icon", which was true when they were written and is no longer true.
Every individual task records this and states whether the blocker still holds.
Inferred. Class B collapses to two pieces of shared infrastructure -
popover (overlay, anchoring, light dismiss, focus return) and the
roving-focus decision in focus-zone.md - plus a status-icon source
set for message-bar. Class C requires a spec retargeting pass,
which is a decision in spec-ingestion-and-generation.md.
Waves and ordering
Inferred from the upstream dependency statements in each component's catalog
description and from the local implementation state.
Wave 1 - local component dependencies already generated (11)
No generated component dependency is missing. Five tasks still have a
cross-cutting prerequisite: label, link, and textarea need the
React-Native spec-retargeting decision; list needs the roving-focus decision;
and message-bar owns the shared status-icon source needed by itself, field,
and toast.
| Component | Depends on (local, present) |
|---|---|
avatar-group |
avatar |
destructive-button |
button |
interaction-tag |
tag, avatar, icon |
label |
none |
link |
icon |
list |
list-item, checkbox, radio, divider |
message-bar |
button, icon |
nav-item |
icon, avatar, badge |
search-box |
input, button, icon |
textarea |
input patterns |
toggle-button |
button |
Wave 2 - overlay and popover stack (9)
popover is the keystone; the rest depend on it.
combobox, dialog, drawer,
dropdown, menu, popover,
teaching-popover, toast,
tooltip.
Wave 3 - focus-orchestrated and composed (10)
Depend on wave 2, on the roving-focus decision in focus-zone.md, or
on a wave 1 component.
breadcrumb, field, info-label,
menu-button, nav,
radio-group, simple-nav,
split-button, tablist,
toolbar.
Wave 4 - platform or native decision required (2)
Shared prerequisites
Rather than duplicating infrastructure work into 32 tasks, these are owned elsewhere
and referenced by the tasks that need them:
| Prerequisite | Owner | Needed by |
|---|---|---|
| Pull the 14 absent specs from upstream | spec-ingestion-and-generation.md | all 14 no-local-spec tasks |
| Retarget web-native contracts to React Native | spec-ingestion-and-generation.md | label, link, scrollbar, textarea |
| Overlay, anchoring, light dismiss, focus return | popover |
wave 2 and most of wave 3 |
| Roving focus for agentic components | focus-zone.md | toolbar, tablist, radio-group, nav, simple-nav, menu, list |
| Cross-platform status icon source | message-bar |
message-bar, field, toast |
| Coverage contract each new component must satisfy | component-test-strategy.md | all 32 |
| Readiness level each new component targets | readiness-model.md | all 32 |
| On-device macOS and Windows validation | storybook-e2e.md |
all 32; a documented manual macOS run satisfies beta, required CI gates satisfy production |
Evidence and references
- Upstream catalog:
x3-design/fluent-design@
d334acf,
component-map.yaml,
components-index/SKILL.md. - Generated library:
packages/agentic/components/src/components,
src/primitives,
src/index.ts. - Staged specs and blocker records:
packages/agentic/components/specs. - Legacy catalogs used as comparison implementations:
packages/components,
packages/experimental,
packages/native.
Sources retrieved 2026-08-20.
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 with the pinned upstream component-map.yaml and components-index/SKILL.md, then compare the 50 entries with packages/agentic/components/src/components and specs. Review each staged blockers.md and the catalog reconciliation. Done means all 32 missing components have issue-ready tasks, ordered waves, and reassessed blockers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100