Merge pull request #18733 from overleaf/td-bs5-button-props

Simplify handling of BS3 props in button wrapper component

GitOrigin-RevId: 12a6b1374da5084e075775f3cef23f0b24d098fc

services/web/frontend/js/features/settings/components/linking/enable-widget.tsx

@@ -96,7 +96,6 @@ function ActionButton({
         variant="primary"
         href="/user/subscription/plans"
         onClick={trackUpgradeClick}
-        bs3Props={{ bsStyle: null, className: 'btn-primary' }}
       >
         <span className="text-capitalize">{t('upgrade')}</span>
       </OLButton>
@@ -107,7 +106,6 @@ function ActionButton({
         variant="danger-ghost"
         onClick={handleUnlinkClick}
         disabled={disabled}
-        bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
       >
         {t('turn_off')}
       </OLButton>
@@ -118,10 +116,6 @@ function ActionButton({
         variant="secondary"
         disabled={disabled}
         onClick={handleLinkClick}
-        bs3Props={{
-          bsStyle: null,
-          className: 'btn btn-secondary-info btn-secondary',
-        }}
       >
         {t('turn_on')}
       </OLButton>

services/web/frontend/js/features/settings/components/linking/integration-widget.tsx

@@ -4,7 +4,6 @@ import OLBadge from '@/features/ui/components/ol/ol-badge'
 import getMeta from '../../../../utils/meta'
 import { sendMB } from '../../../../infrastructure/event-tracking'
 import OLButton from '@/features/ui/components/ol/ol-button'
-import { bsVersion } from '@/features/utils/bootstrap-5'
 import OLModal, {
   OLModalBody,
   OLModalFooter,
@@ -123,7 +122,6 @@ function ActionButton({
         variant="primary"
         href="/user/subscription/plans"
         onClick={() => trackUpgradeClick(integration)}
-        bs3Props={{ bsStyle: null, className: 'btn-primary' }}
       >
         <span className="text-capitalize">{t('upgrade')}</span>
       </OLButton>
@@ -134,7 +132,6 @@ function ActionButton({
         variant="danger-ghost"
         onClick={handleUnlinkClick}
         disabled={disabled}
-        bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
       >
         {t('unlink')}
       </OLButton>
@@ -143,25 +140,14 @@ function ActionButton({
     return (
       <>
         {disabled ? (
-          <OLButton
-            disabled
-            variant="secondary"
-            className={bsVersion({
-              bs3: 'btn btn-secondary-info btn-secondary text-capitalize',
-              bs5: 'text-capitalize',
-            })}
-          >
+          <OLButton disabled variant="secondary" className="text-capitalize">
             {t('link')}
           </OLButton>
         ) : (
           <OLButton
             variant="secondary"
             href={linkPath}
-            className={bsVersion({
-              bs3: 'btn btn-secondary-info btn-secondary text-capitalize',
-              bs5: 'text-capitalize',
-            })}
-            bs3Props={{ bsStyle: null }}
+            className="text-capitalize"
             onClick={() => trackLinkingClick(integration)}
           >
             {t('link')}
@@ -215,20 +201,12 @@ function UnlinkConfirmationModal({
       <OLModalFooter>
         <form action={unlinkPath} method="POST" className="form-inline">
           <input type="hidden" name="_csrf" value={getMeta('ol-csrfToken')} />
-          <OLButton
-            variant="secondary"
-            onClick={handleCancel}
-            bs3Props={{
-              bsStyle: null,
-              className: 'btn-secondary-info btn-secondary',
-            }}
-          >
+          <OLButton variant="secondary" onClick={handleCancel}>
             {t('cancel')}
           </OLButton>
           <OLButton
             type="submit"
             variant="danger-ghost"
-            bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
             onClick={handleConfirm}
           >
             {t('unlink')}

services/web/frontend/js/features/settings/components/linking/sso-widget.tsx

@@ -6,7 +6,6 @@ import GoogleLogo from '../../../../shared/svgs/google-logo'
 import OrcidLogo from '../../../../shared/svgs/orcid-logo'
 import LinkingStatus from './status'
 import OLButton from '@/features/ui/components/ol/ol-button'
-import { bsVersion } from '@/features/utils/bootstrap-5'
 import OLModal, {
   OLModalBody,
   OLModalFooter,
@@ -118,35 +117,19 @@ function ActionButton({
   const { t } = useTranslation()
   if (unlinkRequestInflight) {
     return (
-      <OLButton
-        variant="danger-ghost"
-        disabled
-        bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
-      >
+      <OLButton variant="danger-ghost" disabled>
         {t('unlinking')}
       </OLButton>
     )
   } else if (accountIsLinked) {
     return (
-      <OLButton
-        variant="danger-ghost"
-        onClick={onUnlinkClick}
-        bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
-      >
+      <OLButton variant="danger-ghost" onClick={onUnlinkClick}>
         {t('unlink')}
       </OLButton>
     )
   } else {
     return (
-      <OLButton
-        variant="secondary"
-        href={linkPath}
-        bs3Props={{ bsStyle: null }}
-        className={bsVersion({
-          bs3: 'btn btn-secondary-info btn-secondary text-capitalize',
-          bs5: 'text-capitalize',
-        })}
-      >
+      <OLButton variant="secondary" href={linkPath} className="text-capitalize">
         {t('link')}
       </OLButton>
     )
@@ -181,21 +164,10 @@ function UnlinkConfirmModal({
       </OLModalBody>
 
       <OLModalFooter>
-        <OLButton
-          variant="secondary"
-          onClick={handleHide}
-          bs3Props={{
-            bsStyle: null,
-            className: 'btn-secondary-info btn-secondary',
-          }}
-        >
+        <OLButton variant="secondary" onClick={handleHide}>
           {t('cancel')}
         </OLButton>
-        <OLButton
-          variant="danger-ghost"
-          onClick={handleConfirmation}
-          bs3Props={{ bsStyle: null, className: 'btn-danger-ghost' }}
-        >
+        <OLButton variant="danger-ghost" onClick={handleConfirmation}>
           {t('unlink')}
         </OLButton>
       </OLModalFooter>