fix: simpler css bind

histoire-dev · Mar 7, 2022 · a9c8122 · a9c8122
1 parent eaeb919
commit a9c8122
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 12 deletions.
diff --git a/packages/histoire/src/client/app/components/StoryListItem.vue b/packages/histoire/src/client/app/components/StoryListItem.vue
@@ -14,8 +14,6 @@ const props = withDefaults(defineProps<{
 const filePadding = computed(() => {
   return (props.depth * 16) + 'px'
 })
-
-const iconColor = computed(() => props.story.iconColor)
 </script>
 
 <template>
@@ -55,6 +53,6 @@ const iconColor = computed(() => props.story.iconColor)
 }
 
 .bind-icon-color {
-  color: v-bind(iconColor);
+  color: v-bind('story.iconColor');
 }
 </style>
diff --git a/packages/histoire/src/client/app/components/StoryVariantGridItem.vue b/packages/histoire/src/client/app/components/StoryVariantGridItem.vue
@@ -19,8 +19,6 @@ const props = defineProps({
 
 const { variant } = toRefs(props)
 const { isActive, targetRoute } = useCurrentVariantRoute(variant)
-
-const iconColor = computed(() => props.variant.iconColor)
 </script>
 
 <template>
@@ -66,6 +64,6 @@ const iconColor = computed(() => props.variant.iconColor)
 
 <style scoped>
 .bind-icon-color {
-  color: v-bind(iconColor);
+  color: v-bind('variant.iconColor');
 }
 </style>
diff --git a/packages/histoire/src/client/app/components/StoryVariantListItem.vue b/packages/histoire/src/client/app/components/StoryVariantListItem.vue
@@ -14,8 +14,6 @@ const props = defineProps({
 
 const { variant } = toRefs(props)
 const { isActive, targetRoute } = useCurrentVariantRoute(variant)
-
-const iconColor = computed(() => props.variant.iconColor)
 </script>
 
 <template>
@@ -41,6 +39,6 @@ const iconColor = computed(() => props.variant.iconColor)
 
 <style scoped>
 .bind-icon-color {
-  color: v-bind(iconColor);
+  color: v-bind('variant.iconColor');
 }
 </style>
diff --git a/packages/histoire/src/client/app/components/search/SearchItem.vue b/packages/histoire/src/client/app/components/search/SearchItem.vue
@@ -43,8 +43,6 @@ const defaultIcons = {
   variant: 'carbon:cube',
 }
 
-const iconColor = computed(() => props.result.iconColor)
-
 const kindLabels = {
   story: 'Story',
   variant: 'Variant',
@@ -105,6 +103,6 @@ const kindLabels = {
 
 <style scoped>
 .bind-icon-color {
-  color: v-bind(iconColor);
+  color: v-bind('result.iconColor');
 }
 </style>