refactor(icon-button): update component styles

IgniteUI / igniteui-webcomponents

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

https://www.infragistics.com/products/ignite-ui-web-components

Other

113 stars 2 forks source link

refactor(icon-button): update component styles #1228

Closed SisIvanova closed 2 weeks ago

SisIvanova commented 4 weeks ago

Closes #1165

Theming Package for testing - IgniteUI/igniteui-theming/pull/274

sbayreva commented 4 weeks ago

Fluent

(Light Mode ) Flat , active state icon button - when inspected the foreground says it is Primary 800 but actually there is no visible change of the foreground itself. (Tested with Figma color picker)

(Dark Mode ) Flat , active state icon button - when inspected the foreground says it is Primary 100 but actually there is no visible change of the foreground itself. (Tested with Figma color picker)
(Light Mode ) Flat button is on hover - there is no visible change for the foreground, even though when the element is inspected it says that the foreground is primary 600. (Tested with Figma color picker)
(Dark Mode ) Flat button is on hover - there is no visible change for the foreground, even though when the element is inspected it says that the foreground is primary 200. (Tested with Figma color picker)

sbayreva commented 3 weeks ago

Indigo

(Dark Mode) Contained icon button- the focus border should be primary 400 with 50% opacity not white with 20% opacity as it is now
(Light Mode) Outlined icon button- On Hover and Active states the color of the border should be grays. 600. There is a visual change but when inspected it says grays. 500

andiesm813 commented 3 weeks ago

Indigo icon buttons looked good to me in light and dark modes. ✅✅

imincheva commented 3 weeks ago

Bootstrap

Outlined Button: I noticed a discrepancy in terms of the border color upon triggering active + focused state. In the first example I focus the button with tab and than hold space to trigger the active state. In this case the border color matches the background color which is by design. In the second example I focus the button with tab and than click with the mouse to trigger the active state. Here the border color doesn't match the background color, which isn't correct.

I tested the same in Angular and I believe the behaviour there is accurate, no matter which combination is used to trigger active & focused state

sbayreva commented 3 weeks ago

Fluent

(Light Mode ) Flat , active state icon button - when inspected the foreground says it is Primary 800 but actually there is no visible change of the foreground itself. (Tested with Figma color picker)

(Dark Mode ) Flat , active state icon button - when inspected the foreground says it is Primary 100 but actually there is no visible change of the foreground itself. (Tested with Figma color picker)

(Light Mode ) Flat button is on hover - there is no visible change for the foreground, even though when the element is inspected it says that the foreground is primary 600. (Tested with Figma color picker)

(Dark Mode ) Flat button is on hover - there is no visible change for the foreground, even though when the element is inspected it says that the foreground is primary 200. (Tested with Figma color picker)

All applied and verified!

sbayreva commented 3 weeks ago

Indigo

(Dark Mode) Contained icon button- the focus border should be primary 400 with 50% opacity not white with 20% opacity as it is now

(Light Mode) Outlined icon button- On Hover and Active states the color of the border should be grays. 600. There is a visual change but when inspected it says grays. 500

All applied and verified!