-
-
Notifications
You must be signed in to change notification settings - Fork 251
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove legacy Icons, use only new icons (#13997)
* refactor(icons): Refactor icons * fix(suite): Delete old icons * fix(suite): Update icons --------- Co-authored-by: Jan Václavík <[email protected]>
- Loading branch information
1 parent
dc322d4
commit dc0e7bd
Showing
675 changed files
with
1,754 additions
and
2,156 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,187 @@ | ||
| export { Icon, type WebIconProps as IconProps } from '@suite-common/icons/src/webComponents'; | ||
| export { type IconName, icons } from '@suite-common/icons/src/icons'; | ||
| import { ReactSVG } from 'react-svg'; | ||
| import { forwardRef, MouseEvent, Ref } from 'react'; | ||
|
|
||
| import styled, { css, DefaultTheme } from 'styled-components'; | ||
| import { | ||
| IconProps as IconCommonProps, | ||
| getIconSize, | ||
| icons, | ||
| } from '@suite-common/icons/src/webComponents'; | ||
| import { UIVariant } from '../../config/types'; | ||
|
|
||
| import { CSSColor, Color } from '@trezor/theme'; | ||
|
|
||
| import { TransientProps } from '../../utils/transientProps'; | ||
| import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps'; | ||
|
|
||
| export const iconVariants = ['primary', 'tertiary', 'info', 'warning', 'destructive'] as const; | ||
| export type IconVariant = Extract<UIVariant, (typeof iconVariants)[number]>; | ||
|
|
||
| type ExclusiveColorOrVariant = | ||
| | { variant?: IconVariant; color?: undefined } | ||
| | { | ||
| variant?: undefined; | ||
| /** @deprecated Use only is case of absolute desperation. Prefer using `variant`. */ | ||
| color?: string; | ||
| }; | ||
|
|
||
| export const allowedIconFrameProps: FramePropsKeys[] = ['margin']; | ||
| type AllowedFrameProps = Pick<FrameProps, (typeof allowedIconFrameProps)[number]>; | ||
|
|
||
| const variantColorMap: Record<IconVariant, Color> = { | ||
| primary: 'iconPrimaryDefault', | ||
| tertiary: 'iconSubdued', | ||
| info: 'iconAlertBlue', | ||
| warning: 'iconAlertYellow', | ||
| destructive: 'iconAlertRed', | ||
| }; | ||
|
|
||
| const getColorForIconVariant = ({ | ||
| variant, | ||
| theme, | ||
| color, | ||
| }: Pick<IconProps, 'color' | 'variant'> & { theme: DefaultTheme }): | ||
| | CSSColor | ||
| | 'inherit' | ||
| | string => { | ||
| if (color !== undefined) { | ||
| return color; | ||
| } | ||
|
|
||
| return variant === undefined ? theme.iconDefault : theme[variantColorMap[variant]]; | ||
| }; | ||
|
|
||
| type SvgWrapperProps = TransientProps<Pick<IconProps, 'color' | 'variant'>> & { | ||
| $cursorPointer?: boolean; | ||
| $hoverColor?: string; | ||
| }; | ||
|
|
||
| const SvgWrapper = styled.div<SvgWrapperProps & TransientProps<AllowedFrameProps>>` | ||
| ${({ $cursorPointer }) => | ||
| $cursorPointer && | ||
| css` | ||
| cursor: pointer; | ||
| `} | ||
| path { | ||
| fill: ${({ $variant, $color, theme }) => | ||
| getColorForIconVariant({ variant: $variant, color: $color, theme })}; | ||
| transition: fill 0.14s; | ||
| } | ||
| &:hover { | ||
| path { | ||
| fill: ${({ $hoverColor }) => $hoverColor}; | ||
| } | ||
| } | ||
| ${withFrameProps} | ||
| `; | ||
|
|
||
| const SVG = styled(ReactSVG)` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| div { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| path { | ||
| transition: | ||
| stroke 0.15s, | ||
| fill 0.15s; | ||
| } | ||
| ${({ onClick }) => | ||
| onClick && | ||
| css` | ||
| cursor: pointer; | ||
| &:focus-visible { | ||
| svg { | ||
| transition: opacity 0.2s; | ||
| opacity: 0.5; | ||
| } | ||
| } | ||
| `} | ||
| ` as typeof ReactSVG; | ||
|
|
||
| export type IconProps = AllowedFrameProps & | ||
| Omit<IconCommonProps, 'color'> & { | ||
| onClick?: (e: any) => void; | ||
| className?: string; | ||
| 'data-testid'?: string; | ||
|
|
||
| /** | ||
| * @deprecated This should not be used, only for back-compatibility. | ||
| * Use Link or some other clickable wrapping component. | ||
| */ | ||
| cursorPointer?: boolean; | ||
|
|
||
| hoverColor?: string; | ||
| } & ExclusiveColorOrVariant; | ||
|
|
||
| export const Icon = forwardRef( | ||
| ( | ||
| { | ||
| name, | ||
| size = 'large', | ||
| color, | ||
| variant, | ||
| onClick, | ||
| className, | ||
| 'data-testid': dataTest, | ||
| cursorPointer, | ||
| hoverColor, | ||
| margin, | ||
| }: IconProps, | ||
| ref?: Ref<HTMLDivElement>, | ||
| ) => { | ||
| const iconSize = getIconSize(size); | ||
|
|
||
| const handleOnKeyDown = (e: React.KeyboardEvent) => { | ||
| if (e.key === 'Enter' || e.key === ' ') { | ||
| onClick?.(e); | ||
| } | ||
| }; | ||
|
|
||
| const handleInjection = (svg: SVGSVGElement) => { | ||
| svg.setAttribute('width', `${iconSize}px`); | ||
| svg.setAttribute('height', `${iconSize}px`); | ||
| }; | ||
|
|
||
| const handleClick = (e: MouseEvent<any>) => { | ||
| onClick?.(e); | ||
|
|
||
| // We need to stop default/propagation in case the icon is rendered in popup/modal so it won't close it. | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| }; | ||
|
|
||
| return ( | ||
| <SvgWrapper | ||
| $cursorPointer={cursorPointer} | ||
| $hoverColor={hoverColor} | ||
| $margin={margin} | ||
| $color={color} | ||
| $variant={variant} | ||
| data-testid={dataTest} | ||
| onClick={onClick ? handleClick : undefined} | ||
| className={className} | ||
| ref={ref} | ||
| > | ||
| <SVG | ||
| tabIndex={onClick ? 0 : undefined} | ||
| onKeyDown={handleOnKeyDown} | ||
| src={icons[name]} | ||
| beforeInjection={handleInjection} | ||
| /> | ||
| </SvgWrapper> | ||
| ); | ||
| }, | ||
| ); | ||
|
|
||
| export { type IconName, icons, type IconSize } from '@suite-common/icons/src/webComponents'; |
36 changes: 0 additions & 36 deletions
36
packages/components/src/components/Icon/IconLegacy.stories.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.