Refactor the Dropdown component to replace the footer prop with an info prop displayed directly on the button, and adjust button styling for better spacing

Author: robertpiosik

packages/ui/src/components/editor/panel/Dropdown/Dropdown.module.scss

@@ -5,7 +5,7 @@
 .button {
   display: flex;
   align-items: center;
-  gap: var(--padding-2px);
+  gap: var(--padding-4px);
   padding: 0 var(--padding-5px) 0 var(--padding-7px);
   height: 24px;
   border: 1px solid var(--vscode-dropdown-border);
@@ -34,6 +34,11 @@
     font-size: var(--font-size-13px);
   }
 
+  &__info {
+    font-size: var(--font-size-11px);
+    color: var(--vscode-descriptionForeground);
+  }
+
   &__icon {
     font-size: var(--font-size-14px) !important;
     margin-left: var(--padding-2px);
@@ -87,11 +92,4 @@
       color: var(--vscode-menu-selectionForeground);
     }
   }
-
-  &__footer {
-    border-top: 1px dashed var(--vscode-focusBorder);
-    padding: var(--padding-4px) var(--padding-8px);
-    color: var(--vscode-descriptionForeground);
-    font-size: var(--font-size-12px);
-  }
 }

packages/ui/src/components/editor/panel/Dropdown/Dropdown.stories.tsx

@@ -23,7 +23,7 @@ export const Default = () => {
   )
 }
 
-export const WithFooter = () => {
+export const WithInfo = () => {
   const options = [
     { value: 'option1', label: 'Option 1' },
     { value: 'option2', label: 'Option 2' }
@@ -36,7 +36,7 @@ export const WithFooter = () => {
         options={options}
         selected_value={selected}
         on_change={set_selected}
-        footer="This is a footer."
+        info="shift+tab"
       />
     </div>
   )

packages/ui/src/components/editor/panel/Dropdown/Dropdown.tsx

@@ -13,7 +13,7 @@ export namespace Dropdown {
     selected_value: T
     on_change: (value: T) => void
     max_width?: number
-    footer?: React.ReactNode
+    info?: string
   }
 }
 
@@ -73,6 +73,9 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
         <span className={styles.button__label}>
           {selected_option ? selected_option.label : 'Select an option'}
         </span>
+        {props.info && (
+          <span className={styles.button__info}>{props.info}</span>
+        )}
         {is_open ? (
           <span
             className={cn('codicon', 'codicon-chevron-up', styles.button__icon)}
@@ -102,9 +105,6 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
               {option.label}
             </div>
           ))}
-          {props.footer && (
-            <div className={styles.menu__footer}>{props.footer}</div>
-          )}
         </div>
       )}
     </div>

packages/vscode/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -259,14 +259,6 @@ export const MainView: React.FC<Props> = (props) => {
     configurations: props.configurations
   })
 
-  const dropdown_footer = (
-    <>
-      Cycle down: shift+tab
-      <br />
-      Cycle up: alt+shift+tab
-    </>
-  )
-
   const scroll_to_top_key = `${props.scroll_reset_key}-${
     props.home_view_type
   }-${
@@ -304,7 +296,7 @@ export const MainView: React.FC<Props> = (props) => {
                 )}
                 selected_value={props.web_mode}
                 on_change={props.on_web_mode_change}
-                footer={dropdown_footer}
+                info="shift+tab"
                 max_width={dropdown_max_width}
               />
             )}
@@ -315,7 +307,7 @@ export const MainView: React.FC<Props> = (props) => {
                 )}
                 selected_value={props.api_mode}
                 on_change={props.on_api_mode_change}
-                footer={dropdown_footer}
+                info="shift+tab"
                 max_width={dropdown_max_width}
               />
             )}