Skip to content

fix(query-builder): update fluent query builder buttons styling #17148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
didimmova wants to merge 1 commit into
base: 20.1.x
Choose a base branch
from
+8 −8
Open

fix(query-builder): update fluent query builder buttons styling #17148

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions ...s/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,11 +257,11 @@

@if $variant == 'fluent' {
--background: transparent;
--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
--focus-visible-background: transparent;
--focus-background: transparent;
--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
--focus-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
--active-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-focus});
Comment on lines +260 to +263
Copy link

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

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

For the Fluent variant, this change updates not only the requested hover/focused-hover background, but also --focus-background and --active-background to use the expression color at $alpha-focus (.16). Issue #17080 only calls for updating hover + focused-hover to 8% while keeping other visuals unchanged; setting a non-transparent focus/active background could introduce an unintended visual regression (especially for keyboard focus). Consider keeping --focus-background/--active-background as before (transparent / previous value), or explicitly matching the design spec if focus/active should also change.

Copilot uses AI. Check for mistakes.
--hover-background: hsl(from #{var-get($theme, 'color-expression-group-and')} h s l / #{$alpha-hover});
}

--foreground: #{var-get($theme, 'color-expression-group-and')};
Expand Down Expand Up @@ -307,11 +307,11 @@

@if $variant == 'fluent' {
--background: transparent;
--focus-hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
--focus-hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
--focus-visible-background: transparent;
--focus-background: transparent;
--active-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
--hover-background: #{color($color: 'gray', $variant: if($theme-variant == 'light', 200, 50))};
--focus-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
--active-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-focus});
Comment on lines +310 to +313
Copy link

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

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

Same as the AND button: in Fluent, --focus-background and --active-background are now set to the expression color at $alpha-focus (.16). If the intent of closing #17080 is only to adjust hover/focused-hover backgrounds to 8%, consider reverting focus/active backgrounds to their previous values (or confirming the updated focus/active treatment against the handoff) to avoid an unintended focus/active visual change.

Copilot uses AI. Check for mistakes.
--hover-background: hsl(from #{var-get($theme, 'color-expression-group-or')} h s l / #{$alpha-hover});
}

--foreground: #{var-get($theme, 'color-expression-group-or')};
Expand Down
Loading