From 2646fefce4c3d476efdad2f7d6ccf1c181026d88 Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Wed, 23 Oct 2024 16:21:37 +0300
Subject: [PATCH] Merge pull request #21289 from
 overleaf/ii-bs5-figure-modal-improvements

[web] BS5 fix form text colour

GitOrigin-RevId: 8ff03f41cc3490eff0ea4c65a376ac572003fb9c
---
 .../settings/components/password-section.tsx   |  2 +-
 .../figure-modal/figure-modal-options.tsx      |  8 ++++----
 .../components/bootstrap-5/form/form-text.tsx  | 18 ++++++++++++------
 .../features/ui/components/ol/ol-form-text.tsx |  7 +++----
 .../bootstrap-5/components/form.scss           | 10 +++++++---
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/services/web/frontend/js/features/settings/components/password-section.tsx b/services/web/frontend/js/features/settings/components/password-section.tsx
index 1b442a586f..63a8cbcae2 100644
--- a/services/web/frontend/js/features/settings/components/password-section.tsx
+++ b/services/web/frontend/js/features/settings/components/password-section.tsx
@@ -268,7 +268,7 @@ function PasswordFormGroup({
         isInvalid={isInvalid}
       />
       {isInvalid && (
-        <OLFormText isError>
+        <OLFormText type="error">
           {parentValidationMessage || validationMessage}
         </OLFormText>
       )}
diff --git a/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-options.tsx b/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-options.tsx
index 31f3b11b78..d9a2952733 100644
--- a/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-options.tsx
+++ b/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-options.tsx
@@ -6,8 +6,9 @@ import {
 } from './figure-modal-context'
 import { useTranslation } from 'react-i18next'
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
-import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
 import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
+import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
+import OLFormText from '@/features/ui/components/ol/ol-form-text'
 import OLToggleButtonGroup from '@/features/ui/components/ol/ol-toggle-button-group'
 import OLToggleButton from '@/features/ui/components/ol/ol-toggle-button'
 import MaterialIcon from '@/shared/components/material-icon'
@@ -42,12 +43,11 @@ export const FigureModalFigureOptions: FC = () => {
           label={
             <span className="figure-modal-label-content">
               {t('include_label')}
-              <br />
-              <small className="text-muted">
+              <OLFormText className={bsVersion({ bs3: 'mt-1 text-muted' })}>
                 {t(
                   'used_when_referring_to_the_figure_elsewhere_in_the_document'
                 )}
-              </small>
+              </OLFormText>
             </span>
           }
         />
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-text.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-text.tsx
index 0178cfcb10..fe9b939680 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-text.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/form/form-text.tsx
@@ -1,12 +1,16 @@
-import { Form } from 'react-bootstrap-5'
+import { Form, FormTextProps as BS5FormTextProps } from 'react-bootstrap-5'
 import MaterialIcon from '@/shared/components/material-icon'
 import classnames from 'classnames'
+import { MergeAndOverride } from '../../../../../../../types/utils'
 
 type TextType = 'default' | 'info' | 'success' | 'warning' | 'error'
 
-export type FormTextProps = React.ComponentProps<typeof Form.Text> & {
-  type?: TextType
-}
+export type FormTextProps = MergeAndOverride<
+  BS5FormTextProps,
+  {
+    type?: TextType
+  }
+>
 
 const typeClassMap: Partial<Record<TextType, string>> = {
   error: 'text-danger',
@@ -43,8 +47,10 @@ function FormText({
       className={classnames(className, getFormTextClass(type))}
       {...rest}
     >
-      <FormTextIcon type={type} />
-      {children}
+      <span className="form-text-inner">
+        <FormTextIcon type={type} />
+        {children}
+      </span>
     </Form.Text>
   )
 }
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-form-text.tsx b/services/web/frontend/js/features/ui/components/ol/ol-form-text.tsx
index e84be3423c..d3673d2d21 100644
--- a/services/web/frontend/js/features/ui/components/ol/ol-form-text.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form-text.tsx
@@ -10,20 +10,19 @@ type OLFormTextProps = FormTextProps & {
   bs3Props?: Record<string, unknown>
 }
 
-function OLFormText(props: OLFormTextProps) {
+function OLFormText({ as = 'div', ...props }: OLFormTextProps) {
   const { bs3Props, ...rest } = props
 
   const bs3HelpBlockProps = {
     children: rest.children,
     className: classnames('small', rest.className, getFormTextClass(rest.type)),
-    as: 'span',
     ...bs3Props,
   } as const satisfies React.ComponentProps<typeof PolymorphicComponent>
 
   return (
     <BootstrapVersionSwitcher
-      bs3={<PolymorphicComponent {...bs3HelpBlockProps} />}
-      bs5={<FormText {...rest} />}
+      bs3={<PolymorphicComponent {...bs3HelpBlockProps} as={as} />}
+      bs5={<FormText {...rest} as={as} />}
     />
   )
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
index 35c2a67928..0a8538eab6 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
@@ -100,13 +100,17 @@
 }
 
 .form-text {
-  display: inline-flex;
-  gap: $spacing-02;
-  line-height: var(--line-height-02);
+  margin-top: var(--spacing-02);
 
   .form-control[disabled] ~ & {
     color: var(--content-disabled);
   }
+
+  .form-text-inner {
+    display: flex;
+    gap: var(--spacing-02);
+    line-height: var(--line-height-02);
+  }
 }
 
 .form-label {