1 files changed, 14 insertions, 4 deletions
diff --git a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
index 4cba66eefd2..7ae803ebf4d 100644
--- a/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
+++ b/app/assets/javascripts/vue_shared/components/color_select_dropdown/dropdown_value.vue
@@ -20,6 +20,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    hasColor() {
+      return this.selectedColor.color !== '';
+    },
+  },
 };
 </script>
 
@@ -31,13 +36,18 @@ export default {
       class="sidebar-collapsed-icon"
     >
       <gl-icon name="appearance" />
+      <color-item :color="selectedColor.color" :title="selectedColor.title" />
+    </div>
+
+    <span v-if="!hasColor" class="no-value hide-collapsed">
+      <slot></slot>
+    </span>
+    <template v-else>
       <color-item
+        class="hide-collapsed"
         :color="selectedColor.color"
         :title="selectedColor.title"
-        class="gl-font-base gl-line-height-24"
       />
-    </div>
-
-    <color-item class="hide-collapsed" :color="selectedColor.color" :title="selectedColor.title" />
+    </template>
   </div>
 </template>