Skip to content

Conversation

@SisIvanova
Copy link
Collaborator

Closes #15267

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them

@SisIvanova SisIvanova added the ❌ status: awaiting-test PRs awaiting manual verification label Mar 26, 2025
@adrianptrv
Copy link
Contributor

It seems that the Button Group theme function parameters are not working. Their values get declared, but it appears that the current theme variables have higher specificity than the parameter vars, and they always get applied instead of them.

Another issue I found is that when using the Bootstrap theme, if a button is focused and then hovered over, its background color stays with the “focus” color and doesn’t change to the hover color. The same issue occurs if the button is also selected.
It happens in both the light and dark Bootstrap themes, but it works fine in master.

IgniteuiDevDemos.5.mp4

@adrianptrv
Copy link
Contributor

I noticed that when we apply the Indigo light theme, the --ig-theme variable is set to "material" instead of "indigo." As a result, the button text appears like the Material one, and the Material layer is applied instead of the Indigo one when focusing on a button.
Screenshot 2025-03-27 at 12 52 00

Screenshot 2025-03-27 at 12 33 28

I think it's coming from the meta lines in the button group light schema in the theming repo:
Screenshot 2025-03-27 at 12 38 24

Screenshot 2025-03-27 at 12 39 39

https://github.com/IgniteUI/igniteui-theming/blob/bc4d955d8a5817b56c60327bfcb06b0aaf3c538d/sass/themes/schemas/components/light/_button-group.scss#L1007


Also the $item-hover-border-color parameter doesn’t seem to work. Its value is declared, but it isn’t applied to the element when hovering over it. The default border color remains applied, even on hover.
Screenshot 2025-03-27 at 11 58 42

On master it's working fine.

@SisIvanova
Copy link
Collaborator Author

SisIvanova commented Mar 27, 2025

I noticed that when we apply the Indigo light theme, the --ig-theme variable is set to "material" instead of "indigo." As a result, the button text appears like the Material one, and the Material layer is applied instead of the Indigo one when focusing on a button. Screenshot 2025-03-27 at 12 52 00

Screenshot 2025-03-27 at 12 33 28

I think it's coming from the meta lines in the button group light schema in the theming repo: Screenshot 2025-03-27 at 12 38 24

Screenshot 2025-03-27 at 12 39 39

This issue is fixed in a separate PR - IgniteUI/igniteui-theming#402

@adrianptrv adrianptrv added ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification labels Mar 27, 2025
@simeonoff simeonoff merged commit 0099cdd into simeonoff/scoped-styles Mar 31, 2025
@simeonoff simeonoff deleted the sivanova/btn-group-scoped-styles branch March 31, 2025 07:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

button-group refactoring ✨ themes ✅ status: verified Applies to PRs that have passed manual verification

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Button Group]: Bundle theme styles to component

4 participants