feat(select): select style

packages/design/components/Select/Select.stories.tsx

@@ -1,17 +1,17 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import Select from '.';
 
-const componentMeta: ComponentMeta<typeof Select> = {
+const componentMeta: Meta<typeof Select> = {
   title: 'Modern/Select',
   component: Select,
 };
 
 export default componentMeta;
 
-const Template: ComponentStory<typeof Select> = () => {
-  return (
+export const Template: StoryObj<typeof Select> = {
+  render: () => (
     <Select
       style={{
         width: 400,
@@ -23,7 +23,5 @@ const Template: ComponentStory<typeof Select> = () => {
       ]}
       defaultValue='age'
     />
-  );
+  ),
 };
-
-export const Default = Template.bind({});

packages/design/components/Select/__test__/Select.spec.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 
 import Select from '..';
@@ -16,4 +16,22 @@ describe('Select Component', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('Open dropdown & Select option', () => {
+    const onChange = vi.fn();
+    const element = render(
+      <Select
+        defaultValue='name'
+        options={[
+          { label: 'name', value: 'name' },
+          { label: 'age', value: 'age' },
+        ]}
+        onChange={onChange}
+      />,
+    );
+
+    fireEvent.click(element.getByText('name'));
+    fireEvent.click(element.getByText('age'));
+    expect(onChange).toBeCalledTimes(1);
+  });
 });

packages/design/components/Select/index.tsx

@@ -39,18 +39,24 @@ const Select = ({ options, style, defaultValue, className, onChange }: SelectPro
         <span>{optionsMap[active]?.label}</span>
         <ArrowDown className='bgm-select-arrow' />
       </div>
-      <select
-        defaultValue={defaultValue}
-        onChange={(e) => {
-          handleOptionClick(e.target.value);
-        }}
-      >
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
+      {open ? (
+        <ul className={cn('bgm-select__dropdown')} defaultValue={defaultValue}>
+          {options.map((option) => (
+            <li
+              className={cn('bgm-select__dropdown-item')}
+              key={option.value}
+              value={option.value}
+              onClick={() => {
+                handleOptionClick(option.value);
+              }}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <></>
+      )}
     </div>
   );
 };

packages/design/components/Select/style/index.less

@@ -18,7 +18,7 @@
     top: 100%;
     border: 2px solid @gray-10;
     box-sizing: border-box;
-    padding: 8px 12px;
+    padding: 10px 0;
     width: 100%;
     left: 0;
     border-radius: 19px;
@@ -27,6 +27,16 @@
     > div {
       padding: 9px 0;
     }
+
+    &-item {
+      height: 1em;
+      padding: 10px;
+      // padding: 0.5em 0;
+
+      &:hover {
+        background-color: @gray-10;
+      }
+    }
   }
 
   select {