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

@@ -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;
 }

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],

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',

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 />

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],