From dce8a05fef1716c2cac2f53b967a3c776e4fe755 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Fri, 19 Apr 2024 13:12:25 +0200
Subject: [PATCH] [v11.0.x] CommandPalette: Fix keyboard shortcut alignment
 (#86590)

CommandPalette: Fix keyboard shortcut alignment (#86540)

* use full typography properties

* use Text component

(cherry picked from commit 63427ccd9833fee59528a99704a4d1678d5f3723)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .../AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx b/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
index 92ffcfc22d9..40d4e61e33d 100644
--- a/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
+++ b/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
@@ -3,7 +3,7 @@ import { useKBar, VisualState } from 'kbar';
 import React, { useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { getInputStyles, Icon, ToolbarButton, useStyles2, useTheme2 } from '@grafana/ui';
+import { getInputStyles, Icon, Text, ToolbarButton, useStyles2, useTheme2 } from '@grafana/ui';
 import { focusCss } from '@grafana/ui/src/themes/mixins';
 import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
 import { t } from 'app/core/internationalization';
@@ -70,7 +70,7 @@ function PretendTextInput({ onClick }: PretendTextInputProps) {
 
         <div className={styles.suffix}>
           <Icon name="keyboard" />
-          <span className={styles.shortcut}>{modKey}+k</span>
+          <Text variant="bodySmall">{modKey}+k</Text>
         </div>
       </div>
     </div>
@@ -91,9 +91,6 @@ const getStyles = (theme: GrafanaTheme2) => {
         gap: theme.spacing(0.5),
       },
     ]),
-    shortcut: css({
-      fontSize: theme.typography.bodySmall.fontSize,
-    }),
     fakeInput: css([
       baseStyles.input,
       {