Hover display for a selected radio (#583)

* fix(radio): hover display for a selected radio * fix(radio): modification following PR comment * fix(radio): add background on focus state
gsoft-inc · Dec 4, 2023 · 812546b · 812546b
1 parent a88ff19
commit 812546b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/.changeset/silver-ghosts-bake.md b/.changeset/silver-ghosts-bake.md
@@ -0,0 +1,5 @@
+---
+"@igloo-ui/radio": patch
+---
+
+fix the problem of displaying the hover of a selected radio
diff --git a/packages/Radio/src/radio.scss b/packages/Radio/src/radio.scss
@@ -55,7 +55,6 @@
     --ids-radio-background-disabled: var(--hop-neutral-surface-disabled);
     --ids-radio-background-disabled-checked: var(--hop-neutral-surface-disabled);
     --ids-radio-background-checked: var(--hop-neutral-surface-active);
-    --ids-radio-check-background-checked-hover: var(--hop-neutral-icon-hover)
 }
 
 %radio {
@@ -117,18 +116,21 @@
     &:focus {
         outline: none;
         box-shadow: var(--focus);
+        background-color: var(--ids-radio-background-hover, var(--ids-radio-background));
     }
 
     &:hover {
         border-color: var(--ids-radio-border-hover);
-        background-color: var(--ids-radio-background-hover, var(--ids-radio-background))
+        background-color: var(--ids-radio-background-hover, var(--ids-radio-background));
     }
 
-    &:checked:hover {
-        border-color: var(--ids-radio-border-checked-hover, var(--ids-radio-border-hover)) ;
+    &:checked:hover,
+    &:checked:focus {
+        border-color: var(--ids-radio-border-checked-hover, var(--ids-radio-border-hover));
+        background-color: var(--ids-radio-background-checked, var(--ids-radio-background-checked));
 
         &::after {
-            background: var(--ids-radio-check-background-checked-hover, var(--ids-radio-background));
+            background: var(--ids-radio-background);
         }
     }