Skip to content

Refactor to vanilla sprinkles (Extreme edition) #159

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.

Sign up for GitHub

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

Closed
storywithoutend wants to merge 1 commit into from
Closed

Refactor to vanilla sprinkles (Extreme edition) #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
61 changes: 31 additions & 30 deletions components/src/components/atoms/Avatar/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import * as React from 'react'

import { rainbowSprinkles } from '@/src/css/rainbow-spinkles.css'

import { rawColorToRGBA } from '@/src/tokens/color'

import { Box, type BoxProps } from '../Box/Box'
Expand Down Expand Up @@ -42,13 +40,13 @@ const Placeholder = ({
}: PlaceholderProps & BoxProps) => (
<Box
alignItems="center"
background={$url || 'blueGradient'}
// background={$url || 'blueGradient'}
display="flex"
filter={$disabled ? 'grayscale(1)' : 'unset'}
height="100%"
// filter={$disabled ? 'grayscale(1)' : 'unset'}
// height="100%"
justifyContent="center"
position="absolute"
width="100%"
// width="100%"
{...props}
/>
)
Expand All @@ -67,7 +65,7 @@ export type AvatarProps = {
/** An element that overlays the avatar */
checked?: boolean
/** An svg to overlay over the avatar */
icon?: React.ReactElement
icon?: React.FC
/** The deconding attribute of an img element */
decoding?: NativeImgAttributes['decoding']
/** A custom sizing for the avatar */
Expand All @@ -84,7 +82,7 @@ export const Avatar: React.FC<AvatarProps> = ({
icon,
checked,
size,
...props
// ...props
}) => {
const ref = React.useRef<HTMLImageElement>(null)
const [showImage, setShowImage] = React.useState(!!src)
Expand Down Expand Up @@ -115,35 +113,38 @@ export const Avatar: React.FC<AvatarProps> = ({

const isImageVisible = showImage && !!src

const {
className: imgClassName,
style: imgStyle,
otherProps: imgOtherProps,
} = rainbowSprinkles({
display: isImageVisible ? 'block' : 'none',
position: 'absolute',
height: '100%',
objectFit: 'cover',
width: '100%',
filter: disabled ? 'grayscale(1)' : undefined,
...props,
})
// const {
// className: imgClassName,
// style: imgStyle,
// otherProps: imgOtherProps,
// } = rainbowSprinkles({
// display: isImageVisible ? 'block' : 'none',
// position: 'absolute',
// height: '100%',
// objectFit: 'cover',
// width: '100%',
// filter: disabled ? 'grayscale(1)' : undefined,
// ...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)
}
// 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
as={icon ?? CheckSVG}
// wh="40%"
/>
</Box>
)
}, [checked, disabled, icon])
Expand All @@ -157,9 +158,9 @@ export const Avatar: React.FC<AvatarProps> = ({
/>
)}
<img
className={imgClassName}
style={imgStyle}
{...imgOtherProps}
// className={imgClassName}
// style={imgStyle}
// {...imgOtherProps}
alt={label}
decoding={decoding}
ref={ref}
Expand Down
6 changes: 3 additions & 3 deletions components/src/components/atoms/BackdropSurface/BackdropSurface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const BackdropSurface = React.forwardRef<HTMLElement, BackdropSurfaceProp
className={backdropSurface({
entered: !$empty && $state === 'entered',
})}
height="100vh"
// height="100vh"
left="0"
overflow="hidden"
position="fixed"
Expand All @@ -24,8 +24,8 @@ export const BackdropSurface = React.forwardRef<HTMLElement, BackdropSurfaceProp
transitionDuration={300}
transitionProperty="all"
transitionTimingFunction="popIn"
width="100vw"
zIndex="999"
// width="100vw"
// zIndex="999"
/>
),
)
Expand Down
60 changes: 30 additions & 30 deletions components/src/components/atoms/Banner/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ type BaseProps = {
as?: 'a'
onDismiss?: () => void
actionIcon?: React.ReactNode
icon?: React.ReactNode
icon?: React.FC
iconType?: IconTypes
} & NativeDivProps
} & BoxProps

type WithIcon = {
icon?: React.ReactNode
Expand Down Expand Up @@ -59,11 +59,11 @@ const ContainerBox = React.forwardRef<HTMLElement, ContainerProps>(
({ $alert, $hasAction, ...props }, ref) => (
<Box
alignItems={{ base: 'stretch', sm: 'center' }}
backgroundColor={{
base: getValueForAlert($alert, 'background'),
hover: getValueForAlert($alert, 'hover'),
}}
borderColor={getValueForAlert($alert, 'border')}
// backgroundColor={{
// base: getValueForAlert($alert, 'background'),
// hover: getValueForAlert($alert, 'hover'),
// }}
// borderColor={getValueForAlert($alert, 'border')}
borderRadius="2xLarge"
borderStyle="solid"
borderWidth="1x"
Expand All @@ -73,13 +73,13 @@ const ContainerBox = React.forwardRef<HTMLElement, ContainerProps>(
position="relative"
pr={$hasAction ? '8' : undefined}
ref={ref}
transform={{
base: 'translateY(0)',
hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
}}
// transform={{
// base: 'translateY(0)',
// hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
// }}
transitionDuration={150}
transitionProperty="all"
transitionTimingFunction="ease-in-out"
// transitionTimingFunction="ease-in-out"
width="full"
{...props}
/>
Expand All @@ -91,9 +91,9 @@ const IconBox = ({
...props
}: BoxProps & { $alert: NonNullableAlert }) => (
<Box
backgroundColor={getValueForAlert($alert, 'icon')}
// backgroundColor={getValueForAlert($alert, 'icon')}
borderRadius="full"
color={getValueForAlert($alert, 'svg')}
// color={getValueForAlert($alert, 'svg')}
flex={0}
flexBasis={{ base: '8', sm: '10' }}
height={{ base: '8', sm: '10' }}
Expand All @@ -109,7 +109,7 @@ const SVGBox = ({
<Box
display="block"
height="full"
transform={$alert === 'info' ? 'scale(1)' : 'scale(0.5)'}
// transform={$alert === 'info' ? 'scale(1)' : 'scale(0.5)'}
width="full"
{...props}
/>
Expand All @@ -134,26 +134,26 @@ const ActionButtonIconBox = ({
}: BoxProps & { $alert: NonNullableAlert, $hasAction: boolean }) => (
<Box
alignItems="center"
backgroundColor={{
base: getValueForAlert($alert, 'actionIcon'),
hover: getValueForAlert($alert, 'actionIconHover'),
}}
// backgroundColor={{
// base: getValueForAlert($alert, 'actionIcon'),
// hover: getValueForAlert($alert, 'actionIconHover'),
// }}
borderRadius="full"
color={{
base: getValueForAlert($alert, 'actionSvg'),
hover: getValueForAlert($alert, 'actionSvgHover'),
}}
// color={{
// base: getValueForAlert($alert, 'actionSvg'),
// hover: getValueForAlert($alert, 'actionSvgHover'),
// }}
cursor="pointer"
display="flex"
height="5"
justifyContent="center"
transform={{
base: 'translateY(0)',
hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
}}
// transform={{
// base: 'translateY(0)',
// hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
// }}
transitionDuration={150}
transitionProperty="all"
transitionTimingFunction="ease-in-out"
// transitionTimingFunction="ease-in-out"
width="5"
{...props}
/>
Expand All @@ -170,7 +170,7 @@ const ActionButton = ({
onDismiss,
}: Pick<BannerProps, 'alert' | 'onDismiss'> & { hasHref: boolean } & WithIcon) => {
if (onDismiss) {
const Icon = (icon || <CrossSVG />) as React.ReactElement
const Icon = (icon || CrossSVG) as React.FC
return (
<ActionButtonBox onClick={() => onDismiss()}>
<ActionButtonIconBox $alert={alert} $hasAction>
Expand All @@ -180,7 +180,7 @@ const ActionButton = ({
)
}
if (hasHref || icon) {
const Icon = (icon || <UpRightArrowSVG />) as React.ReactElement
const Icon = (icon || UpRightArrowSVG) as React.FC
return (
<ActionButtonBox as="div">
<ActionButtonIconBox $alert={alert} $hasAction={false}>
Expand Down
12 changes: 7 additions & 5 deletions components/src/components/atoms/Box/Box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import type {
AllHTMLAttributes,
ElementType,
ReactElement } from 'react'
FunctionComponent,
ComponentClass,
} from 'react'
import React, {
forwardRef,
} from 'react'
Expand All @@ -18,11 +19,11 @@ type HTMLProperties = Omit<
>

export type BoxProps = Sprinkles &
HTMLProperties & { as?: ElementType | ReactElement<any> }
HTMLProperties & { as?: string | FunctionComponent<any> | ComponentClass<any, any> }

export const Box = forwardRef<HTMLElement, BoxProps >(
(
{ as = 'div', className, ...props },
{ as = 'div', className, children, ...props },
ref,
) => {
const atomProps: Record<string, unknown> = {}
Expand All @@ -37,12 +38,13 @@ export const Box = forwardRef<HTMLElement, BoxProps >(
}
}

const atomicCss = sprinkles(props)
const atomicCss = sprinkles(atomProps)

return React.createElement(as, {
className: clsx(atomicCss, className),
...nativeProps,
ref,
children,
})
},
)
Loading