agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-15 06:33:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Rebeka Dekany
2026-09-17 11:23:43 +00:00
committed by Copybot
parent 882ca2f981
commit 1ee87a823d
61 changed files with 831 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/js/features/ide-react/components/toolbar/change-layout-button.tsx
+10 -10
View File
@@ -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
+8 -8
View File
@@ -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 -5
View File
@@ -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
+10 -10
View File
@@ -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
+13 -13
View File
@@ -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
+2 -2
View File
@@ -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"