Merge pull request #60 from traPtitech/soramea/fix-chip

chip の close icon 関連の修正

src/shared/components/ChipButton.vue

@@ -6,34 +6,52 @@ import IconPlus from './IconPlus.vue';
 
 const props = defineProps<{
   label: string;
-  type: 'default' | 'new';
+  type: 'default' | 'show-close' | 'new';
 }>();
-defineEmits(['action']);
+defineEmits(['action', 'close']);
 
 const chipStyle = computed(() => ({
-  'button-chip': props.type === 'default',
+  'button-chip': props.type === 'default' || props.type === 'show-close',
   'button-newchip': props.type === 'new',
 }));
 </script>
 
 <template>
-  <Button class="button" :class="chipStyle" @click="$emit('action')">
-    <span>{{ label }}</span>
-    <IconClose v-if="type === 'default'" />
-    <IconPlus v-else-if="type === 'new'" />
-  </Button>
+  <div class="background" :class="chipStyle">
+    <Button class="button" :class="chipStyle" @click="$emit('action')">
+      <div class="button-content">
+        <span>{{ props.label }}</span>
+        <IconPlus v-if="props.type === 'new'" />
+      </div>
+    </Button>
+    <Button
+      v-if="props.type === 'show-close'"
+      class="button"
+      :class="chipStyle"
+      @click="$emit('close')"
+    >
+      <IconClose />
+    </Button>
+  </div>
 </template>
 <style lang="scss" scoped>
-.button {
+.background {
   display: inline flex;
   gap: 8px;
   height: 32px;
-  padding: 4px 12px;
   border-radius: 16px;
+  padding: 4px 12px;
+}
+.button {
+  padding: 0;
   font-size: 16px;
   font-weight: 700;
   line-height: normal;
 }
+.button-content {
+  display: flex;
+  gap: 8px;
+}
 .button-chip {
   background-color: $color-container-primary;
   border-color: $color-container-primary;