feat: use textProps to control style

package.json

@@ -11,7 +11,7 @@
     "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/navigation": "^2.15.0",
     "@gravity-ui/page-constructor": "^5.2.0",
-    "@gravity-ui/uikit": "^6.17.0",
+    "@gravity-ui/uikit": "^6.20.1",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@octokit/rest": "^20.1.1",

src/components/SelectableCard/SelectableCard.tsx

@@ -21,23 +21,17 @@ export type SelecableCardProps = {
      * Props for inner Text component
      */
     textProps?: TextProps;
-    /**
-     * Style object to customize decorated text. Has an impact when pureText has falsie values
-     */
-    contentStyle?: React.CSSProperties;
 } & Pick<CardProps, 'selected' | 'onClick'> &
     Pick<DOMProps, 'className'>;
 
 const CardContent = ({
     text,
     pureText,
     textProps,
-    contentStyle,
-}: Pick<SelecableCardProps, 'text' | 'pureText' | 'textProps' | 'contentStyle'>) => {
+}: Pick<SelecableCardProps, 'text' | 'pureText' | 'textProps'>) => {
     const props: Record<string, unknown> = pureText
         ? {variant: 'body-2'}
         : {color: 'inverted-primary', className: b('fake-button')};
-    props.style = contentStyle;
     return (
         <Text {...props} {...textProps}>
             {text}
@@ -52,17 +46,9 @@ export const SelectableCard = ({
     onClick,
     className,
     textProps,
-    contentStyle,
-}: SelecableCardProps) => {
-    return (
-        <Card className={b(null, className)} type="selection" selected={selected} onClick={onClick}>
-            <CardContent
-                text={text}
-                pureText={pureText}
-                textProps={textProps}
-                contentStyle={contentStyle}
-            />
-            {selected && <CircleCheckFill className={b('icon')} />}
-        </Card>
-    );
-};
+}: SelecableCardProps) => (
+    <Card className={b(null, className)} type="selection" selected={selected} onClick={onClick}>
+        <CardContent text={text} pureText={pureText} textProps={textProps} />
+        {selected && <CircleCheckFill className={b('icon')} />}
+    </Card>
+);

src/components/Themes/ui/BorderRadiusTab/BorderCard/BorderCard.tsx

@@ -18,14 +18,15 @@ export const BorderCard = ({selected, preset, onClick}: BorderCardProps) => {
     }, [preset]);
 
     const displayName = t(preset);
+    const borderRadiusStyle = {borderRadius: RADIUS_PRESETS[preset]?.m + 'px'};
 
     return (
         <SelectableCard
             text={displayName}
             onClick={handleClick}
             selected={selected}
             pureText={preset === RadiusPresetName.Custom}
-            contentStyle={{borderRadius: RADIUS_PRESETS[preset]?.m + 'px'}}
+            textProps={{style: borderRadiusStyle}}
         />
     );
 };