EuiMark for highlighting text content

[snide]

We have a lot of places in our layouts where we highlight text content. Principal examples are Discover and the Log UI but I'm sure there are more. We should probably make a new component EuiMark to standardize this.

• Should prolly generate an HTML mark element. https://www.w3schools.com/tags/tag_mark.asp
• Similar to EuiBadge should probably accept both a named color prop as well as a hex value. There are plans in the Logs UI to have multiple highlights (with color selection) in play at once.

This originally cam up in elastic/kibana#39569 (review)

[cchaos]

How would this component be different from EuiHighlight? Or should EuiHighlight be altered to allow these extra color selections and use <mark> at the DOM level?

[snide]

I think preferably EuiHighlight would use EuiMark for it's actual highlighting. EuiMark I would see as simply a display component.

We'd likely want a transparent and strong option as well.

[chandlerprall]

It (or the underlying logic function) should produce some kind of structured data that can be mapped into e.g. HTML/mark. This leaves it open for other implementations as well.

[thompsongl]

Any one have any time or work invested in this yet? If so, I'll look elsewhere. If not, I may use it as a from-scratch comparison for the different styling solutions.
At the very least there'll be starting place if someone is interested in finishing it.

[snide]

@thompsongl I have not. My plan was the following props

<EuiMark color="" strong em>text only string</EuiMark>

with that just generating a <mark className="euiMark euiMark--colorWhatever">tag</mark>

We have the following potential usage:

• Logging ui highlights stuff in the log lines
• Discover highlights stuff within the results
• Codesearch has lots of highlighting within their app'
• Combobox results within the dropdown

Generally a bright yellow, with dark text is the norm for coloring. In cases like EuiHighlight or combobox results, we have no background, and instead bold things.

[mridulgogia]

The required result is to highlight the text just like it is highlighted with a highlighter(like labels, above)?

If yes, do we need a new component or should we extend the functionality of the EuiMark feature?

[thompsongl]

@mridulgogia The EuiMark component does not yet exist. This issue is meant to result in the creation of that component, solving the use cases discussed above.

I had done some initial work on this issue several months ago, although I don't believe the branch to be feature-complete. Anyone is welcome to take up where I left off: https://github.com/thompsongl/eui/tree/euimark/src/components/mark

[mridulgogia]

Can i work on this issue?

[cchaos]

Closed via #3060