Skip to content

feat(react-app-launcher): the app launcher components and stories - #682

Open
Gevik Babakhani (blendsdk) wants to merge 2 commits into
microsoft:mainfrom
blendsdk:feat/react-app-launcher-implementation
Open

Gevik Babakhani (blendsdk) wants to merge 2 commits into
microsoft:mainfrom
blendsdk:feat/react-app-launcher-implementation

Conversation

@blendsdk

@blendsdk Gevik Babakhani (blendsdk) commented Oct 15, 2026 •

Copy link
Copy Markdown

Ports the app launcher implementation into the bootstrapped package. Builds on the bootstrap in #681.

What lands.

  • The seven blocks: AppLauncher (docked popover shell), AppLauncherTrigger (the waffle button), AppLauncherSearch (SearchBox with the Escape chain), AppLauncherSection, AppLauncherGrid, AppLauncherList, AppLauncherItem (tile or row).
  • Default and full docking, the trigger slot (toolbar/drawer placement), the pinned search, and the disabledFocusable item option.
  • The package README (install, quick start, blocks and props, composition patterns, behavior notes, "Texts and localization").

Storybook mapping. Twelve stories trace the documented behaviors:

Story What it shows
Kitchen sink Search + recent rows + pinned tiles + all-apps grid
Docked to the app bar Default docking under a top bar
Full dock Full-height docking with 40 tiles scrolling internally
Trigger-anchored list A list floating below its trigger, end-aligned
Toolbar trigger The waffle as one command of a drawer toolbar
Disabled items disabled beside disabledFocusable — same muted look, different reachability
Icon treatments Monochrome Fluent icons, colorful logos, long labels
Search states Filtering, empty state, the clear button, the Escape chain (tiles)
Controlled open Close-on-activate and the recent list updating on reopen
Item actions Activating a tile or row fires the item's onClick, shown in a live activation log
Localization Every string passed as a prop — German chrome, and Armenian chrome with localized app names
Branded bars The launcher on application bars in several brand colors

Test port. The 37 tests run under the repository's Jest runner and Testing Library. The port was mechanical: render/fireEvent/screen and Jest's own spies. The assertions are DOM-level (attributes, focus, event effects), not framework-specific; visual states are not unit-tested (no layout engine) and are covered by the stories.

Design decisions. The rationale behind the token choices, the enabled-skin guards, the two disabled flavors, the Escape chain, the pinned search (including the surface-padding compensation), the docking radii, the trigger slot and the text model is documented per decision in the dossier; summarize the relevant part here when reviewers ask.

Refs #680

Generated through the repository's @fluentui-contrib/nx-plugin:library generator with @blendsdk as owner; CODEOWNERS and tsconfig paths included. Implementation follows in a second PR.

Refs microsoft#680
@blendsdk
Gevik Babakhani (blendsdk) requested a review from a team as a code owner October 15, 2026 14:34
@blendsdk
Gevik Babakhani (blendsdk) force-pushed the feat/react-app-launcher-implementation branch 4 times, most recently from c8b965f to 12bb770 Compare October 15, 2026 15:23
@blendsdk

Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree

Ports the seven blocks, the 37 tests and the ten Storybook stories into the bootstrapped package, together with the package README.

Refs microsoft#680
@blendsdk
Gevik Babakhani (blendsdk) force-pushed the feat/react-app-launcher-implementation branch from 12bb770 to 0ef9f1e Compare October 15, 2026 15:44

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants