m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Updating BadgeWrapper to use TS Box (#19769)

Browse Source
This commit is contained in:
George Marshall 2023-07-14 13:05:00 -07:00 committed by GitHub
parent c028bba8fd
commit 805cc31e63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 74 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
View File

@ -50,7 +50,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
data-testid="nft-item"
>
<div
class="box mm-badge-wrapper nft-item__badge-wrapper box--flex-direction-row"
class="mm-box mm-badge-wrapper nft-item__badge-wrapper"
>
<img
alt="MUNK #1 1"
@ -59,7 +59,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
/>
<div
class="box mm-badge-wrapper__badge-container box--flex-direction-row"
class="mm-box mm-badge-wrapper__badge-container"
style="top: -4px; right: -4px;"
>
<div

4
ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
View File

@ -12,7 +12,7 @@ exports[`Token Cell should match snapshot 1`] = `
href="#"
>
<div
class="box mm-badge-wrapper box--margin-right-3 box--display-inline-block box--flex-direction-row"
class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
@ -20,7 +20,7 @@ exports[`Token Cell should match snapshot 1`] = `
T
</div>
<div
class="box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right box--flex-direction-row"
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"

4
ui/components/component-library/badge-wrapper/__snapshots__/badge-wrapper.test.tsx.snap
View File

@ -3,11 +3,11 @@
exports[`BadgeWrapper should render correctly 1`] = `
<div>
<div
class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
class="mm-box mm-badge-wrapper mm-box--display-inline-block"
>
content
<div
class="box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right box--flex-direction-row"
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
>
<div
data-testid="badge"

10
ui/components/component-library/badge-wrapper/badge-wrapper.test.tsx
View File

@ -95,9 +95,9 @@ describe('BadgeWrapper', () => {
<BadgeWrapper
badge={<div>badge</div>}
badgeContainerProps={{ 'data-testid': 'badge-custom' }}
position={{
top: -10,
right: -10,
positionObj={{
top: '-10px',
right: '-10px',
}}
>
content custom
@ -108,8 +108,8 @@ describe('BadgeWrapper', () => {
'mm-badge-wrapper__badge-container--circular-top-right',
);
expect(getByTestId('badge-custom')).toHaveStyle({
top: -10,
right: -10,
top: '-10px',
right: '-10px',
});
});

66
ui/components/component-library/badge-wrapper/badge-wrapper.tsx
View File

@ -1,44 +1,50 @@
import React from 'react';
import classnames from 'classnames';
import { DISPLAY } from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { Display } from '../../../helpers/constants/design-system';
import { Box } from '..';
import type { PolymorphicRef } from '../box';
import {
BadgeWrapperPosition,
BadgeWrapperAnchorElementShape,
BadgeWrapperProps,
BadgeWrapperComponent,
} from './badge-wrapper.types';
export const BadgeWrapper = ({
children,
badge,
badgeContainerProps,
position = BadgeWrapperPosition.topRight,
positionObj,
anchorElementShape = BadgeWrapperAnchorElementShape.circular,
className = '',
color,
...props
}: BadgeWrapperProps) => (
<Box
className={classnames('mm-badge-wrapper', className)}
display={DISPLAY.INLINE_BLOCK}
{...props}
>
{/* Generally the AvatarAccount or AvatarToken */}
{children}
export const BadgeWrapper: BadgeWrapperComponent = React.forwardRef(
<C extends React.ElementType = 'div'>(
{
children,
badge,
badgeContainerProps,
position = BadgeWrapperPosition.topRight,
positionObj,
anchorElementShape = BadgeWrapperAnchorElementShape.circular,
className = '',
...props
}: BadgeWrapperProps<C>,
ref?: PolymorphicRef<C>,
) => (
<Box
className={classnames('mm-badge-wrapper__badge-container', {
[`mm-badge-wrapper__badge-container--${anchorElementShape}-${position}`]:
!positionObj,
})}
style={{ ...positionObj }}
{...badgeContainerProps}
className={classnames('mm-badge-wrapper', className)}
ref={ref}
display={Display.InlineBlock}
{...props} // TODO: There is a typing issue with spreading props to the Box component. It still works but TypeScript complains.
>
{/* Generally the AvatarNetwork at SIZES.XS */}
{badge}
{/* Generally the AvatarAccount or AvatarToken */}
{children}
<Box
className={classnames('mm-badge-wrapper__badge-container', {
[`mm-badge-wrapper__badge-container--${anchorElementShape}-${position}`]:
!positionObj,
})}
style={{ ...positionObj }}
{...badgeContainerProps}
>
{/* Generally the AvatarNetwork at SIZES.XS */}
{badge}
</Box>
</Box>
</Box>
),
);

26
ui/components/component-library/badge-wrapper/badge-wrapper.types.ts
View File

@ -1,4 +1,9 @@
import type { BoxProps } from '../../ui/box/box.d';
import React from 'react';
import type {
StyleUtilityProps,
PolymorphicComponentPropWithRef,
} from '../box';
export enum BadgeWrapperPosition {
topRight = 'top-right',
@ -12,7 +17,7 @@ export enum BadgeWrapperAnchorElementShape {
circular = 'circular',
}
export interface BadgeWrapperProps extends BoxProps {
export interface BadgeWrapperStyleUtilityProps extends StyleUtilityProps {
/**
* The element to be wrapped by the BadgeWrapper and for the badge to be positioned on top of
*/
@ -24,7 +29,7 @@ export interface BadgeWrapperProps extends BoxProps {
/**
* The BadgeWrapper props of the component. All Box props can be used
*/
badgeContainerProps?: BoxProps;
badgeContainerProps?: any; // TODO: Replace with Box types when the syntax and typing is properly figured out. Needs to accept everything Box accepts
/**
* The position of the Badge. Possible values could be 'BadgeWrapperPosition.topRight', 'BadgeWrapperPosition.bottomRight','BadgeWrapperPosition.topLeft', 'BadgeWrapperPosition.bottomLeft'
* Defaults to 'BadgeWrapperPosition.topRight'
@ -34,10 +39,10 @@ export interface BadgeWrapperProps extends BoxProps {
* The positionObj can be used to override the default positioning of the badge it accepts an object with the following keys { top, right, bottom, left }
*/
positionObj?: {
top?: number;
right?: number;
bottom?: number;
left?: number;
top?: number | string;
right?: number | string;
bottom?: number | string;
left?: number | string;
};
/**
* The shape of the anchor element. Possible values could be 'BadgeWrapperAnchorElementShape.circular', 'BadgeWrapperAnchorElementShape.square'
@ -49,3 +54,10 @@ export interface BadgeWrapperProps extends BoxProps {
*/
className?: string;
}
export type BadgeWrapperProps<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, BadgeWrapperStyleUtilityProps>;
export type BadgeWrapperComponent = <C extends React.ElementType = 'div'>(
props: BadgeWrapperProps<C>,
) => React.ReactElement | null;

12
ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
View File

@ -16,14 +16,14 @@ exports[`Connected Site Menu should render the site menu in connected state 1`]
tabindex="0"
>
<div
class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
class="mm-box mm-badge-wrapper mm-box--display-inline-block"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
<div
class="box mm-badge-wrapper__badge-container box--flex-direction-row"
class="mm-box mm-badge-wrapper__badge-container"
style="bottom: 2px; right: -4px; z-index: 1;"
>
<div
@ -53,14 +53,14 @@ exports[`Connected Site Menu should render the site menu in not connected state
tabindex="0"
>
<div
class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
class="mm-box mm-badge-wrapper mm-box--display-inline-block"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
<div
class="box mm-badge-wrapper__badge-container box--flex-direction-row"
class="mm-box mm-badge-wrapper__badge-container"
style="bottom: 2px; right: -4px; z-index: 1;"
>
<div
@ -90,14 +90,14 @@ exports[`Connected Site Menu should render the site menu in not connected to cur
tabindex="0"
>
<div
class="box mm-badge-wrapper box--display-inline-block box--flex-direction-row"
class="mm-box mm-badge-wrapper mm-box--display-inline-block"
>
<span
class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-icon-default"
style="mask-image: url('./images/icons/global.svg');"
/>
<div
class="box mm-badge-wrapper__badge-container box--flex-direction-row"
class="mm-box mm-badge-wrapper__badge-container"
style="bottom: 4px; right: -1px; z-index: 1;"
>
<div

4
ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
View File

@ -12,7 +12,7 @@ exports[`TokenListItem should render correctly 1`] = `
href="#"
>
<div
class="box mm-badge-wrapper box--margin-right-3 box--display-inline-block box--flex-direction-row"
class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
@ -20,7 +20,7 @@ exports[`TokenListItem should render correctly 1`] = `
?
</div>
<div
class="box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right box--flex-direction-row"
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"