feat(callbox): NO-JIRA style improvements (#705)

Author: francisrupert

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;
     }
   }

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>

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>`,
 });
 

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 }}

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,

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>

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>`,
 });
 

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 }}