From ef72402df6a09b9197fbc1c4fffdcd600395d297 Mon Sep 17 00:00:00 2001 From: Tim Down <158919+timdown@users.noreply.github.com> Date: Mon, 25 Nov 2024 14:18:12 +0000 Subject: [PATCH] Merge pull request #22089 from overleaf/td-bs5-menu-item-reduce-height Reduce the height of menu items in BS5 to 36px GitOrigin-RevId: 0d6294f1713618bc97562c92ea877aaeac8b9698 --- .../dropdown/menu-item/add-label.tsx | 5 +-- .../menu-item/compare-dropdown-item.tsx | 21 +++++++----- .../dropdown/menu-item/download.tsx | 33 ++++++++++--------- .../dropdown/menu-item/restore-project.tsx | 5 +-- .../bootstrap-5/dropdown-list-item.tsx | 9 +++++ .../bootstrap-5/navbar/contact-us-item.tsx | 6 ++-- .../bootstrap-5/navbar/logged-in-items.tsx | 6 ++-- .../navbar/nav-dropdown-from-data.tsx | 6 ++-- .../bootstrap-5/navbar/nav-dropdown-item.tsx | 5 --- .../navbar/nav-dropdown-link-item.tsx | 6 ++-- .../abstracts/variable-overrides.scss | 2 +- .../bootstrap-5/components/dropdown-menu.scss | 2 +- .../bootstrap-5/pages/editor/history.scss | 13 -------- 13 files changed, 59 insertions(+), 60 deletions(-) create mode 100644 services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-list-item.tsx delete mode 100644 services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-item.tsx diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx index 882bb9a439..9281b3c391 100644 --- a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx +++ b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next' import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item' import OLTagIcon from '@/features/ui/components/ol/icons/ol-tag-icon' import AddLabelModal from '../../add-label-modal' +import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item' type DownloadProps = { projectId: string @@ -25,7 +26,7 @@ function AddLabel({ } return ( - <> + } @@ -40,7 +41,7 @@ function AddLabel({ setShow={setShowModal} version={version} /> - + ) } diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx index 5b8d490ff9..91d5507ce0 100644 --- a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx +++ b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx @@ -2,6 +2,7 @@ import { useHistoryContext } from '../../../../context/history-context' import { UpdateRange } from '../../../../services/types/update' import { ReactNode } from 'react' import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item' +import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item' type CompareProps = { comparisonRange: UpdateRange @@ -32,15 +33,17 @@ function CompareDropDownItem({ } return ( - - {text} - + + + {text} + + ) } diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx index fc3e1a2d5f..0701ee5d07 100644 --- a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx +++ b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx @@ -3,6 +3,7 @@ import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-ite import MaterialIcon from '@/shared/components/material-icon' import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher' import Icon from '../../../../../../shared/components/icon' +import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item' type DownloadProps = { projectId: string @@ -19,21 +20,23 @@ function Download({ const { t } = useTranslation() return ( - } - bs5={} - /> - } - {...props} - > - {t('history_download_this_version')} - + + } + bs5={} + /> + } + {...props} + > + {t('history_download_this_version')} + + ) } diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx index dad0f47cd0..c491594db1 100644 --- a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx +++ b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx @@ -9,6 +9,7 @@ import withErrorBoundary from '@/infrastructure/error-boundary' import { RestoreProjectErrorModal } from '../../../diff-view/modals/restore-project-error-modal' import MaterialIcon from '@/shared/components/material-icon' import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher' +import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item' type RestoreProjectProps = { projectId: string @@ -45,7 +46,7 @@ const RestoreProject = ({ } return ( - <> + - + ) } diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-list-item.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-list-item.tsx new file mode 100644 index 0000000000..3b492faca3 --- /dev/null +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-list-item.tsx @@ -0,0 +1,9 @@ +import { ReactNode } from 'react' + +export default function DropdownListItem({ + children, +}: { + children: ReactNode +}) { + return
  • {children}
    • +} diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/contact-us-item.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/contact-us-item.tsx index 180c57b252..85ece25d7d 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/contact-us-item.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/contact-us-item.tsx @@ -1,7 +1,7 @@ import { sendMB } from '@/infrastructure/event-tracking' import { useTranslation } from 'react-i18next' import { DropdownItem } from 'react-bootstrap-5' -import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item' +import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item' export default function ContactUsItem({ showModal, @@ -11,7 +11,7 @@ export default function ContactUsItem({ const { t } = useTranslation() return ( - + {t('contact_us')} - + ) } diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx index b108fccce3..b1990b22a8 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx @@ -4,7 +4,7 @@ import NavDropdownDivider from '@/features/ui/components/bootstrap-5/navbar/nav- import getMeta from '@/utils/meta' import NavDropdownMenu from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu' import NavDropdownLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item' -import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item' +import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item' import type { NavbarSessionUser } from '@/features/ui/components/types/navbar' import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item' @@ -35,7 +35,7 @@ export default function LoggedInItems({ ) : null} - + { // The button is outside the form but still belongs to it via the // form attribute. The reason to do this is that if the button is @@ -53,7 +53,7 @@ export default function LoggedInItems({
    -     + ) diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx index bfa6af6763..0fc1a211e2 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx @@ -3,7 +3,7 @@ import NavDropdownDivider from '@/features/ui/components/bootstrap-5/navbar/nav- import { sendMB } from '@/infrastructure/event-tracking' import { isDropdownLinkItem } from '@/features/ui/components/bootstrap-5/navbar/util' import NavDropdownLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item' -import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item' +import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item' import NavDropdownMenu from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu' import ContactUsItem from '@/features/ui/components/bootstrap-5/navbar/contact-us-item' @@ -35,9 +35,9 @@ export default function NavDropdownFromData({ ) } else { return ( - + {child.translatedText} - + ) } })} diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-item.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-item.tsx deleted file mode 100644 index b23c29cbd7..0000000000 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-item.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { ReactNode } from 'react' - -export default function NavDropdownItem({ children }: { children: ReactNode }) { - return
  • {children}
    • -} diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item.tsx index 235a2227e7..5acc808c21 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react' -import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item' +import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item' import { DropdownItem } from 'react-bootstrap-5' import { DropdownItemProps } from 'react-bootstrap-5/DropdownItem' @@ -13,10 +13,10 @@ export default function NavDropdownLinkItem({ children: ReactNode }) { return ( - + {children} - + ) } diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss index b70df80983..120c8f27da 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss @@ -257,7 +257,7 @@ $dropdown-border-radius: var(--border-radius-base); $dropdown-padding-x: var(--spacing-02); $dropdown-padding-y: var(--spacing-02); $dropdown-item-padding-x: var(--spacing-04); -$dropdown-item-padding-y: var(--spacing-05); +$dropdown-item-padding-y: var(--spacing-04); $dropdown-header-color: var(--content-secondary); // Offcanvas diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss b/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss index d64e699fd7..ac36298510 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss @@ -55,7 +55,7 @@ display: grid; grid-auto-flow: column; place-content: center start; - min-height: 44px; // a minimum height of 44px to be accessible for touch screens + min-height: 36px; // a minimum height of 36px to be accessible for touch screens position: relative; &:active { diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss index e7afdb672b..b8e206b6ae 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss @@ -380,19 +380,6 @@ history-root { } } -.history-version-dropdown-menu { - [role='menuitem'] { - padding: var(--spacing-05); - color: var(--content-primary); - - &:hover, - &:focus { - color: var(--content-primary); - background-color: var(--bg-light-secondary); - } - } -} - .document-diff-container { height: 100%; display: flex;