refactor(core): new workspace selector and create dialog (#10323)

packages/frontend/component/src/ui/menu/menu.types.ts

@@ -25,6 +25,8 @@ export interface MenuItemProps
   suffix?: ReactNode;
   prefixIcon?: ReactNode;
   suffixIcon?: ReactNode;
+  prefixIconClassName?: string;
+  suffixIconClassName?: string;
   checked?: boolean;
   selected?: boolean;
   block?: boolean;

packages/frontend/component/src/ui/menu/use-menu-item.tsx

@@ -11,8 +11,10 @@ export const useMenuItem = <T extends MenuItemProps>({
   className: propsClassName,
   prefix,
   prefixIcon,
+  prefixIconClassName,
   suffix,
   suffixIcon,
+  suffixIconClassName,
   checked,
   selected,
   block,
@@ -38,13 +40,17 @@ export const useMenuItem = <T extends MenuItemProps>({
       {prefix}
 
       {prefixIcon ? (
-        <div className={styles.menuItemIcon}>{prefixIcon}</div>
+        <div className={clsx(styles.menuItemIcon, prefixIconClassName)}>
+          {prefixIcon}
+        </div>
       ) : null}
 
       <span className={styles.menuSpan}>{propsChildren}</span>
 
       {suffixIcon ? (
-        <div className={styles.menuItemIcon}>{suffixIcon}</div>
+        <div className={clsx(styles.menuItemIcon, suffixIconClassName)}>
+          {suffixIcon}
+        </div>
       ) : null}
 
       {suffix}