Board: Add button shape and title props (#1381)

Signed-off-by: Anna No <anna.no@xored.com>

packages/ui/src/components/Button.svelte

@@ -24,6 +24,7 @@
   export let labelParams: Record<string, any> = {}
   export let kind: 'primary' | 'secondary' | 'no-border' | 'transparent' | 'link' | 'dangerous' = 'secondary'
   export let size: 'small' | 'medium' | 'large' | 'x-large' = 'medium'
+  export let shape: 'circle' | undefined = undefined
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let justify: 'left' | 'center' = 'center'
   export let disabled: boolean = false
@@ -31,7 +32,7 @@
   export let width: string | undefined = undefined
   export let resetIconSize: boolean = false
   export let focus: boolean = false
-  export let isCircle: boolean = false
+  export let title: string | undefined = undefined
 
   export let input: HTMLButtonElement | undefined = undefined
   
@@ -49,10 +50,11 @@
   bind:this={input}
   class="button {kind} {size} jf-{justify}"
   class:only-icon={iconOnly}
-  class:border-radius-1={!isCircle}
-  class:border-radius-4={isCircle}
+  class:border-radius-1={shape !== 'circle'}
+  class:border-radius-4={shape === 'circle'}
   disabled={disabled || loading}
   style={width ? 'width: ' + width : ''}
+  {title}
   on:click
 >
   {#if icon && !loading}

plugins/board-resources/src/components/editor/CardDetails.svelte

@@ -77,7 +77,7 @@
         {#each members as member}
           <MemberPresenter value={member} size="large" />
         {/each}
-        <Button icon={IconAdd} isCircle={true} kind="no-border" size="large" on:click={membersHandler} />
+        <Button icon={IconAdd} shape="circle" kind="no-border" size="large" on:click={membersHandler} />
       </div>
     </div>
   {/if}

plugins/board-resources/src/components/presenters/MemberPresenter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Employee } from '@anticrm/contact'
+  import { Employee, formatName } from '@anticrm/contact'
   import { getFirstName, getLastName } from '@anticrm/contact'
   import { ContactPresenter } from '@anticrm/contact-resources'
   import { Button, showPopup } from '@anticrm/ui'
@@ -9,13 +9,15 @@
   const firstName = getFirstName(value.name)
   const lastName = getLastName(value.name)
   const nameLabel = `${firstName?.[0] ?? ''}${lastName?.[0] ?? ''}`.toUpperCase()
+  const formattedName = formatName(value.name)
 </script>
 
 {#if value}
   <Button
     {size}
     kind="no-border"
-    isCircle={true}
+    shape="circle"
+    title={formattedName}
     on:click={() => {
       showPopup(ContactPresenter, { value }) // TODO: show proper popup
     }}