Hide the shortcut key at the button layer

Author: matt-aitken

apps/webapp/app/components/primitives/Buttons.tsx

@@ -204,12 +204,12 @@ export function ButtonContent(props: ButtonContentPropsType) {
   const textColorClassName = variation.textColor;
 
   const renderShortcutKey = () =>
-    shortcut && (
+    shortcut &&
+    !hideShortcutKey && (
       <ShortcutKey
         className={cn(shortcutClassName)}
         shortcut={shortcut}
         variant={variation.shortcutVariant ?? "medium"}
-        hideShortcutKey={hideShortcutKey}
       />
     );
 

apps/webapp/app/components/primitives/ShortcutKey.tsx

@@ -33,23 +33,17 @@ type ShortcutKeyProps = {
   shortcut: ShortcutKeyDefinition;
   variant: ShortcutKeyVariant;
   className?: string;
-  hideShortcutKey?: boolean;
 };
 
-export function ShortcutKey({
-  shortcut,
-  variant,
-  className,
-  hideShortcutKey = false,
-}: ShortcutKeyProps) {
+export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps) {
   const { platform } = useOperatingSystem();
   const isMac = platform === "mac";
   let relevantShortcut = "mac" in shortcut ? (isMac ? shortcut.mac : shortcut.windows) : shortcut;
   const modifiers = relevantShortcut.modifiers ?? [];
   const character = relevantShortcut.key ? keyString(relevantShortcut.key, isMac, variant) : null;
 
   return (
-    <span className={cn(variants[variant], hideShortcutKey && "hidden", className)}>
+    <span className={cn(variants[variant], className)}>
       {modifiers.map((k) => (
         <span key={k}>
           <span>{modifierString(k, isMac, variant)}</span>