Themes: Refactor Checkbox, Switch, and Radio

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

Themes: Refactor Checkbox, Switch, and Radio #1204

Closed simeonoff closed 1 month ago

simeonoff commented 1 month ago

Closes #1160 Closes #1161 Closes #1162

sbayreva commented 1 month ago

Fluent

CHECKBOX:

For Empty Invalid checkbox when on Hover the tick should be Error 500
Something I've noticed- there is a color style called “ disabled-indeterminate-color” that uses secondary 100, and it is not used with the actual disabled indeterminate state here which is good because the right color is grays.400.

RADIO BUTTON: All good

SWITCH: All good

imincheva commented 1 month ago

Bootstrap:

Checkbox: by design
Radio: by design
Switch: by design

AnjiManova commented 1 month ago

Material

Checkbox

Light Mode

invalid/indeterminate - in the hover state, the ripple (:before) should be error.500 with 6% opacity -> state is triggered from the controls - implemented ✅

Dark Mode

unchecked - in the hover state, the ripple (:before) should be grays.600 with 12% opacity - implemented ✅
unchecked - in focused state the ripple (:before) should be grays.600 with 24% opacity - implemented ✅
checked - hover state ripple (:before) should be secondary.500 with 12% opacity - implemented ✅
checked - focused state ripple should be secondary.500 with 24% opacity - implemented ✅
indeterminate - focused state ripple should be secondary.500 with 24% opacity - implemented ✅
Same for all invalid states -> hover (main color used for the fill of the icon) + 12% opacity for hover and 24% opacity in a focused state. - implemented ✅

AnjiManova commented 1 month ago

Material

Radio Group and Radio

I'm not sure if this is a problem, but I cannot trigger the Focused state with focused in the inspect mode like in the other themes. In Material, the focused state is visible on focus-within - implemented ✅
After selecting a radio item, it stays focused and this might be related to the comment above^^ - fixed ✅

Addinг in addition

Dark mode

invalid/focused -> should be 24% opacity of the applied color + please check all focused states in dark mode (they all should be 24% of the applied color) - fixed ✅

AnjiManova commented 1 month ago

Material

Switch

Light Mode Unchecked switch

the ripple should be grays.600 with 6% opacity on hover - implemented ✅
the ripple should be grays.600 with 12% opacity when it is focused - implemented ✅

Checked switch maybe the ripple should be changed in the checked switch as well for hover and focused based on the change above^^, but I am not sure if I am wrong ignore this comment.

Dark Mode Unchecked switch

the ripple should be grays.600 with 12% opacity on hover - implemented ✅
the ripple should be grays.600 with 24% opacity when it is focused - implemented ✅

Checked switch

the ripple should be secondary.500 with 12% opacity on hover - implemented ✅
the ripple should be secondary.500 with 24% opacity when it is focused - implemented ✅

sbayreva commented 1 month ago

Fluent

CHECKBOX:

For Empty Invalid checkbox when on Hover the tick should be Error 500

Something I've noticed- there is a color style called “ disabled-indeterminate-color” that uses secondary 100, and it is not used with the actual disabled indeterminate state here which is good because the right color is grays.400.

RADIO BUTTON: All good

SWITCH: All good

Fluent

CHECKBOX:

For Empty Invalid checkbox when on Hover the tick should be Error 500

Something I've noticed- there is a color style called “ disabled-indeterminate-color” that uses secondary 100, and it is not used with the actual disabled indeterminate state here which is good because the right color is grays.400.

RADIO BUTTON: All good

SWITCH: All good

Fixed!