From f32e4810abe5ad1587c00f83aa2355142cf7be55 Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Wed, 8 May 2024 14:03:21 +0100
Subject: [PATCH] GrafanaUI: Add `tabular` prop to Text component for tabular
 numbers (#87440)

---
 packages/grafana-ui/src/components/Text/Text.mdx  |  1 +
 .../grafana-ui/src/components/Text/Text.story.tsx |  3 ++-
 packages/grafana-ui/src/components/Text/Text.tsx  | 15 ++++++++++++---
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Text/Text.mdx b/packages/grafana-ui/src/components/Text/Text.mdx
index 30b148afc3a..c81b6e822af 100644
--- a/packages/grafana-ui/src/components/Text/Text.mdx
+++ b/packages/grafana-ui/src/components/Text/Text.mdx
@@ -42,6 +42,7 @@ In this documentation you can find:
 - Heading should be organized in hierarchy.
 - When a heading needs to have the appearance of another heading rank but it will affect the page heading hierarchy, use `variant` prop to modify its style instead.
 - Use weight or italic for emphasis.
+- Use the `tabular` prop when numbers should have a fixed width, such as in tables.
 
 ### **Don'ts**
 
diff --git a/packages/grafana-ui/src/components/Text/Text.story.tsx b/packages/grafana-ui/src/components/Text/Text.story.tsx
index 2c18f88e104..1d14299d916 100644
--- a/packages/grafana-ui/src/components/Text/Text.story.tsx
+++ b/packages/grafana-ui/src/components/Text/Text.story.tsx
@@ -41,6 +41,7 @@ const meta: Meta = {
     },
     truncate: { control: 'boolean' },
     italic: { control: 'boolean' },
+    tabular: { control: 'boolean' },
     textAlignment: {
       control: 'select',
       options: ['inherit', 'initial', 'left', 'right', 'center', 'justify', undefined],
@@ -90,7 +91,7 @@ export const Example: StoryFn = (args) => {
 
 Example.parameters = {
   controls: {
-    exclude: ['element', 'variant', 'weight', 'textAlignment', 'truncate', 'italic', 'color', 'children'],
+    exclude: ['element', 'variant', 'weight', 'textAlignment', 'truncate', 'italic', 'tabular', 'color', 'children'],
   },
 };
 
diff --git a/packages/grafana-ui/src/components/Text/Text.tsx b/packages/grafana-ui/src/components/Text/Text.tsx
index 29f3a46c113..0ffa52e7e88 100644
--- a/packages/grafana-ui/src/components/Text/Text.tsx
+++ b/packages/grafana-ui/src/components/Text/Text.tsx
@@ -21,14 +21,19 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'clas
   truncate?: boolean;
   /** If true, show the text as italic. False by default */
   italic?: boolean;
+  /** If true, numbers will have fixed width, useful for displaying tabular data. False by default */
+  tabular?: boolean;
   /** Whether to align the text to left, center or right */
   textAlignment?: CSSProperties['textAlign'];
   children: NonNullable<React.ReactNode>;
 }
 
 export const Text = React.forwardRef<HTMLElement, TextProps>(
-  ({ element = 'span', variant, weight, color, truncate, italic, textAlignment, children, ...restProps }, ref) => {
-    const styles = useStyles2(getTextStyles, element, variant, color, weight, truncate, italic, textAlignment);
+  (
+    { element = 'span', variant, weight, color, truncate, italic, textAlignment, children, tabular, ...restProps },
+    ref
+  ) => {
+    const styles = useStyles2(getTextStyles, element, variant, color, weight, truncate, italic, textAlignment, tabular);
 
     const childElement = (ref: React.ForwardedRef<HTMLElement> | undefined) => {
       return createElement(
@@ -71,7 +76,8 @@ const getTextStyles = (
   weight?: TextProps['weight'],
   truncate?: TextProps['truncate'],
   italic?: TextProps['italic'],
-  textAlignment?: TextProps['textAlignment']
+  textAlignment?: TextProps['textAlignment'],
+  tabular?: TextProps['tabular']
 ) => {
   return css([
     {
@@ -99,5 +105,8 @@ const getTextStyles = (
     textAlignment && {
       textAlign: textAlignment,
     },
+    tabular && {
+      fontFeatureSettings: '"tnum"',
+    },
   ]);
 };