fix: static hover prop

ICIJ · Jul 15, 2024 · 0e772bf · 0e772bf
1 parent e7246d3
commit 0e772bf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/lib/components/PhosphorIcon.vue b/lib/components/PhosphorIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <span class="phosphor-icon" :style="style" :class="classList" @mouseenter="hover = true" @mouseleave="hover = false">
+  <span 
+    class="phosphor-icon" 
+    :class="classList" 
+    :style="style" 
+    @mouseenter="currentHover = true" 
+    @mouseleave="currentHover = hover ?? false"
+  >
     <component
       :size="rawSize"
       :is="component"
@@ -60,8 +66,6 @@ const WEIGHTS = Object.freeze({
   [WEIGHT_DUOTONE]: WEIGHT_DUOTONE
 })
 
-const hover = ref(false)
-
 const props = defineProps({
   name: {
     type: String,
@@ -141,17 +145,19 @@ watch(
   }
 )
 
+const currentHover = ref(false)
+
 watch(
   () => props.hover,
   () => {
-    hover.value = props.hover
+    currentHover.value = props.hover
   },
   { immediate: true }
 )
 
 
 const weight = computed(() => {
-  if (hover.value && props.hoverWeight) {
+  if (currentHover.value && props.hoverWeight) {
     return WEIGHTS[props.hoverWeight]
   }
 
@@ -202,7 +208,7 @@ const classList = computed(() => {
   return {
     [`phosphor-icon--size-${props.size}`]: hasSize.value,
     [`phosphor-icon--has-size`]: hasSize.value,
-    [`phosphor-icon--hover`]: hover.value,
+    [`phosphor-icon--hover`]: currentHover.value,
   }
 })
 </script>

diff --git a/stories/murmur/components/PhosphorIcon.stories.js b/stories/murmur/components/PhosphorIcon.stories.js
@@ -94,6 +94,14 @@ export const VariantSecondary = {
     size: '32px'
   }
 }
+export const HoverWeight = {
+  args: {
+    name: 'lego',
+    variant: 'primary',
+    hoverWeight: 'duotone',
+    size: '32px'
+  }
+}
 
 export const WithText = {
   args: {