Interaction state hover for radio button (#2128)

* 💄 Apply hover by adjusting background color * 💄 Improve transition mixin Allow list of multiple properties as argument * 💄 Only transition background-color property * 💄 Use shared function for getting state color
kirbydesign · Mar 25, 2022 · 9f34681 · 9f34681
1 parent 66831eb
commit 9f34681
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/libs/core/src/scss/interaction-state/_layer.scss b/libs/core/src/scss/interaction-state/_layer.scss
@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'sass:math';
 @use 'sass:meta';
 @use '../utils';
@@ -80,11 +81,13 @@ $default-loudness: 'm';
 }
 
 /// Apply streamlined transition to interaction state changes
-/// @param {*} $property [all]
-@mixin transition($property: all) {
-  $duration: utils.get-transition-duration('quick');
-  $timing-function: utils.get-transition-easing('static');
-  $delay: 0ms;
-
-  transition: $property $duration $timing-function $delay;
+/// @param {*} $property-list [all]
+@mixin transition($property-list...) {
+  @if list.length($property-list) == 0 {
+    $property-list: all;
+  }
+  transition-property: $property-list;
+  transition-duration: utils.get-transition-duration('quick');
+  transition-timing-function: utils.get-transition-easing('static');
+  transition-delay: 0ms;
 }
diff --git a/libs/designsystem/src/lib/components/radio/radio.component.scss b/libs/designsystem/src/lib/components/radio/radio.component.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:map";
 @use '~@kirbydesign/core/src/scss/interaction-state';
 @use '~@kirbydesign/core/src/scss/utils';
@@ -73,9 +74,16 @@ ion-radio {
   --color-checked: #{utils.get-color('success')};
 
   &::part(container) {
+    @include interaction-state.transition(background-color);
     background-color: utils.get-color('white');
   }
 
+  @include interaction-state.apply-hover {
+    &::part(container) {
+      background-color: interaction-state.get-state-color('white', 's');
+    }
+  }
+
   &::part(mark) {
     width: $radio-icon-mark-size;
     height: $radio-icon-mark-size;