Unify component wrappers and OL-prefix dropdown components (#35152)

* Rename dropdown primitives to OL-prefixed components

* Migrate all consumers to OL-prefixed dropdown components

* Migrate subscription dropdown shells to OL components

* Update pdf-preview story to OL-prefixed dropdown components

* Migrate navbar and spelling dropdowns to OL components

* Move dropdown primitives to ol/ol-dropdown-menu, remove BS5 import aliases

* Rename dropdown prop types to OL-prefixed, clean up BS5 import aliases

* Widen OLDropdownItem/Toggle/Menu props to include AriaAttributes and data-*

GitOrigin-RevId: 0babce46867849b3f176bac8cf1652dc76fd34da

services/web/frontend/js/features/ide-react/components/rail/rail-action-element.tsx

@@ -3,11 +3,11 @@ import MaterialIcon, {
 } from '@/shared/components/material-icon'
 import { forwardRef, ReactElement, useCallback } from 'react'
 import {
-  Dropdown,
-  DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdown,
+  OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
-import { DropdownToggle as BS5DropdownToggle } from 'react-bootstrap'
+import { DropdownToggle } from 'react-bootstrap'
 
 type RailActionButton = {
   key: string
@@ -45,15 +45,15 @@ const RailActionElement = forwardRef<HTMLButtonElement, { action: RailAction }>(
 
     if ('dropdown' in action) {
       return (
-        <Dropdown align="end" drop="end">
+        <OLDropdown align="end" drop="end">
           <OLTooltip
             id={`rail-dropdown-tooltip-${action.key}`}
             description={action.title}
             overlayProps={{ delay: 0, placement: 'right' }}
           >
             <span>
-              <DropdownToggle
-                ref={ref as React.ForwardedRef<typeof BS5DropdownToggle>}
+              <OLDropdownToggle
+                ref={ref as React.ForwardedRef<typeof DropdownToggle>}
                 id={`rail-dropdown-btn-${action.key}`}
                 className="ide-rail-tab-link ide-rail-tab-button ide-rail-tab-dropdown"
                 as="button"
@@ -63,11 +63,11 @@ const RailActionElement = forwardRef<HTMLButtonElement, { action: RailAction }>(
                   type={action.icon}
                   indicator={action.indicator}
                 />
-              </DropdownToggle>
+              </OLDropdownToggle>
             </span>
           </OLTooltip>
           {action.dropdown}
-        </Dropdown>
+        </OLDropdown>
       )
     } else {
       return (

services/web/frontend/js/features/ide-react/components/rail/rail-help-dropdown.tsx

@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next'
 import { useRailContext } from '@/features/ide-react/context/rail-context'
 import { useCallback } from 'react'
 import {
-  DropdownDivider,
-  DropdownItem,
-  DropdownMenu,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdownDivider,
+  OLDropdownItem,
+  OLDropdownMenu,
+} from '@/shared/components/ol/ol-dropdown-menu'
 
 export default function RailHelpDropdown() {
   const showSupport = getMeta('ol-showSupport')
@@ -21,28 +21,28 @@ export default function RailHelpDropdown() {
   }, [setActiveModal])
 
   return (
-    <DropdownMenu>
-      <DropdownItem onClick={openKeyboardShortcutsModal}>
+    <OLDropdownMenu>
+      <OLDropdownItem onClick={openKeyboardShortcutsModal}>
         {t('keyboard_shortcuts')}
-      </DropdownItem>
+      </OLDropdownItem>
       {showDocumentation && (
-        <DropdownItem
+        <OLDropdownItem
           href="/learn"
           role="menuitem"
           target="_blank"
           rel="noopener noreferrer"
         >
           {t('documentation')}
-        </DropdownItem>
+        </OLDropdownItem>
       )}
       {showSupport && (
         <>
-          <DropdownDivider />
-          <DropdownItem onClick={openContactUsModal}>
+          <OLDropdownDivider />
+          <OLDropdownItem onClick={openContactUsModal}>
             {t('contact_us')}
-          </DropdownItem>
+          </OLDropdownItem>
         </>
       )}
-    </DropdownMenu>
+    </OLDropdownMenu>
   )
 }

services/web/frontend/js/features/ide-react/components/rail/rail-overflow-dropdown.tsx

@@ -1,4 +1,4 @@
-import { DropdownMenu } from '@/shared/components/dropdown/dropdown-menu'
+import { OLDropdownMenu } from '@/shared/components/ol/ol-dropdown-menu'
 import { RailTabKey } from '@/features/ide-react/context/rail-context'
 import { RailElement } from '@/features/ide-react/util/rail-types'
 import RailTab from './rail-tab'
@@ -14,7 +14,7 @@ export default function RailOverflowDropdown({
   selectedTab: RailTabKey
 }) {
   return (
-    <DropdownMenu className="ide-rail-overflow-dropdown">
+    <OLDropdownMenu className="ide-rail-overflow-dropdown">
       {tabs
         .filter(shouldIncludeElement)
         .map(({ icon, key, indicator, title, disabled }) => (
@@ -28,6 +28,6 @@ export default function RailOverflowDropdown({
             disabled={disabled}
           />
         ))}
-    </DropdownMenu>
+    </OLDropdownMenu>
   )
 }

services/web/frontend/js/features/ide-react/components/toolbar/change-layout-button.tsx

@@ -1,10 +1,10 @@
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import {
-  Dropdown,
-  DropdownMenu,
-  DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdown,
+  OLDropdownMenu,
+  OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
 import ChangeLayoutOptions from './change-layout-options'
 import MaterialIcon from '@/shared/components/material-icon'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
@@ -19,26 +19,26 @@ export default function ChangeLayoutButton() {
 
   return (
     <div className="ide-redesign-toolbar-button-container">
-      <Dropdown className="toolbar-item layout-dropdown" align="end">
+      <OLDropdown className="toolbar-item layout-dropdown" align="end">
         <OLTooltip
           id="tooltip-open-layout-options"
           description={t('layout_options')}
           overlayProps={{ delay: 0, placement: 'bottom' }}
         >
           <span>
-            <DropdownToggle
+            <OLDropdownToggle
               id="layout-dropdown-btn"
               className={toggleButtonClassName}
               aria-label={t('layout_options')}
             >
               <MaterialIcon type="space_dashboard" unfilled />
-            </DropdownToggle>
+            </OLDropdownToggle>
           </span>
         </OLTooltip>
-        <DropdownMenu>
+        <OLDropdownMenu>
           <ChangeLayoutOptions />
-        </DropdownMenu>
-      </Dropdown>
+        </OLDropdownMenu>
+      </OLDropdown>
     </div>
   )
 }

services/web/frontend/js/features/ide-react/components/toolbar/change-layout-options.tsx

@@ -1,8 +1,8 @@
 import {
-  DropdownItem,
-  DropdownHeader,
-  DropdownDivider,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdownItem,
+  OLDropdownHeader,
+  OLDropdownDivider,
+} from '@/shared/components/ol/ol-dropdown-menu'
 import {
   IdeLayout,
   IdeView,
@@ -81,7 +81,7 @@ const LayoutDropdownItem = ({
   }
 
   return (
-    <DropdownItem
+    <OLDropdownItem
       active={active}
       aria-current={active}
       disabled={disabled}
@@ -91,7 +91,7 @@ const LayoutDropdownItem = ({
       className={classNames({ 'dropdown-item-wide': isMac })}
     >
       {children}
-    </DropdownItem>
+    </OLDropdownItem>
   )
 }
 
@@ -139,7 +139,7 @@ export default function ChangeLayoutOptions() {
 
   return (
     <>
-      <DropdownHeader>{t('layout_options')}</DropdownHeader>
+      <OLDropdownHeader>{t('layout_options')}</OLDropdownHeader>
       <LayoutDropdownItem
         onClick={() => handleChangeLayout('sideBySide')}
         active={activeLayoutOption === 'sideBySide'}
@@ -184,7 +184,7 @@ export default function ChangeLayoutOptions() {
       </LayoutDropdownItem>
       {focusModeEnabled && (
         <>
-          <DropdownDivider />
+          <OLDropdownDivider />
           <LayoutDropdownItem
             onClick={() => {
               setFocusMode(!focusMode)

services/web/frontend/js/features/ide-react/components/toolbar/command-dropdown.tsx

@@ -5,9 +5,9 @@ import {
   useCommandRegistry,
 } from '@/features/ide-react/context/command-registry-context'
 import {
-  DropdownDivider,
-  DropdownHeader,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdownDivider,
+  OLDropdownHeader,
+} from '@/shared/components/ol/ol-dropdown-menu'
 import {
   MenuBarDropdown,
   NestedMenuBarDropdown,
@@ -101,8 +101,8 @@ function CommandSectionContent({
   }
   return (
     <>
-      {includeDivider && <DropdownDivider />}
-      {section.title && <DropdownHeader>{section.title}</DropdownHeader>}
+      {includeDivider && <OLDropdownDivider />}
+      {section.title && <OLDropdownHeader>{section.title}</OLDropdownHeader>}
       {section.children.map(child => (
         <CommandDropdownChild item={child} key={child.id} />
       ))}

services/web/frontend/js/features/ide-react/components/toolbar/menu-bar.tsx

@@ -1,8 +1,8 @@
 import {
-  DropdownDivider,
-  DropdownHeader,
-  DropdownItem,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdownDivider,
+  OLDropdownHeader,
+  OLDropdownItem,
+} from '@/shared/components/ol/ol-dropdown-menu'
 import { MenuBar } from '@/shared/components/menu-bar/menu-bar'
 import { MenuBarDropdown } from '@/shared/components/menu-bar/menu-bar-dropdown'
 import { MenuBarOption } from '@/shared/components/menu-bar/menu-bar-option'
@@ -270,13 +270,13 @@ export const ToolbarMenuBar = () => {
         >
           <ChangeLayoutOptions />
           <ReviewModeOptions />
-          <DropdownDivider />
-          <DropdownHeader>{t('editor_settings')}</DropdownHeader>
+          <OLDropdownDivider />
+          <OLDropdownHeader>{t('editor_settings')}</OLDropdownHeader>
           <MenuBarOption
             eventKey="show_breadcrumbs"
             title={t('show_breadcrumbs')}
             leadingIcon={
-              breadcrumbs ? 'check' : <DropdownItem.EmptyLeadingIcon />
+              breadcrumbs ? 'check' : <OLDropdownItem.EmptyLeadingIcon />
             }
             onClick={toggleBreadcrumbs}
           />
@@ -285,7 +285,7 @@ export const ToolbarMenuBar = () => {
               eventKey="show_editor_tabs"
               title={t('show_editor_tabs')}
               leadingIcon={
-                editorTabs ? 'check' : <DropdownItem.EmptyLeadingIcon />
+                editorTabs ? 'check' : <OLDropdownItem.EmptyLeadingIcon />
               }
               onClick={toggleEditorTabs}
             />
@@ -294,7 +294,7 @@ export const ToolbarMenuBar = () => {
             eventKey="show_equation_preview"
             title={t('show_equation_preview')}
             leadingIcon={
-              mathPreview ? 'check' : <DropdownItem.EmptyLeadingIcon />
+              mathPreview ? 'check' : <OLDropdownItem.EmptyLeadingIcon />
             }
             onClick={toggleMathPreview}
           />
@@ -329,7 +329,7 @@ export const ToolbarMenuBar = () => {
           )}
           {showSupport && (
             <>
-              <DropdownDivider />
+              <OLDropdownDivider />
               <MenuBarOption
                 eventKey="contact_us"
                 title={t('contact_us')}

services/web/frontend/js/features/ide-react/components/toolbar/project-title.tsx

@@ -1,9 +1,9 @@
 import {
-  Dropdown,
-  DropdownDivider,
-  DropdownMenu,
-  DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdown,
+  OLDropdownDivider,
+  OLDropdownMenu,
+  OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useProjectContext } from '@/shared/context/project-context'
 import { useTranslation } from 'react-i18next'
@@ -59,8 +59,8 @@ export const ToolbarProjectTitle = () => {
   }
 
   return (
-    <Dropdown align="end" className="ide-redesign-toolbar-project-dropdown">
-      <DropdownToggle
+    <OLDropdown align="end" className="ide-redesign-toolbar-project-dropdown">
+      <OLDropdownToggle
         id="project-title-options"
         aria-label={t('project_title_options')}
         className="ide-redesign-toolbar-project-dropdown-toggle ide-redesign-toolbar-dropdown-toggle-subdued fw-bold ide-redesign-toolbar-button-subdued"
@@ -69,12 +69,12 @@ export const ToolbarProjectTitle = () => {
           {name}
         </span>
         <MaterialIcon type="keyboard_arrow_down" />
-      </DropdownToggle>
-      <DropdownMenu renderOnMount>
+      </OLDropdownToggle>
+      <OLDropdownMenu renderOnMount>
         {shouldDisplaySubmitButton && !cobranding && (
           <>
             <SubmitProjectButton />
-            <DropdownDivider />
+            <OLDropdownDivider />
           </>
         )}
         <DownloadProjectPDF />
@@ -97,7 +97,7 @@ export const ToolbarProjectTitle = () => {
           label={t('export_as_html')}
           menuBarId="export-as-html"
         />
-        <DropdownDivider />
+        <OLDropdownDivider />
         <DuplicateProject />
         <DropdownMenuItem
           onClick={() => {
@@ -107,7 +107,7 @@ export const ToolbarProjectTitle = () => {
         >
           {t('rename')}
         </DropdownMenuItem>
-      </DropdownMenu>
-    </Dropdown>
+      </OLDropdownMenu>
+    </OLDropdown>
   )
 }

services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx

@@ -1,4 +1,4 @@
-import { DropdownDivider } from '@/shared/components/dropdown/dropdown-menu'
+import { OLDropdownDivider } from '@/shared/components/ol/ol-dropdown-menu'
 import { useTranslation } from 'react-i18next'
 import { useEditorPropertiesContext } from '../../context/editor-properties-context'
 import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
@@ -41,7 +41,7 @@ const ReviewModeOptions: React.FC = () => {
 
   return (
     <>
-      <DropdownDivider />
+      <OLDropdownDivider />
       <NestedMenuBarDropdown id="editing-mode-group" title={t('editing_mode')}>
         <DropdownMenuItem
           as="button"