Repository: dialpad/dialtone
Pull request #705: feat(callbox): NO-JIRA style improvements
Author: login: francisrupert
Labels: name: no-visual-test
description: Add this tag when the PR does not need visual testing
Created: 2025-04-10T17:25:39Z | Merged: 2025-04-11T14:42:29Z

# Call Box Style improvements

## :hammer_and_wrench: Type Of Change

- [x] Feature

## :book: Description

Updates required for this CW request: https://dialpad.atlassian.net/browse/DP-137271

The font size of the title in DP app was inadvertently small, as it was inheriting 12px font size from the app, though it was fine our recipe. The font size via CSS Variable is now explicitly set, among other improvements (e.g. spacing, radius)

## :pencil: Checklist

- [x] I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
- [x] I have reviewed my changes.
- [ ] I have added all relevant documentation.
- [x] I have considered the performance impact of my change.

For all Vue changes:

- [ ] I have added / updated unit tests.
- [x] I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the `./scripts/dialtone-vue-sync.sh` script. Read docs here: [Dialtone Vue Sync Script](../packages/dialtone-vue3/.github/CONTRIBUTING.md#dialtone-vue-sync-script)
- [x] I have validated components with a screen reader.
- [x] I have validated components keyboard navigation.

For all CSS changes:

- [x] I have used design tokens whenever possible.
- [x] I have considered how this change will behave on different screen sizes.
- [x] I have visually validated my change in light and dark mode.
- [x] I have used gap or flexbox properties for layout instead of margin whenever possible.

## :crystal_ball: Next Steps

Get it published and updated in product to resolve https://dialpad.atlassian.net/browse/DP-137271

## :camera: Screenshots / GIFs

https://github.com/user-attachments/assets/db4353a6-feec-495d-ba41-85ea4f46fc8b


Diff:
diff --git a/packages/dialtone-css/lib/build/less/recipes/callbox.less b/packages/dialtone-css/lib/build/less/recipes/callbox.less
index 50179f8133..3e6ac97b28 100644
--- a/packages/dialtone-css/lib/build/less/recipes/callbox.less
+++ b/packages/dialtone-css/lib/build/less/recipes/callbox.less
@@ -2,21 +2,26 @@
   padding: 0;
   color: var(--dt-color-foreground-primary);
   background-color: var(--dt-color-surface-primary);
-  border-radius: var(--dt-size-radius-300);
+  border-radius: var(--dt-size-radius-400);
 }
 
 .d-recipe-callbox__video {
   display: flex;
-  margin-bottom: var(--dt-space-300-negative);
   overflow: clip;
-  border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
+  border-radius: var(--dt-size-radius-400) var(--dt-size-radius-400) 0 0;
 }
 
 .d-recipe-callbox__main-content {
   align-items: stretch;
   padding: 0;
   border: var(--dt-size-border-100) solid transparent;
-  border-radius: var(--dt-size-radius-300);
+  border-radius: var(--dt-size-radius-400);
+
+  .d-recipe-callbox__video + &  {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-block-start-width: 0;
+  }
 
   &.d-recipe-callbox__border-default {
     border-color: var(--dt-color-border-default);
@@ -29,29 +34,32 @@
 
   &.d-recipe-callbox__border-critical {
     background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,
-    radial-gradient(circle, #E7301D, #F78B23) border-box;
+    radial-gradient(circle, var(--dt-color-border-critical-strong), var(--dt-color-border-critical)) border-box;
   }
 }
 
+.d-recipe-callbox__avatar {
+  margin-inline-start: var(--dt-space-200);
+}
+
 .d-recipe-callbox__main-content-top {
   display: flex;
+  gap: var(--dt-space-350);
   align-items: center;
-  padding: var(--dt-space-350) var(--dt-space-400);
+  padding: var(--dt-space-400) var(--dt-space-350) var(--dt-space-350) var(--dt-space-400);
 }
 
 .d-recipe-callbox__main-content-bottom {
-  border-top: 1px solid var(--dt-color-border-subtle);
-}
-
-.d-recipe-callbox__avatar {
-  margin-right: var(--dt-space-400);
+  border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
 }
 
 .d-recipe-callbox__content {
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
+  gap: var(--dt-space-300);
   min-width: 0;
+  padding-inline-start: var(--dt-space-200);
 }
 
 .d-recipe-callbox__content-title {
@@ -60,14 +68,13 @@
   padding: 0;
   overflow: clip;
   color: var(--dt-color-foreground-primary);
-  font-weight: var(--dt-font-weight-bold);
-  line-height: normal;
+  font: var(--dt-typography-headline-md);
+  line-height: var(--dt-font-line-height-100);
   white-space: nowrap;
   text-align: left;
   text-overflow: ellipsis;
   background-color: var(--dt-color-surface-primary);
   border: none;
-  user-select: text;
 }
 
 .d-recipe-callbox__content-badge {
@@ -80,8 +87,7 @@
   padding: 0;
   overflow: hidden;
   color: var(--dt-color-foreground-tertiary);
-  font-size: var(--dt-font-size-100);
-  line-height: normal;
+  font: var(--dt-typography-body-sm-compact);
 }
 
 .d-recipe-callbox__right {
@@ -101,6 +107,7 @@
     }
 
     &:hover, &:active {
+      color: var(--dt-color-link-primary-hover);
       text-decoration: underline;
     }
   }
diff --git a/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.mdx b/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.mdx
index 51032d59f4..05fd3d4926 100644
--- a/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.mdx
+++ b/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.mdx
@@ -44,7 +44,7 @@ import { DtRecipeCallbox } from '@dialpad/dialtone-vue';
     >
       <template #icon>
         <dt-icon
-          name="dialpad-ai-color"
+          name="dialpad-sparkle"
           size="400"
         />
       </template>
diff --git a/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.stories.js b/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.stories.js
index 05ed9e5450..ca4d3eeff2 100644
--- a/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.stories.js
+++ b/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.stories.js
@@ -14,7 +14,7 @@ export const argTypesData = {
 };
 
 const decorator = () => ({
-  template: `<div style="background-color: var(--dt-theme-sidebar-color-background)" class="d-wmx264 d-p8"><story />
+  template: `<div style="background-color: var(--dt-theme-sidebar-color-background)" class="d-wmx332 d-p16"><story />
   </div>`,
 });
 
diff --git a/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.vue b/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.vue
index d471e9bd86..e23a4f5af2 100644
--- a/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.vue
+++ b/packages/dialtone-vue2/recipes/leftbar/callbox/callbox.vue
@@ -39,8 +39,10 @@
         <div class="d-recipe-callbox__content">
           <component
             :is="clickable ? 'button' : 'span'"
+            v-dt-tooltip="title"
             data-qa="dt-recipe-callbox__title"
             class="d-recipe-callbox__content-title"
+            tabindex="0"
             @click="handleClick"
           >
             {{ title }}
diff --git a/packages/dialtone-vue2/recipes/leftbar/callbox/callbox_variants.story.vue b/packages/dialtone-vue2/recipes/leftbar/callbox/callbox_variants.story.vue
index 6bb545bb38..e5dd741047 100644
--- a/packages/dialtone-vue2/recipes/leftbar/callbox/callbox_variants.story.vue
+++ b/packages/dialtone-vue2/recipes/leftbar/callbox/callbox_variants.story.vue
@@ -8,7 +8,7 @@
       border-color="ai"
     >
       <template #subtitle>
-        <span>06:01</span>
+        <span class="d-fvn-tabular">06:01</span>
       </template>
       <template #right>
         <dt-button
@@ -17,7 +17,7 @@
           importance="clear"
         >
           <template #icon>
-            <dt-icon-dialpad-ai-color size="400" />
+            <dt-icon-dialpad-sparkle size="400" />
           </template>
         </dt-button>
         <dt-button
@@ -37,7 +37,7 @@
       avatar-seed="1 Participant"
     >
       <template #subtitle>
-        <span>06:01</span>
+        <span class="d-fvn-tabular">06:01</span>
       </template>
       <template #right>
         <dt-button
@@ -82,7 +82,7 @@
         >
       </template>
       <template #subtitle>
-        <span>06:01</span>
+        <span class="d-fvn-tabular">06:01</span>
       </template>
       <template #right>
         <dt-button
@@ -124,7 +124,7 @@
       border-color="ai"
     >
       <template #subtitle>
-        <span>06:01</span>
+        <span class="d-fvn-tabular">06:01</span>
       </template>
       <template #right>
         <dt-button
@@ -133,7 +133,7 @@
           importance="clear"
         >
           <template #icon>
-            <dt-icon-dialpad-ai-color size="400" />
+            <dt-icon-dialpad-sparkle size="400" />
           </template>
         </dt-button>
         <dt-button
@@ -161,7 +161,7 @@
           class="d-ai-center"
         >
           <dt-icon-share-screen size="100" />
-          <span>06:01</span>
+          <span class="d-fvn-tabular">06:01</span>
         </dt-stack>
       </template>
       <template #right>
@@ -181,7 +181,7 @@
           importance="clear"
         >
           <template #icon>
-            <dt-icon-dialpad-ai-color size="400" />
+            <dt-icon-dialpad-sparkle size="400" />
           </template>
         </dt-button>
         <dt-button
@@ -247,8 +247,11 @@
             />
             <span>3</span>
           </dt-stack>
-          <span class="d-fs-300">
-            •
+          <span
+            class="d-body--sm-compact"
+            aria-hidden="true"
+          >
+            &bull;
           </span>
           <dt-stack
             direction="row"
@@ -300,7 +303,7 @@
           class="d-ai-center"
         >
           <dt-icon-share-screen size="100" />
-          <span>06:01</span>
+          <span class="d-fvn-tabular">06:01</span>
         </dt-stack>
       </template>
       <template #right>
@@ -310,7 +313,7 @@
           importance="clear"
         >
           <template #icon>
-            <dt-icon-dialpad-ai-color size="400" />
+            <dt-icon-dialpad-sparkle size="400" />
           </template>
         </dt-button>
         <dt-button
@@ -334,9 +337,14 @@
             <dt-stack
               direction="row"
               gap="400"
+              class="d-pl2"
             >
-              <dt-icon-share-screen size="400" />
-              <span class="d-fs-100">Sharing screen</span>
+              <dt-stack
+                class="d-ai-center d-w24"
+              >
+                <dt-icon-share-screen size="400" />
+              </dt-stack>
+              <span class="d-body--sm-compact">Sharing screen</span>
             </dt-stack>
           </template>
           <template #right>
@@ -367,7 +375,7 @@
           class="d-ai-center"
         >
           <dt-icon-share-screen size="100" />
-          <span>06:01</span>
+          <span class="d-fvn-tabular">06:01</span>
         </dt-stack>
       </template>
       <template #right>
@@ -390,7 +398,7 @@
 import DtRecipeCallbox from './callbox.vue';
 import DtButton from '@/components/button/button.vue';
 import {
-  DtIconDialpadAiColor,
+  DtIconDialpadSparkle,
   DtIconPhoneHangUp,
   DtIconShareScreen,
   DtIconStopFilled,
@@ -410,7 +418,7 @@ export default {
     DtItemLayout,
     DtButton,
     DtRecipeCallbox,
-    DtIconDialpadAiColor,
+    DtIconDialpadSparkle,
     DtIconPhoneHangUp,
     DtIconShareScreen,
     DtIconStopFilled,
diff --git a/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.mdx b/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.mdx
index 51032d59f4..05fd3d4926 100644
--- a/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.mdx
+++ b/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.mdx
@@ -44,7 +44,7 @@ import { DtRecipeCallbox } from '@dialpad/dialtone-vue';
     >
       <template #icon>
         <dt-icon
-          name="dialpad-ai-color"
+          name="dialpad-sparkle"
           size="400"
         />
       </template>
diff --git a/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.stories.js b/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.stories.js
index 95316fa79f..6000e8805f 100644
--- a/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.stories.js
+++ b/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.stories.js
@@ -14,7 +14,7 @@ export const argTypesData = {
 };
 
 const decorator = () => ({
-  template: `<div style="background-color: var(--dt-theme-sidebar-color-background)" class="d-wmx264 d-p8"><story />
+  template: `<div style="background-color: var(--dt-theme-sidebar-color-background)" class="d-wmx332 d-p16"><story />
   </div>`,
 });
 
diff --git a/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.vue b/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.vue
index 1b6628f1c5..3b5429768a 100644
--- a/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.vue
+++ b/packages/dialtone-vue3/recipes/leftbar/callbox/callbox.vue
@@ -40,8 +40,10 @@
         <div class="d-recipe-callbox__content">
           <component
             :is="clickable ? 'button' : 'span'"
+            v-dt-tooltip="title"
             data-qa="dt-recipe-callbox__title"
             class="d-recipe-callbox__content-title"
+            tabindex="0"
             @click="handleClick"
           >
             {{ title }}
diff --git a/packages/dialtone-vue3/recipes/leftbar/callbox/callbox_variants.story.vue b/packages/dialtone-vue3/recipes/leftbar/callbox/callbox_variants.story.vue
index 05905f74ea..d3dc779b65 100644
--- a/packages/dialtone-vue3/recipes/leftbar/callbox/callbox_variants.story.vue
+++ b/packages/dialtone-vue3/recipes/leftbar/callbox/callbox_variants.story.vue
@@ -8,7 +8,7 @@
       border-color="ai"
     >
       <template #subtitle>
-        <span>06:01</span>
+        <span class="d-fvn-tabular">06:01</span>
       </template>
       <template #right>
         <dt-button
@@ -17,7 +17,7 @@
           importance="clear"
         >
           <template #icon>
-            <dt-icon-dialpad-ai-color size="400" />
+            <dt-icon-dialpad-sparkle size="400" />
           </template>
         </dt-button>
         <dt-button
@@ -37,7 +37,7 @@
       avatar-seed="1 Participant"
     >
       <template #subtitle>
-        <span>06:01</span>
+        <span class="d-fvn-tabular">06:01</span>
       </template>
       <template #right>
         <dt-button
@@ -82,7 +82,7 @@
         >
       </template>
       <template #subtitle>
-        <span>06:01</span>
+        <span class="d-fvn-tabular">06:01</span>
       </template>
       <template #right>
         <dt-button
@@ -124,7 +124,7 @@
       border-color="ai"
     >
       <template #subtitle>
-        <span>06:01</span>
+        <span class="d-fvn-tabular">06:01</span>
       </template>
       <template #right>
         <dt-button
@@ -133,7 +133,7 @@
           importance="clear"
         >
           <template #icon>
-            <dt-icon-dialpad-ai-color size="400" />
+            <dt-icon-dialpad-sparkle size="400" />
           </template>
         </dt-button>
         <dt-button
@@ -161,7 +161,7 @@
           class="d-ai-center"
         >
           <dt-icon-share-screen size="100" />
-          <span>06:01</span>
+          <span class="d-fvn-tabular">06:01</span>
         </dt-stack>
       </template>
       <template #right>
@@ -181,7 +181,7 @@
           importance="clear"
         >
           <template #icon>
-            <dt-icon-dialpad-ai-color size="400" />
+            <dt-icon-dialpad-sparkle size="400" />
           </template>
         </dt-button>
         <dt-button
@@ -247,7 +247,10 @@
             />
             <span>3</span>
           </dt-stack>
-          <span class="d-fs-300">
+          <span
+            class="d-body--sm-compact"
+            aria-hidden="true"
+          >
             •
           </span>
           <dt-stack
@@ -300,7 +303,7 @@
           class="d-ai-center"
         >
           <dt-icon-share-screen size="100" />
-          <span>06:01</span>
+          <span class="d-fvn-tabular">06:01</span>
         </dt-stack>
       </template>
       <template #right>
@@ -310,7 +313,7 @@
           importance="clear"
         >
           <template #icon>
-            <dt-icon-dialpad-ai-color size="400" />
+            <dt-icon-dialpad-sparkle size="400" />
           </template>
         </dt-button>
         <dt-button
@@ -334,9 +337,14 @@
             <dt-stack
               direction="row"
               gap="400"
+              class="d-pl2"
             >
-              <dt-icon-share-screen size="400" />
-              <span class="d-fs-100">Sharing screen</span>
+              <dt-stack
+                class="d-ai-center d-w24"
+              >
+                <dt-icon-share-screen size="400" />
+              </dt-stack>
+              <span class="d-body--sm-compact">Sharing screen</span>
             </dt-stack>
           </template>
           <template #right>
@@ -367,7 +375,7 @@
           class="d-ai-center"
         >
           <dt-icon-share-screen size="100" />
-          <span>06:01</span>
+          <span class="d-fvn-tabular">06:01</span>
         </dt-stack>
       </template>
       <template #right>
@@ -390,7 +398,7 @@
 import DtRecipeCallbox from './callbox.vue';
 import DtButton from '@/components/button/button.vue';
 import {
-  DtIconDialpadAiColor,
+  DtIconDialpadSparkle,
   DtIconPhoneHangUp,
   DtIconShareScreen,
   DtIconStopFilled,
@@ -410,7 +418,7 @@ export default {
     DtItemLayout,
     DtButton,
     DtRecipeCallbox,
-    DtIconDialpadAiColor,
+    DtIconDialpadSparkle,
     DtIconPhoneHangUp,
     DtIconShareScreen,
     DtIconStopFilled,


Reviews:
user: login: francisrupert
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T17:30:53Z
user: login: francisrupert
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T17:31:19Z
user: login: francisrupert
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T17:32:25Z
user: login: francisrupert
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T17:33:18Z
user: login: braddialpad
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T19:39:29Z
user: login: hynes-dialpad
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-11T02:41:47Z
user: login: braddialpad
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T05:03:07Z

Review comments:
diff_hunk: @@ -39,8 +39,10 @@
         <div class="d-recipe-callbox__content">
           <component
             :is="clickable ? 'button' : 'span'"
+            v-dt-tooltip="title"
             data-qa="dt-recipe-callbox__title"
             class="d-recipe-callbox__content-title"
+            tabindex="0"
             @click="handleClick"
           >
path: packages/dialtone-vue2/recipes/leftbar/callbox/callbox.vue
user: login: francisrupert
body: Also added Tooltip (and made focusable) to the title since it can often be truncated.
<img width="325" alt="image" src="https://github.com/user-attachments/assets/9681b60f-a817-4bfd-be84-5437fa530a2f" />

created_at: 2025-04-10T17:30:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -17,7 +17,7 @@
           importance="clear"
         >
           <template #icon>
-            <dt-icon-dialpad-ai-color size="400" />
+            <dt-icon-dialpad-sparkle size="400" />
path: packages/dialtone-vue2/recipes/leftbar/callbox/callbox_variants.story.vue
user: login: francisrupert
body: Replaced old Ai worm icon
created_at: 2025-04-10T17:31:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -247,8 +247,11 @@
             />
             <span>3</span>
           </dt-stack>
-          <span class="d-fs-300">
-            •
+          <span
+            class="d-body--sm-compact"
+            aria-hidden="true"
+          >
+            &bull;
path: packages/dialtone-vue2/recipes/leftbar/callbox/callbox_variants.story.vue
user: login: francisrupert
body: This bullet with the previous style was added extra space. Corrected and add `aria-hidden` since we don't want "bullet" announced to screenreader.
created_at: 2025-04-10T17:32:25Z
author_association: CONTRIBUTOR
path: packages/dialtone-vue3/recipes/leftbar/callbox/callbox.vue
user: login: francisrupert
body: I think I did the Vue3 thing correctly. Please gut-check that.
created_at: 2025-04-10T17:33:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -90,13 +92,14 @@
 <script>
 import { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';
 import DtAvatar from '@/components/avatar/avatar.vue';
+import DtTooltip from '@/components/tooltip/tooltip.vue';
 import DtBadge from '@/components/badge/badge.vue';
 import { DtIconPause } from '@dialpad/dialtone-icons/vue2';
 
 export default {
   name: 'DtRecipeCallbox',
 
-  components: { DtBadge, DtAvatar, DtIconPause },
+  components: { DtBadge, DtAvatar, DtIconPause, DtTooltip },
path: packages/dialtone-vue2/recipes/leftbar/callbox/callbox.vue
user: login: braddialpad
body: don't need to import tooltip if you're using the v-dt-tooltip directive.
created_at: 2025-04-10T19:30:43Z
author_association: CONTRIBUTOR
path: packages/dialtone-vue3/recipes/leftbar/callbox/callbox.vue
user: login: braddialpad
body: Looks like the .mdx and .stories.js didn't transfer over. Otherwise looks good.
created_at: 2025-04-10T19:39:06Z
author_association: CONTRIBUTOR

PR comments:
user: login: hynes-dialpad
created_at: 2025-04-10T19:24:43Z
body: <img width="127" alt="image" src="https://github.com/user-attachments/assets/3aea0fad-48c0-42e3-b803-e3d8c7686ec9" />

 @francisrupert Can we correct the screen-sharing icon here as well? The screen-share icon should line up to be center-aligned with the avatar above and the "Sharing…" line should left-align with the content above.
author_association: MEMBER
user: login: github-actions[bot]
created_at: 2025-04-10T22:16:12Z
body: <!-- add-pr-comment:missing-visual-test-label -->

Please add either the `visual-test-ready` or `no-visual-test` label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️
author_association: CONTRIBUTOR
user: login: francisrupert
created_at: 2025-04-10T22:17:13Z
body: @hynes-dialpad 

> @francisrupert Can we correct the screen-sharing icon here as well?

Done.

<img width="332" alt="image" src="https://github.com/user-attachments/assets/17a11770-7b1a-4174-9ea3-4ca5083b615f" />

<img width="317" alt="image" src="https://github.com/user-attachments/assets/c22a4c49-2794-4da4-853b-dfdbab6150de" />

author_association: CONTRIBUTOR
user: login: francisrupert
created_at: 2025-04-10T22:17:47Z
body: @braddialpad 

> Looks like the .mdx and .stories.js didn't transfer over. 

Resolved.
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-10T22:21:09Z
body: <!-- add-pr-comment:deploy-preview-message -->

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-705/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-705/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-705/
author_association: CONTRIBUTOR