refactor(icon-button): update component styles

[SisIvanova]

Closes #14117

Additional information (check all that apply):

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

Checklist:

• [x] 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

[sbayreva]

Fluent

1. This is small size flat icon button and in a focused state. I think it is because of the size of the icon. It is not 18px x 18px as in the UI kit.

[SisIvanova]

Fluent

1. This is small size flat icon button and in a focused state. I think it is because of the size of the icon. It is not 18px x 18px as in the UI kit.

This particular example uses a Font Awesome icon instead of Material icons. Unfortunately, users may need to add extra styles for the buttons when using icons from different families.

[sbayreva]

Indigo

1. The size of the border radius of the buttons should corresponds to their size:

• Small button size 24px - border radius 24px
• Medium button size 28px - border radius 28px
• Large button size 32px - border radius 32px

2. Size small, flat button idle state. The icon is cut because it is not 18px x 18px, and it is the same icon as in Fluent, I guess again the user should add extra styles?

4. Size small, flat button focused state. Again the size of the icon:

5.Small size, outlined button in idle state. Here the size of the icon is 16px x 16px as in the UI Kit but still it is cut:

6. 5. I see some size problem s with the FAB icon buttons: The size of the FAB icon button should be: small 28px x 28px; medium 32px x 32px; large 36px x 36px

@andiesm813 , please take a look at the icon buttons.

[SisIvanova]

Indigo

1. The size of the border radius of the buttons should corresponds to their size:

• Small button size 24px - border radius 24px
• Medium button size 28px - border radius 28px
• Large button size 32px - border radius 32px

2. Size small, flat button idle state. The icon is cut because it is not 18px x 18px, and it is the same icon as in Fluent, I guess again the user should add extra styles?

4. Size small, flat button focused state. Again the size of the icon:

5.Small size, outlined button in idle state. Here the size of the icon is 16px x 16px as in the UI Kit but still it is cut:

6. 5. I see some size problem s with the FAB icon buttons: The size of the FAB icon button should be: small 28px x 28px; medium 32px x 32px; large 36px x 36px

@andiesm813 , please take a look at the icon buttons.

Point 1 - There will be no visual changes regardless if the border-radius is 24px, 28px, or 32px. The button will be circle with all three values. Points 2 and 4 are sample issues as already explained. Point 5 - This is an SVG icon so this may be the issue again. However, I see the size of the icon and the size of the button are correct and implemented as in the UI kit so there is nothing more I can do. Point 6 - This PR has no changes over the fab buttons in none of the themes. This PR updated only the Icon Button component.

[andiesm813]

@sbayreva i saw the same issues as you did, no new ones... and i read all the explanations from @SisIvanova .... All clear!

About point 5, the icon is cut because of the shape of the icon. Originally, in our AppBuilder design system, we did not use icons inside buttons so small, but i had to make an exception for the UI Kit. Is it possible to make a change in the Indigo UI Kit so that small icon buttons and buttons use a "small" icon rather than "medium"? this would fix the issue. @sdimchevski

[imincheva]

Bootstrap

• Might be irrelevant, but the vars used in active state are called active-background and active-foreground, except for the one used on the border, which is called focus-border-color (this color isn't applied in focused state, because it's different).
• Might be irrelevant, but only the contained icon button has ripple on click, IMO it should be removed

[SisIvanova]

Bootstrap

• Might be irrelevant, but the vars used in active state are called active-background and active-foreground, except for the one used on the border, which is called focus-border-color (this color isn't applied in focused state, because it's different).
• Might be irrelevant, but only the contained icon button has ripple on click, IMO it should be removed

• If the color of the border is right, you don't have to worry about the variable name. We use one and the same variables for the different themes and currently don't have properties for the border-color in all states (idle/hover/focus/active/etc).
• The ripple is a separate directive that is just applied to the button sample. I will remove it for your convenience.