chore: adding fixes for select based on designer feedback (#290)

* chore: adding fixes for select based on designer feedback * chore: fix lint
nearform · Jan 11, 2024 · 9d01166 · 9d01166
1 parent b73d8d9
commit 9d01166
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
@@ -20,7 +20,6 @@ const triggerVariants = cva(
   [
     [
       'flex',
-      'h-10',
       'w-full',
       'border border-[2px]',
       'text-foreground',
@@ -43,6 +42,7 @@ const triggerVariants = cva(
         default: [
           'text-foreground',
           'border-border-subtle',
+          'bg-grey-100',
           'hover:border-border-hover',
           'hover:text-foreground',
           'focus-visible:shadow-blue',
@@ -65,10 +65,15 @@ const triggerVariants = cva(
           'focus-visible:shadow-green',
           'text-green-700'
         ]
+      },
+      size: {
+        sm: ['h-[37px]'],
+        lg: ['h-[42px]']
       }
     },
     defaultVariants: {
-      variant: 'default'
+      variant: 'default',
+      size: 'sm'
     }
   }
 )
@@ -80,14 +85,14 @@ export interface TriggerProps
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   TriggerProps
->(({ variant, className, children, ...props }, ref) => (
+>(({ variant, size, className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
-    className={cn(triggerVariants({ variant }), className)}
+    className={cn(triggerVariants({ variant, size }), className)}
     {...props}
   >
     {children}
-    <SelectPrimitive.Icon asChild className="ml-1">
+    <SelectPrimitive.Icon asChild className="ml-6">
       <AngleDownIcon className="h-2 w-2" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>

diff --git a/stories/Select/Docs.mdx b/stories/Select/Docs.mdx
@@ -12,6 +12,11 @@ Selects are elements that allow users to interact with and provide data to a sys
 
 <Canvas of={SelectStories.Default} />
 
+## Large
+
+<Canvas of={SelectStories.Large} />
+
+
 ## Error
 
 <Canvas of={SelectStories.Error} />

diff --git a/stories/Select/Select.example.tsx b/stories/Select/Select.example.tsx
@@ -15,7 +15,7 @@ interface DemoProps extends TriggerProps {
   example: string
 }
 
-export const SelectDemo = ({ variant, example }: DemoProps) => {
+export const SelectDemo = ({ variant, size, example }: DemoProps) => {
   if (example === 'small') {
     return (
       <Select>
@@ -34,7 +34,7 @@ export const SelectDemo = ({ variant, example }: DemoProps) => {
   } else if (example === 'large') {
     return (
       <Select>
-        <SelectTrigger variant={variant} className="w-[180px]">
+        <SelectTrigger variant={variant} size={size} className="w-[180px]">
           <SelectValue placeholder="Choose" />
           {/* Something going wrong with placement of select value when it overflows */}
         </SelectTrigger>

diff --git a/stories/Select/Select.stories.ts b/stories/Select/Select.stories.ts
@@ -20,9 +20,17 @@ type Story = StoryObj<typeof meta>
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   args: {
-    example: 'small'
+    example: 'small',
+    size: 'sm'
   }
 }
+export const Large: Story = {
+  args: {
+    example: 'large',
+    size: 'lg'
+  }
+}
+
 export const Success: Story = {
   args: {
     example: 'small',