fix(rich-text-editor): DLT-2107 message input recipe updates #522

hynes-dialpad · 2024-10-04T02:19:38Z

Message Input Recipe Updates

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

Fix

📖 Jira Ticket

DLT-2107

📖 Description

Jira ticket outlines all changes in PR.

📝 Checklist

For all PRs:

I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
I have reviewed my changes.
I have added all relevant documentation.
I have considered the performance impact of my change.

For all Vue changes:

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

For all CSS changes:

I have used design tokens whenever possible.
I have considered how this change will behave on different screen sizes.
I have visually validated my change in light and dark mode.
I have used gap or flexbox properties for layout instead of margin whenever possible.

…s circle buttons.

juliodialpad

Your linter is doing some magic here, please fix it and update the PR, it's pretty hard to review with all those automatic-linter changes.

You can try with steps 3 and 4 of this article: https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code

This reverts commit 81fb841.

This reverts commit 67ea19b.

…ght.

github-actions · 2024-10-07T13:03:55Z

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. ‼️

hynes-dialpad · 2024-10-07T13:57:09Z

@juliodialpad I think I had some bad merges, so I reverted many of my changes to a solid point and re-implemented them. It looks like everything is building correctly now, so if you could review it, that would be appreciated! Thanks.

ninamarina · 2024-10-07T14:08:34Z

This is how I am seeing the preview in Vue 2, the buttons are not horizontally aligned:

And in Vue 3, there's an opacity for all the buttons that I don't think it's intended:

hynes-dialpad · 2024-10-07T15:01:40Z

@ninamarina Thanks for the catch. I mis-spelled "direction" (as directon). I've corrected it in the subsequent commit.

As far as the opacity, it's something we can discuss. That is intentional (and is now reflected in Vue2 as well). The idea is that when the message input is in focus, we reduce the color strength of the buttons. I've reduced the opacity amount from 50% to 75% to make it a bit more subtle, but still cut the strength.

ninamarina · 2024-10-07T16:03:26Z

packages/dialtone-vue3/recipes/conversation_view/editor/editor.vue

              {{ showAddLink.setLinkTitle }}
            </span>
            <dt-input
              v-model="linkInput"
              :input-aria-label="showAddLink.setLinkInputAriaLabel"
              data-qa="dt-editor-link-input"
              :placeholder="setLinkPlaceholder"
-              input-wrapper-class="d-bgc-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 d-py2 d-ol-none"
+              input-wrapper-class="d-bgc-secondary d-mt6 d-bar5 d-ba d-baw1 d-bc-default d-py2 d-ol-none"


Are these changes in the Editor component intended?

Yes. We shouldn't be using raw color tokens, especially when we have semantic surface and border color tokens that match appropriately. Can you confirm @francisrupert ?

Of course, especially as they align to the Figma color use.

Did realize though that the Vue sync scripts didn't copy over the updated classes from Vue3 to Vue2. Updated in Vue2 editor.vue now.

packages/dialtone-vue2/recipes/conversation_view/message_input/message_input.vue

ninamarina · 2024-10-07T16:09:41Z

@hynes-dialpad just left you some comments, let me know if you need help with any of those

hynes-dialpad · 2024-10-07T17:09:43Z

Thanks @ninamarina! I've made the necessary updates based on your feedback.

francisrupert · 2024-10-07T17:16:12Z

As far as the opacity ... when the message input is in focus, we reduce the color strength of the buttons.

It appears to be doing it on hover too, not just focus. Feels very odd, though I suppose it can still make sense since they're still actionable.

Screen.Recording.2024-10-07.at.12.13.23.PM.mov

hynes-dialpad · 2024-10-07T17:20:50Z

It appears to be doing it on hover too, not just focus. Feels very odd, though I suppose it can still make sense since they're still actionable.

@francisrupert Yeah, I added that after Nina's comment so that, on hover, the opacity reverts to normal levels so they don't look disabled.

packages/dialtone-vue2/recipes/conversation_view/message_input/message_input.vue

…er radius

packages/dialtone-vue2/recipes/conversation_view/editor/editor.vue

packages/dialtone-vue2/recipes/conversation_view/message_input/message_input.vue

packages/dialtone-vue3/recipes/conversation_view/editor/editor.vue

juliodialpad · 2024-10-07T18:12:55Z

packages/dialtone-vue3/recipes/conversation_view/editor/editor.vue

Your linter is still doing a lot of changes on this file

I'm using VS Studio so not sure how.

francisrupert · 2024-10-07T23:40:21Z

Text only button spacing.

francisrupert

Approve from design perspective, including with Percy. Looks like the main followup is what Tico called out as a separate task to replace CSS Utilities with a custom style specific to this component to avoid CSS specificity battles when consuming and adjusting further.

juliodialpad

Looks good now, thanks! Just apply the suggested changes before merging.

packages/dialtone-vue2/recipes/conversation_view/message_input/message_input.vue

packages/dialtone-vue3/recipes/conversation_view/message_input/message_input.vue

…ymore.

github-actions · 2024-10-09T17:12:31Z

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

## [9.79.2](dialtone/v9.79.1...dialtone/v9.79.2) (2024-10-11) ### Bug Fixes * DLT-1548 fix opacity classes selectors ([#520](#520)) ([1e6ef93](1e6ef93)) * **Rich Text Editor:** DLT-2107 message input recipe updates ([#522](#522)) ([639a72e](639a72e))

## [2.163.2](dialtone-vue2/v2.163.1...dialtone-vue2/v2.163.2) (2024-10-11) ### Bug Fixes * DLT-1548 fix opacity classes selectors ([#520](#520)) ([1e6ef93](1e6ef93)) * **Rich Text Editor:** DLT-2107 message input recipe updates ([#522](#522)) ([639a72e](639a72e))

## [3.156.2](dialtone-vue3/v3.156.1...dialtone-vue3/v3.156.2) (2024-10-11) ### Bug Fixes * DLT-1548 fix opacity classes selectors ([#520](#520)) ([1e6ef93](1e6ef93)) * **Rich Text Editor:** DLT-2107 message input recipe updates ([#522](#522)) ([639a72e](639a72e))

hynes-dialpad and others added 4 commits October 3, 2024 17:34

Modify composer spacing. Convert bottom actions to squircle buttons v…

1bc9262

…s circle buttons.

fix lint

de9d583

Adjusting padding on message rich editor. Copying over to vue2

67ea19b

merge hell

81fb841

hynes-dialpad requested review from juliodialpad, iropolo, francisrupert, braddialpad and ninamarina as code owners October 4, 2024 02:19

juliodialpad requested changes Oct 4, 2024

View reviewed changes

hynes-dialpad added 6 commits October 4, 2024 17:09

Revert "merge hell"

1bc9a1e

This reverts commit 81fb841.

Revert "Adjusting padding on message rich editor. Copying over to vue2"

f5c1980

This reverts commit 67ea19b.

Revert previous commits and adjust message input padding and line-hei…

36fc58e

…ght.

rest of vue2 updates

5a13e41

Re-adding CSS classes that I had added previously

03470e8

Resolving merge conflicts

bbac6ea

hynes-dialpad changed the title ~~DLT-2107 message input recipe updates~~ fix(rich-text-editor): DLT-2107 message input recipe updates Oct 7, 2024

hynes-dialpad added the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label Oct 7, 2024

hynes-dialpad self-assigned this Oct 7, 2024

CSS changes weren't copied over to Vue2. Misspell direction on dt-stack.

15eafcb

hynes-dialpad requested a review from juliodialpad October 7, 2024 15:28

ninamarina reviewed Oct 7, 2024

View reviewed changes

packages/dialtone-vue2/recipes/conversation_view/message_input/message_input.vue Outdated Show resolved Hide resolved

ninamarina reviewed Oct 7, 2024

View reviewed changes

packages/dialtone-vue2/recipes/conversation_view/message_input/message_input.vue Outdated Show resolved Hide resolved

ninamarina reviewed Oct 7, 2024

View reviewed changes

packages/dialtone-vue2/recipes/conversation_view/message_input/message_input.vue Outdated Show resolved Hide resolved

Updates based on Nina's feedback

9ee1f96

Missed class name updates in Vue2 component.

ceae597

ninamarina reviewed Oct 7, 2024

View reviewed changes

packages/dialtone-vue2/recipes/conversation_view/message_input/message_input.vue Outdated Show resolved Hide resolved

Modify spacing between send and cancel buttons as well as button bord…

ea0d746

…er radius

juliodialpad requested changes Oct 7, 2024

View reviewed changes

Update transition properties to use DT variables

649e4c3

hynes-dialpad requested a review from ninamarina October 7, 2024 21:00

hynes-dialpad added 3 commits October 8, 2024 09:07

Modifications to non-icon button

0d6975d

Shorten transition duration.

b91762b

Removing the button opacity. Not worth it in the end.

7757dd5

francisrupert approved these changes Oct 8, 2024

View reviewed changes

hynes-dialpad requested a review from juliodialpad October 8, 2024 15:50

juliodialpad approved these changes Oct 8, 2024

View reviewed changes

packages/dialtone-vue2/recipes/conversation_view/message_input/message_input.vue Outdated Show resolved Hide resolved

packages/dialtone-vue3/recipes/conversation_view/message_input/message_input.vue Outdated Show resolved Hide resolved

Remove remaining opacity CSS property since we're not modifying it an…

b332f6c

…ymore.

hynes-dialpad merged commit 639a72e into staging Oct 9, 2024
13 checks passed

hynes-dialpad deleted the DLT-2107-message-input-recipe-updates branch October 9, 2024 17:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(rich-text-editor): DLT-2107 message input recipe updates #522

fix(rich-text-editor): DLT-2107 message input recipe updates #522

hynes-dialpad commented Oct 4, 2024 •

edited

Loading

juliodialpad left a comment

github-actions bot commented Oct 7, 2024

hynes-dialpad commented Oct 7, 2024

ninamarina commented Oct 7, 2024 •

edited

Loading

hynes-dialpad commented Oct 7, 2024

ninamarina Oct 7, 2024

hynes-dialpad Oct 7, 2024

francisrupert Oct 7, 2024

hynes-dialpad Oct 7, 2024

ninamarina commented Oct 7, 2024

hynes-dialpad commented Oct 7, 2024

francisrupert commented Oct 7, 2024

hynes-dialpad commented Oct 7, 2024 •

edited

Loading

juliodialpad Oct 7, 2024

hynes-dialpad Oct 7, 2024

francisrupert commented Oct 7, 2024

francisrupert left a comment

juliodialpad left a comment

github-actions bot commented Oct 9, 2024

fix(rich-text-editor): DLT-2107 message input recipe updates #522

fix(rich-text-editor): DLT-2107 message input recipe updates #522

Conversation

hynes-dialpad commented Oct 4, 2024 • edited Loading

Message Input Recipe Updates

Obligatory GIF (super important!)

🛠️ Type Of Change

📖 Jira Ticket

📖 Description

📝 Checklist

juliodialpad left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 7, 2024

hynes-dialpad commented Oct 7, 2024

ninamarina commented Oct 7, 2024 • edited Loading

hynes-dialpad commented Oct 7, 2024

ninamarina Oct 7, 2024

Choose a reason for hiding this comment

hynes-dialpad Oct 7, 2024

Choose a reason for hiding this comment

francisrupert Oct 7, 2024

Choose a reason for hiding this comment

hynes-dialpad Oct 7, 2024

Choose a reason for hiding this comment

ninamarina commented Oct 7, 2024

hynes-dialpad commented Oct 7, 2024

francisrupert commented Oct 7, 2024

hynes-dialpad commented Oct 7, 2024 • edited Loading

juliodialpad Oct 7, 2024

Choose a reason for hiding this comment

hynes-dialpad Oct 7, 2024

Choose a reason for hiding this comment

francisrupert commented Oct 7, 2024

francisrupert left a comment

Choose a reason for hiding this comment

juliodialpad left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 9, 2024

hynes-dialpad commented Oct 4, 2024 •

edited

Loading

ninamarina commented Oct 7, 2024 •

edited

Loading

hynes-dialpad commented Oct 7, 2024 •

edited

Loading