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 && ( - + {parentValidationMessage || validationMessage} )} 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={ {t('include_label')} -
- + {t( 'used_when_referring_to_the_figure_elsewhere_in_the_document' )} - +
} /> 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 & { - type?: TextType -} +export type FormTextProps = MergeAndOverride< + BS5FormTextProps, + { + type?: TextType + } +> const typeClassMap: Partial> = { error: 'text-danger', @@ -43,8 +47,10 @@ function FormText({ className={classnames(className, getFormTextClass(type))} {...rest} > - - {children} + + + {children} + ) } 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 } -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 return ( } - bs5={} + bs3={} + bs5={} /> ) } 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 {