feat(action-list): support showing tooltip and implement disabled prop (#516)

closes #514
closes #515

---------

Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>

Author: brc-dd

docs/.vitepress/theme/components/Showcase.vue

@@ -25,7 +25,7 @@ const computedStory = computed(() => {
       </a>
     </div>
 
-    <div class="main">
+    <div class="main vp-raw">
       <slot />
     </div>
   </div>

docs/components/action-list.md

@@ -71,9 +71,39 @@ interface ActionListItem {
   // prop is set, the item is rendered via `<SLink>`.
   link?: string
 
+  // Whether the item is disabled.
+  disabled?: boolean
+
+  // The tooltip to be displayed when the item is hovered or focused.
+  tooltip?: Tooltip
+
   // The callback to be called when the item is clicked.
   onClick?(): void
 }
+
+interface Tooltip {
+  // The HTML tag to be used for the tooltip.
+  // Defaults to `span`.
+  tag?: string
+
+  // The text to be displayed in the tooltip. The tooltip
+  // will only be visible when this prop is set.
+  text?: MaybeRef<string | null>
+
+  // The position of the tooltip relative to the button.
+  // Defaults to `top`
+  position?: 'top' | 'right' | 'bottom' | 'left'
+
+  // The trigger to show the tooltip.
+  // Defaults to `both`
+  trigger?: 'hover' | 'focus' | 'both'
+
+  // The time after which the tooltip is hidden if triggered
+  // because of focussing the trigger element (in milliseconds).
+  // Defaults to `undefined` (the tooltip will not hide
+  // automatically).
+  timeout?: number
+}
 ```
 
 ```vue-html

docs/components/avatar-stack.md

@@ -115,3 +115,23 @@ interface Props {
   ]"
 />
 ```
+
+### `:tooltip`
+
+Whether to display a tooltip when hovering over the component. You can also pass an object with the `position` property to define the position of the tooltip. The default position is `top`. The tooltip will display the name of the user if provided.
+
+```ts
+interface Props {
+  tooltip?: boolean | { position?: 'top' | 'right' | 'bottom' | 'left' }
+}
+```
+
+```vue-html
+<SAvatarStack
+  tooltip
+  :avatars="[
+    { image: '/path/to/image-1.jpg', name: 'Jane Doe' },
+    { image: '/path/to/image-2.jpg', name: 'Richard Roe' }
+  ]"
+/>
+```

docs/components/avatar.md

@@ -80,3 +80,17 @@ interface Props {
 ```vue-html
 <SAvatar name="John Doe" />
 ```
+
+### `:tooltip`
+
+When set to `true`, a tooltip showing the name will be displayed when hovering over the avatar. You can also pass an object to define the position of the tooltip.
+
+```ts
+interface Props {
+  tooltip?: boolean | { position?: 'top' | 'right' | 'bottom' | 'left' }
+}
+```
+
+```vue-html
+<SAvatar tooltip name="John Doe" />
+```

docs/components/button.md

@@ -302,8 +302,8 @@ interface Props {
     // Defaults to `both`
     trigger?: 'hover' | 'focus' | 'both'
 
-    // Defines the timeout in milliseconds to hide the tooltip.
-    // Used only when `trigger` is set to `'focus'` or `'both'`.
+    // The time after which the tooltip is hidden if triggered
+    // because of focussing the trigger element (in milliseconds).
     // Defaults to `undefined` (the tooltip will not hide
     // automatically).
     timeout?: number

docs/components/tooltip.md

@@ -70,6 +70,24 @@ interface Props {
 </STooltip>
 ```
 
+### `:triggerTag`
+
+Defines the HTML tag for the trigger element. Any value passed to this prop will used as `<component :is="triggerTag">`. The default tag for the trigger element is `span`.
+
+```ts
+interface Props {
+  triggerTag?: string
+}
+```
+
+```vue-html
+<STooltip triggerTag="div" text="...">
+  ...
+</STooltip>
+```
+
+Note that setting this to something other than `span` is required when you want to put block elements within the trigger element.
+
 ### `:text`
 
 Defines the content of tooltip.

lib/components/SActionList.vue

@@ -18,6 +18,8 @@ defineProps<{
       :label="item.label"
       :text="item.text"
       :link="item.link"
+      :disabled="item.disabled"
+      :tooltip="item.tooltip"
       :on-click="item.onClick"
     />
   </div>

lib/components/SActionListItem.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import { computed } from 'vue'
-import SIcon from './SIcon.vue'
-import SLink from './SLink.vue'
+import SButton, { type Tooltip } from './SButton.vue'
 
 export interface ActionListItem {
   leadIcon?: IconifyIcon
   link?: string
   label?: string
   disabled?: boolean
-  onClick?(): void
+  tooltip?: Tooltip
+  onClick?: () => void
 
   /** @deprecated Use `:label` instead. */
   text?: string
@@ -20,54 +20,36 @@ const props = defineProps<ActionListItem>()
 const _label = computed(() => {
   return props.label ?? props.text
 })
+
+const _tooltip = computed<Tooltip | undefined>(() => {
+  return props.tooltip ? { display: 'block', ...props.tooltip } : undefined
+})
 </script>
 
 <template>
-  <component
-    :is="link ? SLink : 'button'"
-    class="SActionList"
-    :href="link"
-    @click="() => onClick?.()"
-  >
-    <span v-if="leadIcon" class="lead-icon">
-      <SIcon class="lead-icon-svg" :icon="leadIcon" />
-    </span>
-    <span class="text">{{ _label }}</span>
-  </component>
+  <div class="SActionListItem">
+    <SButton
+      block
+      size="small"
+      type="text"
+      :icon="leadIcon"
+      :label="_label"
+      :href="link"
+      :disabled="disabled"
+      :tooltip="_tooltip"
+      @click="onClick"
+    />
+  </div>
 </template>
 
 <style scoped lang="postcss">
-.SActionList {
-  display: flex;
-  gap: 8px;
-  border-radius: 6px;
-  padding: 4px 8px;
-  width: 100%;
-  text-align: left;
-  line-height: 24px;
-  font-size: 14px;
-  transition: background-color 0.25s;
-
-  &:hover {
-    background-color: var(--c-bg-mute-1);
-  }
+.SActionListItem {
+  --button-font-size: 14px;
 
-  &:active {
-    background-color: var(--c-bg-mute-2);
-    transition: background-color 0.1s;
+  :deep(.SButton),
+  :slotted(.SButton) {
+    justify-content: flex-start;
+    font-weight: 400;
   }
 }
-
-.lead-icon {
-  display: flex;
-  align-items: center;
-  height: 24px;
-  flex-shrink: 0;
-  color: var(--c-text-2);
-}
-
-.lead-icon-svg {
-  width: 16px;
-  height: 16px;
-}
 </style>

lib/components/SAvatar.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { type Position } from '../composables/Tooltip'
+import SFragment from './SFragment.vue'
+import STooltip from './STooltip.vue'
 
 export type Size =
   | 'nano'
@@ -14,6 +17,7 @@ const props = defineProps<{
   size?: Size
   avatar?: string | null
   name?: string | null
+  tooltip?: boolean | { position?: Position }
 }>()
 
 const classes = computed(() => [
@@ -22,29 +26,46 @@ const classes = computed(() => [
 ])
 
 const initial = computed(() => props.name?.charAt(0).toUpperCase())
+
+const tooltipPosition = computed(() => {
+  return (props.tooltip && typeof props.tooltip === 'object')
+    ? props.tooltip.position || 'top'
+    : 'top'
+})
 </script>
 
 <template>
-  <div class="SAvatar" :class="classes">
-    <img v-if="avatar" class="img" :src="avatar">
-    <p v-else-if="initial" class="initial">{{ initial }}</p>
-  </div>
+  <SFragment
+    :is="tooltip && name && STooltip"
+    :text="name"
+    :position="tooltipPosition"
+    display="block"
+    tag="div"
+    trigger-tag="div"
+  >
+    <div class="SAvatar" :class="classes">
+      <img v-if="avatar" class="img" :src="avatar">
+      <p v-else-if="initial" class="initial">{{ initial }}</p>
+    </div>
+  </SFragment>
 </template>
 
 <style lang="postcss" scoped>
 .SAvatar {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 50%;
   background-color: var(--c-bg-elv-1);
+  border-radius: 50%;
   overflow: hidden;
 }
 
 .img {
   object-fit: cover;
   height: 100%;
   width: 100%;
+  border-radius: 50%;
+  overflow: hidden;
 }
 
 .initial {

lib/components/SAvatarStack.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { type Position } from '../composables/Tooltip'
 import SAvatar from './SAvatar.vue'
 
 export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
@@ -8,6 +9,7 @@ const props = withDefaults(defineProps<{
   size?: Size
   avatars: { image?: string; name?: string }[]
   avatarCount?: number
+  tooltip?: boolean | { position?: Position }
 }>(), {
   size: 'medium',
   avatarCount: 2
@@ -30,6 +32,7 @@ const count = computed(() => {
       :size="size"
       :avatar="avatar.image"
       :name="avatar.name"
+      :tooltip="tooltip"
     />
     <div v-if="count" class="more">+{{ count }}</div>
   </div>
@@ -39,16 +42,18 @@ const count = computed(() => {
 .SAvatarStack {
   display: flex;
 
-  > * {
-    border: 2px solid var(--c-bg-elv-2);
+  :slotted(.SAvatar), :deep(.SAvatar), .more {
     flex-shrink: 0;
+    border: 2px solid var(--c-bg-elv-2);
+    border-radius: 50%;
+    overflow: hidden;
   }
 
-  &.mini > *:not(:last-child)   { margin-right: -6px }
-  &.small > *:not(:last-child)  { margin-right: -8px }
-  &.medium > *:not(:last-child) { margin-right: -8px }
-  &.large > *:not(:last-child)  { margin-right: -12px }
-  &.jumbo > *:not(:last-child)  { margin-right: -16px }
+  &.mini > :deep(*):not(:last-child)   { margin-right: -6px }
+  &.small > :deep(*):not(:last-child)  { margin-right: -8px }
+  &.medium > :deep(*):not(:last-child) { margin-right: -8px }
+  &.large > :deep(*):not(:last-child)  { margin-right: -12px }
+  &.jumbo > :deep(*):not(:last-child)  { margin-right: -16px }
 }
 
 .more {
@@ -61,6 +66,8 @@ const count = computed(() => {
   border-radius: 50%;
   line-height: 1;
   color: var(--c-text-2);
+  z-index: 1;
+  height: 100%;
 
   .mini &   { font-size: 10px }
   .small &  { font-size: 10px }