Grafana UI: Add code variant to Text component

[tskarhed]

What is this feature?

Adds a monospaced code variant to make it available in the Text component. code is used as it aligns somewhat with the design tokens.

Why do we need this feature?

Sometimes we need to use a monospaced font.

Who is this feature for?

Developers

Special notes for your reviewer:

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[tskarhed]

Just my initial thoughts, I can be convinced otherwise

[JoaoSilvaGrafana]

It seems like it makes sense, but just double checking with @staton-hyse11 what his opinion is. We can also remove this Omit later if we find a use case for it and it won't be a breaking change

[JoaoSilvaGrafana]

Lgtm! Do we want to add something to the documentation both in storybook and here about how if developers want to display code they should use this variant?.

[JoaoSilvaGrafana]

It seems like it makes sense, but just double checking with @staton-hyse11 what his opinion is. We can also remove this Omit later if we find a use case for it and it won't be a breaking change

[JoaoSilvaGrafana]

Could create a type at the top for this. Like type TextLinkVariants = keyof Omit<ThemeTypographyVariantTypes, 'code'>; and then we could use it both here and in line 23?

[tskarhed]

Lgtm! Do we want to add something to the documentation both in storybook and here about how if developers want to display code they should use this variant?.

I see you point, but I do think we should make a code component (if we don't already have one?) for writing inline code that has some border and highlighting. So in general the code variant shouldn't be used, unless there are some rare cases? 🤔

So maybe adding the code variant to Don't use unless you are really sure that you should?

[JoaoSilvaGrafana]

Lgtm! Do we want to add something to the documentation both in storybook and here about how if developers want to display code they should use this variant?.

I see you point, but I do think we should make a code component (if we don't already have one?) for writing inline code that has some border and highlighting. So in general the code variant shouldn't be used, unless there are some rare cases? 🤔

So maybe adding the code variant to Don't use unless you are really sure that you should?

Ah so wait do we want it to be a code variant or a more generic monospace variant? What's some examples where we would use this variant?

Ignore me, code seems more logical, but yeah maybe add a line like that saying it is discouraged unless there is a specific reasoning behind it.

[codeincarnate]

Saw this and Dataviz could potentially use this so decided to check it out. Seems to work well!

[eledobleefe]

Lgtm! Do we want to add something to the documentation both in storybook and here about how if developers want to display code they should use this variant?.

I see you point, but I do think we should make a code component (if we don't already have one?) for writing inline code that has some border and highlighting. So in general the code variant shouldn't be used, unless there are some rare cases? 🤔

So maybe adding the code variant to Don't use unless you are really sure that you should?

Hi @tskarhed!
First of all, great job on this! 🙌
My 2 cents here... I would also add some notes to the documentation. Devs will see that option and, unless we guide them, they can end up using this as we do not want. Maybe just add kind of what you said: "There is a 'code' variant that will show a monospace typography, but it should be used only when there are x and x requirements", for example 🤷
Otherwise, LGTM 👌