Screenshot tests always falling in tests with my custom Input component. Screenshots with difference shows me difference in border-radius even after adding these tests. Sometimes it falls in different places with input but always trouble in border-radius.
This is my story
export default {
title: "shared/Input",
component: Input,
argTypes: {
backgroundColor: { control: "color" },
},
} as ComponentMeta<typeof Input>
const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />
export const Primary = Template.bind({})
Primary.args = {
placeholder: "Type text",
value: "123123",
}
export const WithoutPlaceholder = Template.bind({})
WithoutPlaceholder.args = {
value: "123123",
}
This is my Input component
export const Input = memo(
({
className,
value,
onChange,
type = "text",
placeholder,
placeholderInline = false,
autofocus,
...otherProps
}: InputProps) => {
const ref = useRef<HTMLInputElement>(null)
const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
onChange?.(e.target.value)
}
useEffect(() => {
if (autofocus) {
ref.current?.focus()
}
}, [autofocus])
const mods: Record<string, boolean> = {
[cls.placeholderInline]: placeholderInline,
}
return (
<div className={classNames(cls.Input, mods, [className])}>
{placeholder && <div className={cls.placeholder}>{placeholder}</div>}
<input
ref={ref}
type={type}
value={value}
onChange={onChangeHandler}
className={cls.input}
{...otherProps}
/>
</div>
)
}
)
And styles(scss)
.input {
width: 100%;
background: var(--bg-color);
border: none;
border: 1.5px solid var(--primary-color);
border-radius: 5px;
color: var(--primary-color);
&:focus {
outline: 1.5px solid var(--inverted-primary-color);
}
}
.placeholderInline {
display: flex;
margin-right: 5px;
}
I tried find a problem in storybook config and loki config but it's to no avail.