fix: Disable clear button instead of removing it (#1203)

* fix: Disable clear button instead of removing it

* fix: Duplicate import

* fix: Prettier fix

Author: mariush2

src/molecules/Select/SearchBar.tsx

@@ -196,13 +196,14 @@ export const SearchBar = <T extends SelectOptionRequired>({
             }
           />
         )}
-        {clearable && selectedValues.length > 0 && !loading && !disabled && (
+        {clearable && selectedValues.length > 0 && !loading && (
           <ClearButton
             id="clear"
             variant="ghost_icon"
             onClick={handleOnClear}
             data-testid="clearBtn"
             $rightPadding={mode === 'menu'}
+            disabled={disabled}
           >
             <Icon data={clear} size={18} />
           </ClearButton>

src/molecules/Select/Select.styles.ts

@@ -217,6 +217,11 @@ const ClearButton = styled(Button)<ClearButtonProps>`
     height: 24px;
     left: 0;
   }
+  &:disabled {
+    svg {
+      fill: ${colors.interactive.disabled__text.rgba};
+    }
+  }
 `;
 
 interface ComboBoxChipProps {

src/molecules/Select/Select.types.ts

@@ -87,14 +87,16 @@ type CommonListSelectProps<T extends SelectOptionRequired> = {
   groups?: undefined;
 };
 
-interface ListSelectWithAddItemProps<T extends SelectOptionRequired>
-  extends CommonListSelectProps<T> {
+interface ListSelectWithAddItemProps<
+  T extends SelectOptionRequired,
+> extends CommonListSelectProps<T> {
   onAddItem: (item: string) => void;
   itemSingularWord?: string;
 }
 
-interface ListSelectWithoutAddItemProps<T extends SelectOptionRequired>
-  extends CommonListSelectProps<T> {
+interface ListSelectWithoutAddItemProps<
+  T extends SelectOptionRequired,
+> extends CommonListSelectProps<T> {
   onAddItem?: undefined;
   itemSingularWord?: undefined;
 }

src/molecules/Select/SingleSelect/SingleSelect.stories.tsx

@@ -275,8 +275,8 @@ export const DisabledSingleSelect: Story = {
     await step('Verify that the select is disabled', () => {
       expect(canvas.getByRole('combobox')).toBeDisabled();
     });
-    await step('Verify that the clear button is not rendered', () => {
-      expect(canvas.queryByTestId('clearBtn')).not.toBeInTheDocument();
+    await step('Verify that the clear button is disabled', () => {
+      expect(canvas.getByTestId('clearBtn')).toBeDisabled();
     });
   },
 };