checkpoint

components/src/components/atoms/Avatar/Avatar.tsx

@@ -2,25 +2,32 @@ import * as React from 'react'
 
 import { rainbowSprinkles } from '@/src/css/rainbow-spinkles.css'
 
-import { Box, BoxProps } from '../Box'
+import { rawColorToRGBA } from '@/src/tokens/color3'
+
+import { Box, type BoxProps } from '../Box'
+import { avatar } from './styles.css'
+import { CheckSVG } from '../..'
 
 type NativeImgAttributes = React.ImgHTMLAttributes<HTMLImageElement>
 
 type Shape = 'circle' | 'square'
 
 interface Container {
   $shape: Shape
+  $size: BoxProps['wh']
 }
 
-const Container = ({ $shape, ...props }: BoxProps & Container) => (
+const Container = ({ $shape, $size, ...props }: BoxProps & Container) => (
   <Box
-    {...props}
     backgroundColor="$backgroundSecondary"
     borderRadius={$shape === 'circle' ? '$full' : '$2xLarge'}
+    className={avatar}
+    height={$size}
     overflow="hidden"
-    paddingBottom="$full"
+    paddingBottom={$size ? 'unset' : '$full'}
     position="relative"
-    width="$full"
+    width={$size ?? '$full'}
+    {...props}
   />
 )
 
@@ -58,7 +65,13 @@ export type Props = {
   /** If true sets the component into disabled format. */
   disabled?: boolean
   /** An element that overlays the avatar */
-  overlay?: React.ReactNode
+  checked?: boolean
+  /** An svg to overlay over the avatar */
+  icon?: React.ReactElement
+  /** The deconding attribute of an img element */
+  decoding?: NativeImgAttributes['decoding']
+  /** A custom sizing for the avatar */
+  size?: BoxProps['wh']
 } & Omit<NativeImgAttributes, 'alt' | 'onError' | 'children' | 'onError'>
 
 export const Avatar = ({
@@ -68,7 +81,9 @@ export const Avatar = ({
   placeholder,
   decoding = 'async',
   disabled = false,
-  overlay,
+  icon,
+  checked,
+  size,
   ...props
 }: Props) => {
   const ref = React.useRef<HTMLImageElement>(null)
@@ -114,9 +129,26 @@ export const Avatar = ({
     ...props,
   })
 
+  const overlay = React.useMemo(() => {
+    if (disabled || (!icon && !checked)) return null
+    return (
+      <Box
+        alignItems="center"
+        bg={
+          checked
+            ? rawColorToRGBA([56, 137, 255], 0.75)
+            : rawColorToRGBA([0, 0, 0], 0.25)
+        }
+        color="$white"
+        display="flex"
+        justifyContent="center"
+      >
+        <Box as={icon ?? <CheckSVG />} wh="40%" />
+      </Box>
+    )
+  }, [checked, disabled, icon])
   return (
-    <Container $shape={shape}>
-      {overlay}
+    <Container $shape={shape} $size={size}>
       {!isImageVisible && (
         <Placeholder
           $disabled={disabled}
@@ -135,6 +167,7 @@ export const Avatar = ({
         onError={() => setShowImage(false)}
         onLoad={() => setShowImage(true)}
       />
+      {overlay}
     </Container>
   )
 }

components/src/components/atoms/Avatar/styles.css.ts

@@ -0,0 +1,11 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+
+export const avatar = style({})
+
+globalStyle(`${avatar} > * `, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+})

components/src/components/atoms/Box/Box.tsx

@@ -8,7 +8,10 @@ import React, {
 } from 'react'
 import classNames from 'clsx'
 
-import { Sprinkles, rainbowSprinkles } from '../../../css/rainbow-spinkles.css'
+import {
+  type Sprinkles,
+  rainbowSprinkles,
+} from '@/src/css/rainbow-spinkles.css'
 
 type HTMLProperties = Omit<
   AllHTMLAttributes<HTMLElement>,
@@ -18,9 +21,9 @@ type HTMLProperties = Omit<
 export type BoxProps = Sprinkles &
   HTMLProperties & { as?: ElementType | ReactElement<any> }
 
-export const Box = forwardRef<HTMLElement, BoxProps>(
+export const Box = forwardRef<HTMLElement, BoxProps & { log?: boolean }>(
   (
-    { as: _as, className: _className, style: _style, children, ...props },
+    { as: _as, className: _className, style: _style, children, log, ...props },
     ref,
   ) => {
     const {
@@ -34,10 +37,12 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
 
     if (isValidElement(_as)) {
       const as = _as as ReactElement<any>
+      if (log) console.log('as', className, style, otherProps)
       return cloneElement(as, { className, style, ...otherProps })
     }
     const as = _as as ElementType
     const Component = as || 'div'
+    if (log) console.log('as', className, style, otherProps)
     return (
       <Component className={className} ref={ref} style={style} {...otherProps}>
         {children}

components/src/components/atoms/Button/Button.tsx

@@ -2,10 +2,10 @@ import * as React from 'react'
 
 import { P, match } from 'ts-pattern'
 
-import { Space } from '@/src/tokens'
-
 import { scale, translateY } from '@/src/css/utils/common'
 
+import { removeNullishProps } from '@/src/utils/removeNullishProps'
+
 import {
   ColorStyle,
   WithColorStyle,
@@ -47,8 +47,6 @@ type BaseProps = {
   pressed?: boolean
   /** If true, adds a box-shadow */
   shadow?: boolean
-  /** A space value for the width of the button */
-  width?: Space
   /** If true, makes inner div full width */
   fullWidthContent?: boolean
   /** When set, shows a count indicator on the button */
@@ -58,7 +56,7 @@ type BaseProps = {
   /** Show indicator that button has extra info via tooltip. */
   shouldShowTooltipIndicator?: boolean
   color?: Color
-} & Omit<NativeButtonProps, 'prefix' | 'size' | 'color'>
+} & Omit<BoxProps, 'size'>
 
 type WithAnchor = {
   /** The href attribute for the anchor element. */
@@ -84,7 +82,6 @@ type ButtonBoxProps = {
   $colorStyle: WithColorStyle['colorStyle']
   $color?: Color
   $hasCounter?: boolean
-  $width: any
 }
 const ButtonBox = React.forwardRef<
   HTMLButtonElement,
@@ -98,7 +95,6 @@ const ButtonBox = React.forwardRef<
       $size = 'medium',
       $colorStyle = 'accentPrimary',
       $hasCounter,
-      $width = '$full',
       $color,
       as,
       ...props
@@ -141,7 +137,7 @@ const ButtonBox = React.forwardRef<
       height={getValueForSize($size, 'height')}
       justifyContent="center"
       position="relative"
-      px={$hasCounter ? '$12' : getValueForSize($size, 'px')}
+      // px={$hasCounter ? '$12' : getValueForSize($size, 'px')}
       ref={ref}
       transform={{
         base: translateY(0),
@@ -155,9 +151,12 @@ const ButtonBox = React.forwardRef<
       width={
         ['square', 'circle'].includes($shape)
           ? getValueForSize($size, 'height')
-          : $width
+          : '$full'
       }
-      {...props}
+      {...{
+        px: $hasCounter ? '$12' : getValueForSize($size, 'px'),
+        ...props,
+      }}
     />
   ),
 )
@@ -267,7 +266,6 @@ export const Button = React.forwardRef(
       onClick,
       pressed = false,
       shadow = false,
-      width,
       fullWidthContent,
       count,
       color,
@@ -322,7 +320,6 @@ export const Button = React.forwardRef(
         $shadow={shadow}
         $shape={shape}
         $size={size}
-        $width={width}
         as={asProp as any}
         disabled={disabled}
         href={href}
@@ -335,7 +332,7 @@ export const Button = React.forwardRef(
         zIndex={zIndex}
         //eslint-disable-next-line react/jsx-sort-props
         onClick={onClick}
-        {...props}
+        {...removeNullishProps(props)}
       >
         {shouldShowTooltipIndicator && (
           <TooltipIndicatorBox data-testid="tooltip-indicator">

components/src/components/atoms/Card/Card.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react'
 
+import { removeNullishProps } from '@/src/utils/removeNullishProps'
+
 import { Typography } from '../Typography'
 import { Box, BoxProps } from '../Box/Box'
 
 export type Props = {
   title?: string
-} & NativeDivProps
+} & BoxProps
 
 const ContainerBox = (props: BoxProps) => (
   <Box
@@ -33,11 +35,9 @@ const Divider = (props: BoxProps) => (
   />
 )
 
-type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
-
 export const Card = ({ title, children, ...props }: Props) => {
   return (
-    <ContainerBox {...props}>
+    <ContainerBox {...removeNullishProps(props)}>
       {title && <Typography fontVariant="headingFour">{title}</Typography>}
       {children}
     </ContainerBox>

components/src/components/atoms/DynamicPopover/DynamicPopover.tsx

@@ -6,6 +6,7 @@ import { debounce } from 'lodash'
 import { Portal } from '../Portal'
 import { Box, BoxProps } from '../Box/Box'
 import { getValueForTransitionState } from './utils/getValueForTransitionState'
+import { container } from './style.css'
 
 export type DynamicPopoverSide = 'top' | 'right' | 'bottom' | 'left'
 
@@ -170,12 +171,10 @@ const PopoverBox = React.forwardRef<HTMLElement, BoxProps & PopoverBoxProps>(
   ) => (
     <Box
       {...props}
-      MozBackfaceVisibility="$hidden"
-      MozTransform="$base"
-      WebkitBackfaceVisibility="$hidden"
-      WebkitTransform="$base"
       boxSizing="border-box"
+      className={container}
       display="block"
+      fontFamily="$sans"
       left={getValueForTransitionState($state.status, 'leftFunc')($x)}
       opacity={getValueForTransitionState($state.status, 'opacity')}
       overflow={$hideOverflow ? 'hidden' : 'visible'}
@@ -412,6 +411,7 @@ export const DynamicPopover = ({
     if (isControlled) {
       toggle(isOpen)
     }
+    return () => toggle(false)
   }, [isControlled, isOpen])
 
   const [state, toggle] = useTransition({

components/src/components/atoms/DynamicPopover/style.css.ts

@@ -0,0 +1,7 @@
+import { ComplexStyleRule, style } from '@vanilla-extract/css'
+
+export const container = style({
+  WebkitBackfaceVisibility: 'hidden',
+  MozBackfaceVisibility: 'hidden',
+  backfaceVisibility: 'hidden',
+} as ComplexStyleRule)

components/src/components/atoms/Tag/Tag.tsx

@@ -2,11 +2,11 @@ import * as React from 'react'
 
 import { translateY } from '@/src/css/utils/common'
 
-import { WithColorStyle, getValueForColorStyle } from './utils/withColorStyle'
+import { removeNullishProps } from '@/src/utils/removeNullishProps'
 
-import { Box } from '../Box/Box'
+import { WithColorStyle, getValueForColorStyle } from './utils/withColorStyle'
 
-type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
+import { Box, BoxProps } from '../Box/Box'
 
 export type Props = {
   /** Element type of container */
@@ -15,7 +15,7 @@ export type Props = {
   hover?: boolean
   /** Size of element */
   size?: 'small' | 'medium'
-} & NativeDivProps &
+} & Omit<BoxProps, 'size'> &
   WithColorStyle
 
 export const Tag = ({
@@ -55,7 +55,7 @@ export const Tag = ({
       transitionProperty="color, border-color, background-color, transform"
       transitionTimingFunction="$inOut"
       width="$max"
-      {...props}
+      {...removeNullishProps(props)}
     >
       {children}
     </Box>

components/src/components/atoms/Typography/Typography.tsx

@@ -4,7 +4,9 @@ import { Font, FontSize, FontWeight } from '@/src/tokens/typography'
 
 import { Color, WithColor, validateColor } from '@/src/interfaces/withColor'
 
-import { Box, BoxProps } from '../Box/Box'
+import { removeNullishProps } from '@/src/utils/removeNullishProps'
+
+import { Box, type BoxProps } from '../Box/Box'
 import { FontVariant, getValueForVariant } from './utils/getValueForVariant'
 
 type ContainerProps = {
@@ -22,7 +24,6 @@ const ContainerBox = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
     ref,
   ) => (
     <Box
-      {...props}
       as={as ?? 'div'}
       color={validateColor($color, '$text')}
       fontFamily={$font === 'mono' ? '$mono' : '$sans'}
@@ -35,6 +36,7 @@ const ContainerBox = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
       ref={ref}
       textOverflow={$ellipsis ? 'ellipsis' : undefined}
       whiteSpace={$ellipsis ? 'nowrap' : undefined}
+      {...props}
     />
   ),
 )
@@ -77,7 +79,6 @@ export const Typography = React.forwardRef<HTMLElement, Props>(
       as,
       children,
       ellipsis,
-      className = '',
       fontVariant = 'body',
       font = 'sans',
       color = 'textPrimary',
@@ -89,16 +90,15 @@ export const Typography = React.forwardRef<HTMLElement, Props>(
   ) => {
     return (
       <ContainerBox
-        {...props}
         $color={color}
         $ellipsis={ellipsis ? true : undefined}
         $font={font}
         $fontVariant={fontVariant}
         $weight={weight}
         as={as}
-        className={className}
         ref={ref}
         textTransform={textTransform}
+        {...removeNullishProps(props)}
       >
         {children}
       </ContainerBox>