From 6ca26dd043573673cb491c3f362a0ead0ab7870e Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Mon, 19 Feb 2024 13:49:34 +0100
Subject: [PATCH] Grafana UI: Add code variant to Text component (#82318)

* Text: Add code variant

* Add TextLinkVariants

* Add don't
---
 packages/grafana-data/src/themes/createTypography.ts      | 2 ++
 .../grafana-ui/src/components/Link/TextLink.story.tsx     | 5 ++++-
 packages/grafana-ui/src/components/Link/TextLink.tsx      | 8 +++++---
 packages/grafana-ui/src/components/Text/Text.mdx          | 1 +
 packages/grafana-ui/src/components/Text/Text.story.tsx    | 5 ++++-
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-data/src/themes/createTypography.ts b/packages/grafana-data/src/themes/createTypography.ts
index 1473adc2bb8..3f11990c0e7 100644
--- a/packages/grafana-data/src/themes/createTypography.ts
+++ b/packages/grafana-data/src/themes/createTypography.ts
@@ -114,6 +114,7 @@ export function createTypography(colors: ThemeColors, typographyInput: ThemeTypo
     h6: buildVariant(fontWeightMedium, 14, 22, 0.15),
     body: buildVariant(fontWeightRegular, fontSize, 22, 0.15),
     bodySmall: buildVariant(fontWeightRegular, 12, 18, 0.15),
+    code: { ...buildVariant(fontWeightRegular, 14, 16, 0.15), fontFamily: fontFamilyMonospace },
   };
 
   const size = {
@@ -152,4 +153,5 @@ export interface ThemeTypographyVariantTypes {
   h6: ThemeTypographyVariant;
   body: ThemeTypographyVariant;
   bodySmall: ThemeTypographyVariant;
+  code: ThemeTypographyVariant;
 }
diff --git a/packages/grafana-ui/src/components/Link/TextLink.story.tsx b/packages/grafana-ui/src/components/Link/TextLink.story.tsx
index a4dcdc74a31..354a9d7ae06 100644
--- a/packages/grafana-ui/src/components/Link/TextLink.story.tsx
+++ b/packages/grafana-ui/src/components/Link/TextLink.story.tsx
@@ -18,7 +18,10 @@ const meta: Meta = {
     controls: { exclude: ['href', 'external'] },
   },
   argTypes: {
-    variant: { control: 'select', options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'bodySmall', undefined] },
+    variant: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'bodySmall', undefined],
+    },
     weight: {
       control: 'select',
       options: ['bold', 'medium', 'light', 'regular', undefined],
diff --git a/packages/grafana-ui/src/components/Link/TextLink.tsx b/packages/grafana-ui/src/components/Link/TextLink.tsx
index 2a50bc9e2db..2d5a253bee8 100644
--- a/packages/grafana-ui/src/components/Link/TextLink.tsx
+++ b/packages/grafana-ui/src/components/Link/TextLink.tsx
@@ -10,6 +10,8 @@ import { customWeight } from '../Text/utils';
 
 import { Link } from './Link';
 
+type TextLinkVariants = keyof Omit<ThemeTypographyVariantTypes, 'code'>;
+
 interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'target' | 'rel'> {
   /** url to which redirect the user, external or internal */
   href: string;
@@ -19,8 +21,8 @@ interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 't
   external?: boolean;
   /** True when the link will be displayed inline with surrounding text, false if it will be displayed as a block. Depending on this prop correspondant default styles will be applied */
   inline?: boolean;
-  /** The default variant is 'body'. To fit another styles set the correspondent variant as it is necessary also to adjust the icon size */
-  variant?: keyof ThemeTypographyVariantTypes;
+  /** The default variant is 'body'. To fit another styles set the correspondent variant as it is necessary also to adjust the icon size. `code` is excluded, as it is not fit for links. */
+  variant?: TextLinkVariants;
   /** Override the default weight for the used variant */
   weight?: 'light' | 'regular' | 'medium' | 'bold';
   /** Set the icon to be shown. An external link will show the 'external-link-alt' icon as default.*/
@@ -29,7 +31,7 @@ interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 't
 }
 
 const svgSizes: {
-  [key in keyof ThemeTypographyVariantTypes]: IconSize;
+  [key in TextLinkVariants]: IconSize;
 } = {
   h1: 'xl',
   h2: 'xl',
diff --git a/packages/grafana-ui/src/components/Text/Text.mdx b/packages/grafana-ui/src/components/Text/Text.mdx
index 8d35135973f..30b148afc3a 100644
--- a/packages/grafana-ui/src/components/Text/Text.mdx
+++ b/packages/grafana-ui/src/components/Text/Text.mdx
@@ -47,6 +47,7 @@ In this documentation you can find:
 
 - Do not use the `element` prop because of its appearance, use it to organize the structure of the page.
 - Do not use color for emphasis as colors are related to states such as `error`, `success`, `disabled` and so on.
+- Do not use the `code` variant for anything other than code snippets.
 
   <br />
   <br />
diff --git a/packages/grafana-ui/src/components/Text/Text.story.tsx b/packages/grafana-ui/src/components/Text/Text.story.tsx
index 01988abef65..0ab0427e8c9 100644
--- a/packages/grafana-ui/src/components/Text/Text.story.tsx
+++ b/packages/grafana-ui/src/components/Text/Text.story.tsx
@@ -16,7 +16,10 @@ const meta: Meta = {
     },
   },
   argTypes: {
-    variant: { control: 'select', options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'bodySmall', undefined] },
+    variant: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'bodySmall', 'code', undefined],
+    },
     weight: {
       control: 'select',
       options: ['bold', 'medium', 'light', 'regular', undefined],