From 7e9c8e0c7b37af7f5804a85af4a9dad52cecfb4b Mon Sep 17 00:00:00 2001
From: Eileen Guo <eileen.m.guo@gmail.com>
Date: Wed, 24 Jan 2024 11:19:44 +0100
Subject: [PATCH 1/4] add some margin between icon and text in select

---
 .../Form/Combobox/Combobox.stories.tsx        | 22 +++++++++++++++++++
 .../src/components/Form/Combobox/Combobox.tsx |  9 +++++++-
 .../src/components/Form/Select/Select.css.ts  |  1 +
 .../components/Form/Select/Select.stories.tsx | 22 +++++++++++++++++++
 .../components/Form/Select/SelectButton.tsx   | 11 +++++++---
 5 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Form/Combobox/Combobox.stories.tsx b/packages/libs/react-ui/src/components/Form/Combobox/Combobox.stories.tsx
index 9e1be88396..aa4f551197 100644
--- a/packages/libs/react-ui/src/components/Form/Combobox/Combobox.stories.tsx
+++ b/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">
diff --git a/packages/libs/react-ui/src/components/Form/Combobox/Combobox.tsx b/packages/libs/react-ui/src/components/Form/Combobox/Combobox.tsx
index dfc9a8e4cf..a6bf64a614 100644
--- a/packages/libs/react-ui/src/components/Form/Combobox/Combobox.tsx
+++ b/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}
diff --git a/packages/libs/react-ui/src/components/Form/Select/Select.css.ts b/packages/libs/react-ui/src/components/Form/Select/Select.css.ts
index 6c86029e2d..a8ef74d4f1 100644
--- a/packages/libs/react-ui/src/components/Form/Select/Select.css.ts
+++ b/packages/libs/react-ui/src/components/Form/Select/Select.css.ts
@@ -13,6 +13,7 @@ export const selectButtonClass = style([
     outline: 'none',
     flex: 1,
     overflow: 'hidden',
+    position: 'relative',
   }),
   {
     paddingInlineStart: token('spacing.md'),
diff --git a/packages/libs/react-ui/src/components/Form/Select/Select.stories.tsx b/packages/libs/react-ui/src/components/Form/Select/Select.stories.tsx
index e771479187..9e0f5c311d 100644
--- a/packages/libs/react-ui/src/components/Form/Select/Select.stories.tsx
+++ b/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">
diff --git a/packages/libs/react-ui/src/components/Form/Select/SelectButton.tsx b/packages/libs/react-ui/src/components/Form/Select/SelectButton.tsx
index 54a9573d3c..064ecea21f 100644
--- a/packages/libs/react-ui/src/components/Form/Select/SelectButton.tsx
+++ b/packages/libs/react-ui/src/components/Form/Select/SelectButton.tsx
@@ -5,8 +5,9 @@ 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 { startAddon } from '../Form.css';
 import { selectButtonClass } from './Select.css';
 
 export interface ISelectButtonProps<T extends object> extends AriaButtonProps {
@@ -41,9 +42,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}

From bd357be453914190f7d333ab1d7ce238484d98ae Mon Sep 17 00:00:00 2001
From: Eileen Guo <eileen.m.guo@gmail.com>
Date: Wed, 24 Jan 2024 11:22:08 +0100
Subject: [PATCH 2/4] adding changeset

---
 .changeset/serious-rocks-reply.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/serious-rocks-reply.md

diff --git a/.changeset/serious-rocks-reply.md b/.changeset/serious-rocks-reply.md
new file mode 100644
index 0000000000..bf5f6da082
--- /dev/null
+++ b/.changeset/serious-rocks-reply.md
@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': patch
+---
+
+Update Select and Combobox styles

From 2bf502ee74da52d7b5f92de2151bf2a1cc6b7a8f Mon Sep 17 00:00:00 2001
From: Eileen Guo <eileen.m.guo@gmail.com>
Date: Wed, 24 Jan 2024 11:24:55 +0100
Subject: [PATCH 3/4] cleanup

---
 .../libs/react-ui/src/components/Form/Select/SelectButton.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/libs/react-ui/src/components/Form/Select/SelectButton.tsx b/packages/libs/react-ui/src/components/Form/Select/SelectButton.tsx
index 064ecea21f..0beabfd69f 100644
--- a/packages/libs/react-ui/src/components/Form/Select/SelectButton.tsx
+++ b/packages/libs/react-ui/src/components/Form/Select/SelectButton.tsx
@@ -7,7 +7,6 @@ import { useButton, useHover } from 'react-aria';
 import type { SelectState } from 'react-stately';
 import { atoms, rotate180Transition } from '../../../styles';
 import { ChevronDown } from '../../Icon/System/SystemIcon';
-import { startAddon } from '../Form.css';
 import { selectButtonClass } from './Select.css';
 
 export interface ISelectButtonProps<T extends object> extends AriaButtonProps {

From d974e5cf9c73aae2c5402b9f4df60cdc6d3f3b89 Mon Sep 17 00:00:00 2001
From: Eileen Guo <eileen.m.guo@gmail.com>
Date: Wed, 24 Jan 2024 11:33:45 +0100
Subject: [PATCH 4/4] cleanup

---
 packages/libs/react-ui/src/components/Form/Select/Select.css.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/libs/react-ui/src/components/Form/Select/Select.css.ts b/packages/libs/react-ui/src/components/Form/Select/Select.css.ts
index a8ef74d4f1..6c86029e2d 100644
--- a/packages/libs/react-ui/src/components/Form/Select/Select.css.ts
+++ b/packages/libs/react-ui/src/components/Form/Select/Select.css.ts
@@ -13,7 +13,6 @@ export const selectButtonClass = style([
     outline: 'none',
     flex: 1,
     overflow: 'hidden',
-    position: 'relative',
   }),
   {
     paddingInlineStart: token('spacing.md'),