diff --git a/.changeset/early-apes-judge.md b/.changeset/early-apes-judge.md new file mode 100644 index 00000000..c48057b7 --- /dev/null +++ b/.changeset/early-apes-judge.md @@ -0,0 +1,5 @@ +--- +"@status-im/components": patch +--- + +fix ``icon prop and symbol centering diff --git a/packages/components/src/shortcut/shortcut.stories.tsx b/packages/components/src/shortcut/shortcut.stories.tsx index 2967c778..0a92425b 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) => (
- + } />
) diff --git a/packages/components/src/shortcut/shortcut.tsx b/packages/components/src/shortcut/shortcut.tsx index 15932851..a00e6e77 100644 --- a/packages/components/src/shortcut/shortcut.tsx +++ b/packages/components/src/shortcut/shortcut.tsx @@ -1,13 +1,14 @@ -import { forwardRef } from 'react' +import { cloneElement, forwardRef } from 'react' 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({ - 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: [ @@ -32,7 +33,7 @@ const styles = cva({ type Props = VariantProps & ( | { - icon: React.ComponentType> + icon: IconElement symbol?: never } | { @@ -42,15 +43,17 @@ type Props = VariantProps & ) const Shortcut = (props: Props, ref: React.Ref) => { - const { variant = 'primary', ...rest } = props + const { variant = 'primary' } = props return ( -
+
{match(props) .with({ symbol: P.string }, ({ symbol }) => ( {symbol} )) - .with({ icon: P._ }, ({ icon: Icon }) => ) + .with({ icon: P._ }, ({ icon }) => + cloneElement(icon, { className: 'size-3' }), + ) .exhaustive()}
)