From 359006111e01a1d9b9547cd8391f2e9c158face1 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Wed, 4 Oct 2023 11:57:12 +0300
Subject: [PATCH 01/10] feat: InlineSelect ability

---
 components/Common/Select/index.module.css  | 12 ++++++++
 components/Common/Select/index.stories.tsx | 34 ++++++++++++++++++++++
 components/Common/Select/index.tsx         | 17 +++++++++--
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
index a113316b5fbe4..7f39efb302fa2 100644
--- a/components/Common/Select/index.module.css
+++ b/components/Common/Select/index.module.css
@@ -39,6 +39,12 @@
       dark:focus:border-neutral-600
       dark:focus:ring-neutral-600
       dark:data-[placeholder]:text-neutral-200;
+
+    & span {
+      @apply flex
+          items-center
+          gap-2;
+    }
   }
 
   .icon {
@@ -75,6 +81,12 @@
       data-[highlighted]:outline-none
       dark:text-neutral-200
       dark:data-[highlighted]:bg-green-600;
+
+    & span {
+      @apply flex
+          items-center
+          gap-2;
+    }
   }
 
   .label {
diff --git a/components/Common/Select/index.stories.tsx b/components/Common/Select/index.stories.tsx
index 2d7a0903029dd..589bf9ba5a31e 100644
--- a/components/Common/Select/index.stories.tsx
+++ b/components/Common/Select/index.stories.tsx
@@ -62,4 +62,38 @@ export const DropdownLabel: Story = {
   },
 };
 
+export const InlineSelect: Story = {
+  args: {
+    values: [
+      {
+        value: 'ubuntu',
+        label: 'Ubuntu',
+        iconImageUrl: '/static/images/logos/platform-linux.svg',
+      },
+      {
+        value: 'apple',
+        label: 'Apple',
+        iconImageUrl: '/static/images/logos/platform-apple.svg',
+      },
+      {
+        value: 'microsoft',
+        label: 'Microsoft',
+        iconImageUrl: '/static/images/logos/platform-microsoft.svg',
+      },
+      {
+        value: 'homebrew',
+        label: 'Homebrew',
+        iconImageUrl: '/static/images/logos/platform-homebrew.svg',
+      },
+      {
+        value: 'placeholder',
+        label: 'Placeholder',
+        iconImageUrl: '/static/images/logos/platform-placeholder.svg',
+      },
+    ],
+    dropdownLabel: 'Platform',
+    placeholder: 'Select a platform',
+  },
+};
+
 export default { component: Select } as Meta;
diff --git a/components/Common/Select/index.tsx b/components/Common/Select/index.tsx
index cd48710e2b818..5eb01a24b2027 100644
--- a/components/Common/Select/index.tsx
+++ b/components/Common/Select/index.tsx
@@ -1,12 +1,13 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as Primitive from '@radix-ui/react-select';
+import Image from 'next/image';
 import { useId } from 'react';
 import type { FC } from 'react';
 
 import styles from './index.module.css';
 
 type SelectProps = {
-  values: ({ label: string; value: string } | string)[];
+  values: ({ label: string; value: string; iconImageUrl?: string } | string)[];
   defaultValue?: string;
   placeholder?: string;
   dropdownLabel?: string;
@@ -34,7 +35,7 @@ const Select: FC<SelectProps> = ({
       <Primitive.Root defaultValue={defaultValue} onValueChange={onChange}>
         <Primitive.Trigger
           className={styles.trigger}
-          aria-label={label}
+          aria-label={label || dropdownLabel}
           id={id}
         >
           <Primitive.Value placeholder={placeholder} />
@@ -59,7 +60,17 @@ const Select: FC<SelectProps> = ({
                       value={value}
                       className={`${styles.item} ${styles.text}`}
                     >
-                      <Primitive.ItemText>{label}</Primitive.ItemText>
+                      <Primitive.ItemText>
+                        {typeof item !== 'string' && item?.iconImageUrl && (
+                          <Image
+                            src={item.iconImageUrl}
+                            alt={label}
+                            width={16}
+                            height={16}
+                          />
+                        )}
+                        {label}
+                      </Primitive.ItemText>
                     </Primitive.Item>
                   );
                 })}

From 482c905bdd365e9a5a137e6209ecafa8a2172a0d Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Wed, 4 Oct 2023 12:13:21 +0300
Subject: [PATCH 02/10] refactor: Unnecessary optional chaining removed

---
 components/Common/Select/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Common/Select/index.tsx b/components/Common/Select/index.tsx
index 5eb01a24b2027..feda941b8a3b3 100644
--- a/components/Common/Select/index.tsx
+++ b/components/Common/Select/index.tsx
@@ -61,7 +61,7 @@ const Select: FC<SelectProps> = ({
                       className={`${styles.item} ${styles.text}`}
                     >
                       <Primitive.ItemText>
-                        {typeof item !== 'string' && item?.iconImageUrl && (
+                        {typeof item !== 'string' && item.iconImageUrl && (
                           <Image
                             src={item.iconImageUrl}
                             alt={label}

From 7ff196ea436d2b19a7267a963ffe49d51b26d91c Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Wed, 4 Oct 2023 12:22:37 +0300
Subject: [PATCH 03/10] chore: css indentation

---
 components/Common/Select/index.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
index 7f39efb302fa2..dea98ede6b142 100644
--- a/components/Common/Select/index.module.css
+++ b/components/Common/Select/index.module.css
@@ -42,8 +42,8 @@
 
     & span {
       @apply flex
-          items-center
-          gap-2;
+        items-center
+        gap-2;
     }
   }
 
@@ -84,8 +84,8 @@
 
     & span {
       @apply flex
-          items-center
-          gap-2;
+        items-center
+        gap-2;
     }
   }
 

From e52f9e48342fbcf29d60fda539ed8667422c755c Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Wed, 4 Oct 2023 19:01:15 +0300
Subject: [PATCH 04/10] refactor: Inline Select style updates and improvements

---
 components/Common/Select/index.module.css  | 48 ++++++++++---
 components/Common/Select/index.stories.tsx | 25 +++----
 components/Common/Select/index.tsx         | 83 ++++++++++++++--------
 3 files changed, 101 insertions(+), 55 deletions(-)

diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
index dea98ede6b142..4821b534ee6f9 100644
--- a/components/Common/Select/index.module.css
+++ b/components/Common/Select/index.module.css
@@ -39,12 +39,12 @@
       dark:focus:border-neutral-600
       dark:focus:ring-neutral-600
       dark:data-[placeholder]:text-neutral-200;
+  }
 
-    & span {
-      @apply flex
-        items-center
-        gap-2;
-    }
+  .trigger span {
+    @apply flex
+      items-center
+      gap-2;
   }
 
   .icon {
@@ -81,12 +81,12 @@
       data-[highlighted]:outline-none
       dark:text-neutral-200
       dark:data-[highlighted]:bg-green-600;
+  }
 
-    & span {
-      @apply flex
-        items-center
-        gap-2;
-    }
+  .text span {
+    @apply flex
+      items-center
+      gap-2;
   }
 
   .label {
@@ -94,3 +94,31 @@
       dark:text-neutral-400;
   }
 }
+
+.inline {
+  .trigger {
+    @apply min-w-fit
+      px-2.5
+      py-2
+      text-sm
+      font-medium;
+  }
+
+  .icon {
+    @apply h-4
+      w-4;
+  }
+
+  .text {
+    @apply text-neutral-900
+      data-[highlighted]:bg-neutral-100
+      data-[highlighted]:text-neutral-900
+      dark:text-white
+      dark:data-[highlighted]:bg-neutral-900;
+  }
+
+  &.dropdown {
+    @apply mt-1
+      w-[calc(100%+1.5rem)];
+  }
+}
diff --git a/components/Common/Select/index.stories.tsx b/components/Common/Select/index.stories.tsx
index 589bf9ba5a31e..fee14bf007f53 100644
--- a/components/Common/Select/index.stories.tsx
+++ b/components/Common/Select/index.stories.tsx
@@ -66,33 +66,24 @@ export const InlineSelect: Story = {
   args: {
     values: [
       {
-        value: 'ubuntu',
-        label: 'Ubuntu',
+        value: 'linux',
+        label: 'Linux',
         iconImageUrl: '/static/images/logos/platform-linux.svg',
       },
       {
-        value: 'apple',
-        label: 'Apple',
+        value: 'macos',
+        label: 'MacOS',
         iconImageUrl: '/static/images/logos/platform-apple.svg',
       },
       {
-        value: 'microsoft',
-        label: 'Microsoft',
+        value: 'windows',
+        label: 'Windows',
         iconImageUrl: '/static/images/logos/platform-microsoft.svg',
       },
-      {
-        value: 'homebrew',
-        label: 'Homebrew',
-        iconImageUrl: '/static/images/logos/platform-homebrew.svg',
-      },
-      {
-        value: 'placeholder',
-        label: 'Placeholder',
-        iconImageUrl: '/static/images/logos/platform-placeholder.svg',
-      },
     ],
     dropdownLabel: 'Platform',
-    placeholder: 'Select a platform',
+    defaultValue: 'macos',
+    inline: true,
   },
 };
 
diff --git a/components/Common/Select/index.tsx b/components/Common/Select/index.tsx
index feda941b8a3b3..3147feb37ec96 100644
--- a/components/Common/Select/index.tsx
+++ b/components/Common/Select/index.tsx
@@ -1,17 +1,25 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as Primitive from '@radix-ui/react-select';
+import classNames from 'classnames';
 import Image from 'next/image';
-import { useId } from 'react';
+import { useId, useMemo } from 'react';
 import type { FC } from 'react';
 
 import styles from './index.module.css';
 
+type SelectValue = {
+  label: string;
+  value: string;
+  iconImageUrl?: string;
+};
+
 type SelectProps = {
-  values: ({ label: string; value: string; iconImageUrl?: string } | string)[];
+  values: SelectValue[] | string[];
   defaultValue?: string;
   placeholder?: string;
   dropdownLabel?: string;
   label?: string;
+  inline?: boolean;
   onChange?: (value: string) => void;
 };
 
@@ -21,12 +29,33 @@ const Select: FC<SelectProps> = ({
   placeholder,
   label,
   dropdownLabel,
+  inline,
   onChange,
 }) => {
   const id = useId();
+  const mappedValues: SelectValue[] = useMemo(() => {
+    if (!values.length) {
+      return [];
+    }
+
+    const [firstItem, ...items] = values;
+
+    if (typeof firstItem === 'string') {
+      return [firstItem, ...(items as string[])].map(value => ({
+        value,
+        label: value,
+      }));
+    }
+
+    if (typeof firstItem === 'object') {
+      return [firstItem, ...(items as SelectValue[])];
+    }
+
+    return [];
+  }, [values]);
 
   return (
-    <div className={styles.select}>
+    <div className={classNames(styles.select, { [styles.inline]: inline })}>
       {label && (
         <label className={styles.label} htmlFor={id}>
           {label}
@@ -42,7 +71,10 @@ const Select: FC<SelectProps> = ({
           <ChevronDownIcon className={styles.icon} />
         </Primitive.Trigger>
         <Primitive.Portal>
-          <Primitive.Content className={styles.dropdown}>
+          <Primitive.Content
+            position={inline ? 'popper' : 'item-aligned'}
+            className={classNames(styles.dropdown, { [styles.inline]: inline })}
+          >
             <Primitive.Viewport>
               <Primitive.Group>
                 {dropdownLabel && (
@@ -50,30 +82,25 @@ const Select: FC<SelectProps> = ({
                     {dropdownLabel}
                   </Primitive.Label>
                 )}
-                {values.map(item => {
-                  const value = typeof item === 'string' ? item : item.value;
-                  const label = typeof item === 'string' ? item : item.label;
-
-                  return (
-                    <Primitive.Item
-                      key={value}
-                      value={value}
-                      className={`${styles.item} ${styles.text}`}
-                    >
-                      <Primitive.ItemText>
-                        {typeof item !== 'string' && item.iconImageUrl && (
-                          <Image
-                            src={item.iconImageUrl}
-                            alt={label}
-                            width={16}
-                            height={16}
-                          />
-                        )}
-                        {label}
-                      </Primitive.ItemText>
-                    </Primitive.Item>
-                  );
-                })}
+                {mappedValues.map(({ value, label, iconImageUrl }) => (
+                  <Primitive.Item
+                    key={value}
+                    value={value}
+                    className={`${styles.item} ${styles.text}`}
+                  >
+                    <Primitive.ItemText>
+                      {iconImageUrl && (
+                        <Image
+                          src={iconImageUrl}
+                          alt={label}
+                          width={16}
+                          height={16}
+                        />
+                      )}
+                      {label}
+                    </Primitive.ItemText>
+                  </Primitive.Item>
+                ))}
               </Primitive.Group>
             </Primitive.Viewport>
           </Primitive.Content>

From 4c85763cdc6736b7fe7b0b6d176358947e5ebc56 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Wed, 4 Oct 2023 22:33:19 +0300
Subject: [PATCH 05/10] refactor: Removed unnecessary added types

---
 components/Common/Select/index.tsx | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/components/Common/Select/index.tsx b/components/Common/Select/index.tsx
index 3147feb37ec96..b5e37fb3f59b9 100644
--- a/components/Common/Select/index.tsx
+++ b/components/Common/Select/index.tsx
@@ -33,25 +33,15 @@ const Select: FC<SelectProps> = ({
   onChange,
 }) => {
   const id = useId();
-  const mappedValues: SelectValue[] = useMemo(() => {
-    if (!values.length) {
-      return [];
-    }
+  const mappedValues = useMemo(() => {
+    const [firstItem] = values;
 
-    const [firstItem, ...items] = values;
+    const items =
+      typeof firstItem === 'string'
+        ? values.map(value => ({ value, label: value }))
+        : values;
 
-    if (typeof firstItem === 'string') {
-      return [firstItem, ...(items as string[])].map(value => ({
-        value,
-        label: value,
-      }));
-    }
-
-    if (typeof firstItem === 'object') {
-      return [firstItem, ...(items as SelectValue[])];
-    }
-
-    return [];
+    return items as SelectValue[];
   }, [values]);
 
   return (

From c3f33ec7872b20aee47194147c3d51d598a45ff1 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Thu, 5 Oct 2023 17:22:36 +0300
Subject: [PATCH 06/10] refactor: Tailwind border radius values adjusted

---
 tailwind.config.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0807fd5231d11..775f3d8b02591 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -121,6 +121,10 @@ export default {
       spacing: {
         '4.5': '1.125rem',
       },
+      borderRadius: {
+        xs: '0.25rem',
+        md: '0.375rem',
+      },
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],

From a08869b8bac190133524f93a90bc3f6000a3695f Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Thu, 5 Oct 2023 17:24:50 +0300
Subject: [PATCH 07/10] refactor: Inline select dropdown radius

---
 components/Common/Select/index.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
index 4821b534ee6f9..c211d0f76a4f5 100644
--- a/components/Common/Select/index.module.css
+++ b/components/Common/Select/index.module.css
@@ -119,6 +119,7 @@
 
   &.dropdown {
     @apply mt-1
-      w-[calc(100%+1.5rem)];
+      w-[calc(100%+1.5rem)]
+      rounded-xs;
   }
 }

From 259c27d91d6112b96771cbbdc7d6c323afe3f637 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Thu, 5 Oct 2023 17:25:56 +0300
Subject: [PATCH 08/10] refactor: Unnecessary pixel usage

---
 styles/new/base.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/new/base.css b/styles/new/base.css
index ab647aba0f71f..6d653d3faafc0 100644
--- a/styles/new/base.css
+++ b/styles/new/base.css
@@ -6,9 +6,9 @@ a:visited {
 }
 
 code {
-  @apply rounded-[4px]
+  @apply rounded-xs
     bg-neutral-100
-    px-[4px]
+    px-1
     font-ibm-plex-mono
     text-base
     font-semibold

From bef63cfb213da73f2d5dff0148b9425f8d6ca86e Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Thu, 5 Oct 2023 18:06:55 +0300
Subject: [PATCH 09/10] refactor: Inline select trigger border-radius

---
 components/Common/Select/index.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
index c211d0f76a4f5..6601f2c0acb31 100644
--- a/components/Common/Select/index.module.css
+++ b/components/Common/Select/index.module.css
@@ -98,6 +98,7 @@
 .inline {
   .trigger {
     @apply min-w-fit
+      rounded-xs
       px-2.5
       py-2
       text-sm

From 1e66e11a6012d9bad8b139265705aa43e817996f Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Thu, 5 Oct 2023 18:11:52 +0300
Subject: [PATCH 10/10] refactor: Revert rounded-xs to rounded

---
 components/Common/Select/index.module.css | 3 +--
 styles/new/base.css                       | 2 +-
 tailwind.config.ts                        | 4 ----
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/components/Common/Select/index.module.css b/components/Common/Select/index.module.css
index 6601f2c0acb31..6239da78ee8b6 100644
--- a/components/Common/Select/index.module.css
+++ b/components/Common/Select/index.module.css
@@ -98,7 +98,6 @@
 .inline {
   .trigger {
     @apply min-w-fit
-      rounded-xs
       px-2.5
       py-2
       text-sm
@@ -121,6 +120,6 @@
   &.dropdown {
     @apply mt-1
       w-[calc(100%+1.5rem)]
-      rounded-xs;
+      rounded;
   }
 }
diff --git a/styles/new/base.css b/styles/new/base.css
index 9112cec2c4b1c..89c5546e99cd0 100644
--- a/styles/new/base.css
+++ b/styles/new/base.css
@@ -3,7 +3,7 @@
 }
 
 code {
-  @apply rounded-xs
+  @apply rounded
     bg-neutral-100
     px-1
     font-ibm-plex-mono
diff --git a/tailwind.config.ts b/tailwind.config.ts
index eb3bfcce8a45e..7250a5a33020f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -122,10 +122,6 @@ export default {
       spacing: {
         '4.5': '1.125rem',
       },
-      borderRadius: {
-        xs: '0.25rem',
-        md: '0.375rem',
-      },
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],