feat(planner): improve and reuse Chip (#4854)

Signed-off-by: Eduard Aksamitov <e@euaaaio.ru>

packages/ui/src/components/Chip.svelte

@@ -14,9 +14,13 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { IconClose, ButtonIcon } from '..'
+  import { IconClose, ButtonIcon, LabelAndProps, tooltip as tp } from '..'
 
   export let label: string
+  export let size: 'small' | 'min' = 'small'
+  export let isRemovable: boolean = false
+  export let backgroundColor: string | undefined = undefined
+  export let tooltip: LabelAndProps | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -33,44 +37,69 @@
   }
 </script>
 
-<div class="flex items-center font-medium-14 max-w-60 p-1 chip">
-  <span class="px-2 overflow-label">{label}</span>
-  <ButtonIcon
-    bind:this={buttonRef}
-    kind="tertiary"
-    size="min"
-    icon={IconClose}
-    inheritColor={true}
-    on:click={() => dispatch('remove')}
-    on:keydown={handleBackspace}
-  />
+<div
+  class="flex items-center font-medium-14 max-w-60 chip {size}"
+  class:removable={isRemovable}
+  style:background-color={backgroundColor}
+  use:tp={tooltip}
+>
+  <span class="px-2 overflow-label chip-label">{label}</span>
+  {#if isRemovable}
+    <ButtonIcon
+      bind:this={buttonRef}
+      kind="tertiary"
+      size="min"
+      icon={IconClose}
+      inheritColor={true}
+      on:click={() => dispatch('remove')}
+      on:keydown={handleBackspace}
+    />
+  {/if}
 </div>
 
 <style lang="scss">
   .chip {
     position: relative;
     height: var(--global-small-Size);
+    padding: var(--spacing-0_5);
     border: none;
     color: var(--tag-on-accent-PorpoiseText);
     background-color: var(--global-accent-BackgroundColor);
     border-radius: var(--small-BorderRadius);
 
-    &:after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: var(--small-BorderRadius);
-      overflow: hidden;
-      background-color: transparent;
-      pointer-events: none;
+    &.removable {
+      &:after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: var(--small-BorderRadius);
+        overflow: hidden;
+        background-color: transparent;
+        pointer-events: none;
+      }
+
+      &:hover:after {
+        background-color: var(--global-ui-hover-OverlayColor);
+      }
+
+      &:active:after {
+        background-color: var(--global-ui-active-OverlayColor);
+      }
     }
 
-    &:hover:after {
-      background-color: var(--global-ui-hover-OverlayColor);
+    &.min {
+      height: 1.25rem;
+      padding: var(--spacing-0_25);
+      border-radius: var(--extra-small-BorderRadius);
+      font-size: 0.6875rem;
+
+      .chip-label {
+        padding: 0 var(--spacing-0_5);
+      }
     }
 
-    &:active:after {
-      background-color: var(--global-ui-active-OverlayColor);
+    .chip-label {
+      padding: 0 var(--spacing-1);
     }
 
     & :global(button.type-button-icon) {

plugins/tags-resources/src/components/LabelsPresenter.svelte

@@ -3,7 +3,7 @@
   import { createQuery } from '@hcengineering/presentation'
   import type { TagReference } from '@hcengineering/tags'
   import tags from '@hcengineering/tags'
-  import { getEventPopupPositionElement, resizeObserver, showPopup, tooltip } from '@hcengineering/ui'
+  import { Chip, getEventPopupPositionElement, resizeObserver, showPopup, tooltip } from '@hcengineering/ui'
   import { afterUpdate, createEventDispatcher } from 'svelte'
   import TagReferencePresenter from './TagReferencePresenter.svelte'
   import TagsReferencePresenter from './TagsReferencePresenter.svelte'
@@ -82,15 +82,15 @@
   {#if items.length > 1}
     <div class="flex-row-top flex-wrap flex-gap-0-5">
       <TagReferencePresenter attr={undefined} value={items[0]} kind={'todo'} />
-      <div
-        class="todoLabel-plus-container font-medium-11"
-        use:tooltip={{
+      <Chip
+        label={`+${items.length - 1}`}
+        size={'min'}
+        backgroundColor={'var(--tag-subtle-PorpoiseBackground)'}
+        tooltip={{
           component: LabelsPresenter,
           props: { value, object, isEditable, kind: 'todo', ignoreFirst: true }
         }}
-      >
-        +{items.length - 1}
-      </div>
+      />
     </div>
   {:else if items.length === 1}
     <TagReferencePresenter attr={undefined} value={items[0]} kind={'todo'} />
@@ -121,12 +121,6 @@
 {/if}
 
 <style lang="scss">
-  .todoLabel-plus-container {
-    padding: var(--spacing-0_25) var(--spacing-0_75);
-    color: var(--tag-on-subtle-PorpoiseText);
-    background-color: var(--tag-subtle-PorpoiseBackground);
-    border-radius: var(--extra-small-BorderRadius);
-  }
   .labels-container {
     overflow: hidden;
     display: flex;

plugins/tags-resources/src/components/TagReferencePresenter.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { AnyAttribute } from '@hcengineering/core'
   import type { TagReference } from '@hcengineering/tags'
-  import { getPlatformColorDef, Icon, IconClose, resizeObserver, themeStore } from '@hcengineering/ui'
+  import { Chip, getPlatformColorDef, Icon, IconClose, resizeObserver, themeStore } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import TagItem from './TagItem.svelte'
 
@@ -65,52 +65,17 @@
       {/if}
     </div>
   {:else if kind === 'todo'}
-    <div
-      class="todoLabel-container font-medium-11 overflow-label max-w-40"
-      class:isEditable
-      style:background-color={color.color}
-      use:resizeObserver={(element) => {
-        realWidth = element.clientWidth
-      }}
-    >
-      {value.title}
-      {#if isEditable}
-        <button class="btn-close" on:click|stopPropagation={() => dispatch('remove', value)}>
-          <Icon icon={IconClose} size={'x-small'} />
-        </button>
-      {/if}
-    </div>
+    <Chip
+      label={value.title}
+      size="min"
+      isRemovable={isEditable}
+      backgroundColor={color.color}
+      on:remove={() => dispatch('remove', value)}
+    />
   {/if}
 {/if}
 
 <style lang="scss">
-  .todoLabel-container {
-    padding: var(--spacing-0_25) var(--spacing-0_5);
-    color: var(--global-on-accent-TextColor);
-    border-radius: var(--extra-small-BorderRadius);
-
-    &.isEditable {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--spacing-0_5);
-      padding: var(--spacing-0_25) var(--spacing-0_25) var(--spacing-0_25) var(--spacing-0_75);
-    }
-    .btn-close {
-      flex-shrink: 0;
-      margin: 0;
-      padding: 0;
-      width: var(--global-min-Size);
-      height: var(--global-min-Size);
-      color: var(--global-on-accent-TextColor);
-      border: none;
-      border-radius: var(--min-BorderRadius);
-      outline: none;
-
-      &:hover {
-        background-color: var(--button-tertiary-hover-BackgroundColor);
-      }
-    }
-  }
   .listitems-container {
     overflow: hidden;
     display: flex;