feat(Theme): add Fluent UI theme - #8345
Open
h2ls wants to merge 23 commits into
Open
Conversation
- add fluent.min.css theme pack ported from microsoft/fluentui (Fluent 2) design tokens - register Fluent UI in the theme chooser with a site chrome companion css - fix theme list fixed height clipping the 6th theme item
Contributor
Reviewer's GuideAdds a new Fluent UI theme for BootstrapBlazor, wires it into the demo app as an optional theme alongside Motronic, and updates the theme chooser, documentation, and tests to validate CSS variables and flyout behavior. Sequence diagram for the updated ThemeChooser behaviorsequenceDiagram
actor User
participant ThemeButton as ThemeChooserButton
participant ThemeList as ThemeListPanel
participant Document
User ->> ThemeButton: click
ThemeButton ->> ThemeList: classList.toggle(is-open)
alt Close button exists
User ->> ThemeList: click .btn-close
ThemeList ->> ThemeList: classList.remove(is-open)
end
User ->> ThemeList: click .theme-item
ThemeList ->> ThemeList: classList.remove(is-open)
ThemeButton ->> Document: EventHandler.on(click, outsideClick)
Note over Document,ThemeList: outsideClick handler stored as el.themeOutsideClick
User ->> Document: click outside ThemeButton & ThemeList
Document ->> ThemeList: classList.remove(is-open)
ThemeButton ->> ThemeButton: dispose(id)
ThemeButton ->> ThemeButton: EventHandler.off(click)
ThemeButton ->> Document: EventHandler.off(click, el.themeOutsideClick)
ThemeButton ->> ThemeButton: delete el.themeOutsideClick
ThemeButton ->> ThemeList: EventHandler.off(click)
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a new Fluent UI theme to BootstrapBlazor (including light/dark tokens and component-specific variable overrides), wires it into the demo site’s theme switching flow, and introduces regression tests to guard theme CSS variable integrity and minified asset quality.
Changes:
- Add Fluent UI theme assets (
fluent.css+fluent.min.css) with broad Bootstrap/BootstrapBlazor token + component coverage. - Update the demo site to treat themes as optional (Motronic no longer globally loaded), register Fluent as a selectable theme, and expand the Theme page with a component preview wall.
- Add Sass/unit tests validating Fluent theme semantic variables, var() references, minified banner preservation, and minified/source variable-set parity.
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| test/UniTest.Sass/FluentThemeTest.cs | Adds automated checks for Fluent theme CSS correctness and minified asset expectations |
| src/BootstrapBlazor/wwwroot/css/fluent.css | Adds readable Fluent UI theme source (tokens + component overrides) |
| src/BootstrapBlazor/wwwroot/css/fluent.min.css | Adds minified Fluent UI theme with preserved banner header |
| src/BootstrapBlazor.Server/wwwroot/css/fluent.css | Adds demo-site-only Fluent styling variables (site appearance overrides) |
| src/BootstrapBlazor.Server/Locales/zh-CN.json | Adds/updates localized strings for Install/Theme pages to reference Fluent theme |
| src/BootstrapBlazor.Server/Locales/en-US.json | Adds/updates localized strings for Install/Theme pages to reference Fluent theme |
| src/BootstrapBlazor.Server/Components/Pages/Theme.razor.css | Fixes Table preview sizing inside the new preview wall |
| src/BootstrapBlazor.Server/Components/Pages/Theme.razor | Updates theme docs and adds a large component preview wall |
| src/BootstrapBlazor.Server/Components/Pages/Install.razor | Adds Fluent theme link snippet to install instructions |
| src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js | Improves chooser UX: close-on-select, outside-click close, safer element checks |
| src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css | Improves chooser mobile behavior (max-height, scrolling, sticky header) |
| src/BootstrapBlazor.Server/Components/App.razor | Stops globally loading Motronic theme CSS |
| src/BootstrapBlazor.Server/appsettings.json | Registers Fluent and Motronic as optional selectable themes |
| docs/fluentui-parity-review.md | Adds a Fluent parity review/report and execution notes |
Files not reviewed (1)
- src/BootstrapBlazor/wwwroot/css/fluent.min.css: Generated file
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+146
to
+148
| var banner = BannerRegex().Match(source).Value; | ||
| var body = min[banner.Length..]; | ||
|
|
Comment on lines
+149
to
+152
| // 正文为单行(不存在多行规则)且平均行长远超可读版本 | ||
| var bodyLines = body.Split('\n', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries); | ||
| Assert.Single(bodyLines); | ||
| Assert.True(bodyLines[0].Length > 10000, "压缩文件正文疑似未被压缩"); |
Comment on lines
+37
to
+41
| <h4>Component preview</h4> | ||
|
|
||
| <p>Sections below exercise the core components with minimal parameters. Use the theme button at the bottom-right corner of this site to switch between Fluent UI, Motronic and Bootstrap in light or dark mode and eyeball the result in one place.</p> | ||
|
|
||
| <h4>Buttons</h4> |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8345 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 771 771
Lines 34575 34575
=========================================
Hits 34575 34575
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 2 issues, and left some high level feedback:
- Theme.razor introduces a large amount of hardcoded English UI text (e.g. section titles and descriptions) alongside localized strings; consider moving these into the existing localization resources to keep the page fully localizable.
- ThemeChooser.razor.js dispose still queries
.theme-list .btn-closebut does not detach its handler anymore; either remove the unusedcloselookup or consistently unregister any remaining listeners to keep the cleanup logic straightforward.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Theme.razor introduces a large amount of hardcoded English UI text (e.g. section titles and descriptions) alongside localized strings; consider moving these into the existing localization resources to keep the page fully localizable.
- ThemeChooser.razor.js dispose still queries `.theme-list .btn-close` but does not detach its handler anymore; either remove the unused `close` lookup or consistently unregister any remaining listeners to keep the cleanup logic straightforward.
## Individual Comments
### Comment 1
<location path="src/BootstrapBlazor.Server/Components/Pages/Theme.razor" line_range="251" />
<code_context>
+
+<div class="row g-3">
+ <div class="col-12 col-md-4">
+ <DateTimePicker TValue="DateTime" Value="DateTime.Today" />
+ </div>
+ <div class="col-12 col-md-4">
</code_context>
<issue_to_address>
**issue (bug_risk):** Bind the DateTimePicker Value as a C# expression rather than a string literal.
`Value="DateTime.Today"` is treated as a string, not a `DateTime`. Use `Value="@DateTime.Today"` (or bind to a `DateTime` property) so the picker receives the correct type and avoids compile/runtime binding errors.
</issue_to_address>
### Comment 2
<location path="docs/fluentui-parity-review.md" line_range="176" />
<code_context>
+|---|---|---|---|
+| Icon / SvgIcon / BootstrapBlazorIcon | FluentIcon | ✅ | Fluent 图标体系（Fluent System Icons）是独立资产包 |
+| ThemeProvider | FluentDesignTheme / FluentDesignSystemProvider | 🟡 | 都能切明暗主题；Fluent 的设计令牌体系更完整 |
+| Dropzone（DragDrap） | FluentDragContainer / FluentDropZone | 🟡 | 都是拖放容器，交互模型不同 |
+| Logout / LogoutLink | FluentProfileMenu | 🟡 | |
+| FullScreen / GoTop / Affix / Transition | — | ❌ | |
</code_context>
<issue_to_address>
**issue (typo):** Typo in the term "DragDrap" — should likely be "DragDrop".
In the Dropzone row, correct the label from "DragDrap" to "DragDrop" to match the drag-and-drop terminology and avoid confusion.
```suggestion
| Dropzone（DragDrop） | FluentDragContainer / FluentDropZone | 🟡 | 都是拖放容器，交互模型不同 |
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
|
|
||
| <div class="row g-3"> | ||
| <div class="col-12 col-md-4"> | ||
| <DateTimePicker TValue="DateTime" Value="DateTime.Today" /> |
Contributor
There was a problem hiding this comment.
issue (bug_risk): Bind the DateTimePicker Value as a C# expression rather than a string literal.
Value="DateTime.Today" is treated as a string, not a DateTime. Use Value="@DateTime.Today" (or bind to a DateTime property) so the picker receives the correct type and avoids compile/runtime binding errors.
| |---|---|---|---| | ||
| | Icon / SvgIcon / BootstrapBlazorIcon | FluentIcon | ✅ | Fluent 图标体系（Fluent System Icons）是独立资产包 | | ||
| | ThemeProvider | FluentDesignTheme / FluentDesignSystemProvider | 🟡 | 都能切明暗主题；Fluent 的设计令牌体系更完整 | | ||
| | Dropzone（DragDrap） | FluentDragContainer / FluentDropZone | 🟡 | 都是拖放容器，交互模型不同 | |
Contributor
There was a problem hiding this comment.
issue (typo): Typo in the term "DragDrap" — should likely be "DragDrop".
In the Dropzone row, correct the label from "DragDrap" to "DragDrop" to match the drag-and-drop terminology and avoid confusion.
Suggested change
| | Dropzone（DragDrap） | FluentDragContainer / FluentDropZone | 🟡 | 都是拖放容器，交互模型不同 | | |
| | Dropzone（DragDrop） | FluentDragContainer / FluentDropZone | 🟡 | 都是拖放容器，交互模型不同 | |
…yles - remove global .navbar foreground override: the later-loaded theme won equal-specificity ties and painted dark text on brand-colored navbars - define explicit --bs-btn-color on .btn-primary/.btn-success/.btn-danger/ .btn-dark so a consumer re-pointing the foreground cannot end up stranded on the theme's brand fill - DemoBlock: replace hard-coded #d3dce6/#409eff with theme tokens - Header: invert fill-less repo svg icons to white on the colored header - regenerate fluent.min.css
…cing tokens - base typography 14px/20px (fontSizeBase300/lineHeightBase300) - button/input/select 32px medium density (small 24px, large 40px) - checkbox/radio 16px indicator with Fluent label gap - dialog 24px surface padding, card 12px, alert 36px row height - pagination/list-group/dropdown density aligned to spacing scale
- route .form-control padding through --bb-form-control-padding and add min-height 32/24/40 so the 32px control target is actually reached - rework checkbox/radio metrics with specificity-free :where() exclusions (size variants, form-check-reverse, is-label, table-excel cells stay intact) - drive pagination via --bb-pagination-link-padding with breakpoint mirrors and re-point the active page from legacy blue to brand - give SweetAlert popup a themed surface (dark white-on-white fix) - add the dark outline button family, dark primary/secondary recipes and brand100 accents for checked/interactive states across components - set modal header/footer padding directly and re-calibrate form-footer - mirror the bundle exclusion chain on input hover; honor reduced-motion - sync --bb-height/select/multi-select triggers to the 32px rhythm - fix secondary-surface invisibility in ClockPicker/Circle/Checkbox and assorted token-ramp/comment corrections; extend FluentThemeTest contract
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Link issues
fixes #8344
Summary By Copilot
新增一套完整的 Fluent UI 主题，主要变更：
fluent.css/fluent.min.css，覆盖 Fluent UI 设计令牌（圆角、阴影、色彩、间距）与全部组件样式适配Theme.razor页面新增 Fluent UI 主题入口，并提供组件预览墙（component preview wall）FluentThemeTest.cs做 CSS 变量回归校验Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Add Fluent UI as a selectable theme and demonstrate its styling across the component library.
New Features:
Bug Fixes:
Enhancements:
Documentation: