refactor(button/icon-button/button-group): style updates

[SisIvanova]

Related to IgniteUI/igniteui-webcomponents/issues/1107

Button Handoff

Button Group Handoff

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]

@didimmova @AnjiManova Please verify if the width of the buttons in all types is correct.

[didimmova]

In Bootstrap button group a button with focus-visible + active has foreground of primary-800, I think it should be white. It's triggered with the keyboard by navigating with tab to the desired button and clicking space on it. We should fix it also in the other themes if needed.

[AnjiManova]

@didimmova @AnjiManova Please verify if the width of the buttons in all types is correct.

The widths of all button types look fine to me. (No matter the type, if the content is the same, the widths are equal.)

[AnjiManova]

Fluent
I know that the focus in this PR is not Fluent, but it was mentioned that some changes have also been made there, so I checked it.

Button Group
https://github.com/IgniteUI/igniteui-angular/assets/127843837/662996be-a147-4ebf-b2c7-1c0edfd43af4
as we discussed, the focused border shouldn't stay after interaction with the button. Applicable for Light and Dark mode.

Bootstrap
Same thing as in Fluent.

Material
Same thing as in Fluent and Bootstrap.

Same issue in Buttons for all themes.

[SisIvanova]

@didimmova @AnjiManova Sorry for the inconvenience but please verify again the focus-visible / focus-visible + active / focus-visible + hover states in all themes for both button and button group components.

[imincheva]

Button Group

• Material: Min-width of the button group button should be 42px;
• Fluent: Min-width of the button group button should be 42px;
• Bootstrap: Min-width of the button group button should be 42px;

[AnjiManova]

All kits have been reviewed, and there are no comments. Every comment is implemented.

[sbayreva]

Material

1. Focused and Hover state of the contained button in Light and Dark Mode - the elevation should be 8

[SisIvanova]

Material

1. Focused and Hover state of the contained button in Light and Dark Mode - the elevation should be 8

The elevation is 8.