From 312d6cc6a5a40c7d0fd5d31f31b39082738650e6 Mon Sep 17 00:00:00 2001 From: Corban Riley Date: Mon, 13 Jan 2025 19:08:40 -0500 Subject: [PATCH] Select converted to tailwind --- src/components/Field/Field.tsx | 6 ++- src/components/Select/Select.tsx | 67 +++++++++++++++++++++++--------- 2 files changed, 53 insertions(+), 20 deletions(-) diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx index 89bd9eba4..f91dfd7f3 100644 --- a/src/components/Field/Field.tsx +++ b/src/components/Field/Field.tsx @@ -1,3 +1,4 @@ +import { clsx } from 'clsx' import { ElementType, ReactNode } from 'react' import { Box, PolymorphicComponent, PolymorphicProps } from '~/components/Box' @@ -19,7 +20,7 @@ export interface FieldProps { // TODO: handle isRequired in label? export const Field: PolymorphicComponent = < - T extends ElementType + T extends ElementType, >( props: PolymorphicProps ) => { @@ -29,6 +30,7 @@ export const Field: PolymorphicComponent = < description, labelLocation = 'top', children, + className, ...rest } = props @@ -60,7 +62,7 @@ export const Field: PolymorphicComponent = < return ( diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 6a18a1ef3..14b9ad6d9 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -1,18 +1,37 @@ import * as SelectPrimitive from '@radix-ui/react-select' -import { clsx } from 'clsx' +import { cva, VariantProps } from 'class-variance-authority' import { forwardRef, ReactNode, Ref } from 'react' -import { Box } from '~/components/Box' import { Field, FieldProps } from '~/components/Field' import { ChevronDownIcon } from '~/icons' +import { cn } from '~/utils' -import { - contentStyle, - optionStyle, - triggerStyle, - TriggerVariants, - triggerVariants, -} from './styles.css' +import { textVariants } from '../Text' + +const triggerVariants = cva( + [ + textVariants({ variant: 'normal' }), + 'inline-flex items-center justify-between gap-1 p-4 h-[52px] bg-transparent', + 'text-base font-medium text-text-100 select-none cursor-pointer border-none', + 'shadow-[0_0_0_1px_theme(colors.border.normal)_inset]', + 'focus:outline-none focus-within:outline-none focus-within:opacity-100', + 'focus-within:ring-2 focus-within:ring-offset-0 ring-inset outline-none', + '[&:has(:disabled)]:cursor-default [&:has(:disabled)]:opacity-50', + '[&:has(:disabled):hover]:cursor-default [&:has(:disabled):hover]:opacity-50', + ], + { + variants: { + borderRadius: { + xs: 'rounded', + sm: 'rounded-lg', + md: 'rounded-xl', + }, + }, + defaultVariants: { + borderRadius: 'md', + }, + } +) type SelectOption = { className?: string @@ -22,13 +41,14 @@ type SelectOption = { } export type SelectProps = FieldProps & - TriggerVariants & + VariantProps & SelectPrimitive.SelectProps & { disabled?: boolean id?: string name: string placeholder?: string options: SelectOption[] + className?: string } const SelectItem = forwardRef( @@ -38,7 +58,13 @@ const SelectItem = forwardRef( ) => { return ( @@ -60,32 +86,37 @@ export const Select = forwardRef( name, options, placeholder, + className, ...rest } = props return ( - + - + - + - + {options.map(({ value, label, ...rest }) => (