chore(@kadena/react-ui): Update select spacing and added "startIcon" …

…to combobox

.changeset/serious-rocks-reply.md

@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': patch
+---
+
+Update Select and Combobox styles

packages/libs/react-ui/src/components/Form/Combobox/Combobox.stories.tsx

@@ -141,6 +141,28 @@ export const Default: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    isPositive: false,
+    description: 'Some description',
+    label: 'Select something',
+    placeholder: 'Select an option',
+  },
+  render: (args) => {
+    return (
+      <Combobox {...args} startIcon={<Account />}>
+        <ComboboxItem key="option1">Option 1</ComboboxItem>
+        <ComboboxItem key="option2">Option 2</ComboboxItem>
+        <ComboboxItem key="option3">Option 3</ComboboxItem>
+        <ComboboxItem key="option4">Option 4</ComboboxItem>
+      </Combobox>
+    );
+  },
+};
+
 export const ComplexItems = () => (
   <Combobox label="Select an option">
     <ComboboxItem key="option1" textValue="Option 1">

packages/libs/react-ui/src/components/Form/Combobox/Combobox.tsx

@@ -1,11 +1,12 @@
 import { mergeProps, useObjectRef } from '@react-aria/utils';
 import classNames from 'classnames';
-import type { ForwardedRef } from 'react';
+import type { ForwardedRef, ReactNode } from 'react';
 import React, { forwardRef, useRef } from 'react';
 import type { AriaComboBoxProps } from 'react-aria';
 import { useComboBox, useFilter, useHover } from 'react-aria';
 import { useComboBoxState } from 'react-stately';
 
+import { atoms } from '../../../styles';
 import { ListBox } from '../../ListBox';
 import { Popover } from '../../Popover';
 import { formField } from '../Form.css';
@@ -17,6 +18,7 @@ import { ComboboxButton } from './ComboboxButton';
 export interface IComboboxProps<T extends object = any>
   extends AriaComboBoxProps<T> {
   isPositive?: boolean;
+  startIcon?: ReactNode;
   className?: string;
   tag?: string;
   info?: string;
@@ -98,6 +100,11 @@ function ComboBoxBase<T extends object>(
         ref={triggerRef}
         className={comboBoxControlClass}
       >
+        {props.startIcon && (
+          <span className={atoms({ marginInlineEnd: 'sm' })}>
+            {props.startIcon}
+          </span>
+        )}
         <input {...inputProps} ref={inputRef} className={comboBoxInputClass} />
         <ComboboxButton
           {...buttonProps}

packages/libs/react-ui/src/components/Form/Select/Select.stories.tsx

@@ -141,6 +141,28 @@ export const Default: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    isPositive: false,
+    description: 'Some description',
+    label: 'Select something',
+    placeholder: 'Select an option',
+  },
+  render: (args) => {
+    return (
+      <Select {...args} startIcon={<Account />}>
+        <SelectItem key="option1">Option 1</SelectItem>
+        <SelectItem key="option2">Option 2</SelectItem>
+        <SelectItem key="option3">Option 3</SelectItem>
+        <SelectItem key="option4">Option 4</SelectItem>
+      </Select>
+    );
+  },
+};
+
 export const ComplexItems = () => (
   <Select label="Select an option">
     <SelectItem key="option1" textValue="Option 1">

packages/libs/react-ui/src/components/Form/Select/SelectButton.tsx

@@ -5,7 +5,7 @@ import React, { forwardRef } from 'react';
 import type { AriaButtonProps } from 'react-aria';
 import { useButton, useHover } from 'react-aria';
 import type { SelectState } from 'react-stately';
-import { rotate180Transition } from '../../../styles';
+import { atoms, rotate180Transition } from '../../../styles';
 import { ChevronDown } from '../../Icon/System/SystemIcon';
 import { selectButtonClass } from './Select.css';
 
@@ -41,9 +41,13 @@ function SelectButtonBase<T extends object>(
       className={classNames(selectButtonClass, props.className)}
       ref={ref}
     >
-      {props.startIcon && <span>{props.startIcon}</span>}
+      {props.startIcon && (
+        <span className={atoms({ marginInlineEnd: 'sm' })}>
+          {props.startIcon}
+        </span>
+      )}
       {props.children}
-      <span>
+      <span className={atoms({ marginInlineStart: 'sm' })}>
         <ChevronDown
           data-open={props.state.isOpen}
           className={rotate180Transition}