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/emails/actions/make-primary/confirmation-modal.tsx

@@ -46,21 +46,13 @@ function ConfirmationModal({
         <p className="mb-0">{t('log_in_with_primary_email_address')}</p>
       </OLModalBody>
       <OLModalFooter>
-        <OLButton
-          variant="secondary"
-          onClick={onHide}
-          bs3Props={{
-            bsStyle: null,
-            className: 'btn-secondary-info btn-secondary',
-          }}
-        >
+        <OLButton variant="secondary" onClick={onHide}>
           {t('cancel')}
         </OLButton>
         <OLButton
           variant="primary"
           disabled={isConfirmDisabled}
           onClick={onConfirm}
-          bs3Props={{ bsStyle: null, className: 'btn-primary' }}
         >
           {t('confirm')}
         </OLButton>

services/web/frontend/js/features/settings/components/emails/actions/make-primary/primary-button.tsx

@@ -13,10 +13,6 @@ function PrimaryButton({
       isLoading={isLoading}
       onClick={onClick}
       variant="secondary"
-      bs3Props={{
-        bsStyle: null,
-        className: 'btn-secondary btn-secondary-info',
-      }}
     >
       {children}
     </OLButton>

services/web/frontend/js/features/settings/components/emails/add-email/add-another-email-btn.tsx

@@ -9,7 +9,6 @@ function AddAnotherEmailBtn({ onClick, ...props }: OLButtonProps) {
       variant="link"
       onClick={onClick}
       className="btn-inline-link"
-      bs3Props={{ bsStyle: null }}
       {...props}
     >
       {t('add_another_email')}

services/web/frontend/js/features/settings/components/emails/add-email/email-affiliated-with-institution.tsx

@@ -11,7 +11,6 @@ function EmailAffiliatedWithInstitution({ onClick, ...props }: OLButtonProps) {
         variant="link"
         onClick={onClick}
         className="btn-inline-link"
-        bs3Props={{ bsStyle: null }}
         {...props}
       >
         {t('let_us_know')}

services/web/frontend/js/features/settings/components/emails/add-email/university-name.tsx

@@ -14,12 +14,7 @@ function UniversityName({ name, onClick }: UniversityNameProps) {
       {name}
       <span className="small">
         {' '}
-        <OLButton
-          variant="link"
-          onClick={onClick}
-          className="btn-inline-link"
-          bs3Props={{ bsStyle: null }}
-        >
+        <OLButton variant="link" onClick={onClick} className="btn-inline-link">
           {t('change')}
         </OLButton>
       </span>

services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx

@@ -150,9 +150,6 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
                         disabled={state.isLoading}
                         onClick={handleRequestReconfirmation}
                         className="btn-inline-link"
-                        bs3Props={{
-                          bsStyle: null,
-                        }}
                       >
                         {t('resend_confirmation_email')}
                       </OLButton>
@@ -164,7 +161,6 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
                     disabled={isPending}
                     isLoading={isLoading}
                     onClick={handleRequestReconfirmation}
-                    bs3Props={{ bsStyle: 'info' }}
                   >
                     {isLoading ? (
                       <>
@@ -209,7 +205,6 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
                       disabled={state.isLoading}
                       onClick={handleRequestReconfirmation}
                       className="btn-inline-link"
-                      bs3Props={{ bsStyle: null }}
                     >
                       {t('resend_confirmation_email')}
                     </OLButton>
@@ -241,7 +236,6 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
                       variant="secondary"
                       disabled={state.isLoading || isPending}
                       onClick={handleRequestReconfirmation}
-                      bs3Props={{ bsStyle: 'info' }}
                     >
                       {isLoading ? (
                         <>

services/web/frontend/js/features/settings/components/emails/resend-confirmation-email-button.tsx

@@ -52,7 +52,6 @@ function ResendConfirmationEmailButton({
         disabled={state.isLoading || isLoading}
         onClick={handleResendConfirmationEmail}
         className="btn-inline-link"
-        bs3Props={{ bsStyle: null }}
       >
         {t('resend_confirmation_email')}
       </OLButton>

services/web/frontend/js/features/settings/components/leave/modal-content.tsx

@@ -74,12 +74,7 @@ function LeaveModalContent({
       </OLModalBody>
 
       <OLModalFooter>
-        <OLButton
-          disabled={inFlight}
-          onClick={handleHide}
-          variant="secondary"
-          bs3Props={{ bsStyle: null, className: 'btn-secondary' }}
-        >
+        <OLButton disabled={inFlight} onClick={handleHide} variant="secondary">
           {t('cancel')}
         </OLButton>
 

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>

services/web/frontend/js/features/settings/components/security-section.tsx

@@ -87,7 +87,6 @@ function SecuritySection() {
                   <div className="button-column">
                     <OLButton
                       variant="primary"
-                      bs3Props={{ className: 'btn btn-primary', bsStyle: null }}
                       href={`/subscription/${groupId}/sso_enrollment`}
                     >
                       {t('set_up_sso')}

services/web/frontend/js/features/ui/components/ol/ol-button.tsx

@@ -3,13 +3,12 @@ import { Button as BS3Button } from 'react-bootstrap'
 import type { ButtonProps } from '@/features/ui/components/types/button-props'
 import type { ButtonProps as BS3ButtonPropsBase } from 'react-bootstrap'
 import Button from '../bootstrap-5/button'
+import classnames from 'classnames'
 
 export type BS3ButtonSize = 'xsmall' | 'sm' | 'medium' | 'lg'
 
 export type OLButtonProps = ButtonProps & {
   bs3Props?: {
-    bsStyle?: string | null
-    className?: string
     loading?: React.ReactNode
     bsSize?: BS3ButtonSize
   }
@@ -20,6 +19,20 @@ export type BS3ButtonProps = Omit<BS3ButtonPropsBase, 'onClick'> & {
   onClick?: React.MouseEventHandler<any>
 }
 
+export function bs3ButtonProps(props: ButtonProps) {
+  const bs3ButtonProps: BS3ButtonProps = {
+    bsStyle: null,
+    bsSize: mapBsButtonSizes(props.size),
+    className: classnames(`btn-${props.variant || 'primary'}`, props.className),
+    disabled: props.isLoading || props.disabled,
+    form: props.form,
+    href: props.href,
+    onClick: props.onClick,
+    type: props.type,
+  }
+  return bs3ButtonProps
+}
+
 // maps Bootstrap 5 sizes to Bootstrap 3 sizes
 export const mapBsButtonSizes = (
   size: ButtonProps['size']
@@ -29,22 +42,10 @@ export const mapBsButtonSizes = (
 export default function OLButton(props: OLButtonProps) {
   const { bs3Props, ...rest } = props
 
-  const bs3ButtonProps: BS3ButtonProps = {
-    bsStyle: rest.variant === 'secondary' ? 'default' : rest.variant,
-    bsSize: mapBsButtonSizes(rest.size),
-    className: rest.className,
-    disabled: rest.isLoading || rest.disabled,
-    form: rest.form,
-    href: rest.href,
-    onClick: rest.onClick,
-    type: rest.type,
-    ...bs3Props,
-  }
-
   return (
     <BootstrapVersionSwitcher
       bs3={
-        <BS3Button {...bs3ButtonProps}>
+        <BS3Button {...bs3ButtonProps(rest)} {...bs3Props}>
           {bs3Props?.loading || rest.children}
         </BS3Button>
       }

services/web/frontend/js/features/ui/components/ol/ol-icon-button.tsx

@@ -1,4 +1,4 @@
-import { BS3ButtonProps, BS3ButtonSize, mapBsButtonSizes } from './ol-button'
+import { bs3ButtonProps, BS3ButtonSize } from './ol-button'
 import { Button as BS3Button } from 'react-bootstrap'
 import type { IconButtonProps } from '@/features/ui/components/types/icon-button-props'
 import BootstrapVersionSwitcher from '../bootstrap-5/bootstrap-version-switcher'
@@ -17,22 +17,12 @@ export type OLIconButtonProps = IconButtonProps & {
 export default function OLIconButton(props: OLIconButtonProps) {
   const { bs3Props, ...rest } = props
 
-  const { fw, ...filterBs3Props } = bs3Props || {}
-
-  const bs3ButtonProps: BS3ButtonProps = {
-    bsStyle: rest.variant === 'secondary' ? 'default' : rest.variant,
-    bsSize: mapBsButtonSizes(rest.size),
-    disabled: rest.isLoading || rest.disabled,
-    form: rest.form,
-    onClick: rest.onClick,
-    type: rest.type,
-    ...filterBs3Props,
-  }
+  const { fw, ...bs3Rest } = bs3Props || {}
 
   return (
     <BootstrapVersionSwitcher
       bs3={
-        <BS3Button {...bs3ButtonProps}>
+        <BS3Button {...bs3ButtonProps(rest)} {...bs3Rest}>
           {bs3Props?.loading}
           <Icon
             type={rest.icon}

services/web/frontend/js/shared/components/copy-to-clipboard.tsx

@@ -55,11 +55,8 @@ const TextButton: FC<{
       onClick={handleClick}
       size="small"
       variant="secondary"
-      bs3Props={{
-        bsStyle: null,
-        className: 'btn-secondary copy-button',
-        bsSize: 'xsmall',
-      }}
+      className="copy-button"
+      bs3Props={{ bsSize: 'xsmall' }}
     >
       {t('copy')}
     </OLButton>