Fix (FilterChip): migrate textfield to inputfield and CSS fixes (#490)

* chore: migrate textfield to inputfield

* fix: select radius and datepicker css fix in the filterchip

* fix: add check to apply border to select trigger

Author: paanSinghCoder

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

@@ -145,16 +145,26 @@ button.selectValue:hover {
   max-height: 12px;
 }
 
-.textFieldWrapper {
+.inputFieldWrapper {
   padding: 0 var(--rs-space-2);
   min-width: 60px;
 }
 
-.textField {
+.inputField {
   border-radius: var(--rs-radius-1);
+  min-height: 18px;
+  height: 18px;
 }
 
-.textFieldWrapper input {
+/* Match height of InputField when FilterChip variant is text */
+.chip[data-variant='text'] .inputField {
+  border: none;
+  box-shadow: none;
+  height: 24px;
+  min-height: 24px;
+}
+
+.inputFieldWrapper input {
   padding-left: var(--rs-space-2) !important;
   padding-right: var(--rs-space-2) !important;
 }
@@ -170,6 +180,16 @@ button.selectValue:hover {
   justify-content: space-between;
   align-items: center;
   width: 100%;
+  height: 18px;
+  min-height: 18px;
+}
+
+/* Remove border and match height of the DatePicker when FilterChip variant is text */
+.chip[data-variant='text'] .dateField {
+  border: none;
+  box-shadow: none;
+  height: 24px;
+  min-height: 24px;
 }
 
 .dateField input {

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

@@ -11,9 +11,9 @@ import {
 } from '~/types/filters';
 import { DatePicker } from '../calendar';
 import { Flex } from '../flex';
+import { InputField } from '../input-field';
 import { Select } from '../select';
 import { Text } from '../text';
-import { TextField } from '../textfield';
 import { Operation } from './filter-chip-operation';
 import styles from './filter-chip.module.css';
 
@@ -104,7 +104,10 @@ export const FilterChip = ({
                 }
               }}
               variant='text'
-              className={cx(styles.selectValue, styles.selectColumn)}
+              className={cx(
+                styles.selectValue,
+                !showOnRemove && styles.selectColumn
+              )}
             >
               <Select.Value placeholder='Select value'>
                 {isMultiSelectColumn && filterValue.length > 1
@@ -137,9 +140,10 @@ export const FilterChip = ({
         );
       default:
         return (
-          <div className={styles.textFieldWrapper}>
-            <TextField
-              className={styles.textField}
+          <div className={styles.inputFieldWrapper}>
+            <InputField
+              variant={variant === 'text' ? 'borderless' : 'default'}
+              className={styles.inputField}
               value={filterValue}
               onChange={e => handleFilterValueChange(e.target.value)}
             />
@@ -155,6 +159,7 @@ export const FilterChip = ({
       className={chip({ variant, className })}
       role='group'
       aria-label={`Filter by ${label}`}
+      data-variant={variant}
       {...props}
     >
       <Flex align='center' gap={2} className={styles['chip-label']}>