[Feature Request]: Proposal for Text-highlighter component

[punnoosewilson]

The problem

Our team is presently focused on designing versioning governance artefacts, a feature aimed at enhancing our data management capabilities. As part of this project, we are developing a comparison feature that allows users to easily identify differences between two versions of a data set. To improve the usability and clarity of this feature, our objective is to integrate text-highlighters, which will visually indicate where and what changes have taken place between the versions.

Upon investigation, we discovered that there isn’t a text-highlighter component available in Carbon Design System, which we rely on for our UI components. Given this gap, we are considering proposing the development of a text-highlighter component to the Carbon Design System team. This proposal would not only benefit our project but also potentially enhance the toolkit available to the broader Carbon community, supporting a wider range of applications that require similar functionality.

The solution

It’s crucial that we use HTML semantics appropriately to represent the text highlighters, as improper usage could lead to a negative user experience. We must ensure effective communication to users utilizing assistive technologies, necessitating careful control over the markup.

We require a component offering 3 variants:

1st variant - <mark> : This HTML element represents text which is marked or highlighted for reference or notation purposes. 2nd variant - <del> : This HTML element represents a range of text that has been deleted from a document. (Comparison purpose) 3rd variant - <ins> : This HTML element represents a range of text that has been added to a document. (Comparison purpose)

Examples

I've put together a storybook that explains how the component works, with specific use cases.

Use cases and intro: https://pages.github.ibm.com/Punnoose-Wilson/text-highlighter/?path=/docs/text-highlighter--docs Prototype: https://pages.github.ibm.com/Punnoose-Wilson/text-highlighter/?path=/docs/component-texthighlighter--docs

Application/PAL

IBM Knowledge Catalog(IKC)

Business priority

High Priority = pressing release

Available extra resources

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[tay1orjones]

Thanks for including such thorough information in those links! Providing some styling out of the box is an interesting proposition.

Related: https://adrianroselli.com/2017/12/tweaking-text-level-styles.html

My first thought is that we might not be able to have this type of thing indicated only by color, it probably also needs a shape change of some kind. Second, we'll need to support high-contrast modes as mentioned in that link. Do you have any ideas on how to tackle those issues?

[punnoosewilson]

@tay1orjones Thanks for your suggestions. I've looked over the information you provided. I'll discuss this with the team and come up with some solutions to the problems you've identified.

[punnoosewilson]

@tay1orjones

As a team, we brainstormed and got solution to visually distinguish between the three variants. We considered several possibilities before reaching this consensus.

To ensure high contrast, we can leverage the existing color tokens background-inverse and text-inverse. As a result, in high-contrast mode, the ins and del variants will exclusively use these colors, while the mark variant will be displayed in yellow-30 to ensure accessibility.

The storybook has been updated to showcase all the changes mentioned above. https://pages.github.ibm.com/Punnoose-Wilson/text-highlighter/?path=/docs/text-highlighter--docs

[sstrubberg]

This is a great idea @punnoosewilson. Unfortunately, due to roadmap limitations, we won't be able to take this on soon, but we'd love to have you come by Carbon's Design Office Hours and we can brain-storm how you might go about implementing this.

[sstrubberg]

For REF - https://pages.github.ibm.com/Watson-Health/components/nlp-annotation-preview/overview.html

[punnoosewilson]

Hey @sstrubberg @tay1orjones , I presented this component at Carbon's Design Office Hours and started discussion with designers who are currently using the highlighter in their projects. Recording

Based on their use cases, I've implemented a new prop called "reference" to enable reference-tagging functionality.

The latest changes are reflected in the Storybook: Use cases and intro: https://pages.github.ibm.com/Punnoose-Wilson/text-highlighter/?path=/docs/text-highlighter--docs Prototype: https://pages.github.ibm.com/Punnoose-Wilson/text-highlighter/?path=/docs/component-use-cases--docs

What’s the next step that I need to take?

[sstrubberg]

@punnoosewilson this is great! Thank you for sharing all the additional context and the storybooks! We want to get your component up on Carbon Labs ASAP, but first, our team needs to finish this epic so you have a place to put your code. We're hoping to have this ready for you by EOY. @kennylam @Gururajj77

[sstrubberg]

@punnoosewilson We're ready for this enhancement in Carbon Labs when you're ready!

[punnoosewilson]

@sstrubberg, I'm ready to go. I checked out the Carbon Labs contribution section and Developer Guide. I observed a form submission. Do I need to fill that out first, or should I wait for something else before I submit my code?

[sstrubberg]

@punnoosewilson go ahead and fill it out so we have a record. Then let's get your code up and working. Once you have your submitted your form, no need to wait on a response from us. Go ahead and get your code into Labs.

[jjennings7]

@sstrubberg what's the status of this?

Elyra canvas consumers use highlighting on the results from a search. We noticed there's no text tokens or highlight token in v11, so we've decided to use $tag-background-blue and $tag-color-blue which are the same color values as the blue examples in the Carbon Labs storybook component. We know using the tag tokens aren't technically correct, but they are the only ones that do what we need currently and pass contrast checks. Here's our issue for reference: https://github.ibm.com/NGP-TWC/wdp-abstract-canvas/issues/3847

[tomlyn]

@sstrubberg As one of the Elyra Canvas developers I'm registering interest in this issue as well as @jjennings7 Is there any ETA?