Visual design for @mention support in rich text components

[vivinkrishna-ni]

📌 Request Background

Both the nimble-rich-text-editor and nimble-rich-text-viewer are used in the SLE application for the comments feature and here is the link to the issue: #1288

As part of the comments in SLE, @mention is a key feature to tag or mention other users in the organization and notify them if mentioned in a comment.

Interaction design: https://www.figma.com/file/Q5SU1OwrnD08keon3zObRX/SystemLink-orig?type=design&node-id=7248-114254&mode=design&t=2HcoatDFr9QHDRJd-0

Existing visual design for nimble-rich-text-editor: https://www.figma.com/file/PO9mFOu5BCl8aJvFchEeuN/Nimble_Components?type=design&node-id=2482%3A82389&mode=dev

🎯 Core Requirements

• The @mention text in the editor and viewer should be a different color like in the interaction design
• Visual design for dropdown when @ is added in the editor for all supported themes
• @mention text in different states like disabled, error state, and in different themes

🍆 Non-requirements

🥅 Acceptance Criteria

• Visual Design Spec submitted (link)
• Visual Design Spec reviewed by design team
• Visual Design Spec reviewed by dev team

[RickA-NI]

Brandon said he took care of this already. Did the team get what they needed?

[jattasNI]

@RickA-NI @NIbokeefe When I look at the Text Area page of the Nimble_Components Figma, I don't see designs for the questions under the "Core requirements" section above. I may be missing something or there may be a miscommunication about what's done.