search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.76k stars 1.8k forks source link

[Feature Request]: Proposal for Text-highlighter component #17257

Open punnoosewilson opened 1 month ago

punnoosewilson commented 1 month ago

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.

image

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

github-actions[bot] commented 1 month ago

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 commented 1 month ago

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 commented 3 weeks ago

@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.