crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-19 13:41:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix glitch for Swatch

Browse Source
This commit is contained in:
okbel 2021-05-28 09:59:45 -03:00
parent 02b24c9233
commit 3311e16779
2 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
components/product/Swatch/Swatch.module.css
View File

@ -1,37 +1,46 @@
.root { .swatch {
box-sizing: border-box;
composes: root from 'components/ui/Button/Button.module.css'; composes: root from 'components/ui/Button/Button.module.css';
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-150 ease-in-out items-center justify-center cursor-pointer transition duration-150 ease-in-out
p-0 shadow-none border-gray-200 border box-border; p-0 shadow-none border-gray-200 border box-border;
margin-right: calc(0.75rem - 1px);
overflow: hidden;
}
& > span { .swatch::before,
@apply absolute; .swatch::after {
} box-sizing: border-box;
}
&:hover { .swatch:hover {
@apply transform scale-110 bg-hover; @apply transform scale-110 bg-hover;
} }
.swatch > span {
@apply absolute;
} }
.color { .color {
@apply text-black transition duration-150 ease-in-out; @apply text-black transition duration-150 ease-in-out;
&:hover {
@apply text-black;
}
&.dark,
&.dark:hover {
color: white !important;
}
} }
.active { .color :hover {
&.size { @apply text-black;
@apply border-accents-9 border-2;
}
} }
.wrapper { .color.dark,
.color.dark:hover {
color: white !important;
}
.active.size {
@apply border-accents-9 border-2;
padding-right: 1px;
padding-left: 1px;
}
.textLabel {
@apply w-auto px-4; @apply w-auto px-4;
min-width: 3rem;
} }

22
components/product/Swatch/Swatch.tsx
View File

@ -4,42 +4,44 @@ import s from './Swatch.module.css'
import { Check } from '@components/icons' import { Check } from '@components/icons'
import Button, { ButtonProps } from '@components/ui/Button' import Button, { ButtonProps } from '@components/ui/Button'
import { isDark } from '@lib/colors' import { isDark } from '@lib/colors'
interface Props { interface SwatchProps {
active?: boolean active?: boolean
children?: any children?: any
className?: string className?: string
label?: string
variant?: 'size' | 'color' | string variant?: 'size' | 'color' | string
color?: string color?: string
label?: string | null
} }
const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({ const Swatch: FC<Omit<ButtonProps, 'variant'> & SwatchProps> = ({
className, className,
color = '', color = '',
label, label = null,
variant = 'size', variant = 'size',
active, active,
...props ...props
}) => { }) => {
variant = variant?.toLowerCase() variant = variant?.toLowerCase()
label = label?.toLowerCase()
const rootClassName = cn( if (label) {
s.root, label = label?.toLowerCase()
}
const swatchClassName = cn(
s.swatch,
{ {
[s.active]: active, [s.active]: active,
[s.size]: variant === 'size', [s.size]: variant === 'size',
[s.color]: color, [s.color]: color,
[s.dark]: color ? isDark(color) : false, [s.dark]: color ? isDark(color) : false,
[s.textLabel]: !color && label && label.length < 4,
}, },
className className
) )
return ( return (
<Button <Button
className={cn(rootClassName, { className={swatchClassName}
[s.wrapper]: !color,
})}
style={color ? { backgroundColor: color } : {}} style={color ? { backgroundColor: color } : {}}
aria-label="Variant Swatch" aria-label="Variant Swatch"
{...props} {...props}