Refactor the Dropdown component to accept footer ReactNode instead of footer_text string

Author: robertpiosik

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

@@ -36,7 +36,7 @@ export const WithFooter = () => {
         options={options}
         selected_value={selected}
         on_change={set_selected}
-        footer_text="This is a footer."
+        footer="This is a footer."
       />
     </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_text?: string
+    footer?: React.ReactNode
   }
 }
 
@@ -102,8 +102,8 @@ export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
               {option.label}
             </div>
           ))}
-          {props.footer_text && (
-            <div className={styles.menu__footer}>{props.footer_text}</div>
+          {props.footer && (
+            <div className={styles.menu__footer}>{props.footer}</div>
           )}
         </div>
       )}

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

@@ -232,6 +232,14 @@ export const MainView: React.FC<Props> = (props) => {
     configurations: props.configurations
   })
 
+  const dropdown_footer = (
+    <>
+      Cycle down: shift+tab
+      <br />
+      Cycle up: alt+shift+tab
+    </>
+  )
+
   return (
     <div ref={container_ref} className={styles.container}>
       <Scrollable>
@@ -262,7 +270,7 @@ export const MainView: React.FC<Props> = (props) => {
                   )}
                   selected_value={props.web_mode}
                   on_change={props.on_web_mode_change}
-                  footer_text="shift+tab cycle down, alt+shift+tab cycle up"
+                  footer={dropdown_footer}
                   max_width={dropdown_max_width}
                 />
               )}
@@ -273,7 +281,7 @@ export const MainView: React.FC<Props> = (props) => {
                   )}
                   selected_value={props.api_mode}
                   on_change={props.on_api_mode_change}
-                  footer_text="shift+tab cycle down, alt+shift+tab cycle up"
+                  footer={dropdown_footer}
                   max_width={dropdown_max_width}
                 />
               )}