fix(select): adjustments after review

src/primevue/inputText/inputText.ts

@@ -1,6 +1,7 @@
 import { tw } from "@/lib/tags";
 import { InputTextPassThroughOptions } from "primevue/inputtext";
 import "./inputText.css";
+
 // Base
 export const base = tw`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-800 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`;
 

src/primevue/select/select.stories.ts

@@ -33,7 +33,6 @@ export const Default: StoryObj<typeof meta> = {
       return { args, selectedOption, options };
     },
     template: html` <PrimevueSelect
-      id="with-top-label"
       v-bind="args"
       v-model="selectedOption"
       optionLabel="name"
@@ -59,16 +58,16 @@ export const WithLabel: StoryObj<typeof meta> = {
       ]);
       return { args, selectedOption, options };
     },
-    template: html` <label class="ris-label2-regular" for="with-top-label"
-        >Label</label
-      >
+    template: html`<div class="flex flex-col gap-2">
+      <label class="ris-label2-regular" for="with-top-label">Label</label>
       <PrimevueSelect
         id="with-top-label"
         v-bind="args"
         v-model="selectedOption"
         optionLabel="name"
         :options="options"
-      />`,
+      />
+    </div>`,
   }),
 };
 
@@ -127,7 +126,7 @@ export const Disabled: StoryObj<typeof meta> = {
   }),
 };
 
-export const InvalidWithHint: StoryObj<typeof meta> = {
+export const Invalid: StoryObj<typeof meta> = {
   args: {
     invalid: true,
   },
@@ -144,8 +143,8 @@ export const InvalidWithHint: StoryObj<typeof meta> = {
       ]);
       return { args, selectedOption, options };
     },
-    template: html`
-      <label class="ris-label2-regular" for="invalid">Dropdown</label>
+    template: html` <div class="flex flex-col gap-2">
+      <label class="ris-label2-regular" for="invalid"> Dropdown </label>
       <PrimevueSelect
         id="invalid"
         aria-describedby="invalid-hint"
@@ -154,7 +153,7 @@ export const InvalidWithHint: StoryObj<typeof meta> = {
         optionLabel="name"
         :options="options"
       />
-      <small id="invalid-hint"> <ErrorOutline /> Invalid date </small>
-    `,
+      <small id="invalid-hint"><ErrorOutline />Invalid date</small>
+    </div>`,
   }),
 };

src/primevue/select/select.ts

@@ -1,42 +1,69 @@
-import { SelectPassThroughOptions } from "primevue/select";
 import { tw } from "@/lib/tags.ts";
+import { SelectPassThroughOptions } from "primevue/select";
 import "./select.css";
 
-const outlineStyles = tw`border-blue-800 outline-4 -outline-offset-4 outline-blue-800`;
+const select: SelectPassThroughOptions = {
+  root: ({ props, state }) => {
+    // Base
+    const base = tw`ris-body2-regular inline-flex h-48 items-center justify-between border-2 py-4 pl-16 pr-12 outline-4 -outline-offset-4 [&+label]:ml-8`;
+
+    // States
+    const normal = tw`cursor-pointer border-blue-800 outline-blue-800`;
 
-const stateStyles = tw`hover:outline has-[span:focus]:outline has-[span[aria-expanded=true]]:outline`;
+    const focused = tw`outline`;
 
-const invalidStyles = tw`border-red-800 bg-red-200 outline-red-800`;
+    const hover = tw`hover:outline`;
 
-const base = tw`ris-body2-regular flex min-h-48 items-center justify-between border-2 px-16 py-4 placeholder:text-gray-600 [&+label]:ml-8`;
+    const disabled = tw`cursor-not-allowed border-blue-500 text-blue-500`;
+
+    const invalid = tw`border-red-800 bg-red-200 outline-red-800`;
+
+    // Integration for primevue/fluid
+    const fluid = tw`w-full`;
 
-const select: SelectPassThroughOptions = {
-  root: ({ props }) => {
-    console.log(props);
     return {
       class: {
         [base]: true,
-        "w-full": !!props.fluid,
-        [outlineStyles]: !props.disabled,
-        [stateStyles]: !props.disabled,
-        "border-blue-500 text-blue-500 outline-none cursor-not-allowed":
-          props.disabled,
-        [invalidStyles]: props.invalid,
+        [normal]: !props.disabled,
+        [focused]: state.focused && !props.disabled,
+        [hover]: !props.disabled,
+        [fluid]: !!props.fluid,
+        [disabled]: props.disabled,
+        [invalid]: props.invalid,
       },
+
       "aria-invalid": props.invalid ? "true" : null,
     };
   },
-  label: () => {
-    return {
-      class: tw`outline-none`,
-    };
+
+  dropdown: {
+    class: tw`pl-12`,
   },
+
   listContainer: {
     class: tw`overflow-auto shadow-md`,
   },
-  option: () => {
+
+  label: {
+    class: tw`outline-none`,
+  },
+
+  overlay: {
+    class: tw`bg-white`,
+  },
+
+  option: ({ context }) => {
+    // Base
+    const base = tw`ris-body2-regular relative h-full min-h-48 w-full cursor-pointer px-24 py-16 after:absolute after:-bottom-1 after:left-8 after:right-8 after:border-b after:border-gray-300 after:content-[''] last:after:border-b-0 hover:bg-gray-100`;
+
+    // States
+    const focused = tw`bg-gray-100`;
+
     return {
-      class: tw`ris-body2-regular relative h-full min-h-48 w-full bg-white px-24 py-16 after:absolute after:bottom-0 after:left-8 after:right-8 after:border-b after:border-gray-300 after:content-[''] last:after:border-b-0 hover:bg-gray-100 data-[p-focused=true]:bg-gray-100`,
+      class: {
+        [base]: true,
+        [focused]: context.focused,
+      },
     };
   },
 };