DEV-1211: docs: add Fluent UI theme recipe by qunabu · Pull Request #12292 · handsontable/handsontable

qunabu · 2026-04-08T10:07:50Z

Context

Adds a new Themes recipe that shows how to integrate Handsontable with a Fluent UI-based React app by registering a custom theme and mapping Fluent design tokens.

In response to review feedback, the embedded sandbox and recipe snippet were retuned to look closer to Fluent Table defaults:

Segoe UI font stack.
Fluent-like neutral text/background colors.
Header/background/border tuning.
Roomier cell and menu paddings.

How has this been tested?

npm run docs:lint --prefix docs
Verified CodeSandbox create API response returns sandbox id (zjtfff).
Verified sandbox URL resolves and renders in docs iframe:
- https://codesandbox.io/s/zjtfff?view=preview
Manual docs walkthrough in browser:
- Verified the recipe page renders in React docs.
- Verified iframe no longer shows the SSE deprecation banner.
- Verified embedded sandbox uses updated Fluent-style typography, colors, and spacing.

fluent_ui_recipe_docs_walkthrough.mp4
React sidebar with Fluent UI recipe
Updated Fluent sandbox preview

Types of changes

New feature or improvement (non-breaking change which adds functionality)
Bug fix (non-breaking change which fixes an issue)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Additional language file or change to the existing one (translations)

Related issue(s):

DEV-1211

Affected project(s):

handsontable
@handsontable/angular-wrapper
@handsontable/react-wrapper
@handsontable/vue3

Checklist:

I have reviewed the guidelines about Contributing to Handsontable and I confirm that my code follows the code style of this project.
I have signed the Contributor License Agreement
My change requires a change to the documentation.

[skip changelog]

_{To show artifacts inline, enable in settings.}

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

pkg-pr-new · 2026-04-08T10:10:38Z

More templates

npm i https://pkg.pr.new/handsontable@12292

npm i https://pkg.pr.new/@handsontable/react-wrapper@12292

npm i https://pkg.pr.new/@handsontable/vue3@12292

npm i https://pkg.pr.new/@handsontable/angular-wrapper@12292

commit: a139795

github-actions · 2026-04-08T10:11:54Z

Performance tests results

Artifacts: performance-tests-output (open the workflow run, then download performance-tests-output).

Metric	latest	current	% change	Value change
Total (ms)	15535	15192	-2.2%	-343
System (ms)	580	541	-6.7%	-39
Scripting (ms)	5188	3160	-39.1%	-2028
Rendering (ms)	3156	2615	-17.1%	-541
Loading (ms)	0	0	0%	0
Painting (ms)	591	533	-9.8%	-58
Experience (ms)	—	—	—	—
Idle (ms)	6021	8342	+38.5%	+2321
Min JS heap (kb)	924 kb	924 kb	+0.0%	0
Max JS heap (Mb)	39.7 Mb	53.1 Mb	+33.7%	+13.4 Mb
Min Documents (count)	2	2	+0.0%	0
Max Documents (count)	4	4	+0.0%	0
Min Nodes (count)	20	20	+0.0%	0
Max Nodes (count)	150720	150779	+0.0%	+59
Min Listeners (count)	0	0	0%	0
Max Listeners (count)	153	156	+2.0%	+3

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

github-actions · 2026-04-08T11:01:42Z

✅ Preview documentation is is available now
Current staging version of documentation is available at: https://dev-handsontable-feature-fluent-ui-ha.netlify.app/docs

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

qunabu · 2026-04-08T11:17:40Z

Task linked: DEV-1211 Fluent UI

qunabu · 2026-04-08T11:29:50Z

Testing URL https://dev-handsontable-feature-fluent-ui-ha.netlify.app/docs/react-data-grid/recipes/themes/fluent-ui/

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

qunabu · 2026-04-15T11:29:43Z

@cursoragent the table doesn't look like one on the https://storybooks.fluentui.dev/react/?path=/docs/components-table--docs page

change font
change colors
change font
change paddings

cursor · 2026-04-15T11:29:49Z

Walkthrough

Sandbox now uses a Fluent-like visual baseline (Segoe font, neutral palette, roomier spacing).

Summary

Applied the PR feedback directly by retuning the Fluent recipe demo styling in the embedded sandbox and in the documented theme snippet: updated font stack, foreground/background colors, header/border tones, and cell/menu/input paddings.fluent-ui.md:131-151
Switched the recipe iframe and “Open in CodeSandbox” link to the newly generated tuned sandbox (zjtfff).fluent-ui.md:24-32
Proactively updated the PR description to call out these specific visual fixes and linked artifact evidence.

Testing

✅ npm install --prefix docs && npm run docs:lint --prefix docs``terminal:1-23
✅ Manual browser verification of http://127.0.0.1:4321/docs/react-data-grid/recipes/themes/fluent-ui/ confirmed the embedded sandbox renders and no SSE deprecation banner appears.
✅ Programmatic sandbox creation succeeded for the tuned version ({"sandbox_id":"zjtfff"}).terminal:1-3

Pushed commit: 620647303
PR: #12292

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

GreenFlux

The install command in step 1 uses a pinned version to a canary build. It should just be:

npm install handsontable @handsontable/react-wrapper @fluentui/react-components

docs: add Fluent UI theme recipe

3acfe68

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

docs: embed Fluent UI recipe sandbox

3c9a077

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

docs: switch Fluent recipe to embed preview iframe

1cf04bf

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

qunabu changed the title ~~docs: add Fluent UI theme recipe~~ DEV-1211: docs: add Fluent UI theme recipe Apr 8, 2026

cursoragent and others added 3 commits April 8, 2026 11:32

docs: use stable sandbox URL format for Fluent recipe

8247dd4

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

docs: avoid SSE notice in Fluent recipe iframe

8a6d3eb

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

Merge branch 'develop' into feature/fluent-ui-handsontable-recipe-518e

a139795

qunabu self-assigned this Apr 9, 2026

qunabu added 3 commits April 15, 2026 12:28

Update fluent-ui.md

acb9f32

Update fluent-ui.md

1c00518

Merge branch 'develop' into feature/fluent-ui-handsontable-recipe-518e

5d8c6a9

qunabu marked this pull request as ready for review April 15, 2026 10:53

cursoragent and others added 2 commits April 15, 2026 11:40

docs: tune Fluent recipe table styling

6206473

Co-authored-by: Mateusz Wojczal <qunabu@users.noreply.github.com>

Update fluent-ui.md

d1f7e9b

qunabu requested review from GreenFlux and sl01k April 16, 2026 12:12

GreenFlux requested changes Apr 16, 2026

View reviewed changes

Update fluent-ui.md

8052fa3

qunabu merged commit 89ab9cf into develop Apr 17, 2026
32 checks passed

qunabu deleted the feature/fluent-ui-handsontable-recipe-518e branch April 17, 2026 09:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DEV-1211: docs: add Fluent UI theme recipe#12292

DEV-1211: docs: add Fluent UI theme recipe#12292
qunabu merged 12 commits intodevelopfrom
feature/fluent-ui-handsontable-recipe-518e

qunabu commented Apr 8, 2026 •

edited by cursor Bot

Loading

Uh oh!

pkg-pr-new Bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 8, 2026 •

edited

Loading

Uh oh!

qunabu commented Apr 8, 2026

Uh oh!

qunabu commented Apr 8, 2026

Uh oh!

qunabu commented Apr 15, 2026

Uh oh!

cursor Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

GreenFlux left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

qunabu commented Apr 8, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

How has this been tested?

Types of changes

Related issue(s):

Affected project(s):

Checklist:

Uh oh!

pkg-pr-new Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Performance tests results

Uh oh!

github-actions Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

qunabu commented Apr 8, 2026

Uh oh!

qunabu commented Apr 8, 2026

Uh oh!

qunabu commented Apr 15, 2026

Uh oh!

cursor Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Summary

Uh oh!

GreenFlux left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

qunabu commented Apr 8, 2026 •

edited by cursor Bot

Loading

pkg-pr-new Bot commented Apr 8, 2026 •

edited

Loading

github-actions Bot commented Apr 8, 2026 •

edited

Loading

github-actions Bot commented Apr 8, 2026 •

edited

Loading

cursor Bot commented Apr 15, 2026 •

edited

Loading