Fix/hide-singleselect-clear-on-disabled (#1195)

* 🐛 Prevent ClearButton from rendering when SearchBar is disabled

* 🔖 Bump version to 10.8.2 in package.json

* ♻️ Update DisabledSingleSelect story with default value and onSelect handler

* ♻️ Update DisabledSingleSelect story to set default value and check for clear button

Author: benjamin-lyon

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "10.8.1",
+  "version": "10.8.2",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/molecules/Select/SearchBar.tsx

@@ -195,7 +195,7 @@ export const SearchBar = <T extends SelectOptionRequired>({
             }
           />
         )}
-        {clearable && selectedValues.length > 0 && !loading && (
+        {clearable && selectedValues.length > 0 && !loading && !disabled && (
           <ClearButton
             id="clear"
             variant="ghost_icon"

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

@@ -3,7 +3,7 @@ import { FC, useState } from 'react';
 import { Icon } from '@equinor/eds-core-react';
 import { boat, car, flight } from '@equinor/eds-icons';
 import { faker } from '@faker-js/faker';
-import { Meta, StoryFn } from '@storybook/react-vite';
+import { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
 
 import { colors, spacings } from 'src/atoms/style';
 import {
@@ -14,6 +14,7 @@ import {
 import { SingleSelect } from 'src/molecules/Select/SingleSelect/SingleSelect';
 
 import { actions } from 'storybook/actions';
+import { expect } from 'storybook/test';
 
 const meta: Meta<typeof SingleSelect> = {
   title: 'Molecules/Select/SingleSelect',
@@ -260,3 +261,22 @@ export const SingleSelectWithCustomValueComponent: StoryFn = (args) => {
     />
   );
 };
+
+type Story = StoryObj<typeof SingleSelect>;
+
+export const DisabledSingleSelect: Story = {
+  args: {
+    disabled: true,
+    items: FAKE_ITEMS,
+    value: FAKE_ITEMS[0],
+    onSelect: () => {},
+  },
+  play: async ({ canvas, step }) => {
+    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();
+    });
+  },
+};