@indico-data/design-system 2.12.1 → 2.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/forms/select/Select.mdx

@@ -0,0 +1,12 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Select from './Select.stories';
+
+<Meta title="Forms/Select" name="Select" />
+
+# Select
+
+The select component is a flexible dropdown component that allows users to choose from a list of options. It supports various configurations, such as searchable, clearable, and custom components. It is recommended to use this component with [React Hook Form](https://react-hook-form.com/) for better form state management and best practices. The `Select` component is built using `react-select`, so refer to its [documentation](https://react-select.com/props) for full details on available props.
+
+<Canvas of={Select.Default} />
+
+<Controls of={Select.Default} />

package/src/components/forms/select/Select.stories.tsx

@@ -83,6 +83,18 @@ const meta: Meta<SelectProps<SelectOption>> = {
       },
       defaultValue: { summary: '' },
     },
+    classNamePrefix: {
+      control: 'text',
+      description:
+        'The prefix to use for the CSS class names. Changing this will result in losing all default styles',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: 'select' },
+    },
     onChange: {
       control: false,
       description: 'Event handler for when the selected value changes',
@@ -115,4 +127,11 @@ export const Default: Story = {
     isDisabled: false,
     isLoading: false,
   },
+  decorators: [
+    (Story) => (
+      <div style={{ height: 175 }}>
+        <Story />
+      </div>
+    ),
+  ],
 };