From b5c87645c167d0dad0ee89ad8a80cf9e9f412ebd Mon Sep 17 00:00:00 2001
From: Pavel <14926950+prichodko@users.noreply.github.com>
Date: Fri, 11 Oct 2024 12:48:53 +0200
Subject: [PATCH 1/3] f

---
 packages/components/src/shortcut/shortcut.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/shortcut/shortcut.tsx b/packages/components/src/shortcut/shortcut.tsx
index 159328514..b2246a6d5 100644
--- a/packages/components/src/shortcut/shortcut.tsx
+++ b/packages/components/src/shortcut/shortcut.tsx
@@ -4,6 +4,7 @@ import { match, P } from 'ts-pattern'
 
 import { cva } from '../utils/variants'
 
+import type { IconElement } from '../types'
 import type { VariantProps } from '../utils/variants'
 
 const styles = cva({
@@ -32,7 +33,7 @@ const styles = cva({
 type Props = VariantProps<typeof styles> &
   (
     | {
-        icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
+        icon: IconElement
         symbol?: never
       }
     | {
@@ -42,15 +43,17 @@ type Props = VariantProps<typeof styles> &
   )
 
 const Shortcut = (props: Props, ref: React.Ref<HTMLDivElement>) => {
-  const { variant = 'primary', ...rest } = props
+  const { variant = 'primary', icon, symbol, ...rest } = props
 
   return (
     <div className={styles({ variant })} ref={ref} {...rest}>
-      {match(props)
+      {match({ icon, symbol })
         .with({ symbol: P.string }, ({ symbol }) => (
           <span className="text-11 font-medium">{symbol}</span>
         ))
-        .with({ icon: P._ }, ({ icon: Icon }) => <Icon className="size-3" />)
+        .with({ icon: P._ }, ({ icon }) => (
+          <span className="size-3">{icon}</span>
+        ))
         .exhaustive()}
     </div>
   )

From c98191e9cdc6b7a6b0059a30f9c65003370d2414 Mon Sep 17 00:00:00 2001
From: Pavel <14926950+prichodko@users.noreply.github.com>
Date: Fri, 11 Oct 2024 12:54:57 +0200
Subject: [PATCH 2/3] f

---
 .../components/src/shortcut/shortcut.stories.tsx |  2 +-
 packages/components/src/shortcut/shortcut.tsx    | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/shortcut/shortcut.stories.tsx b/packages/components/src/shortcut/shortcut.stories.tsx
index 2967c778d..0a92425bf 100644
--- a/packages/components/src/shortcut/shortcut.stories.tsx
+++ b/packages/components/src/shortcut/shortcut.stories.tsx
@@ -9,7 +9,7 @@ const variants = ['primary', 'secondary', 'gray'] as const
 // eslint-disable-next-line react/display-name
 const renderVariant = (variant: (typeof variants)[number]) => (props: any) => (
   <div className="flex items-center gap-2">
-    <Shortcut {...props} variant={variant} icon={CommandIcon} />
+    <Shortcut {...props} variant={variant} icon={<CommandIcon />} />
     <Shortcut {...props} variant={variant} symbol="K" />
   </div>
 )
diff --git a/packages/components/src/shortcut/shortcut.tsx b/packages/components/src/shortcut/shortcut.tsx
index b2246a6d5..a00e6e77d 100644
--- a/packages/components/src/shortcut/shortcut.tsx
+++ b/packages/components/src/shortcut/shortcut.tsx
@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import { cloneElement, forwardRef } from 'react'
 
 import { match, P } from 'ts-pattern'
 
@@ -8,7 +8,7 @@ import type { IconElement } from '../types'
 import type { VariantProps } from '../utils/variants'
 
 const styles = cva({
-  base: 'flex size-4 flex-shrink-0 items-center justify-center rounded-6 border',
+  base: 'grid size-4 flex-shrink-0 place-items-center rounded-6 border',
   variants: {
     variant: {
       primary: [
@@ -43,17 +43,17 @@ type Props = VariantProps<typeof styles> &
   )
 
 const Shortcut = (props: Props, ref: React.Ref<HTMLDivElement>) => {
-  const { variant = 'primary', icon, symbol, ...rest } = props
+  const { variant = 'primary' } = props
 
   return (
-    <div className={styles({ variant })} ref={ref} {...rest}>
-      {match({ icon, symbol })
+    <div className={styles({ variant })} ref={ref}>
+      {match(props)
         .with({ symbol: P.string }, ({ symbol }) => (
           <span className="text-11 font-medium">{symbol}</span>
         ))
-        .with({ icon: P._ }, ({ icon }) => (
-          <span className="size-3">{icon}</span>
-        ))
+        .with({ icon: P._ }, ({ icon }) =>
+          cloneElement(icon, { className: 'size-3' }),
+        )
         .exhaustive()}
     </div>
   )

From 06ce59a985c2444e2ec7bfd36f963f2878a1dfe0 Mon Sep 17 00:00:00 2001
From: pavel <14926950+prichodko@users.noreply.github.com>
Date: Fri, 11 Oct 2024 13:32:11 +0200
Subject: [PATCH 3/3] Create early-apes-judge.md

---
 .changeset/early-apes-judge.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/early-apes-judge.md

diff --git a/.changeset/early-apes-judge.md b/.changeset/early-apes-judge.md
new file mode 100644
index 000000000..c48057b7d
--- /dev/null
+++ b/.changeset/early-apes-judge.md
@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+fix `<Shortcut />`icon prop and symbol centering