feat: change padding and wrap select in label

kadena-community · Aug 23, 2023 · 5ef085b · 5ef085b
1 parent d573134
commit 5ef085b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/packages/libs/react-ui/src/components/Select/Select.css.ts b/packages/libs/react-ui/src/components/Select/Select.css.ts
@@ -5,7 +5,6 @@ import { style } from '@vanilla-extract/css';
 
 export const containerClass = style([
   sprinkles({
-    padding: '$2',
     borderRadius: '$sm',
   }),
   {
@@ -55,17 +54,18 @@ export const iconClass = style([
   sprinkles({
     marginRight: '$2',
     marginLeft: '$2',
-    display: 'block',
+    display: 'flex',
+    alignItems: 'center',
   }),
 ]);
 
 export const selectClass = style([
   sprinkles({
+    padding: '$2',
     border: 'none',
     fontSize: '$base',
   }),
   {
-    padding: '0',
     backgroundColor: 'inherit',
     color: 'inherit',
     flex: '1',

diff --git a/packages/libs/react-ui/src/components/Select/Select.tsx b/packages/libs/react-ui/src/components/Select/Select.tsx
@@ -51,22 +51,24 @@ export const Select: FC<ISelectProps> = forwardRef<
       )}
       data-testid="kda-select"
     >
-      <div className={selectContainerClass}>
-        {Icon && (
-          <span className={iconClass}>
-            <Icon size="md" />
-          </span>
-        )}
-        <select
-          aria-label={ariaLabel}
-          ref={ref}
-          className={selectClass}
-          disabled={Boolean(disabled)}
-          {...rest}
-        >
-          {children}
-        </select>
-      </div>
+      <label>
+        <div className={selectContainerClass}>
+          {Icon && (
+            <span className={iconClass}>
+              <Icon size="md" />
+            </span>
+          )}
+          <select
+            aria-label={ariaLabel}
+            ref={ref}
+            className={selectClass}
+            disabled={Boolean(disabled)}
+            {...rest}
+          >
+            {children}
+          </select>
+        </div>
+      </label>
     </div>
   );
 });