fix(ds): Fix RadioCard frameProps (#16685)

trezor · Jan 29, 2025 · c35a481 · c35a481
1 parent 5d85ffe
commit c35a481
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 21 deletions.
diff --git a/packages/components/src/components/RadioCard/RadioCard.stories.tsx b/packages/components/src/components/RadioCard/RadioCard.stories.tsx
@@ -1,6 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { RadioCard as RadioCardComponent, RadioCardProps } from './RadioCard';
+import {
+    RadioCard as RadioCardComponent,
+    RadioCardProps,
+    allowedRadioCardFrameProps,
+} from './RadioCard';
+import { getFramePropsStory } from '../../utils/frameProps';
 
 const meta: Meta = {
     title: 'RadioCard',
@@ -12,12 +17,14 @@ export const RadioCard: StoryObj<RadioCardProps> = {
     args: {
         isActive: true,
         children: 'Content',
+        ...getFramePropsStory(allowedRadioCardFrameProps).args,
     },
     argTypes: {
         isActive: {
             control: {
                 type: 'boolean',
             },
         },
+        ...getFramePropsStory(allowedRadioCardFrameProps).argTypes,
     },
 };
diff --git a/packages/components/src/components/RadioCard/RadioCard.tsx b/packages/components/src/components/RadioCard/RadioCard.tsx
@@ -7,12 +7,15 @@ import { palette, borders, spacingsPx } from '@trezor/theme';
 import { Card } from '../Card/Card';
 import { Icon } from '../Icon/Icon';
 import { Box } from '../Box/Box';
-import { FrameProps } from '../../utils/frameProps';
+import { FrameProps, FramePropsKeys, pickAndPrepareFrameProps } from '../../utils/frameProps';
+
+export const allowedRadioCardFrameProps = ['margin'] as const satisfies FramePropsKeys[];
+type AllowedFrameProps = Pick<FrameProps, (typeof allowedRadioCardFrameProps)[number]>;
 
 export type RadioCardProps = {
     isActive: boolean;
     children: ReactNode;
-};
+} & AllowedFrameProps;
 
 const BorderActive = styled.div<{ isActive: boolean }>`
     pointer-events: none;
@@ -33,18 +36,22 @@ const IconWrapper = styled.div`
     padding: ${spacingsPx.xxxs};
 `;
 
-export const RadioCard = ({ isActive, children, ...frameProps }: RadioCardProps & FrameProps) => (
-    <Box position={{ type: 'relative' }} {...frameProps}>
-        {isActive && (
-            <Box position={{ type: 'absolute', top: '-1px', right: '-1px' }} zIndex={2}>
-                <IconWrapper>
-                    <Icon name="check" size="extraSmall" color={palette.lightWhiteAlpha1000} />
-                </IconWrapper>
-            </Box>
-        )}
-        <Card paddingType="small" fillType="none">
-            {children}
-        </Card>
-        <BorderActive isActive={isActive} />
-    </Box>
-);
+export const RadioCard = ({ isActive, children, ...rest }: RadioCardProps) => {
+    const frameProps = pickAndPrepareFrameProps(rest, allowedRadioCardFrameProps, false);
+
+    return (
+        <Box position={{ type: 'relative' }} {...frameProps}>
+            {isActive && (
+                <Box position={{ type: 'absolute', top: '-1px', right: '-1px' }} zIndex={2}>
+                    <IconWrapper>
+                        <Icon name="check" size="extraSmall" color={palette.lightWhiteAlpha1000} />
+                    </IconWrapper>
+                </Box>
+            )}
+            <Card paddingType="small" fillType="none">
+                {children}
+            </Card>
+            <BorderActive isActive={isActive} />
+        </Box>
+    );
+};
diff --git a/packages/components/src/utils/frameProps.tsx b/packages/components/src/utils/frameProps.tsx
@@ -85,11 +85,20 @@ const getValueWithUnit = (value: string | number) =>
 export const pickAndPrepareFrameProps = (
     props: Record<string, any>,
     allowedFrameProps: Array<FramePropsKeys>,
-) =>
-    makePropsTransient(
-        allowedFrameProps.reduce((acc, item) => ({ ...acc, [item]: props[item] }), {}),
+    convertToTransient = true,
+) => {
+    const selectedProps = allowedFrameProps.reduce(
+        (acc, item) => ({ ...acc, [item]: props[item] }),
+        {},
     );
 
+    if (convertToTransient) {
+        return makePropsTransient(selectedProps);
+    }
+
+    return selectedProps;
+};
+
 export const withFrameProps = ({
     $margin,
     $padding,