fix to show send icon as default

dialpad · Sep 6, 2024 · 10e0dfd · 10e0dfd
1 parent d1f4205
commit 10e0dfd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/packages/dialtone-vue3/recipes/conversation_view/message_input/message_input.stories.js b/packages/dialtone-vue3/recipes/conversation_view/message_input/message_input.stories.js
@@ -188,7 +188,7 @@ export const argsData = {
     ],
     skinTone: 'Default',
   },
-  sendIcon: 'send',
+  sendIcon: undefined,
   showCharacterLimit: {
     count: 1000,
     warning: 500,
@@ -238,6 +238,16 @@ export const Default = {
   args: {},
 };
 
+export const SendButtonWithText = {
+  render: DefaultTemplate,
+  args: {
+    ...argsData,
+    showSend: {
+      text: 'Save',
+    },
+  },
+};
+
 export const InitializeWithLineBreaks = {
   render: DefaultTemplate,
   args: {

diff --git a/packages/dialtone-vue3/recipes/conversation_view/message_input/message_input.vue b/packages/dialtone-vue3/recipes/conversation_view/message_input/message_input.vue
@@ -183,22 +183,26 @@
             :class="[
               {
                 'dt-message-input__send-button--disabled': isSendDisabled,
-                'd-btn--circle': hasSendIcon,
+                'd-btn--circle': showSendIcon,
               },
             ]"
             :aria-label="showSend.ariaLabel"
             :aria-disabled="isSendDisabled"
             @click="onSend"
           >
             <template
-              v-if="hasSendIcon"
+              v-if="showSendIcon"
               #icon
             >
               <!-- @slot Slot for send button icon -->
               <slot
                 name="sendIcon"
-                :icon-size="'300'"
-              />
+                :icon-size="sendIconSize"
+              >
+                <dt-icon-send
+                  :size="sendIconSize"
+                />
+              </slot>
             </template>
             <template
               v-if="showSend.text"
@@ -225,8 +229,7 @@ import { DtEmojiPicker } from '@/components/emoji_picker';
 import { DtPopover } from '@/components/popover';
 import { DtInput } from '@/components/input';
 import { DtTooltip } from '@/components/tooltip';
-import { DtIconImage, DtIconVerySatisfied, DtIconSatisfied } from '@dialpad/dialtone-icons/vue3';
-import { hasSlotContent } from '@/common/utils';
+import { DtIconImage, DtIconVerySatisfied, DtIconSatisfied, DtIconSend } from '@dialpad/dialtone-icons/vue3';
 
 export default {
   name: 'DtRecipeMessageInput',
@@ -241,6 +244,7 @@ export default {
     DtIconImage,
     DtIconVerySatisfied,
     DtIconSatisfied,
+    DtIconSend,
   },
 
   mixins: [],
@@ -629,8 +633,8 @@ export default {
   },
 
   computed: {
-    hasSendIcon () {
-      return hasSlotContent(this.$slots.sendIcon);
+    showSendIcon () {
+      return !this.showSend.text;
     },
 
     inputLength () {
@@ -660,6 +664,10 @@ export default {
     emojiPickerHovered () {
       return this.emojiPickerFocus || this.emojiPickerOpened;
     },
+
+    sendIconSize () {
+      return '300';
+    },
   },
 
   watch: {

diff --git a/...ges/dialtone-vue3/recipes/conversation_view/message_input/message_input_default.story.vue b/...ges/dialtone-vue3/recipes/conversation_view/message_input/message_input_default.story.vue
@@ -64,6 +64,7 @@
         <span v-html="$attrs.top" />
       </template>
       <template
+        v-if="$attrs.sendIcon"
         #sendIcon="{ iconSize }"
       >
         <dt-icon