[KLAR-11652] Grey out disabled select button (#669)

Author: ievavizg

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "license": "MIT",
   "repository": {
     "type": "git",

src/components/select/Select.mdx

@@ -15,6 +15,12 @@ https://react-select.com/props
   <Story of={SelectStories.Basic} />
 </Canvas>
 
+## Basic Select
+
+<Canvas>
+  <Story of={SelectStories.Disabled} />
+</Canvas>
+
 ## Multiselect
 
 <Canvas>

src/components/select/Select.stories.tsx

@@ -40,6 +40,37 @@ export const Basic: StoryObj = {
   name: "basic",
 };
 
+export const Disabled: StoryObj = {
+  render: () => {
+    const options = [
+      {
+        value: "chocolate",
+        label: "Chocolate",
+      },
+      {
+        value: "strawberry",
+        label: "Strawberry",
+      },
+      {
+        value: "vanilla",
+        label: "Vanilla",
+      },
+    ];
+
+    return (
+      <div
+        style={{
+          height: "150px",
+        }}
+      >
+        <Select isDisabled options={options} />
+      </div>
+    );
+  },
+
+  name: "disabled",
+};
+
 export const Multiselect: StoryObj = {
   render: () => {
     const options = [

src/components/select/Select.tsx

@@ -22,6 +22,9 @@ const SelectContainer = styled.div`
           border: 1px solid ${theme.color.border.focus};
           outline: none;
         }
+        &--is-disabled {
+          background: ${theme.color.interactive.disabled};
+        }
       }
     }
     &__value-container {