fix(ds): Button frame props update (#14183)

trezor · Sep 6, 2024 · ad0afa3 · ad0afa3
1 parent 343d0b5
commit ad0afa3
Show file tree

Hide file tree

Showing 19 changed files with 311 additions and 141 deletions.
diff --git a/packages/components/src/components/AssetLogo/AssetLogo.tsx b/packages/components/src/components/AssetLogo/AssetLogo.tsx
@@ -1,16 +1,21 @@
 import styled from 'styled-components';
-import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps';
+import {
+    FrameProps,
+    FramePropsKeys,
+    pickAndPrepareFrameProps,
+    withFrameProps,
+} from '../../utils/frameProps';
 import { useEffect, useState } from 'react';
 import { borders } from '@trezor/theme';
 import { AssetInitials } from './AssetInitials';
-import { makePropsTransient, TransientProps } from '../../utils/transientProps';
+import { TransientProps } from '../../utils/transientProps';
 
 const ICONS_URL_BASE = 'https://data.trezor.io/suite/icons/coins/';
 
 export const allowedAssetLogoSizes = [20, 24];
 type AssetLogoSize = (typeof allowedAssetLogoSizes)[number];
 
-export const allowedAssetLogoFrameProps: FramePropsKeys[] = ['margin'];
+export const allowedAssetLogoFrameProps = ['margin'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedAssetLogoFrameProps)[number]>;
 
 export type AssetLogoProps = AllowedFrameProps & {
@@ -48,17 +53,15 @@ export const AssetLogo = ({
     contractAddress,
     shouldTryToFetch = true,
     placeholder,
-    margin,
     'data-testid': dataTest,
+    ...rest
 }: AssetLogoProps) => {
     const [isLoading, setIsLoading] = useState(true);
     const [isPlaceholder, setIsPlaceholder] = useState(false);
     const fileName = contractAddress ? `${coingeckoId}--${contractAddress}` : coingeckoId;
     const logoUrl = getAssetLogoUrl(fileName);
 
-    const frameProps = {
-        margin,
-    };
+    const frameProps = pickAndPrepareFrameProps(rest, allowedAssetLogoFrameProps);
 
     const handleLoad = () => {
         setIsLoading(false);
@@ -72,7 +75,7 @@ export const AssetLogo = ({
     }, [shouldTryToFetch]);
 
     return (
-        <Container $size={size} {...makePropsTransient(frameProps)}>
+        <Container $size={size} {...frameProps}>
             {isPlaceholder && <AssetInitials size={size}>{placeholder}</AssetInitials>}
             {!isPlaceholder && (
                 <Logo

diff --git a/packages/components/src/components/Badge/Badge.tsx b/packages/components/src/components/Badge/Badge.tsx
@@ -3,11 +3,16 @@ import styled, { css, DefaultTheme, useTheme } from 'styled-components';
 import { borders, Color, CSSColor, spacings, spacingsPx, typography } from '@trezor/theme';
 import { focusStyleTransition, getFocusShadowStyle } from '../../utils/utils';
 import type { UISize, UIVariant } from '../../config/types';
-import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps';
+import {
+    FrameProps,
+    FramePropsKeys,
+    pickAndPrepareFrameProps,
+    withFrameProps,
+} from '../../utils/frameProps';
 import { TransientProps } from '../../utils/transientProps';
 import { Icon, IconName } from '../Icon/Icon';
 
-export const allowedBadgeFrameProps: FramePropsKeys[] = ['margin'];
+export const allowedBadgeFrameProps = ['margin'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedBadgeFrameProps)[number]>;
 
 export type BadgeSize = Extract<UISize, 'tiny' | 'small' | 'medium'>;
@@ -80,8 +85,6 @@ const mapVariantToPadding = ({ $size }: { $size: BadgeSize }): string => {
 };
 
 const Container = styled.div<BadgeContainerProps>`
-    ${withFrameProps}
-
     display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
     align-items: center;
     gap: ${spacingsPx.xxs};
@@ -105,6 +108,8 @@ const Container = styled.div<BadgeContainerProps>`
                 box-shadow: 0 0 0 1px ${theme.borderAlertRed};
             }
         `}
+
+    ${withFrameProps}
 `;
 
 const Content = styled.span<{ $isDisabled: boolean; $variant: BadgeVariant; $size: BadgeSize }>`
@@ -123,9 +128,10 @@ export const Badge = ({
     className,
     children,
     inline,
-    margin,
+    ...rest
 }: BadgeProps) => {
     const theme = useTheme();
+    const frameProps = pickAndPrepareFrameProps(rest, allowedBadgeFrameProps);
 
     return (
         <Container
@@ -134,8 +140,8 @@ export const Badge = ({
             $hasAlert={!!hasAlert}
             $onElevation={!!onElevation}
             className={className}
-            $margin={margin}
             $inline={inline === true}
+            {...frameProps}
         >
             {icon && (
                 <Icon

diff --git a/packages/components/src/components/Banner/Banner.tsx b/packages/components/src/components/Banner/Banner.tsx
@@ -4,7 +4,12 @@ import styled, { css, useTheme } from 'styled-components';
 import { variables } from '../../config';
 import { Elevation, borders, spacingsPx, typography, spacings } from '@trezor/theme';
 import { Row, Column, TransientProps, useElevation, useMediaQuery } from '../..';
-import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps';
+import {
+    FrameProps,
+    FramePropsKeys,
+    pickAndPrepareFrameProps,
+    withFrameProps,
+} from '../../utils/frameProps';
 import { BannerContext } from './BannerContext';
 import { BannerButton } from './BannerButton';
 import { BannerVariant } from './types';
@@ -19,7 +24,7 @@ import {
 import { Icon, IconName } from '../Icon/Icon';
 import { SCREEN_SIZE } from '../../config/variables';
 
-export const allowedBannerFrameProps: FramePropsKeys[] = ['margin'];
+export const allowedBannerFrameProps = ['margin'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedBannerFrameProps)[number]>;
 
 export type BannerProps = AllowedFrameProps & {
@@ -70,9 +75,9 @@ export const Banner = ({
     variant = DEFAULT_VARIANT,
     icon,
     filled = true,
-    margin,
     rightContent,
     'data-testid': dataTest,
+    ...rest
 }: BannerProps) => {
     const theme = useTheme();
     const { elevation } = useElevation();
@@ -96,6 +101,7 @@ export const Banner = ({
             <Row {...commonProps}>{children}</Row>
         );
     };
+    const frameProps = pickAndPrepareFrameProps(rest, allowedBannerFrameProps);
 
     return (
         <Wrapper
@@ -104,8 +110,8 @@ export const Banner = ({
             className={className}
             $elevation={elevation}
             $filled={filled}
-            $margin={margin}
             data-testid={dataTest}
+            {...frameProps}
         >
             {withIcon && (
                 <Icon

diff --git a/packages/components/src/components/Card/Card.tsx b/packages/components/src/components/Card/Card.tsx
@@ -2,8 +2,13 @@ import { forwardRef, HTMLAttributes, ReactNode } from 'react';
 import styled, { css } from 'styled-components';
 import { borders, Elevation, mapElevationToBackground, spacingsPx } from '@trezor/theme';
 import { ElevationContext, useElevation } from '../ElevationContext/ElevationContext';
-import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps';
-import { makePropsTransient, TransientProps } from '../../utils/transientProps';
+import {
+    FrameProps,
+    FramePropsKeys,
+    pickAndPrepareFrameProps,
+    withFrameProps,
+} from '../../utils/frameProps';
+import { TransientProps } from '../../utils/transientProps';
 import { AccessibilityProps, withAccessibilityProps } from '../../utils/accessibilityProps';
 
 export const paddingTypes = ['small', 'none', 'normal', 'large'] as const;
@@ -13,12 +18,16 @@ type MapArgs = {
     $paddingType: PaddingType;
 };
 
-export const allowedCardFrameProps: FramePropsKeys[] = [
+export const allowedCardFrameProps = [
     'margin',
+    'width',
     'maxWidth',
     'minWidth',
+    'height',
+    'minHeight',
+    'maxHeight',
     'overflow',
-];
+] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedCardFrameProps)[number]>;
 
 const mapPaddingTypeToLabelPadding = ({ $paddingType }: MapArgs): number | string => {
@@ -130,25 +139,20 @@ const CardComponent = forwardRef<HTMLDivElement, CardProps & { paddingType: Padd
 );
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(
-    ({ paddingType = 'normal', label, margin, maxWidth, minWidth, ...rest }, ref) => {
+    ({ paddingType = 'normal', label, ...rest }, ref) => {
         const props = {
             paddingType,
             ...rest,
         };
-
-        const frameProps = {
-            margin,
-            maxWidth,
-            minWidth,
-        };
+        const frameProps = pickAndPrepareFrameProps(rest, allowedCardFrameProps);
 
         return label ? (
-            <Container {...makePropsTransient(frameProps)}>
+            <Container {...frameProps}>
                 <LabelContainer $paddingType={paddingType}>{label}</LabelContainer>
                 <CardComponent {...props} ref={ref} />
             </Container>
         ) : (
-            <CardComponent {...props} {...makePropsTransient(frameProps)} ref={ref} />
+            <CardComponent {...props} {...frameProps} ref={ref} />
         );
     },
 );
diff --git a/packages/components/src/components/CollapsibleBox/CollapsibleBox.tsx b/packages/components/src/components/CollapsibleBox/CollapsibleBox.tsx
@@ -12,10 +12,15 @@ import {
 import { Icon } from '../Icon/Icon';
 import { motionEasing } from '../../config/motion';
 import { ElevationUp, useElevation } from './../ElevationContext/ElevationContext';
-import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps';
+import {
+    FrameProps,
+    FramePropsKeys,
+    pickAndPrepareFrameProps,
+    withFrameProps,
+} from '../../utils/frameProps';
 import { TransientProps } from '../../utils/transientProps';
 
-export const allowedCollapsibleBoxFrameProps: FramePropsKeys[] = ['margin'];
+export const allowedCollapsibleBoxFrameProps = ['margin'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedCollapsibleBoxFrameProps)[number]>;
 
 const ANIMATION_DURATION = 0.4;
@@ -206,12 +211,13 @@ const CollapsibleBoxContent = ({
     fillType = 'default',
     hasDivider = true,
     children,
-    margin,
     className,
     onAnimationComplete,
     'data-testid': dataTest,
+    ...rest
 }: CollapsibleBoxContentProps) => {
     const { elevation } = useElevation();
+    const frameProps = pickAndPrepareFrameProps(rest, allowedCollapsibleBoxFrameProps);
 
     const handleHeaderClick = useCallback(
         (e: MouseEvent<HTMLDivElement>) => {
@@ -273,7 +279,7 @@ const CollapsibleBoxContent = ({
     );
 
     const containerProps = {
-        $margin: margin,
+        ...frameProps,
         'data-testid': dataTest,
         className,
     };

diff --git a/packages/components/src/components/ComponentWithSubIcon/ComponentWithSubIcon.tsx b/packages/components/src/components/ComponentWithSubIcon/ComponentWithSubIcon.tsx
@@ -9,9 +9,14 @@ import {
 import { borders, spacingsPx } from '@trezor/theme';
 import { TransientProps } from '../../utils/transientProps';
 import { ReactNode } from 'react';
-import { FramePropsKeys, FrameProps, withFrameProps } from '../../utils/frameProps';
+import {
+    FramePropsKeys,
+    FrameProps,
+    withFrameProps,
+    pickAndPrepareFrameProps,
+} from '../../utils/frameProps';
 
-export const allowedComponentWithSubIconFrameProps: FramePropsKeys[] = ['margin'];
+export const allowedComponentWithSubIconFrameProps = ['margin'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedComponentWithSubIconFrameProps)[number]>;
 
 const Container = styled.div<TransientProps<AllowedFrameProps>>`
@@ -49,12 +54,13 @@ export const ComponentWithSubIcon = ({
     color,
     children,
     subIconProps,
-    margin,
+    ...rest
 }: ComponentWithSubIconProps) => {
     const theme = useTheme();
+    const frameProps = pickAndPrepareFrameProps(rest, allowedComponentWithSubIconFrameProps);
 
     if (subIconProps === undefined) {
-        return <Container $margin={margin}>{children}</Container>;
+        return <Container {...frameProps}>{children}</Container>;
     }
 
     const backgroundIconColor = getColorForIconVariant({
@@ -72,7 +78,7 @@ export const ComponentWithSubIcon = ({
     const subIconSize = getIconSize(subIconProps.size ?? 12);
 
     return (
-        <Container $margin={margin}>
+        <Container {...frameProps}>
             {children}
             <SubIconWrapper
                 $color={backgroundIconColor}

diff --git a/packages/components/src/components/Divider/Divider.tsx b/packages/components/src/components/Divider/Divider.tsx
@@ -1,10 +1,16 @@
 import styled from 'styled-components';
 import { Color, Elevation, mapElevationToBorder, spacings } from '@trezor/theme';
 import { useElevation } from '../ElevationContext/ElevationContext';
-import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps';
+import {
+    FrameProps,
+    FramePropsKeys,
+    pickAndPrepareFrameProps,
+    withFrameProps,
+} from '../../utils/frameProps';
 import { TransientProps } from '../../utils/transientProps';
+import { allowedHeadingFrameProps } from '../typography/Heading/Heading';
 
-export const allowedDividerFrameProps: FramePropsKeys[] = ['margin'];
+export const allowedDividerFrameProps = ['margin'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedDividerFrameProps)[number]>;
 type DividerOrientation = 'horizontal' | 'vertical';
 
@@ -41,20 +47,25 @@ const Line = styled.div<
 `;
 
 export const Divider = ({
-    margin = { top: spacings.md, bottom: spacings.md },
     strokeWidth = 1,
     color,
     orientation = 'horizontal',
+    ...rest
 }: DividerProps) => {
     const { elevation } = useElevation();
 
+    const frameProps = pickAndPrepareFrameProps(
+        { ...rest, margin: rest.margin ?? { top: spacings.md, bottom: spacings.md } },
+        allowedHeadingFrameProps,
+    );
+
     return (
         <Line
             $elevation={elevation}
-            $margin={margin}
             $color={color}
             $strokeWidth={strokeWidth}
             $orientation={orientation}
+            {...frameProps}
         />
     );
 };