github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-10-24 21:12:38 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[web] BS5 fix form text colour

GitOrigin-RevId: 8ff03f41cc3490eff0ea4c65a376ac572003fb9c
This commit is contained in:
ilkin-overleaf 2024-10-23 16:21:37 +03:00 committed by Copybot
parent 5791563ef0
commit 2646fefce4
5 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/frontend/js/features/settings/components/password-section.tsx
View file

@ -268,7 +268,7 @@ function PasswordFormGroup({
isInvalid={isInvalid} isInvalid={isInvalid}
/> />
{isInvalid && ( {isInvalid && (
<OLFormText isError> <OLFormText type="error">
{parentValidationMessage || validationMessage} {parentValidationMessage || validationMessage}
</OLFormText> </OLFormText>
)} )}

8
services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-options.tsx
View file

@ -6,8 +6,9 @@ import {
} from './figure-modal-context' } from './figure-modal-context'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import OLTooltip from '@/features/ui/components/ol/ol-tooltip' 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 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 OLToggleButtonGroup from '@/features/ui/components/ol/ol-toggle-button-group'
import OLToggleButton from '@/features/ui/components/ol/ol-toggle-button' import OLToggleButton from '@/features/ui/components/ol/ol-toggle-button'
import MaterialIcon from '@/shared/components/material-icon' import MaterialIcon from '@/shared/components/material-icon'
@ -42,12 +43,11 @@ export const FigureModalFigureOptions: FC = () => {
label={ label={
<span className="figure-modal-label-content"> <span className="figure-modal-label-content">
{t('include_label')} {t('include_label')}
<br /> <OLFormText className={bsVersion({ bs3: 'mt-1 text-muted' })}>
<small className="text-muted">
{t( {t(
'used_when_referring_to_the_figure_elsewhere_in_the_document' 'used_when_referring_to_the_figure_elsewhere_in_the_document'
)} )}
</small> </OLFormText>
</span> </span>
} }
/> />

12
services/web/frontend/js/features/ui/components/bootstrap-5/form/form-text.tsx
View file

@ -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 MaterialIcon from '@/shared/components/material-icon'
import classnames from 'classnames' import classnames from 'classnames'
import { MergeAndOverride } from '../../../../../../../types/utils'
type TextType = 'default' | 'info' | 'success' | 'warning' | 'error' type TextType = 'default' | 'info' | 'success' | 'warning' | 'error'
export type FormTextProps = React.ComponentProps<typeof Form.Text> & { export type FormTextProps = MergeAndOverride<
BS5FormTextProps,
{
type?: TextType type?: TextType
} }
>
const typeClassMap: Partial<Record<TextType, string>> = { const typeClassMap: Partial<Record<TextType, string>> = {
error: 'text-danger', error: 'text-danger',
@ -43,8 +47,10 @@ function FormText({
className={classnames(className, getFormTextClass(type))} className={classnames(className, getFormTextClass(type))}
{...rest} {...rest}
> >
<span className="form-text-inner">
<FormTextIcon type={type} /> <FormTextIcon type={type} />
{children} {children}
</span>
</Form.Text> </Form.Text>
) )
} }

7
services/web/frontend/js/features/ui/components/ol/ol-form-text.tsx
View file

@ -10,20 +10,19 @@ type OLFormTextProps = FormTextProps & {
bs3Props?: Record<string, unknown> bs3Props?: Record<string, unknown>
} }
function OLFormText(props: OLFormTextProps) { function OLFormText({ as = 'div', ...props }: OLFormTextProps) {
const { bs3Props, ...rest } = props const { bs3Props, ...rest } = props
const bs3HelpBlockProps = { const bs3HelpBlockProps = {
children: rest.children, children: rest.children,
className: classnames('small', rest.className, getFormTextClass(rest.type)), className: classnames('small', rest.className, getFormTextClass(rest.type)),
as: 'span',
...bs3Props, ...bs3Props,
} as const satisfies React.ComponentProps<typeof PolymorphicComponent> } as const satisfies React.ComponentProps<typeof PolymorphicComponent>
return ( return (
<BootstrapVersionSwitcher <BootstrapVersionSwitcher
bs3={<PolymorphicComponent {...bs3HelpBlockProps} />} bs3={<PolymorphicComponent {...bs3HelpBlockProps} as={as} />}
bs5={<FormText {...rest} />} bs5={<FormText {...rest} as={as} />}
/> />
) )
} }

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

@ -100,13 +100,17 @@
} }
.form-text { .form-text {
display: inline-flex; margin-top: var(--spacing-02);
gap: $spacing-02;
line-height: var(--line-height-02);
.form-control[disabled] ~ & { .form-control[disabled] ~ & {
color: var(--content-disabled); color: var(--content-disabled);
} }
.form-text-inner {
display: flex;
gap: var(--spacing-02);
line-height: var(--line-height-02);
}
} }
.form-label { .form-label {