Merge pull request #21289 from overleaf/ii-bs5-figure-modal-improvements

[web] BS5 fix form text colour

GitOrigin-RevId: 8ff03f41cc3490eff0ea4c65a376ac572003fb9c

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>
       )}

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 />
+              <OLFormText className={bsVersion({ bs3: 'mt-1 text-muted' })}>
-              <small className="text-muted">
                 {t(
                   'used_when_referring_to_the_figure_elsewhere_in_the_document'
                 )}
-              </small>
+              </OLFormText>
             </span>
           }
         />

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> & {
+export type FormTextProps = MergeAndOverride<
-  type?: TextType
+  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} />
+      <span className="form-text-inner">
-      {children}
+        <FormTextIcon type={type} />
+        {children}
+      </span>
     </Form.Text>
   )
 }

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} />}
+      bs3={<PolymorphicComponent {...bs3HelpBlockProps} as={as} />}
-      bs5={<FormText {...rest} />}
+      bs5={<FormText {...rest} as={as} />}
     />
   )
 }

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

@@ -100,13 +100,17 @@
 }
 
 .form-text {
-  display: inline-flex;
+  margin-top: var(--spacing-02);
-  gap: $spacing-02;
-  line-height: var(--line-height-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 {