Skip to content

fix(editor): NO-JIRA fix editor font color button UX#1086

Merged
Maysam Kangarani Farahani (maysamkf) merged 4 commits intostagingfrom
fix-font-color-icon-issue
Mar 2, 2026
Merged

fix(editor): NO-JIRA fix editor font color button UX#1086
Maysam Kangarani Farahani (maysamkf) merged 4 commits intostagingfrom
fix-font-color-icon-issue

Conversation

@maysamkf
Copy link
Copy Markdown
Contributor

@maysamkf Maysam Kangarani Farahani (maysamkf) commented Mar 2, 2026 •
edited
Loading

fix editor font color button UX

Obligatory GIF (super important!)

Obligatory GIF

🛠️ Type Of Change

These types will increment the version number on release:

  • Fix
  • Feature
  • Performance Improvement
  • Refactor

📖 Description

  • Replaced color input button with icon button
  • Removed input styles

💡 Context

The font color input button was rendering incorrectly (See screenshots).
Additionally the original figma was using DtIconStopFilled instead of a input button

📝 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 added / updated unit tests.
  • I have validated components with a screen reader.
  • I have validated components keyboard navigation.

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.

📷 Screenshots / GIFs

Issue observed

Screenshot 2026-03-02 at 10 15 10 AM
2026-03-02.10-17-20.mov

🔗 Sources

https://www.figma.com/design/XLqzCLNoqHvxsj2HRYsPd3/Email---SMS-migration?node-id=8508-16749&m=dev

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 2, 2026

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

@maysamkf Maysam Kangarani Farahani (maysamkf) marked this pull request as ready for review March 2, 2026 18:22
@braddialpad Brad Paugh (braddialpad) added the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label Mar 2, 2026
braddialpad
Brad Paugh (braddialpad) requested changes Mar 2, 2026
View reviewed changes
Comment thread packages/dialtone-vue/recipes/conversation_view/editor/editor.vue Outdated
<component
:is="button.icon"
size="200"
:style="{ color: currentFontColor }"
Copy link
Copy Markdown
Contributor

@braddialpad Brad Paugh (braddialpad) Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we are in dark mode, shouldn't this show a white/light color for text instead of dark by default? Currently it shows black for both light mode and dark mode, even though the text is white in dark mode.

Copy link
Copy Markdown
Contributor Author

@maysamkf Maysam Kangarani Farahani (maysamkf) Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your right, thanks for the catch!

2026-03-02.12-26-57.mov

@maysamkf Maysam Kangarani Farahani (maysamkf) merged commit d73da4a into staging Mar 2, 2026
16 checks passed
@maysamkf Maysam Kangarani Farahani (maysamkf) deleted the fix-font-color-icon-issue branch March 2, 2026 23:03
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 2, 2026

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1086/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1086/

Brad Paugh (braddialpad) pushed a commit that referenced this pull request Mar 2, 2026
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue/v3.209.0
8720a2f 
# [3.209.0](dialtone-vue/v3.208.0...dialtone-vue/v3.209.0) (2026-03-02)

### Bug Fixes

* **Editor:** NO-JIRA fix editor font color button UX ([#1086](#1086)) ([d73da4a](d73da4a))

### Features

* **Editor:** DP-176403 add image resizing for dialtone editor  ([#1085](#1085)) ([e69f0f1](e69f0f1))
Brad Paugh (braddialpad) pushed a commit that referenced this pull request Mar 2, 2026
@semantic-release-bot
chore(release): NO-JIRA dialtone/v9.165.0
cdf3399 
# [9.165.0](dialtone/v9.164.0...dialtone/v9.165.0) (2026-03-02)

### Bug Fixes

* **Editor:** NO-JIRA fix editor font color button UX ([#1086](#1086)) ([d73da4a](d73da4a))

### Features

* **Editor:** DP-176403 add image resizing for dialtone editor  ([#1085](#1085)) ([e69f0f1](e69f0f1))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@francisrupert Francis Rupert (francisrupert) francisrupert approved these changes

@braddialpad Brad Paugh (braddialpad) braddialpad approved these changes

@anarravula-dialpad Aditya Narravula (anarravula-dialpad) Awaiting requested review from anarravula-dialpad

@iropolo Ignacio Ropolo (iropolo) Awaiting requested review from iropolo iropolo is a code owner

@ninarepetto Nina Repetto (ninarepetto) Awaiting requested review from ninarepetto ninarepetto is a code owner

Assignees

No one assigned

Labels

visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@maysamkf @francisrupert @braddialpad