GrafanaUI: Add tabular prop to Text component for tabular numbers (#87440)

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

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'],
   },
 };
 

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"',
+    },
   ]);
 };