Fix select item classes

This commit is contained in:
Justin Edmund 2023-06-24 15:35:32 -07:00
parent 45d4eda1ab
commit da3e4621d4
2 changed files with 14 additions and 8 deletions

View file

@ -1,4 +1,4 @@
.SelectItem {
.item {
align-items: center;
border-radius: $item-corner;
border: 2px solid transparent;

View file

@ -6,23 +6,29 @@ import classNames from 'classnames'
interface Props extends ComponentProps<'div'> {
value: string | number
iconSrc?: string
altText?: string
icon?: {
src: string
alt: string
}
}
const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
{ children, value, ...props },
{ icon, value, children, ...props },
forwardedRef
) {
const { altText, iconSrc, ...rest } = props
return (
<Select.Item
{...rest}
className={classNames({ SelectItem: true }, props.className)}
{...props}
className={classNames(
{
[styles.item]: true,
},
props.className
)}
ref={forwardedRef}
value={`${value}`}
>
{iconSrc ? <img alt={altText} src={iconSrc} /> : ''}
{icon ? <img alt={icon.alt} src={icon.src} /> : ''}
<Select.ItemText>{children}</Select.ItemText>
</Select.Item>
)