Skip to content

[7.x] [Code] Add highlightLine prop to CodeBlock (#48230)#48331

Merged
rylnd merged 1 commit intoelastic:7.xfrom
rylnd:backport/7.x/pr-48230
Oct 16, 2019
Merged

[7.x] [Code] Add highlightLine prop to CodeBlock (#48230)#48331
rylnd merged 1 commit intoelastic:7.xfrom
rylnd:backport/7.x/pr-48230

Conversation

@rylnd
Copy link
Copy Markdown
Contributor

@rylnd rylnd commented Oct 15, 2019

Backports the following commits to 7.x:

* CodeBlock accepts an array of strings, rather than a single string

Rather than do the splitting up of lines (for highlighting, numbering)
internally, it makes a bit more sense to have the consumer provide an
array of strings to be rendered.

The biggest win here is the disambiguation of our upcoming
`highlightLine` prop: were we to accept an array of line indices,
it's unclear whether those should correspond to the monaco index
(1-based), internal index (0-based), or formatted (passed through
`lineNumber)`. Better to standardize on the lineIndex argument parameter
already used for lineNumber, and simply ask the consumer to return a
boolean for any given line.

* Add highlightLine prop to CodeBlock

Allows consumers to declare which lines should be highlighted with the
more subtle, full-width coloring.

* Refactors decoration generation into private methods
* Simplifies both lineNumber and highlightLine to be invoked with _just_
the lineIndex, as consumers will now have the array to index into
themselves, if necessary.

* Simplify CSS related to line highlighting

Because of the way we're currently using Monaco, we need to apply all
three of these options to our line decorations. However, all we really
need to do is set the background-color.

As such, we can remove these redundant/unused css classes and reduce the
noise around this functionality. Also, BEM.

* Remove errant CSS rule

This selector is meant to move the folding button over to account for
the extra width taken by the Blame sidebar.

However, `.code-line-decoration` is the only class that is applied to
the blame view, and the selector in question was in fact incorrectly
moving the folding button off the screen on any foldable line that was
also highlighted.

The bug was fixed in the previous commit that removed this class, but
this was the last mention of it.

* Update mock data to depend on Typescript-Node-Starter repo

So that we don't have to import a non-standard repo to view the full
functionality of this page.
@rylnd rylnd added the backport This PR is a backport of another PR label Oct 15, 2019
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@rylnd rylnd merged commit 3f4f730 into elastic:7.x Oct 16, 2019
@rylnd rylnd deleted the backport/7.x/pr-48230 branch October 16, 2019 01:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants