Merge pull request #67 from KasperskyLab/fix/select-component-props

fix: remove unnecessary select styles
KasperskyLab · Jul 2, 2024 · c47f995 · c47f995
2 parents f7bf126 + 044cc22
commit c47f995
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/packages/kaspersky-components/src/select/Select.stories.tsx b/packages/kaspersky-components/src/select/Select.stories.tsx
@@ -9,7 +9,7 @@ import { sbHideControls } from '@helpers/storybookHelpers'
 import { withMeta } from '@helpers/hocs/MetaComponent/withMeta'
 import Docs from './SelectDocs'
 import { Toggle } from '@src/toggle'
-import { Label } from '@src/label'
+import { Field } from '@src/field'
 import { Link } from '@src/link'
 import { P, Text } from '@src/typography'
 import { Tag } from '@src/tag'
@@ -201,6 +201,25 @@ export const WithHeader: Story = {
   }
 }
 
+export const WithShowSearchAndAllowClear: Story = {
+  render: (args: SelectProps) => {
+    return (
+      <div style={{ width: '550px' }}>
+        <P>No mode</P>
+        <Field control={<Select {...args} />} />
+        <P>Tags mode</P>
+        <Field control={<Select {...args} mode="tags" />} />
+        <P>Multiple mode</P>
+        <Field control={<Select {...args} mode="multiple" />} />
+      </div>
+    )
+  },
+  args: {
+    allowClear: true,
+    showSearch: true
+  }
+}
+
 export const CustomDropdown: Story = {
   render: (args: SelectProps) => {
     const [checked, setChecked] = React.useState(false)
@@ -231,20 +250,16 @@ export const Tags: Story = {
     return (
       <div style={{ width: '550px' }}>
         <P>Tags mode</P>
-        <Label htmlFor={args.id}>
-          <Select
-            {...args}
-          />
-        </Label>
+        <Field control={<Select {...args} />} />
         <P>Tags mode with allowNonUniqueValues</P>
-        <Label htmlFor={args.id + '1'}>
+        <Field control={
           <Select
             id={args.id + '1'}
             {...args}
             allowNonUniqueValues={true}
             defaultValue={['MyTag', 'MyTag']}
           />
-        </Label>
+        } />
       </div>
     )
   },

diff --git a/packages/kaspersky-components/src/select/selectCss.ts b/packages/kaspersky-components/src/select/selectCss.ts
@@ -37,10 +37,6 @@ export const selectCss = css`
     }
   }
 
-  &.ant-select-show-search:not(.ant-select-multiple) .ant-select-clear {
-    display: none;
-  }
-
   &.ant-select-single {
     .ant-select-selector {
       padding: 6px 36px 6px 12px;