[EuiTour] Text style is different for standalone tours and for steps in the guided tour

[ek-so]

Describe the bug
In EuiTour component the visual look of the tours is different, depending on what we wrap the text in: if in euiText, it gets bigger unless size="s" is applied; if in EuiTourStep, it's smaller by default.

Impact and severity
Not urgent

To Reproduce
It's simply visible on our documentation site

Expected behavior

• Text is smaller (not to become larger than the tour title)
• Text is consistent for all tour elements

Screenshots (Optional)

[mgadewoll]

I don't think it's a bug per se. Since the content of the tour is a slot it depends on what content is passed.
One example passes simple <p> (code) while the other passes <EuiText><p /></EuiText> (code)

We can align the docs examples to use the same text but consumers can pass anything and the font size can be different because of that.

Thinking a bit further: If a default EuiText with a <p> content is rendered, should it have the same font size as a default rendered <p>?
⚠️ Changing EuiText defaults or font sizes will have a wider impact.

[ek-so]

Thanks @mgadewoll, that sounds logical. It seems that in this case our "text scales" system doesn't work here properly... And you are right, maybe we should revise defaults for regular text (<p>) and say that it should match <EuiText> defaults for <p>.
@ryankeairns wdyt? Given also that you are experimenting with the header styles?

[ryankeairns]

In short, I think it makes sense that a plain <p>...</p> matches the default of <EuiText><p>...</p></EuiText>
It seems something may be out of sync in this regard.

[weronikaolejniczak]

@mgadewoll @ek-so @ryankeairns

I will treat this task as an improvement to our documentation page so that we use <EuiText><p> consistently across the examples.

I will also create a separate task to make the <p> match the <EuiText><p> default. This has a much broader impact.

Does this sound alright?

One doubt I have. We make <p> render as expected (instead of 14px it would be 16px). That doesn't fix the initial issue of the tour content being larger than the header. How do we want to fix that? Increase the header size or force a specific font-size in the content?

[ek-so]

To me yes, absolutely! Thanks @weronikaolejniczak 👍

As for the docs, I'd maybe just apply "s" size then everywhere, because it's the way it works now, right? And it looks weird that the header is smaller than text in tour component.

Yesterday we discussed with @ryankeairns that our entire font system might require some changes and re-assessment, the way we did with colors. This is a big task, but I hope to carve some time to investigate and check how we could improve text tokens/sizes and all that.

[weronikaolejniczak]

@ek-so I can add size="s" to our docs 👍🏻 thanks, Kate!

One thing to bare in mind, it means the usage will have to be updated in Kibana. I can do it for the side nav tour but wherever else that the tour is used, Kibana teams will have to adjust.

[ek-so]

I personally think this should be ok. This way we're making potentially larger text to be smaller, which should not cause any unexpected visual issues. But curious to see what other folks think.

[ryankeairns]

+1 to the point about additional changes - possibly base font size - changing.
Once we have a better handle on what we want, as an outcome, then we will bring to EUI team for review/discussion on implementation.

From my recent experiments, its possible we want to add a base font size (14) that is not tightly coupled to size (16). Meaning, we won't want to change all our sizing/padding/spacing in the process.

[weronikaolejniczak]

@ryankeairns @ek-so perfect, then what I will do is treat this task solely as a quick docs improvement and I'll let you create an issue once you discuss how to proceed with the typography situation. Thanks!