feat(UI): update story and remove unnecessaryprops

Author: v-tarasevich

datahub-web-react/src/alchemy-components/components/Select/BasicSelect.tsx

@@ -66,7 +66,6 @@ export const BasicSelect = <OptionType extends SelectOption>({
     onSearch,
     filteringPredicate,
     selectLabelProps,
-    className,
     ...props
 }: SelectProps<OptionType>) => {
     const [searchQuery, setSearchQuery] = useState('');
@@ -164,7 +163,7 @@ export const BasicSelect = <OptionType extends SelectOption>({
     };
 
     return (
-        <Container size={size || 'md'} width={props.width} className={className}>
+        <Container size={size || 'md'} width={props.width}>
             {label && <SelectLabel onClick={handleSelectClick}>{label}</SelectLabel>}
             <Dropdown
                 open={isOpen}

datahub-web-react/src/alchemy-components/components/Select/Select.stories.tsx

@@ -59,6 +59,19 @@ const meta: Meta = {
                 defaultValue: { summary: selectDefaults.showSearch?.toString() },
             },
         },
+        onSearch: {
+            description: 'Called when text in the search bar changed',
+        },
+        filteringPredicate: {
+            description:
+                'A function to replace default filtering predicate. The default predicate supports only string labels.',
+            table: {
+                type: {
+                    summary: 'FilteringPredicate',
+                    detail: '(option: Option, query: string) => boolean',
+                },
+            },
+        },
         isDisabled: {
             description: 'Whether the Select component is disabled.',
             control: {

datahub-web-react/src/alchemy-components/components/Select/SimpleSelect.tsx

@@ -66,7 +66,6 @@ export const SimpleSelect = <OptionType extends SelectOption>({
     optionSwitchable,
     selectLabelProps,
     filteringPredicate,
-    className,
     ...props
 }: SelectProps<OptionType>) => {
     const [searchQuery, setSearchQuery] = useState('');
@@ -141,7 +140,6 @@ export const SimpleSelect = <OptionType extends SelectOption>({
             width={props.width || 255}
             $selectLabelVariant={selectLabelProps?.variant}
             isSelected={selectedValues.length > 0}
-            className={className}
         >
             {label && <SelectLabel onClick={handleSelectClick}>{label}</SelectLabel>}
             <Dropdown

datahub-web-react/src/alchemy-components/components/Select/types.ts

@@ -32,9 +32,7 @@ export interface SelectProps<Option extends SelectOption = SelectOption> {
     icon?: IconNames;
     showSearch?: boolean;
     onSearch?: (query: string) => void;
-    // searchFilter?: (query: string, options: Option[]) => Option[];
     filteringPredicate?: FilteringPredicate<Option>;
-    // onSearchQueryChanged?: (query: string) => void;
     isDisabled?: boolean;
     isReadOnly?: boolean;
     isRequired?: boolean;
@@ -49,7 +47,6 @@ export interface SelectProps<Option extends SelectOption = SelectOption> {
     optionListTestId?: string;
     optionSwitchable?: boolean;
     selectLabelProps?: SelectLabelProps;
-    className?: string;
 }
 
 export interface SelectStyleProps {