Display: Add styles for BaseChip component - refs BT#21705

assets/css/scss/index.scss

@@ -36,6 +36,7 @@
 @import "atoms/toast";
 @import "atoms/wysiwyg";
 
+@import "molecules/chip";
 @import "molecules/course_tool";
 @import "molecules/datepicker";
 @import "molecules/empty_state";

assets/css/scss/molecules/_chip.scss

@@ -0,0 +1,25 @@
+.p-chip {
+  @apply inline-flex items-center text-gray-90 bg-support-2 rounded-full px-3 py-0;
+
+  & &-text {
+    @apply text-caption my-2 mx-0;
+  }
+
+  & &-icon {
+    @apply mr-2;
+
+    &.pi {
+      @apply text-caption;
+    }
+  }
+
+  & &-remove-icon {
+    @apply text-caption cursor-pointer ml-2 rounded-full transition-none outline-none
+      focus-visible:outline-none focus-visible:drop-shadow-lg
+      focus:outline-none;
+  }
+
+  & img {
+    @apply rounded-full w-9 h-9 -ml-3 mr-2;
+  }
+}

assets/vue/components/basecomponents/BaseChip.vue

@@ -4,11 +4,21 @@
     :label="value[labelField]"
     :removable="isRemovable"
     @remove="$emit('remove', value)"
-  />
+  >
+    <template #removeicon="{ removeCallback, keydownCallback }">
+      <BaseIcon
+        icon="close"
+        class="p-icon p-chip-remove-icon"
+        @click="removeCallback"
+        @keydownk="keydownCallback"
+      />
+    </template>
+  </Chip>
 </template>
 
 <script setup>
 import Chip from "primevue/chip";
+import BaseIcon from "./BaseIcon.vue"
 
 defineProps({
   value: {