Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/18884 migrate avatar network #19079

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/components/app/add-network/add-network.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
BackgroundColor,
TextColor,
IconColor,
Size,
} from '../../../helpers/constants/design-system';
import Button from '../../ui/button';
import Tooltip from '../../ui/tooltip';
Expand All @@ -40,6 +39,7 @@ import {
IconName,
IconSize,
AvatarNetwork,
AvatarNetworkSize,
Text,
} from '../../component-library';
import { MetaMetricsNetworkEventSource } from '../../../../shared/constants/metametrics';
Expand Down Expand Up @@ -199,7 +199,7 @@ const AddNetwork = () => {
>
<Box display={Display.Flex} alignItems={AlignItems.center}>
<AvatarNetwork
size={Size.SM}
size={AvatarNetworkSize.Sm}
src={item.rpcPrefs?.imageUrl}
name={item.nickname}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ import TransactionListItemDetails from '../transaction-list-item-details';
import { ActivityListItem } from '../../multichain';
import {
AvatarNetwork,
AvatarNetworkSize,
BadgeWrapper,
BadgeWrapperAnchorElementShape,
Box,
} from '../../component-library';
import {
BackgroundColor,
Display,
Size,
} from '../../../helpers/constants/design-system';
import { getCurrentNetwork } from '../../../selectors';

Expand Down Expand Up @@ -77,7 +77,7 @@ export default function SmartTransactionListItem({
<AvatarNetwork
className="activity-tx__network-badge"
data-testid="activity-tx-network-badge"
size={Size.XS}
size={AvatarNetworkSize.Xs}
name={currentChain?.nickname}
src={currentChain?.rpcPrefs?.imageUrl}
borderWidth={1}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ import {
Color,
Display,
FontWeight,
Size,
TextAlign,
TextVariant,
} from '../../../helpers/constants/design-system';
import {
AvatarNetwork,
AvatarNetworkSize,
BadgeWrapper,
BadgeWrapperAnchorElementShape,
Box,
Expand Down Expand Up @@ -273,7 +273,7 @@ function TransactionListItemInner({
<AvatarNetwork
className="activity-tx__network-badge"
data-testid="activity-tx-network-badge"
size={Size.XS}
size={AvatarNetworkSize.Xs}
name={currentChain?.nickname}
src={currentChain?.rpcPrefs?.imageUrl}
borderWidth={1}
Expand Down
4 changes: 2 additions & 2 deletions ui/components/component-library/avatar-base/avatar-base.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {

import type { PolymorphicRef } from '../box';
import { Text } from '../text';

import type { TextProps } from '../text';
import {
AvatarBaseComponent,
AvatarBaseProps,
Expand Down Expand Up @@ -60,7 +60,7 @@ export const AvatarBase: AvatarBaseComponent = React.forwardRef(
variant={fallbackTextVariant}
textTransform={TextTransform.Uppercase}
{...{ backgroundColor, borderColor, color }}
{...props} // TODO: There is a typing issue with spreading props to the Box component. It still works but TypeScript complains.
{...(props as TextProps<C>)}
>
{children}
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export enum AvatarBaseSize {
Xl = 'xl',
}

export interface Props extends TextStyleUtilityProps {
export interface AvatarBaseStyleUtilityProps extends TextStyleUtilityProps {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@georgewrmarshall renamed the base props here to be consistent with how we have been doing it lately.

/**
* The size of the AvatarBase.
* Possible values could be 'AvatarBaseSize.Xs'(16px), 'AvatarBaseSize.Sm'(24px),
Expand Down Expand Up @@ -48,7 +48,7 @@ export interface Props extends TextStyleUtilityProps {
}

export type AvatarBaseProps<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, Props>;
PolymorphicComponentPropWithRef<C, AvatarBaseStyleUtilityProps>;

export type AvatarBaseComponent = <C extends React.ElementType = 'span'>(
props: AvatarBaseProps<C>,
Expand Down
16 changes: 8 additions & 8 deletions ui/components/component-library/avatar-network/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ The `AvatarNetwork` is a component responsible for display of the image of a giv

## Props

The `AvatarNetwork` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
The `AvatarNetwork` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props

<ArgsTable of={AvatarNetwork} />

Expand All @@ -37,13 +37,13 @@ The fallback display of the `AvatarNetwork` is a circle with the initial letter
</Canvas>

```jsx
import { Size } from '../../../helpers/constants/design-system';
import { AvatarNetwork } from '../../component-library';
<AvatarNetwork size={Size.XS} />
<AvatarNetwork size={Size.SM} />
<AvatarNetwork size={Size.MD} />
<AvatarNetwork size={Size.LG} />
<AvatarNetwork size={Size.XL} />
import { AvatarNetwork, AvatarNetworkSize } from '../../component-library';

<AvatarNetwork size={AvatarNetworkSize.Xs} />
<AvatarNetwork size={AvatarNetworkSize.Sm} />
<AvatarNetwork size={AvatarNetworkSize.Md} />
<AvatarNetwork size={AvatarNetworkSize.Lg} />
<AvatarNetwork size={AvatarNetworkSize.Xl} />
```
georgewrmarshall marked this conversation as resolved.
Show resolved Hide resolved

### Name
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ exports[`AvatarNetwork should render correctly 1`] = `
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-network"
>
?
<img
alt="ethereum logo"
class="mm-avatar-network__network-image"
src="./images/eth_logo.png"
/>
</div>
</div>
`;

This file was deleted.

133 changes: 0 additions & 133 deletions ui/components/component-library/avatar-network/avatar-network.js

This file was deleted.

Loading