Skip to content

fix(Fluent): restore btn-xs sizing overridden by theme .btn rule - #1106

Merged
ArgoZhang merged 5 commits into
BootstrapBlazor:masterfrom
h2ls:fix/fluent-theme-btn-xs
Aug 25, 2026
Merged

fix(Fluent): restore btn-xs sizing overridden by theme .btn rule#1106
ArgoZhang merged 5 commits into
BootstrapBlazor:masterfrom
h2ls:fix/fluent-theme-btn-xs

Conversation

@h2ls

@h2ls h2ls commented Aug 24, 2026

Copy link
Copy Markdown
Contributor

Link issues

fixes #1105

Summary By Copilot

Fluent 主题的 .btn 规则(--bs-btn-font-size / --bs-btn-line-height / --bs-btn-padding-y)与组件库 .btn-xs 同为单类选择器、优先级相同,但主题后加载,导致 TableCellButton(默认 btn-xs)的尺寸变量被覆盖成正常按钮大小。本 PR 在主题 .btn 规则之后补充 .btn-xs, .btn-group-xs > .btn 规则,恢复组件库默认值($bs-btn-xs-* 与 Bootstrap 默认 line-height 1.5),同步更新 fluent.cssfluent.min.css

Regression?

  • Yes
  • No

Risk

  • High
  • Medium
  • Low

仅新增一条 .btn-xs 变量恢复规则,不影响其他按钮尺寸。

Verification

  • Manual (required)
  • Automated

已在应用层 site.css 以相同规则验证:xs 按钮恢复小尺寸。

Packaging changes reviewed?

  • Yes
  • No
  • N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • Merge the latest code from the main branch

Summary by Sourcery

Restore Fluent theme sizing variables for extra-small buttons overridden by the theme’s general button styles.

Bug Fixes:

  • Restore extra-small button sizing in the Fluent theme so components such as TableCellButton retain their intended dimensions.

Chores:

  • Update the Fluent theme assets to include the corrected extra-small button styles.

Copilot AI lite review requested due to automatic review settings August 24, 2026 06:56
@bb-auto

bb-auto Bot commented Aug 24, 2026

Copy link
Copy Markdown

Thanks for your PR, @h2ls. Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

@sourcery-ai

sourcery-ai Bot commented Aug 24, 2026

Copy link
Copy Markdown
Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adds a Fluent theme rule to explicitly restore extra-small button (.btn-xs) sizing variables that were being overridden by the theme’s general .btn rule, ensuring TableCellButton and other xs buttons keep their intended compact size.

Flow diagram for Fluent extra-small button sizing override

flowchart TD
    A[TableCellButton uses btn-xs] --> B[Fluent theme loads general .btn rule]
    B --> C[Equal selector specificity causes xs sizing to be overridden]
    C --> D[Later .btn-xs and .btn-group-xs > .btn rule restores xs variables]
    D --> E[Compact extra-small button size]
Loading

File-Level Changes

Change Details Files
Restore extra-small button (.btn-xs) sizing in the Fluent theme so it is not overridden by the generic .btn rule.
  • Add a post-.btn rule for .btn-xs and .btn-group-xs > .btn to reapply BootstrapBlazor xs padding, font size, and line-height variables
  • Document in comments why the rule is needed, referencing TableCellButton, variable sources, and specificity/load-order behavior
  • Synchronize the change into the minified fluent.min.css asset
src/components/BootstrapBlazor.Theme.Fluent/wwwroot/fluent.css
src/components/BootstrapBlazor.Theme.Fluent/wwwroot/fluent.min.css

Assessment against linked issues

Issue Objective Addressed Explanation
#1105 Ensure Fluent theme styles do not override the BootstrapBlazor .btn-xs and .btn-group-xs > .btn sizing variables, so TableCellButton renders at the intended extra-small size.
#1105 Apply the fix consistently to both the readable and minified Fluent theme CSS assets.

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@bb-auto bb-auto Bot added the bug Something isn't working label Aug 24, 2026
@bb-auto
bb-auto Bot requested a review from ArgoZhang August 24, 2026 06:56
@bb-auto bb-auto Bot added this to the v10.0.0 milestone Aug 24, 2026

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've reviewed your changes and they look great!


Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Restores extra-small button sizing in the Fluent theme for components such as TableCellButton.

Changes:

  • Adds .btn-xs and .btn-group-xs > .btn sizing overrides.
  • Synchronizes formatted and minified Fluent stylesheets.

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.

File Description
src/components/BootstrapBlazor.Theme.Fluent/wwwroot/fluent.min.css Adds the minified extra-small button override.
src/components/BootstrapBlazor.Theme.Fluent/wwwroot/fluent.css Adds readable extra-small button variables.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

# Conflicts:
#	src/components/BootstrapBlazor.Theme.Fluent/wwwroot/fluent.min.css
@h2ls
h2ls force-pushed the fix/fluent-theme-btn-xs branch from 401d3fc to 5188672 Compare August 25, 2026 03:20
@ArgoZhang
ArgoZhang merged commit 6154af1 into BootstrapBlazor:master Aug 25, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(Fluent): 主题 .btn 规则覆盖组件库 .btn-xs 尺寸变量导致 TableCellButton 变大

3 participants