Merge pull request #29793 from overleaf/mj-custom-rail-icon

[web] Add custom sparkles icon for workbench rail tab

GitOrigin-RevId: b332c90532e75b41b494906e021bcb49ff358024

services/web/frontend/js/features/ide-redesign/components/rail/rail-tab.tsx

@@ -1,15 +1,14 @@
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
-import MaterialIcon, {
-  AvailableUnfilledIcon,
-} from '@/shared/components/material-icon'
+import MaterialIcon from '@/shared/components/material-icon'
 import classNames from 'classnames'
 import { forwardRef, ReactElement } from 'react'
 import { NavLink } from 'react-bootstrap'
+import { RailElement } from '../../utils/rail-types'
 
 const RailTab = forwardRef<
   HTMLAnchorElement,
   {
-    icon: AvailableUnfilledIcon
+    icon: RailElement['icon']
     eventKey: string
     open: boolean
     indicator?: ReactElement
@@ -31,26 +30,43 @@ const RailTab = forwardRef<
         })}
         disabled={disabled}
       >
-        {open ? (
-          <MaterialIcon
-            className="ide-rail-tab-link-icon"
-            type={icon}
-            accessibilityLabel={title}
-          />
-        ) : (
-          <MaterialIcon
-            className="ide-rail-tab-link-icon"
-            type={icon}
-            accessibilityLabel={title}
-            unfilled
-          />
-        )}
+        <RailTabIcon icon={icon} title={title} open={open} />
         {indicator}
       </NavLink>
     </OLTooltip>
   )
 })
 
+const RailTabIcon = ({
+  icon,
+  title,
+  open,
+}: {
+  icon: RailElement['icon']
+  title: string
+  open: boolean
+}) => {
+  if (typeof icon === 'string') {
+    return open ? (
+      <MaterialIcon
+        type={icon}
+        className="ide-rail-tab-link-icon"
+        accessibilityLabel={title}
+      />
+    ) : (
+      <MaterialIcon
+        type={icon}
+        className="ide-rail-tab-link-icon"
+        unfilled
+        accessibilityLabel={title}
+      />
+    )
+  } else {
+    const Component = icon
+    return <Component open={open} title={title} />
+  }
+}
+
 RailTab.displayName = 'RailTab'
 
 export default RailTab

services/web/frontend/js/features/ide-redesign/utils/rail-types.ts

@@ -1,9 +1,11 @@
 import { AvailableUnfilledIcon } from '@/shared/components/material-icon'
 import { RailTabKey } from '../contexts/rail-context'
-import { ReactElement } from 'react'
+import { FC, ReactElement } from 'react'
+
+export type CustomRailTabIcon = FC<{ open: boolean; title: string }>
 
 export type RailElement = {
-  icon: AvailableUnfilledIcon
+  icon: AvailableUnfilledIcon | CustomRailTabIcon
   key: RailTabKey
   component: ReactElement | null
   indicator?: ReactElement

services/web/frontend/stylesheets/pages/editor/rail.scss

@@ -93,6 +93,12 @@ body {
     font-size: 20px;
   }
 
+  .ide-rail-tab-img-icon {
+    width: 20px;
+    max-height: 32px;
+    object-fit: contain;
+  }
+
   &.open-rail {
     color: var(--ide-rail-link-active-color);
     background-color: var(--ide-rail-link-active-background);