Merge pull request #22147 from overleaf/td-bs5-beta-badge-special-cases

Alpha/beta badge fixes and change warning badge colours in Bootstrap 5

GitOrigin-RevId: f60610572c62607db7e5cf349c5791c3519c74ed

services/web/frontend/js/features/editor-left-menu/components/settings/settings-font-family.tsx

@@ -2,9 +2,7 @@ import { useTranslation } from 'react-i18next'
 import { FontFamily } from '../../../source-editor/extensions/theme'
 import { useProjectSettingsContext } from '../../context/project-settings-context'
 import SettingsMenuSelect from './settings-menu-select'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
-import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
-import MaterialIcon from '@/shared/components/material-icon'
+import BetaBadge from '@/shared/components/beta-badge'
 
 export default function SettingsFontFamily() {
   const { t } = useTranslation()
@@ -32,23 +30,18 @@ export default function SettingsFontFamily() {
         label={t('font_family')}
         name="fontFamily"
       />
-      <OLTooltip
-        id="font-family-tooltip"
-        description={`${t('new_font_open_dyslexic')} ${t('click_to_give_feedback')}`}
-        overlayProps={{ placement: 'right' }}
-      >
-        <a
-          href="https://docs.google.com/forms/d/e/1FAIpQLScOt_IHTrcaM_uitP9dgCo_r4dl4cy9Ry6LhYYcwTN4qDTDUg/viewform"
-          className="left-menu-setting-icon"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          <BootstrapVersionSwitcher
-            bs3={<span className="info-badge" />}
-            bs5={<MaterialIcon type="info" className="info-badge" />}
-          />
-        </a>
-      </OLTooltip>
+      <BetaBadge
+        phase="release"
+        link={{
+          href: 'https://docs.google.com/forms/d/e/1FAIpQLScOt_IHTrcaM_uitP9dgCo_r4dl4cy9Ry6LhYYcwTN4qDTDUg/viewform',
+          className: 'left-menu-setting-icon',
+        }}
+        tooltip={{
+          id: 'font-family-tooltip',
+          text: `${t('new_font_open_dyslexic')} ${t('click_to_give_feedback')}`,
+          placement: 'right',
+        }}
+      />
     </div>
   )
 }

services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx

@@ -29,6 +29,7 @@ import {
   Dropdown as BS3Dropdown,
   MenuItem as BS3MenuItem,
 } from 'react-bootstrap'
+import BetaBadgeIcon from '@/shared/components/beta-badge-icon'
 
 const MathPreviewTooltipContainer: FC = () => {
   const state = useCodeMirrorStateContext()
@@ -223,10 +224,7 @@ const CustomSplitTestBadge: FC = () => {
       target="_blank"
       rel="noopener noreferrer"
     >
-      <BootstrapVersionSwitcher
-        bs3={<span className="badge beta-badge" />}
-        bs5={<MaterialIcon type="info" className="align-middle beta-badge" />}
-      />
+      <BetaBadgeIcon phase="beta" />
     </a>
   )
 }

services/web/frontend/js/shared/components/beta-badge-icon.tsx

@@ -0,0 +1,53 @@
+import type { FC } from 'react'
+import classnames from 'classnames'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import OLBadge from '@/features/ui/components/ol/ol-badge'
+
+function BS5BetaBadgeIcon({
+  badgeClass,
+}: {
+  badgeClass: ReturnType<typeof chooseBadgeClass>
+}) {
+  if (badgeClass === 'info-badge') {
+    return <MaterialIcon type="info" className="align-middle info-badge" />
+  } else if (badgeClass === 'alpha-badge') {
+    return (
+      <OLBadge bg="primary" className="alpha-badge">
+        α
+      </OLBadge>
+    )
+  } else {
+    return (
+      <OLBadge bg="warning" className="beta-badge">
+        β
+      </OLBadge>
+    )
+  }
+}
+
+const BetaBadgeIcon: FC<{
+  phase?: string
+}> = ({ phase = 'beta' }) => {
+  const badgeClass = chooseBadgeClass(phase)
+  return (
+    <BootstrapVersionSwitcher
+      bs3={<span className={classnames('badge', badgeClass)} />}
+      bs5={<BS5BetaBadgeIcon badgeClass={badgeClass} />}
+    />
+  )
+}
+
+function chooseBadgeClass(phase?: string) {
+  switch (phase) {
+    case 'release':
+      return 'info-badge'
+    case 'alpha':
+      return 'alpha-badge'
+    case 'beta':
+    default:
+      return 'beta-badge'
+  }
+}
+
+export default BetaBadgeIcon

services/web/frontend/js/shared/components/beta-badge.tsx

@@ -1,10 +1,7 @@
-import type { FC, ReactNode } from 'react'
-import classnames from 'classnames'
+import type { FC, MouseEventHandler, ReactNode } from 'react'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
-import MaterialIcon from '@/shared/components/material-icon'
-import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import { bsVersion } from '@/features/utils/bootstrap-5'
-import OLBadge from '@/features/ui/components/ol/ol-badge'
+import BetaBadgeIcon from '@/shared/components/beta-badge-icon'
 
 type TooltipProps = {
   id: string
@@ -15,35 +12,42 @@ type TooltipProps = {
   >['placement']
 }
 
-function BS5BetaBadge({
-  badgeClass,
-}: {
-  badgeClass: ReturnType<typeof chooseBadgeClass>
-}) {
-  if (badgeClass === 'info-badge') {
-    return <MaterialIcon type="info" className="align-middle info-badge" />
-  } else if (badgeClass === 'alpha-badge') {
-    return (
-      <OLBadge bg="primary" className="alpha-badge">
-        α
-      </OLBadge>
-    )
-  } else {
-    return (
-      <OLBadge bg="warning" className="beta-badge">
-        β
-      </OLBadge>
-    )
-  }
+type LinkProps = {
+  href?: string
+  ref?: React.Ref<HTMLAnchorElement>
+  className?: string
+  onMouseDown?: MouseEventHandler<HTMLAnchorElement>
 }
 
+const defaultHref = '/beta/participate'
+
 const BetaBadge: FC<{
-  tooltip: TooltipProps
-  url?: string
+  tooltip?: TooltipProps
+  link?: LinkProps
+  description?: ReactNode
   phase?: string
-}> = ({ tooltip, url = '/beta/participate', phase = 'beta' }) => {
-  const badgeClass = chooseBadgeClass(phase)
-  return (
+}> = ({
+  tooltip,
+  link = { href: defaultHref },
+  description,
+  phase = 'beta',
+}) => {
+  const { href, ...linkProps } = link
+  const linkedBadge = (
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href || defaultHref}
+      {...linkProps}
+    >
+      <span className={bsVersion({ bs5: 'visually-hidden', bs3: 'sr-only' })}>
+        {description || tooltip?.text}
+      </span>
+      <BetaBadgeIcon phase={phase} />
+    </a>
+  )
+
+  return tooltip ? (
     <OLTooltip
       id={tooltip.id}
       description={tooltip.text}
@@ -53,29 +57,11 @@ const BetaBadge: FC<{
         delay: 100,
       }}
     >
-      <a href={url} target="_blank" rel="noopener noreferrer">
-        <span className={bsVersion({ bs5: 'visually-hidden', bs3: 'sr-only' })}>
-          {tooltip.text}
-        </span>
-        <BootstrapVersionSwitcher
-          bs3={<span className={classnames('badge', badgeClass)} />}
-          bs5={<BS5BetaBadge badgeClass={badgeClass} />}
-        />
-      </a>
+      {linkedBadge}
     </OLTooltip>
+  ) : (
+    linkedBadge
   )
 }
 
-export const chooseBadgeClass = (phase?: string) => {
-  switch (phase) {
-    case 'release':
-      return 'info-badge'
-    case 'alpha':
-      return 'alpha-badge'
-    case 'beta':
-    default:
-      return 'beta-badge'
-  }
-}
-
 export default BetaBadge

services/web/frontend/js/shared/components/feedback-badge.tsx

@@ -13,7 +13,7 @@ export const FeedbackBadge: FC<{
     }
   }, [id, text])
 
-  return <BetaBadge tooltip={tooltip} phase="release" url={url} />
+  return <BetaBadge tooltip={tooltip} phase="release" link={{ href: url }} />
 }
 
 const DefaultContent = () => (

services/web/frontend/js/shared/components/split-test-badge.tsx

@@ -45,9 +45,11 @@ export default function SplitTestBadge({
         ),
       }}
       phase={testInfo.phase}
-      url={
-        testInfo.badgeInfo?.url?.length ? testInfo.badgeInfo?.url : undefined
-      }
+      link={{
+        href: testInfo.badgeInfo?.url?.length
+          ? testInfo.badgeInfo?.url
+          : undefined,
+      }}
     />
   )
 }

services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss

@@ -162,7 +162,7 @@ $primary: $bg-accent-01;
 $secondary: $bg-light-primary;
 $success: $bg-accent-01;
 $info: $bg-info-01;
-$warning: $bg-warning-01;
+$warning: $bg-warning-03;
 $danger: $bg-danger-01;
 $light: $bg-light-tertiary;
 $dark: $neutral-90;

services/web/frontend/stylesheets/bootstrap-5/components/badge.scss

@@ -10,6 +10,10 @@ $max-width: 160px;
   &:not(.badge-tag) {
     max-width: $max-width;
   }
+
+  &.bg-warning {
+    --bs-badge-color: var(--content-warning);
+  }
 }
 
 .badge-prepend {
@@ -51,6 +55,7 @@ $max-width: 160px;
   @include text-truncate;
 
   padding: var(--bs-badge-padding-y) 0;
+  min-width: 1em;
 }
 
 .badge-tag {

services/web/frontend/stylesheets/bootstrap-5/pages/editor/left-menu.scss

@@ -139,7 +139,7 @@
     .left-menu-setting-icon {
       position: absolute;
       right: 65%;
-      top: 30%;
+      top: 25%;
     }
   }
 

services/web/test/frontend/components/shared/beta-badge.spec.tsx

@@ -5,7 +5,7 @@ describe('beta badge', function () {
   it('renders the url and tooltip text', function () {
     cy.mount(
       <BetaBadge
-        url="/foo"
+        link={{ href: '/foo' }}
         tooltip={{
           id: 'test-tooltip',
           text: 'This is a test',