Adding a tooltip with multiple colors creates several lines

[floral sparrow]

This:

ItemEvents.modifyTooltips(e => {
    e.modify('#minecraft:signs', { shift: true }, text => {
        text.add([Text.of('test').white()])
    })
    e.modify('#minecraft:signs', { shift: false }, text => {
        text.add([Text.of('Hold [').darkGray(), Text.of('Shift').gray(), Text.of('] for Summary').darkGray()])
    })
})```
Turns into the image attached. I want it to be all on one line

[deft token]

Once your ticket has been resolved, please close it with </ticket close:1054771505520717835> command!

[last goblet]

Each element of the list passed to text.add is its own separate line

Instead, append components to each other:

Text.empty()
  .append(Text.darkGray('Hold ['))
  .append(Text.gray('Shift'))
  .append(Text.darkGray('] for Summary'))

Why Text.empty()?
That's because append makes the component added to it a "child" - sort of like you would do with appendChild() method in DOM API in browsers.

So the text component will end up sort of like this (written in pseudo-XML, not an actual representation - this is to see how text components are structured)

<text>
  <text color="darkGray">Hold [</text>
  <text color="gray">Shift</text>
  <text color="darkGray">] for Summary</text>
</text>

Notice how the outer component doesn't have any color assigned.

If you'd do:

Text.darkGray('Hold [')
  .append(Text.gray('Shift'))
  .append(Text.darkGray('] for Summary'))

your text component would looks like this in the same "pseudo-XML":

<text color="darkGray">
  Hold [
  <text color="gray">Shift</text>
  <text color="darkGray">] for Summary</text>
</text>

Notice how the outer component has color - this will be the color used for children, if children don't specify color.

[bronze orbit]

Ah so that’s why I sometimes see empty components with a bunch of children

[floral sparrow]

Thanks