Replace Dropdown with PromptTypeDropdown component and update related styling and functionality

Author: robertpiosik

apps/editor/src/views/panel/frontend/Main/MainView/components/Header/Header.tsx

@@ -2,7 +2,7 @@ import { useRef, useCallback } from 'react'
 import { MODE, Mode } from '@/views/panel/types/main-view-mode'
 import { use_is_narrow_viewport, use_is_mac } from '@shared/hooks'
 import { ApiPromptType, WebPromptType } from '@shared/types/prompt-types'
-import { Dropdown as UiDropdown } from '@ui/components/editor/panel/Dropdown'
+import { PromptTypeDropdown } from '@ui/components/editor/panel/PromptTypeDropdown'
 import { IconButton as UiIconButton } from '@ui/components/editor/common/IconButton'
 import styles from './Header.module.scss'
 import {
@@ -74,7 +74,7 @@ export const Header: React.FC<Props> = (props) => {
           ref={dropdown_container_ref}
         >
           {props.mode == MODE.WEB && (
-            <UiDropdown
+            <PromptTypeDropdown
               options={Object.entries(web_prompt_type_labels).map(
                 ([value, label]) => ({
                   value: value as WebPromptType,
@@ -94,7 +94,7 @@ export const Header: React.FC<Props> = (props) => {
             />
           )}
           {props.mode == MODE.API && (
-            <UiDropdown
+            <PromptTypeDropdown
               options={Object.entries(api_prompt_type_labels).map(
                 ([value, label]) => ({
                   value: value as ApiPromptType,

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.module.scss

@@ -44,18 +44,15 @@
     overflow: hidden;
     flex: 1;
     min-width: 0;
+
     > span {
-      font-size: 14px !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-variant-numeric: tabular-nums;
     }
   }
 
-  &__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-variant-numeric: tabular-nums;
-  }
-
   &__right {
     display: flex;
     align-items: center;
@@ -65,9 +62,7 @@
   &:hover,
   &[data-selected='true'] {
     background-color: var(--vscode-list-activeSelectionBackground);
-    & > span {
-      color: var(--vscode-list-activeSelectionForeground);
-    }
+    color: var(--vscode-list-activeSelectionForeground);
   }
 }
 

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.tsx

@@ -50,7 +50,7 @@ export const DropdownMenu: React.FC<DropdownMenu.Props> = (props) => {
                     style={{ visibility: item.checked ? 'visible' : 'hidden' }}
                   />
                 )}
-                <span className={styles.item__label}>
+                <span>
                   {should_underline ? (
                     <>
                       <span className={styles.underlined}>

packages/ui/src/components/editor/panel/Dropdown/index.ts

@@ -1,8 +1,8 @@
-import { Dropdown } from './Dropdown'
+import { PromptTypeDropdown } from './PromptTypeDropdown'
 import { useState } from 'react'
 
 export default {
-  component: Dropdown
+  component: PromptTypeDropdown
 }
 
 export const Default = () => {
@@ -14,7 +14,7 @@ export const Default = () => {
 
   return (
     <div style={{ width: '200px' }}>
-      <Dropdown
+      <PromptTypeDropdown
         options={options}
         selected_value={selected}
         on_change={set_selected}
@@ -32,7 +32,7 @@ export const WithInfo = () => {
 
   return (
     <div style={{ width: '200px' }}>
-      <Dropdown
+      <PromptTypeDropdown
         options={options}
         selected_value={selected}
         on_change={set_selected}
@@ -51,7 +51,7 @@ export const LongList = () => {
 
   return (
     <div style={{ width: '200px' }}>
-      <Dropdown
+      <PromptTypeDropdown
         options={options}
         selected_value={selected}
         on_change={set_selected}

…itor/panel/Dropdown/Dropdown.module.scss …eDropdown/PromptTypeDropdown.module.scsspackages/ui/src/components/editor/panel/Dropdown/Dropdown.module.scss renamed to packages/ui/src/components/editor/panel/PromptTypeDropdown/PromptTypeDropdown.module.scss packages/ui/src/components/editor/panel/Dropdown/Dropdown.module.scss renamed to packages/ui/src/components/editor/panel/PromptTypeDropdown/PromptTypeDropdown.module.scss

@@ -1,9 +1,9 @@
 import { useState, useRef, useEffect } from 'react'
-import styles from './Dropdown.module.scss'
+import styles from './PromptTypeDropdown.module.scss'
 import cn from 'classnames'
 import { DropdownMenu } from '../../common/DropdownMenu'
 
-export namespace Dropdown {
+export namespace PromptTypeDropdown {
   export type Option<T extends string> = {
     value: T
     label: string
@@ -21,7 +21,9 @@ export namespace Dropdown {
   }
 }
 
-export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
+export const PromptTypeDropdown = <T extends string>(
+  props: PromptTypeDropdown.Props<T>
+) => {
   const [is_open, set_is_open] = useState(false)
   const [just_opened, set_just_opened] = useState(false)
   const container_ref = useRef<HTMLDivElement>(null)

…itor/panel/Dropdown/Dropdown.stories.tsx …eDropdown/PromptTypeDropdown.stories.tsxpackages/ui/src/components/editor/panel/Dropdown/Dropdown.stories.tsx renamed to packages/ui/src/components/editor/panel/PromptTypeDropdown/PromptTypeDropdown.stories.tsx packages/ui/src/components/editor/panel/Dropdown/Dropdown.stories.tsx renamed to packages/ui/src/components/editor/panel/PromptTypeDropdown/PromptTypeDropdown.stories.tsx

@@ -0,0 +1 @@
+export * from './PromptTypeDropdown'