trezor · adamhavel · Dec 17, 2024 · Dec 12, 2024
@@ -1,13 +1,8 @@
 import styled, { css } from 'styled-components';
 
-import { ExclusiveColorOrVariant, Icon, IconName, IconSize, getIconSize } from '../Icon/Icon';
+import { Icon, IconName, IconSize, getIconSize } from '../Icon/Icon';
 import { TransientProps } from '../../utils/transientProps';
-import {
-    IconCircleExclusiveColorOrVariant,
-    IconCircleVariant,
-    IconCircleColors,
-    IconCirclePaddingType,
-} from './types';
+import { IconCircleVariant, IconCirclePaddingType } from './types';
 import {
     mapVariantToIconBackground,
     mapVariantToIconBorderColor,
@@ -23,12 +18,11 @@ import {
 export const allowedIconCircleFrameProps = ['margin'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedIconCircleFrameProps)[number]>;
 
-type IconCircleWrapperProps = TransientProps<
-    IconCircleExclusiveColorOrVariant & AllowedFrameProps
-> & {
+type IconCircleWrapperProps = TransientProps<AllowedFrameProps> & {
     $size: number;
     $hasBorder: boolean;
     $paddingType: IconCirclePaddingType;
+    $variant: IconCircleVariant;
 };
 
 const IconCircleWrapper = styled.div<IconCircleWrapperProps>`
@@ -58,26 +52,17 @@ export type IconCircleProps = {
     size?: IconSize | number;
     paddingType?: IconCirclePaddingType;
     hasBorder?: boolean;
-} & IconCircleExclusiveColorOrVariant &
-    AllowedFrameProps;
+    variant?: IconCircleVariant;
+} & AllowedFrameProps;
 
 export const IconCircle = ({
     name,
     size = 60,
     hasBorder = true,
     paddingType = 'large',
-    iconColor,
-    variant,
+    variant = 'primary',
     ...rest
 }: IconCircleProps) => {
-    const wrapperColorOrVariant: TransientProps<IconCircleExclusiveColorOrVariant> =
-        iconColor === undefined ? { $variant: variant ?? 'primary' } : { $iconColor: iconColor };
-
-    const iconColorOrVariant: ExclusiveColorOrVariant =
-        iconColor === undefined
-            ? { variant: variant ?? 'primary' }
-            : { color: iconColor.foreground };
-
     const iconSize = getIconSize(size);
     const frameProps = pickAndPrepareFrameProps(rest, allowedIconCircleFrameProps);
 
@@ -86,12 +71,12 @@ export const IconCircle = ({
             $size={iconSize}
             $paddingType={paddingType}
             $hasBorder={hasBorder}
-            {...wrapperColorOrVariant}
+            $variant={variant}
             {...frameProps}
         >
-            <Icon name={name} {...iconColorOrVariant} />
+            <Icon name={name} variant={variant} />
         </IconCircleWrapper>
     );
 };
 
-export type { IconCircleVariant, IconCircleColors };
+export type { IconCircleVariant };
@@ -1,5 +1,3 @@
-import { CSSColor } from '@trezor/theme';
-
 import { UIVariant, UISize } from '../../config/types';
 
 export const iconCircleVariants = [
@@ -12,11 +10,5 @@ export const iconCircleVariants = [
 
 export type IconCircleVariant = Extract<UIVariant, (typeof iconCircleVariants)[number]>;
 
-export type IconCircleColors = { foreground: CSSColor; background: CSSColor };
-
-export type IconCircleExclusiveColorOrVariant =
-    | { variant?: IconCircleVariant; iconColor?: undefined }
-    | { variant?: undefined; iconColor?: IconCircleColors };
-
 export const iconCirclePaddingTypes = ['small', 'medium', 'large'] as const;
 export type IconCirclePaddingType = Extract<UISize, (typeof iconCirclePaddingTypes)[number]>;
@@ -2,32 +2,20 @@ import { DefaultTheme } from 'styled-components';
 
 import { Color, CSSColor } from '@trezor/theme';
 
-import {
-    IconCircleVariant,
-    IconCircleExclusiveColorOrVariant,
-    IconCirclePaddingType,
-} from './types';
-import { TransientProps } from '../../utils/transientProps';
+import { IconCircleVariant, IconCirclePaddingType } from './types';
 
 type VariantMapArgs = {
     theme: DefaultTheme;
     $hasBorder: boolean;
-} & TransientProps<IconCircleExclusiveColorOrVariant>;
+    $variant: IconCircleVariant;
+};
 
 type PaddingTypeMap = {
     $paddingType: IconCirclePaddingType;
     $size: number;
 };
 
-export const mapVariantToIconBorderColor = ({
-    $variant,
-    theme,
-    $iconColor,
-}: VariantMapArgs): CSSColor => {
-    if ($variant === undefined) {
-        return $iconColor?.foreground ?? 'transparent';
-    }
-
+export const mapVariantToIconBorderColor = ({ $variant, theme }: VariantMapArgs): CSSColor => {
     const colorMap: Record<IconCircleVariant, Color> = {
         primary: 'backgroundPrimarySubtleOnElevation0',
         warning: 'backgroundAlertYellowSubtleOnElevation0',
@@ -42,13 +30,8 @@ export const mapVariantToIconBorderColor = ({
 export const mapVariantToIconBackground = ({
     theme,
     $hasBorder,
-    $iconColor,
     $variant,
 }: VariantMapArgs): CSSColor => {
-    if ($variant === undefined) {
-        return $iconColor?.background ?? 'transparent';
-    }
-
     const noBorderColorMap: Record<IconCircleVariant, Color> = {
         primary: 'backgroundPrimarySubtleOnElevation0',
         warning: 'backgroundAlertYellowSubtleOnElevation0',

@@ -8,7 +8,6 @@ import {
     NewModalProps,
     variables,
     intermediaryTheme,
-    IconCircle,
 } from '../../index';
 import { newModalVariants, newModalSizes } from './types';
 import { getFramePropsStory } from '../../utils/frameProps';
@@ -50,7 +49,6 @@ export const NewModal: StoryObj<NewModalProps> = {
     args: {
         variant: 'primary',
         iconName: undefined,
-        iconComponent: undefined,
         heading: 'Modal heading',
         description: 'Modal description',
         children:
@@ -69,19 +67,6 @@ export const NewModal: StoryObj<NewModalProps> = {
             },
             options: [...newModalVariants, undefined],
         },
-        iconComponent: {
-            options: ['nothing', 'purple'],
-            mapping: {
-                nothing: undefined,
-                purple: (
-                    <IconCircle
-                        name="eap"
-                        iconColor={{ foreground: '#550070', background: '#c458d9' }}
-                        size={40}
-                    />
-                ),
-            },
-        },
         size: {
             control: {
                 type: 'select',

@@ -20,7 +20,7 @@ import { ElevationContext, ElevationUp, useElevation } from '../ElevationContext
 import { useScrollShadow } from '../../utils/useScrollShadow';
 import { IconCircle } from '../IconCircle/IconCircle';
 import { IconName } from '../Icon/Icon';
-import { Row } from '../Flex/Flex';
+import { Box } from '../Box/Box';
 import { NewModalButton } from './NewModalButton';
 import { NewModalContext } from './NewModalContext';
 import { NewModalBackdrop } from './NewModalBackdrop';
@@ -99,10 +99,6 @@ const Footer = styled.footer`
     border-top: 1px solid ${({ theme }) => theme.borderElevation0};
 `;
 
-type ExclusiveIconNameOrComponent =
-    | { iconName?: IconName; iconComponent?: undefined }
-    | { iconName?: undefined; iconComponent?: ReactNode };
-
 type NewModalProps = AllowedFrameProps & {
     variant?: NewModalVariant;
     children?: ReactNode;
@@ -114,8 +110,9 @@ type NewModalProps = AllowedFrameProps & {
     isBackdropCancelable?: boolean;
     alignment?: NewModalAlignment;
     size?: NewModalSize;
+    iconName?: IconName;
     'data-testid'?: string;
-} & ExclusiveIconNameOrComponent;
+};
 
 const InnerNewModalBase = ({
     children,
@@ -125,7 +122,6 @@ const InnerNewModalBase = ({
     description,
     bottomContent,
     iconName,
-    iconComponent,
     onBackClick,
     onCancel,
     isBackdropCancelable,
@@ -193,18 +189,15 @@ const InnerNewModalBase = ({
                 <ShadowTop />
                 <ScrollContainer onScroll={onScroll} ref={scrollElementRef}>
                     <Body id={NEW_MODAL_CONTENT_ID}>
-                        {(iconComponent || iconName) && (
-                            <Row
+                        {iconName && (
+                            <Box
                                 margin={{
                                     bottom: spacings.md,
                                     top: isIconPushedTop ? negativeSpacings.md : 0,
                                 }}
                             >
-                                {iconComponent ??
-                                    (iconName && (
-                                        <IconCircle name={iconName} size={110} variant={variant} />
-                                    ))}
-                            </Row>
+                                <IconCircle name={iconName} size={110} variant={variant} />
+                            </Box>
                         )}
                         <ElevationUp>{children}</ElevationUp>
                     </Body>

@@ -1,41 +1,37 @@
 import styled from 'styled-components';
 
-import { borders } from '@trezor/theme';
+import { borders, spacingsPx } from '@trezor/theme';
 
 const Wrapper = styled.div`
     background: ${({ theme }) => theme.backgroundNeutralSubdued};
     width: 100%;
     border-radius: ${borders.radii.full};
+    overflow: hidden;
 `;
 
 type ValueProps = {
     $max: number;
     $value: number;
-    $isRed: boolean;
 };
 
-const Value = styled.div.attrs<ValueProps>(({ $max, $value }) => ({
-    style: {
-        width: `${(100 / $max) * $value}%`,
-    },
-}))<ValueProps>`
-    background: ${({ theme, $isRed }) => ($isRed ? theme.borderAlertRed : theme.borderSecondary)};
-    height: 5px;
+const Value = styled.div<ValueProps>`
+    background: ${({ theme }) => theme.iconPrimaryDefault};
+    height: ${spacingsPx.xs};
     max-width: 100%;
-    transition: width 0.5s;
+    width: 1%;
+    transform: ${({ $max, $value }) => `scaleX(${(100 / $max) * $value})`};
+    transform-origin: left;
+    transition: transform 0.5s;
 `;
 
-export interface ProgressBarProps {
+export type ProgressBarProps = {
     max?: number;
     value: number;
-    isRed?: boolean;
-}
+};
 
-// HTML progress element is not used because styling is browser-dependent (no consistent way to override styles
-// from parent component, no straightforward way to add width transition in Firefox)
-export const ProgressBar = ({ max = 100, value, isRed = false, ...props }: ProgressBarProps) => (
+export const ProgressBar = ({ max = 100, value, ...props }: ProgressBarProps) => (
     <Wrapper {...props}>
-        <Value $max={max} $value={value} $isRed={isRed} />
+        <Value $max={max} $value={value} />
     </Wrapper>
 );
 

@@ -52,7 +52,6 @@ export {
     IconCircle,
     type IconCircleProps,
     type IconCircleVariant,
-    type IconCircleColors,
 } from './components/IconCircle/IconCircle';
 export { InfoSegments, type InfoSegmentsProps } from './components/InfoSegments/InfoSegments';
 export { InfoItem, type InfoItemProps } from './components/InfoItem/InfoItem';