feat: fix filter chip select css (#370)

* feat: fix filter chip select css

* fix: remove redundant fn call

Author: rohanchkrabrty

packages/raystack/v1/components/filter-chip/filter-chip.module.css

@@ -24,40 +24,20 @@
   /* padding-right: var(--rs-space-1); */
 }
 
-.operation {
-  font-family: var(--rs-font-body);
-  font-weight: var(--rs-font-weight-regular);
-  font-size: var(--rs-font-size-small);
-  line-height: var(--rs-line-height-small);
-  letter-spacing: var(--rs-letter-spacing-small);
-  background: transparent;
-  height: calc(100% - 2px);
-  display: flex;
-  align-items: center;
-  margin-left: var(--rs-space-2);
-}
-
-.operation:hover {
-  background: var(--rs-color-background-base-primary-hover);
-}
-
 .operationText {
   color: var(--rs-color-foreground-base-secondary);
   font-family: var(--rs-font-body);
   font-weight: var(--rs-font-weight-regular);
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
-  padding: var(--rs-space-1) var(--rs-space-3);
-  height: calc(100% - 2px);
   display: flex;
   align-items: center;
 }
 
 .operationText:hover {
   color: var(--rs-color-foreground-base-primary);
   background: var(--rs-color-background-base-primary-hover);
-  height: calc(100% - 2px);
 }
 
 /* Target any input fields within the chip */
@@ -140,16 +120,23 @@
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
-  padding: var(--rs-space-1) var(--rs-space-2);
-  height: calc(100% - 2px);
   display: flex;
   align-items: center;
+  background: transparent;
+  height: 100%;
+  min-height: auto;
+  padding: var(--rs-space-2) var(--rs-space-3);
+  border-radius: 0;
+}
+.selectColumn {
+  border-top-right-radius: var(--rs-radius-2);
+  border-bottom-right-radius: var(--rs-radius-2);
 }
 
-.selectValue:hover {
+.selectValue:hover,
+.selectValue:focus-visible {
   color: var(--rs-color-foreground-base-primary);
   background: var(--rs-color-background-base-primary-hover);
-  height: calc(100% - 2px);
 }
 
 .leadingIcon {

packages/raystack/v1/components/filter-chip/filter-chip.tsx

@@ -15,7 +15,7 @@ import {
   FilterType,
   FilterTypes,
 } from "~/v1/types/filters";
-import { cva, VariantProps } from "class-variance-authority";
+import { cva, cx, VariantProps } from "class-variance-authority";
 
 const chip = cva(styles.chip, {
   variants: {
@@ -72,7 +72,7 @@ const Operation = ({
       aria-labelledby={`${label}-label`}>
       <Select.Trigger
         variant="text"
-        className={styles.operation}
+        className={styles.selectValue}
         aria-label={`${label} filter operation`}>
         <Select.Value
           placeholder="Select operation"
@@ -131,7 +131,9 @@ export const FilterChip = ({
       case FilterType.select:
         return (
           <Select value={filterValue.toString()} onValueChange={setFilterValue}>
-            <Select.Trigger variant="text" className={styles.selectValue}>
+            <Select.Trigger
+              variant="text"
+              className={cx(styles.selectValue, styles.selectColumn)}>
               <Select.Value placeholder="Select value" />
             </Select.Trigger>
             <Select.Content data-variant="filter">