V2 select fixes (#4123)

apps/storybook/stories/Select.stories.tsx

@@ -7,4 +7,15 @@ export default {
   component: Select,
 } as ComponentMeta<typeof Select>;
 
-export const Single = () => <Select options={[{ value: "text" }]} />;
+const testOptions = [
+  {
+    label: "Select",
+    value: 0,
+  },
+  ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
+    label: minutes + " " + "minutes",
+    value: minutes,
+  })),
+];
+
+export const Single = () => <Select options={testOptions} />;

apps/web/styles/globals.css

@@ -123,6 +123,9 @@ button[role="switch"][data-state="checked"] span {
 }
 
 /* DateRangePicker */
+/* 
+  TODO:: Remove on V2 launch
+ */
 .react-daterange-picker > .react-daterange-picker__wrapper {
   /* border consistent with other inputs */
   @apply rounded-sm border-gray-300 px-2 py-1.5 text-sm lg:py-1;
@@ -133,6 +136,7 @@ button[role="switch"][data-state="checked"] span {
   @apply my-0.5 h-auto rounded-sm py-0.5;
 }
 
+
 @layer components {
   /* slider */
   .slider {
@@ -158,6 +162,12 @@ button[role="switch"][data-state="checked"] span {
   .slider .slider-thumb:focus {
     box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
   }
+
+  /* React Select V2 */
+  .cal-react-select-container .cal-react-select__control {
+    @apply bg-white min-h-[36px] h-[36px] text-sm leading-4 border-gray-300 hover:border-neutral-400 focus-within:ring-2 focus-within:ring-neutral-800 focus-within:border-0 placeholder:text-gray-400 placeholder:text-sm placeholder:font-normal;
+  }
+
 }
 
 /* !important to style multi-email input */

packages/ui/v2/core/form/Select.tsx

@@ -33,6 +33,11 @@ function Select<
 >({ className, ...props }: SelectProps<Option, IsMulti, Group>) {
   return (
     <ReactSelect
+      className={classNames(
+        "cal-react-select-container block h-[36px] w-full min-w-0 flex-1 rounded-md text-sm ",
+        className
+      )}
+      classNamePrefix="cal-react-select"
       theme={(theme) => ({
         ...theme,
         borderRadius: 6,
@@ -47,6 +52,7 @@ function Select<
       styles={{
         option: (provided, state) => ({
           ...provided,
+          backgroundColor: state.isSelected ? "var(--brand-color)" : state.isFocused ? "#F3F4F6" : "",
           color: state.isSelected ? "var(--brand-text-color)" : "black",
           ":active": {
             backgroundColor: state.isSelected ? "" : "var(--brand-color)",
@@ -59,7 +65,6 @@ function Select<
         IndicatorSeparator: () => null,
         Input: InputComponent,
       }}
-      className={className}
       {...props}
     />
   );