github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #18103 from overleaf/ii-bs5-forms

Browse source 
[web] Bootstrap 5 form elements

GitOrigin-RevId: 7d031bed07007d0aa00a43f06d25bfb7384dee87
This commit is contained in:
ilkin-overleaf 2024-05-14 16:09:56 +03:00 committed by Copybot
parent b6093848af
commit 482bd7fb9c
28 changed files with 1478 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
services/web/frontend/js/features/settings/components/account-info-section.tsx
View file

@ -1,5 +1,4 @@
import { useState } from 'react'
import { ControlLabel, FormControl, FormGroup } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import {
getUserFacingMessage,
@ -11,6 +10,10 @@ import useAsync from '../../../shared/hooks/use-async'
import { useUserContext } from '../../../shared/context/user-context'
import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper'
import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
import FormGroupWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-group-wrapper'
import FormLabelWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-label-wrapper'
import FormControlWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-control-wrapper'
import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
function AccountInfoSection() {
const { t } = useTranslation()
@ -104,20 +107,20 @@ function AccountInfoSection() {
required={false}
/>
{isSuccess ? (
<FormGroup>
<FormGroupWrapper>
<NotificationWrapper
type="success"
content={t('thanks_settings_updated')}
/>
</FormGroup>
</FormGroupWrapper>
) : null}
{isError ? (
<FormGroup>
<FormGroupWrapper>
<NotificationWrapper
type="error"
content={getUserFacingMessage(error) ?? ''}
/>
</FormGroup>
</FormGroupWrapper>
) : null}
{canUpdateEmail || canUpdateNames ? (
<ButtonWrapper
@ -159,14 +162,12 @@ function ReadOrWriteFormGroup({
}: ReadOrWriteFormGroupProps) {
const [validationMessage, setValidationMessage] = useState('')
const handleInvalid = (
event: React.InvalidEvent<HTMLInputElement & FormControl>
) => {
const handleInvalid = (event: React.InvalidEvent<HTMLInputElement>) => {
event.preventDefault()
}
const handleChangeAndValidity = (
event: React.ChangeEvent<HTMLInputElement & FormControl>
event: React.ChangeEvent<HTMLInputElement>
) => {
handleChange(event)
setValidationMessage(event.target.validationMessage)
@ -174,18 +175,17 @@ function ReadOrWriteFormGroup({
if (!canEdit) {
return (
<FormGroup>
<ControlLabel htmlFor={id}>{label}</ControlLabel>
<FormControl id={id} type="text" readOnly value={value} />
</FormGroup>
<FormGroupWrapper controlId={id}>
<FormLabelWrapper>{label}</FormLabelWrapper>
<FormControlWrapper type="text" readOnly value={value} />
</FormGroupWrapper>
)
}
return (
<FormGroup>
<ControlLabel htmlFor={id}>{label}</ControlLabel>
<FormControl
id={id}
<FormGroupWrapper controlId={id}>
<FormLabelWrapper>{label}</FormLabelWrapper>
<FormControlWrapper
type={type}
required={required}
value={value}
@ -193,10 +193,8 @@ function ReadOrWriteFormGroup({
onChange={handleChangeAndValidity}
onInvalid={handleInvalid}
/>
{validationMessage ? (
<span className="small text-danger">{validationMessage}</span>
) : null}
</FormGroup>
{validationMessage && <FormText isError>{validationMessage}</FormText>}
</FormGroupWrapper>
)
}

5
services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx
View file

@ -4,6 +4,7 @@ import { useCombobox } from 'downshift'
import classnames from 'classnames'
import countries, { CountryCode } from '../../../data/countries-list'
import { bsVersion } from '@/features/utils/bootstrap-5'
import FormControlWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-control-wrapper'
type CountryInputProps = {
setValue: React.Dispatch<React.SetStateAction<CountryCode | null>>
@ -62,7 +63,7 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
>
{t('country')}
</label>
<input
<FormControlWrapper
{...getInputProps({
onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(event.target.value)
@ -74,8 +75,6 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
},
ref: inputRef,
})}
className="form-control"
type="text"
placeholder={t('country')}
/>
<i className="caret" />

20
services/web/frontend/js/features/settings/components/emails/add-email/input.tsx
View file

@ -11,6 +11,7 @@ import { getJSON } from '../../../../../infrastructure/fetch-json'
import useAbortController from '../../../../../shared/hooks/use-abort-controller'
import domainBlocklist from '../../../domain-blocklist'
import { debugConsole } from '@/utils/debugging'
import FormControlWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-control-wrapper'
const LOCAL_AND_DOMAIN_REGEX = /([^@]+)@(.+)/
@ -48,7 +49,7 @@ type InputProps = {
function Input({ onChange, handleAddNewEmail }: InputProps) {
const { signal } = useAbortController()
const inputRef = useRef<HTMLInputElement | null>(null)
const inputRef = useRef<HTMLInputElement>(null)
const [suggestion, setSuggestion] = useState<string | null>(null)
const [inputValue, setInputValue] = useState<string | null>(null)
const [matchedDomain, setMatchedDomain] = useState<DomainInfo | null>(null)
@ -161,15 +162,16 @@ function Input({ onChange, handleAddNewEmail }: InputProps) {
return (
<div className="input-suggestions">
<div className="form-control input-suggestions-shadow">
<div className="input-suggestions-shadow-suggested">
{suggestion || ''}
</div>
</div>
<input
<FormControlWrapper
data-testid="affiliations-email-shadow"
readOnly
className="input-suggestions-shadow"
value={suggestion || ''}
/>
<FormControlWrapper
id="affiliations-email"
className="form-control input-suggestions-main"
data-testid="affiliations-email"
className="input-suggestions-main"
type="email"
onChange={handleEmailChange}
onKeyDown={handleKeyDownEvent}

21
services/web/frontend/js/features/settings/components/emails/add-email/institution-fields.tsx
View file

@ -11,6 +11,7 @@ import { DomainInfo } from './input'
import { getJSON } from '../../../../../infrastructure/fetch-json'
import useAsync from '../../../../../shared/hooks/use-async'
import UniversityName from './university-name'
import FormGroupWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-group-wrapper'
type InstitutionFieldsProps = {
countryCode: CountryCode | null
@ -151,17 +152,15 @@ function InstitutionFields({
) : (
// Display the country and university fields
<>
<div className="form-group mb-2">
<FormGroupWrapper className="mb-2">
<CountryInput
id="new-email-country-input"
setValue={setCountryCode}
ref={countryRef}
/>
</div>
<div
className={`form-group ${
isRoleAndDepartmentVisible ? 'mb-2' : 'mb-0'
}`}
</FormGroupWrapper>
<FormGroupWrapper
className={isRoleAndDepartmentVisible ? 'mb-2' : 'mb-0'}
>
<DownshiftInput
items={getUniversityItems()}
@ -171,12 +170,12 @@ function InstitutionFields({
setValue={setUniversityName}
disabled={!countryCode}
/>
</div>
</FormGroupWrapper>
</>
)}
{isRoleAndDepartmentVisible && (
<>
<div className="form-group mb-2">
<FormGroupWrapper className="mb-2">
<DownshiftInput
items={[...defaultRoles]}
inputValue={role}
@ -184,8 +183,8 @@ function InstitutionFields({
label={t('role')}
setValue={setRole}
/>
</div>
<div className="form-group mb-0">
</FormGroupWrapper>
<FormGroupWrapper className="mb-0">
<DownshiftInput
items={departments}
inputValue={department}
@ -193,7 +192,7 @@ function InstitutionFields({
label={t('department')}
setValue={setDepartment}
/>
</div>
</FormGroupWrapper>
</>
)}
</>

5
services/web/frontend/js/features/settings/components/emails/downshift-input.tsx
View file

@ -3,6 +3,7 @@ import { useCombobox } from 'downshift'
import classnames from 'classnames'
import { escapeRegExp } from 'lodash'
import { bsVersion } from '@/features/utils/bootstrap-5'
import FormControlWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-control-wrapper'
type DownshiftInputProps = {
highlightMatches?: boolean
@ -97,7 +98,7 @@ function Downshift({
>
{label}
</label>
<input
<FormControlWrapper
{...getInputProps({
onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value)
@ -109,8 +110,6 @@ function Downshift({
},
ref: inputRef,
})}
className="form-control"
type="text"
placeholder={placeholder}
disabled={disabled}
/>

9
services/web/frontend/js/features/settings/components/emails/institution-and-role.tsx
View file

@ -10,6 +10,7 @@ import defaultRoles from '../../data/roles'
import defaultDepartments from '../../data/departments'
import { University } from '../../../../../../types/university'
import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper'
import FormGroupWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-group-wrapper'
type InstitutionAndRoleProps = {
userEmailData: UserEmailData
@ -120,7 +121,7 @@ function InstitutionAndRole({ userEmailData }: InstitutionAndRoleProps) {
) : (
<div className="affiliation-change-container small">
<form onSubmit={handleSubmit}>
<div className="form-group mb-2">
<FormGroupWrapper className="mb-2">
<DownshiftInput
items={[...defaultRoles]}
inputValue={role}
@ -129,8 +130,8 @@ function InstitutionAndRole({ userEmailData }: InstitutionAndRoleProps) {
setValue={setRole}
ref={roleRef}
/>
</div>
<div className="form-group mb-2">
</FormGroupWrapper>
<FormGroupWrapper className="mb-2">
<DownshiftInput
items={departments}
inputValue={department}
@ -138,7 +139,7 @@ function InstitutionAndRole({ userEmailData }: InstitutionAndRoleProps) {
label={t('department')}
setValue={setDepartment}
/>
</div>
</FormGroupWrapper>
<ButtonWrapper
size="small"
variant="primary"

39
services/web/frontend/js/features/settings/components/leave/modal-form.tsx
View file

@ -1,10 +1,13 @@
import { useState, useEffect, Dispatch, SetStateAction } from 'react'
import { Checkbox, ControlLabel, FormControl, FormGroup } from 'react-bootstrap'
import { useTranslation, Trans } from 'react-i18next'
import { postJSON, FetchError } from '../../../../infrastructure/fetch-json'
import getMeta from '../../../../utils/meta'
import LeaveModalFormError from './modal-form-error'
import { useLocation } from '../../../../shared/hooks/use-location'
import FormGroupWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-group-wrapper'
import FormLabelWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-label-wrapper'
import FormControlWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-control-wrapper'
import FormCheckboxWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-checkbox-wrapper'
export type LeaveModalFormProps = {
setInFlight: Dispatch<SetStateAction<boolean>>
@ -26,15 +29,11 @@ function LeaveModalForm({
const [confirmation, setConfirmation] = useState(false)
const [error, setError] = useState<FetchError | null>(null)
const handleEmailChange = (
event: React.ChangeEvent<HTMLFormElement & FormControl>
) => {
const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setEmail(event.target.value)
}
const handlePasswordChange = (
event: React.ChangeEvent<HTMLFormElement & FormControl>
) => {
const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setPassword(event.target.value)
}
@ -74,33 +73,32 @@ function LeaveModalForm({
return (
<form id="leave-form" onSubmit={handleSubmit}>
<FormGroup>
<ControlLabel htmlFor="email-input">{t('email')}</ControlLabel>
<FormControl
id="email-input"
<FormGroupWrapper controlId="email-input">
<FormLabelWrapper>{t('email')}</FormLabelWrapper>
<FormControlWrapper
type="text"
placeholder={t('email')}
required
value={email}
onChange={handleEmailChange}
/>
</FormGroup>
<FormGroup>
<ControlLabel htmlFor="password-input">{t('password')}</ControlLabel>
<FormControl
id="password-input"
</FormGroupWrapper>
<FormGroupWrapper controlId="password-input">
<FormLabelWrapper>{t('password')}</FormLabelWrapper>
<FormControlWrapper
type="password"
placeholder={t('password')}
required
value={password}
onChange={handlePasswordChange}
/>
</FormGroup>
<Checkbox
</FormGroupWrapper>
<FormCheckboxWrapper
id="confirm-account-deletion"
required
checked={confirmation}
onChange={handleConfirmationChange}
>
label={
<Trans
i18nKey="delete_account_confirmation_label"
components={[<i />]} // eslint-disable-line react/jsx-key
@ -110,7 +108,8 @@ function LeaveModalForm({
shouldUnescape
tOptions={{ interpolation: { escapeValue: true } }}
/>
</Checkbox>
}
/>
{error ? <LeaveModalFormError error={error} /> : null}
</form>
)

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

@ -1,5 +1,4 @@
import { useEffect, useState } from 'react'
import { ControlLabel, FormControl, FormGroup } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import {
getUserFacingMessage,
@ -12,6 +11,10 @@ import { PasswordStrengthOptions } from '../../../../../types/password-strength-
import useAsync from '../../../shared/hooks/use-async'
import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper'
import NotificationWrapper from '@/features/ui/components/bootstrap-5/wrappers/notification-wrapper'
import FormGroupWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-group-wrapper'
import FormLabelWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-label-wrapper'
import FormControlWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-control-wrapper'
import FormTextWrapper from '@/features/ui/components/bootstrap-5/wrappers/form-text-wrapper'
type PasswordUpdateResult = {
message?: {
@ -156,12 +159,12 @@ function PasswordForm() {
autoComplete="new-password"
/>
{isSuccess && data?.message?.text ? (
<FormGroup>
<FormGroupWrapper>
<NotificationWrapper type="success" content={data.message.text} />
</FormGroup>
</FormGroupWrapper>
) : null}
{isError ? (
<FormGroup>
<FormGroupWrapper>
<NotificationWrapper
type="error"
content={
@ -195,7 +198,7 @@ function PasswordForm() {
)
}
/>
</FormGroup>
</FormGroupWrapper>
) : null}
<ButtonWrapper
form="password-change-form"
@ -235,25 +238,26 @@ function PasswordFormGroup({
const [validationMessage, setValidationMessage] = useState('')
const [hadInteraction, setHadInteraction] = useState(false)
const handleInvalid = (
event: React.InvalidEvent<HTMLInputElement & FormControl>
) => {
const handleInvalid = (event: React.InvalidEvent<HTMLInputElement>) => {
event.preventDefault()
}
const handleChangeAndValidity = (
event: React.ChangeEvent<HTMLInputElement & FormControl>
event: React.ChangeEvent<HTMLInputElement>
) => {
handleChange(event)
setHadInteraction(true)
setValidationMessage(event.target.validationMessage)
}
const isInvalid = Boolean(
hadInteraction && (parentValidationMessage || validationMessage)
)
return (
<FormGroup>
<ControlLabel htmlFor={id}>{label}</ControlLabel>
<FormControl
id={id}
<FormGroupWrapper controlId={id}>
<FormLabelWrapper>{label}</FormLabelWrapper>
<FormControlWrapper
type="password"
placeholder="*********"
autoComplete={autoComplete}
@ -263,13 +267,14 @@ function PasswordFormGroup({
onInvalid={handleInvalid}
required={hadInteraction}
minLength={minLength}
isInvalid={isInvalid}
/>
{hadInteraction && (parentValidationMessage || validationMessage) ? (
<span className="small text-danger">
{isInvalid && (
<FormTextWrapper isError>
{parentValidationMessage || validationMessage}
</span>
) : null}
</FormGroup>
</FormTextWrapper>
)}
</FormGroupWrapper>
)
}

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

@ -0,0 +1,74 @@
import { Form } from 'react-bootstrap-5'
import { MergeAndOverride } from '../../../../../../../types/utils'
import MaterialIcon from '@/shared/components/material-icon'
import classnames from 'classnames'
type FormTextProps = MergeAndOverride<
React.ComponentProps<(typeof Form)['Text']>,
| {
isInfo?: boolean
isError?: never
isWarning?: never
isSuccess?: never
}
| {
isInfo?: never
isError?: boolean
isWarning?: never
isSuccess?: never
}
| {
isInfo?: never
isError?: never
isWarning?: boolean
isSuccess?: never
}
| {
isInfo?: never
isError?: never
isWarning?: never
isSuccess?: boolean
}
>
export const getFormTextColor = ({
isError,
isSuccess,
isWarning,
}: {
isError?: boolean
isSuccess?: boolean
isWarning?: boolean
}) => ({
'text-danger': isError,
'text-success': isSuccess,
'text-warning': isWarning,
})
function FormText({
isInfo,
isError,
isWarning,
isSuccess,
children,
className,
...rest
}: FormTextProps) {
return (
<Form.Text
className={classnames(
className,
getFormTextColor({ isError, isSuccess, isWarning })
)}
{...rest}
>
{isInfo && <MaterialIcon type="info" className="text-info" />}
{isError && <MaterialIcon type="error" />}
{isWarning && <MaterialIcon type="warning" />}
{isSuccess && <MaterialIcon type="check_circle" />}
{children}
</Form.Text>
)
}
export default FormText

32
services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/form-checkbox-wrapper.tsx Normal file
View file

@ -0,0 +1,32 @@
import { Form } from 'react-bootstrap-5'
import { Checkbox as BS3Checkbox } from 'react-bootstrap'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
type FormCheckboxWrapperProps = React.ComponentProps<(typeof Form)['Check']> & {
bs3Props?: Record<string, unknown>
}
function FormCheckboxWrapper(props: FormCheckboxWrapperProps) {
const { bs3Props, ...rest } = props
const bs3FormLabelProps: React.ComponentProps<typeof BS3Checkbox> = {
children: rest.label,
checked: rest.checked,
required: rest.required,
readOnly: rest.readOnly,
disabled: rest.disabled,
inline: rest.inline,
title: rest.title,
onChange: rest.onChange as (e: React.ChangeEvent<unknown>) => void,
...bs3Props,
}
return (
<BootstrapVersionSwitcher
bs3={<BS3Checkbox {...bs3FormLabelProps} />}
bs5={<Form.Check {...rest} />}
/>
)
}
export default FormCheckboxWrapper

71
services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/form-control-wrapper.tsx Normal file
View file

@ -0,0 +1,71 @@
import { forwardRef } from 'react'
import { Form } from 'react-bootstrap-5'
import { FormControl as BS3FormControl } from 'react-bootstrap'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
type FormControlWrapperProps = React.ComponentProps<
(typeof Form)['Control']
> & {
bs3Props?: Record<string, unknown>
}
const FormControlWrapper = forwardRef<
HTMLInputElement,
FormControlWrapperProps
>((props, ref) => {
const { bs3Props, ...rest } = props
let bs3FormControlProps: React.ComponentProps<typeof BS3FormControl> = {
id: rest.id,
className: rest.className,
style: rest.style,
type: rest.type,
value: rest.value,
required: rest.required,
disabled: rest.disabled,
placeholder: rest.placeholder,
readOnly: rest.readOnly,
autoComplete: rest.autoComplete,
minLength: rest.minLength,
maxLength: rest.maxLength,
onChange: rest.onChange as (e: React.ChangeEvent<unknown>) => void,
onKeyDown: rest.onKeyDown as (e: React.KeyboardEvent<unknown>) => void,
onFocus: rest.onFocus as (e: React.FocusEvent<unknown>) => void,
onInvalid: rest.onInvalid as (e: React.InvalidEvent<unknown>) => void,
inputRef: (inputElement: HTMLInputElement) => {
if (typeof ref === 'function') {
ref(inputElement)
} else if (ref) {
ref.current = inputElement
}
},
...bs3Props,
}
// get all `aria-*` and `data-*` attributes
const extraProps = Object.entries(rest).reduce(
(acc, [key, value]) => {
if (key.startsWith('aria-') || key.startsWith('data-')) {
acc[key] = value
}
return acc
},
{} as Record<string, string>
)
bs3FormControlProps = {
...bs3FormControlProps,
...extraProps,
'data-ol-dirty': rest['data-ol-dirty'],
} as typeof bs3FormControlProps & Record<string, unknown>
return (
<BootstrapVersionSwitcher
bs3={<BS3FormControl {...bs3FormControlProps} />}
bs5={<Form.Control ref={ref} {...rest} />}
/>
)
})
FormControlWrapper.displayName = 'FormControlWrapper'
export default FormControlWrapper

29
services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/form-group-wrapper.tsx Normal file
View file

@ -0,0 +1,29 @@
import { Form } from 'react-bootstrap-5'
import { FormGroup as BS3FormGroup } from 'react-bootstrap'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
type FormGroupWrapperProps = React.ComponentProps<(typeof Form)['Group']> & {
bs3Props?: Record<string, unknown>
}
function FormGroupWrapper(props: FormGroupWrapperProps) {
const { bs3Props, className, ...rest } = props
const classNames = className ?? 'mb-3'
const bs3FormGroupProps: React.ComponentProps<typeof BS3FormGroup> = {
children: rest.children,
controlId: rest.controlId,
className,
...bs3Props,
}
return (
<BootstrapVersionSwitcher
bs3={<BS3FormGroup {...bs3FormGroupProps} />}
bs5={<Form.Group className={classNames} {...rest} />}
/>
)
}
export default FormGroupWrapper

27
services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/form-label-wrapper.tsx Normal file
View file

@ -0,0 +1,27 @@
import { Form } from 'react-bootstrap-5'
import { ControlLabel as BS3FormLabel } from 'react-bootstrap'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
type FormLabelWrapperProps = React.ComponentProps<(typeof Form)['Label']> & {
bs3Props?: Record<string, unknown>
}
function FormLabelWrapper(props: FormLabelWrapperProps) {
const { bs3Props, ...rest } = props
const bs3FormLabelProps: React.ComponentProps<typeof BS3FormLabel> = {
children: rest.children,
htmlFor: rest.htmlFor,
srOnly: rest.visuallyHidden,
...bs3Props,
}
return (
<BootstrapVersionSwitcher
bs3={<BS3FormLabel {...bs3FormLabelProps} />}
bs5={<Form.Label {...rest} />}
/>
)
}
export default FormLabelWrapper

38
services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/form-text-wrapper.tsx Normal file
View file

@ -0,0 +1,38 @@
import FormText, {
getFormTextColor,
} from '@/features/ui/components/bootstrap-5/form/form-text'
import PolymorphicComponent from '@/shared/components/polymorphic-component'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import classnames from 'classnames'
type FormTextWrapperProps = React.ComponentProps<typeof FormText> & {
bs3Props?: Record<string, unknown>
}
function FormTextWrapper(props: FormTextWrapperProps) {
const { bs3Props, ...rest } = props
const bs3HelpBlockProps = {
children: rest.children,
className: classnames(
'small',
rest.className,
getFormTextColor({
isError: rest.isError,
isSuccess: rest.isSuccess,
isWarning: rest.isWarning,
})
),
as: 'span',
...bs3Props,
} as const satisfies React.ComponentProps<typeof PolymorphicComponent>
return (
<BootstrapVersionSwitcher
bs3={<PolymorphicComponent {...bs3HelpBlockProps} />}
bs5={<FormText {...rest} />}
/>
)
}
export default FormTextWrapper

65
services/web/frontend/stories/ui/form/form-check-bs5.stories.tsx Normal file
View file

@ -0,0 +1,65 @@
import { useRef, useLayoutEffect } from 'react'
import { Form } from 'react-bootstrap-5'
import type { Meta, StoryObj } from '@storybook/react'
const meta: Meta<(typeof Form)['Check']> = {
title: 'Shared / Components / Bootstrap 5 / Form',
component: Form.Check,
parameters: {
bootstrap5: true,
},
argTypes: {
id: {
table: {
disable: true,
},
},
label: {
table: {
disable: true,
},
},
defaultChecked: {
table: {
disable: true,
},
},
},
}
export default meta
type Story = StoryObj<(typeof Form)['Check']>
export const Checkbox: Story = {
args: {
id: 'id-1',
label: 'Label',
disabled: false,
},
}
export const CheckboxChecked: Story = {
args: {
id: 'id-1',
label: 'Label',
disabled: false,
defaultChecked: true,
},
}
export const CheckboxIndeterminate = (args: Story['args']) => {
const ref = useRef<HTMLInputElement>()
useLayoutEffect(() => {
if (ref.current) {
ref.current.indeterminate = true
}
}, [])
return <Form.Check ref={ref} {...args} />
}
CheckboxIndeterminate.args = {
id: 'id-2',
label: 'Label',
disabled: false,
}

206
services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx Normal file
View file

@ -0,0 +1,206 @@
import { Form } from 'react-bootstrap-5'
import type { Meta, StoryObj } from '@storybook/react'
import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
const meta: Meta<(typeof Form)['Control']> = {
title: 'Shared / Components / Bootstrap 5 / Form / Input',
component: Form.Control,
parameters: {
bootstrap5: true,
},
}
export default meta
type Story = StoryObj<(typeof Form)['Control']>
export const Default: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Control defaultValue="Large input" size="lg" {...args} />
<FormText>Helper</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Control defaultValue="Regular input" {...args} />
<FormText>Helper</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Control defaultValue="Small input" size="sm" {...args} />
<FormText>Helper</FormText>
</Form.Group>
</>
)
},
}
Default.args = {
disabled: false,
}
export const Info: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText isInfo>Info</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText isInfo>Info</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText isInfo>Info</FormText>
</Form.Group>
</>
)
},
}
export const Error: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
isInvalid
{...args}
/>
<FormText isError>Error</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Regular input"
isInvalid
{...args}
/>
<FormText isError>Error</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
isInvalid
{...args}
/>
<FormText isError>Error</FormText>
</Form.Group>
</>
)
},
}
export const Warning: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText isWarning>Warning</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText isWarning>Warning</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText isWarning>Warning</FormText>
</Form.Group>
</>
)
},
}
export const Success: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText isSuccess>Success</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText isSuccess>Success</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Control
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText isSuccess>Success</FormText>
</Form.Group>
</>
)
},
}

54
services/web/frontend/stories/ui/form/form-radio-bs5.stories.tsx Normal file
View file

@ -0,0 +1,54 @@
import { Form } from 'react-bootstrap-5'
import type { Meta, StoryObj } from '@storybook/react'
const meta: Meta<(typeof Form)['Check']> = {
title: 'Shared / Components / Bootstrap 5 / Form',
component: Form.Check,
parameters: {
bootstrap5: true,
},
argTypes: {
id: {
table: {
disable: true,
},
},
label: {
table: {
disable: true,
},
},
type: {
table: {
disable: true,
},
},
defaultChecked: {
table: {
disable: true,
},
},
},
}
export default meta
type Story = StoryObj<(typeof Form)['Check']>
export const Radio: Story = {
args: {
id: 'id-1',
type: 'radio',
label: 'Label',
disabled: false,
},
}
export const RadioChecked: Story = {
args: {
id: 'id-1',
type: 'radio',
label: 'Label',
disabled: false,
defaultChecked: true,
},
}

222
services/web/frontend/stories/ui/form/form-select-bs5.stories.tsx Normal file
View file

@ -0,0 +1,222 @@
import { Form } from 'react-bootstrap-5'
import type { Meta, StoryObj } from '@storybook/react'
import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
const meta: Meta<(typeof Form)['Select']> = {
title: 'Shared / Components / Bootstrap 5 / Form / Select',
component: Form.Select,
parameters: {
bootstrap5: true,
},
}
export default meta
type Story = StoryObj<(typeof Form)['Select']>
export const Default: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Select size="lg" {...args}>
<option>Large select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText>Helper</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Select {...args}>
<option>Regular select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText>Helper</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Select size="sm" {...args}>
<option>Small select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText>Helper</FormText>
</Form.Group>
</>
)
},
}
Default.args = {
disabled: false,
}
export const Info: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Select size="lg" {...args}>
<option>Large select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isInfo>Info</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Select {...args}>
<option>Regular select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isInfo>Info</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Select size="sm" {...args}>
<option>Small select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isInfo>Info</FormText>
</Form.Group>
</>
)
},
}
export const Error: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Select size="lg" isInvalid {...args}>
<option>Large select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isError>Error</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Select isInvalid {...args}>
<option>Regular select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isError>Error</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Select size="sm" isInvalid {...args}>
<option>Small select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isError>Error</FormText>
</Form.Group>
</>
)
},
}
export const Warning: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Select size="lg" {...args}>
<option>Large select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isWarning>Warning</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Select {...args}>
<option>Regular select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isWarning>Warning</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Select size="sm" {...args}>
<option>Small select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isWarning>Warning</FormText>
</Form.Group>
</>
)
},
}
export const Success: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Select size="lg" isSuccess {...args}>
<option>Large select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isSuccess>Success</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Select isSuccess {...args}>
<option>Regular select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isSuccess>Success</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Select size="sm" isSuccess {...args}>
<option>Small select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText isSuccess>Success</FormText>
</Form.Group>
</>
)
},
}

228
services/web/frontend/stories/ui/form/form-textarea-bs5.stories.tsx Normal file
View file

@ -0,0 +1,228 @@
import { Form } from 'react-bootstrap-5'
import type { Meta, StoryObj } from '@storybook/react'
import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
const meta: Meta<(typeof Form)['Control']> = {
title: 'Shared / Components / Bootstrap 5 / Form / Textarea',
component: Form.Control,
parameters: {
bootstrap5: true,
},
}
export default meta
type Story = StoryObj<(typeof Form)['Control']>
export const Default: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText>Helper</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Control as="textarea" defaultValue="Regular input" {...args} />
<FormText>Helper</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText>Helper</FormText>
</Form.Group>
</>
)
},
}
Default.args = {
disabled: false,
}
export const Info: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText isInfo>Info</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText isInfo>Info</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText isInfo>Info</FormText>
</Form.Group>
</>
)
},
}
export const Error: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
isInvalid
{...args}
/>
<FormText isError>Error</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Regular input"
isInvalid
{...args}
/>
<FormText isError>Error</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
isInvalid
{...args}
/>
<FormText isError>Error</FormText>
</Form.Group>
</>
)
},
}
export const Warning: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText isWarning>Warning</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText isWarning>Warning</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText isWarning>Warning</FormText>
</Form.Group>
</>
)
},
}
export const Success: Story = {
render: args => {
return (
<>
<Form.Group controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText isSuccess>Success</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText isSuccess>Success</FormText>
</Form.Group>
<hr />
<Form.Group controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Control
as="textarea"
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText isSuccess>Success</FormText>
</Form.Group>
</>
)
},
}

111
services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
View file

@ -2,6 +2,12 @@
$prefix: bs-;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-validation-icons: false;
// Fonts
$font-family-sans-serif: 'Noto Sans', sans-serif;
$font-family-serif: 'Merriweather', serif;
@ -10,6 +16,15 @@ $font-size-base: 1rem;
$font-size-sm: var(--font-size-02);
$line-height-base: 1.5;
// Components
//
// Define common padding and border radius sizes and more.
$focus-ring-width: 2px;
$focus-ring-opacity: 1;
$focus-ring-color: $blue-30;
$focus-ring-blur: 0;
// Buttons
$btn-font-family: $font-family-sans-serif;
$btn-font-weight: 700;
@ -20,9 +35,105 @@ $btn-border-radius-lg: $border-radius-full;
$btn-border-radius-sm: $border-radius-full;
$btn-white-space: nowrap;
// Forms
// form-text-variables
$form-text-margin-top: $spacing-04;
$form-text-font-size: var(--font-size-02);
$form-text-color: var(--content-secondary);
// form-label-variables
$form-label-margin-bottom: $spacing-02;
$form-label-font-size: var(--font-size-02);
$form-label-font-weight: 600;
$form-label-color: var(--content-secondary);
// form-input-variables
$input-padding-y: $spacing-03;
$input-padding-x: $spacing-04;
$input-font-size: var(--font-size-03);
$input-line-height: 1.5; // equivalent of var(--line-height-03) - BS expects a unitless value for further calculations
$input-padding-y-sm: $spacing-01;
$input-padding-x-sm: $spacing-03;
$input-font-size-sm: var(--font-size-02);
$input-line-height-sm: 1.25; // equivalent of var(--line-height-02) - BS expects a unitless value for further calculations
$input-padding-y-lg: $spacing-05;
$input-padding-x-lg: $spacing-05;
$input-font-size-lg: var(--font-size-03);
$input-bg: $bg-light-primary;
$input-disabled-color: var(--content-disabled);
$input-disabled-bg: $bg-light-disabled;
$input-disabled-border-color: var(--border-disabled);
$input-color: $content-primary;
$input-border-color: $neutral-60;
$input-border-width: var(--bs-border-width);
$input-border-radius: $border-radius-base;
$input-border-radius-sm: $border-radius-base;
$input-border-radius-lg: $border-radius-base;
$input-focus-border-color: var(--border-active);
$input-placeholder-color: var(--content-placeholder);
$input-plaintext-color: $content-primary;
$input-height-border: calc(
#{$input-border-width} * 2
); // stylelint-disable-line function-disallowed-list
$input-height: add(
$input-line-height * 1em,
add($input-padding-y * 2, $input-height-border, false)
);
$input-height-sm: add(
$input-line-height-sm * 1em,
add($input-padding-y-sm * 2, $input-height-border, false)
);
$input-height-lg: add(
$input-line-height * 1em,
add($input-padding-y-lg * 2, $input-height-border, false)
);
// form-check-variables
$form-check-label-color: var(--content-primary);
$form-check-input-border: var(--bs-border-width) solid var(--border-primary);
$form-check-input-border-radius: $border-radius-base;
$form-check-input-focus-border: var(--border-primary);
$form-check-input-disabled-opacity: 1;
// Form validation
// form-feedback-variables
$form-feedback-invalid-color: $bg-danger-01;
$form-feedback-icon-invalid: null;
// form-validation-colors
$form-invalid-color: $form-feedback-invalid-color;
$form-invalid-border-color: $bg-danger-01;
// form-validation-states
$form-validation-states: (
'invalid': (
'color': $bg-danger-01,
'icon': $form-feedback-icon-invalid,
'tooltip-color': #fff,
'tooltip-bg-color': var(--bs-danger),
'focus-box-shadow': 0 0 $focus-ring-blur $focus-ring-width
rgba($red-30, $focus-ring-opacity),
'border-color': var(--#{$prefix}form-invalid-border-color),
),
);
// Colors
$primary: $bg-accent-01;
$secondary: $bg-light-primary;
$success: $bg-accent-01;
$info: $bg-info-01;
$warning: $bg-warning-01;
$danger: $bg-danger-01;

4
services/web/frontend/stylesheets/bootstrap-5/base/base.scss Normal file
View file

@ -0,0 +1,4 @@
.grecaptcha-badge {
visibility: hidden;
height: 0 !important; // Prevent layout shift
}

1
services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss vendored
View file

@ -26,6 +26,7 @@
@import 'bootstrap-5/scss/images';
@import 'bootstrap-5/scss/containers';
@import 'bootstrap-5/scss/grid';
@import 'bootstrap-5/scss/forms';
@import 'bootstrap-5/scss/buttons';
@import 'bootstrap-5/scss/dropdown';
@import 'bootstrap-5/scss/badge';

2
services/web/frontend/stylesheets/bootstrap-5/components/all.scss
View file

@ -5,4 +5,6 @@
@import 'tooltip';
@import 'card';
@import 'badge';
@import 'form';
@import 'input-suggestions';
@import 'footer';

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

@ -0,0 +1,82 @@
.form-check-input {
@function form-check-box-svg($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
}
@function form-check-radio-svg($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$color}'/></svg>");
}
@function form-check-indeterminate-svg($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
}
&:hover {
&:not(:disabled) {
border-color: var(--border-hover);
&:checked,
&[type='checkbox']:indeterminate {
background-color: var(--bg-accent-02);
border-color: var(--bg-accent-02);
}
}
}
&:disabled {
@mixin input-disabled-styles {
background-color: $input-disabled-bg;
border-color: $input-disabled-border-color;
}
@include input-disabled-styles;
&[type='checkbox']:indeterminate {
@include input-disabled-styles;
background-image: escape-svg(form-check-indeterminate-svg($neutral-40));
}
}
// Use disabled attribute in addition of :disabled pseudo-class
// See: https://github.com/twbs/bootstrap/issues/28247
&[disabled],
&:disabled {
~ .form-check-label {
color: $input-disabled-color;
}
&:checked {
&[type='checkbox'] {
background-image: escape-svg(form-check-box-svg($neutral-40));
}
&[type='radio'] {
background-image: escape-svg(form-check-radio-svg($neutral-40));
}
}
}
}
.form-control {
&[disabled],
&:disabled {
&::placeholder {
color: var(--content-disabled);
}
}
}
.form-text {
display: inline-flex;
gap: $spacing-02;
line-height: var(--line-height-02);
.form-control[disabled] ~ & {
color: var(--content-disabled);
}
}
.form-label {
&:has(+ .form-control[disabled]) {
color: var(--content-disabled);
}
}

20
services/web/frontend/stylesheets/bootstrap-5/components/input-suggestions.scss Normal file
View file

@ -0,0 +1,20 @@
.input-suggestions {
position: relative;
}
.input-suggestions-main {
position: absolute;
top: 0;
background-color: transparent;
}
.input-suggestions-shadow {
background-color: $input-bg;
color: var(--content-placeholder);
& + .input-suggestions-main {
&:focus {
background-color: transparent;
}
}
}

1
services/web/frontend/stylesheets/bootstrap-5/main-style.scss
View file

@ -28,6 +28,7 @@ $is-overleaf-light: false;
// Link styles
@import 'base/links';
@import 'base/base';
// Page layout that isn't related to a particular component or page
@import 'base/layout';

11
services/web/frontend/stylesheets/components/input-suggestions.less
View file

@ -1,7 +1,7 @@
.input-suggestions {
position: relative;
height: @input-height-base;
}
.input-suggestions-main {
position: absolute;
top: 0;
@ -9,13 +9,6 @@
}
.input-suggestions-shadow {
background-color: @input-bg;
padding-top: @input-suggestion-v-offset;
}
.input-suggestions-shadow-existing {
color: transparent;
}
.input-suggestions-shadow-suggested {
background-color: @input-bg !important;
color: lighten(@input-color, 25%);
}

156
services/web/test/frontend/features/settings/components/emails/add-email-input.test.tsx
View file

@ -1,9 +1,4 @@
import {
fireEvent,
render,
screen,
waitForElementToBeRemoved,
} from '@testing-library/react'
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { expect } from 'chai'
import sinon from 'sinon'
import fetchMock from 'fetch-mock'
@ -55,19 +50,19 @@ describe('<AddEmailInput/>', function () {
handleAddNewEmail={handleAddNewEmailStub}
/>
)
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user' },
})
})
it('should render the text being typed', function () {
const input = screen.getByRole('textbox') as HTMLInputElement
const input = screen.getByTestId('affiliations-email') as HTMLInputElement
expect(input.value).to.equal('user')
})
it('should dispatch a `change` event on every stroke', function () {
expect(onChangeStub.calledWith('user')).to.equal(true)
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 's' },
})
expect(onChangeStub.calledWith('s')).to.equal(true)
@ -78,18 +73,22 @@ describe('<AddEmailInput/>', function () {
})
it('should submit on Enter if email looks valid', async function () {
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@domain.com' },
})
fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' })
fireEvent.keyDown(screen.getByTestId('affiliations-email'), {
key: 'Enter',
})
expect(handleAddNewEmailStub.calledWith()).to.equal(true)
})
it('should not submit on Enter if email does not look valid', async function () {
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@' },
})
fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' })
fireEvent.keyDown(screen.getByTestId('affiliations-email'), {
key: 'Enter',
})
expect(handleAddNewEmailStub.calledWith()).to.equal(false)
})
})
@ -105,13 +104,15 @@ describe('<AddEmailInput/>', function () {
describe('when there are no matches', function () {
beforeEach(function () {
fetchMock.get('express:/institutions/domains', 200)
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@d' },
})
})
it('should render the text being typed', function () {
const input = screen.getByRole('textbox') as HTMLInputElement
const input = screen.getByTestId(
'affiliations-email'
) as HTMLInputElement
expect(input.value).to.equal('user@d')
})
})
@ -119,15 +120,22 @@ describe('<AddEmailInput/>', function () {
describe('when there is a domain match', function () {
beforeEach(function () {
fetchMock.get('express:/institutions/domains', testInstitutionData)
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@d' },
})
})
it('should render the text being typed along with the suggestion', async function () {
const input = screen.getByRole('textbox') as HTMLInputElement
const input = screen.getByTestId(
'affiliations-email'
) as HTMLInputElement
expect(input.value).to.equal('user@d')
await screen.findByText('user@domain.edu')
await waitFor(() => {
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('user@domain.edu')
})
})
it('should dispatch a `change` event with the typed text', function () {
@ -135,7 +143,7 @@ describe('<AddEmailInput/>', function () {
})
it('should dispatch a `change` event with institution data when the typed email contains the institution domain', async function () {
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@domain.edu' },
})
await fetchMock.flush(true)
@ -148,8 +156,13 @@ describe('<AddEmailInput/>', function () {
})
it('should clear the suggestion when the potential domain match is completely deleted', async function () {
await screen.findByText('user@domain.edu')
fireEvent.change(screen.getByRole('textbox'), {
await waitFor(() => {
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('user@domain.edu')
})
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: '' },
})
expect(screen.queryByText('user@domain.edu')).to.be.null
@ -157,12 +170,22 @@ describe('<AddEmailInput/>', function () {
describe('when there is a suggestion and "Tab" key is pressed', function () {
beforeEach(async function () {
await screen.findByText('user@domain.edu') // wait until autocompletion available
fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Tab' })
// wait until autocompletion available
await waitFor(() => {
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('user@domain.edu')
})
fireEvent.keyDown(screen.getByTestId('affiliations-email'), {
key: 'Tab',
})
})
it('it should autocomplete the input', async function () {
const input = screen.getByRole('textbox') as HTMLInputElement
const input = screen.getByTestId(
'affiliations-email'
) as HTMLInputElement
expect(input.value).to.equal('user@domain.edu')
})
@ -178,12 +201,22 @@ describe('<AddEmailInput/>', function () {
describe('when there is a suggestion and "Enter" key is pressed', function () {
beforeEach(async function () {
await screen.findByText('user@domain.edu') // wait until autocompletion available
fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' })
// wait until autocompletion available
await waitFor(() => {
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('user@domain.edu')
})
fireEvent.keyDown(screen.getByTestId('affiliations-email'), {
key: 'Enter',
})
})
it('it should autocomplete the input', async function () {
const input = screen.getByRole('textbox') as HTMLInputElement
const input = screen.getByTestId(
'affiliations-email'
) as HTMLInputElement
expect(input.value).to.equal('user@domain.edu')
})
@ -201,17 +234,22 @@ describe('<AddEmailInput/>', function () {
fetchMock.reset()
// clear input
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: '' },
})
// type a hint to trigger the domain search
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@d' },
})
expect(fetchMock.called()).to.be.false
expect(onChangeStub.calledWith('user@d')).to.equal(true)
await screen.findByText('user@domain.edu')
await waitFor(() => {
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('user@domain.edu')
})
})
})
@ -228,7 +266,7 @@ describe('<AddEmailInput/>', function () {
{ university: { id: 1 }, hostname: blockedDomain },
]
fetchMock.get('express:/institutions/domains', blockedInstitution)
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: `user@${blockedDomain.split('.')[0]}` },
})
await fetchMock.flush(true)
@ -243,7 +281,7 @@ describe('<AddEmailInput/>', function () {
},
]
fetchMock.get('express:/institutions/domains', blockedInstitution)
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: {
value: `user@subdomain.${blockedDomain.split('.')[0]}`,
},
@ -257,10 +295,15 @@ describe('<AddEmailInput/>', function () {
beforeEach(async function () {
// type an initial suggestion
fetchMock.get('express:/institutions/domains', testInstitutionData)
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@d' },
})
await screen.findByText('user@domain.edu')
await waitFor(() => {
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('user@domain.edu')
})
// make sure the next suggestions are delayed
clearDomainCache()
@ -269,17 +312,25 @@ describe('<AddEmailInput/>', function () {
})
it('should keep the suggestion if the hint matches the previously matched domain', async function () {
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@do' },
})
screen.getByText('user@domain.edu')
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('user@domain.edu')
})
it('should remove the suggestion if the hint does not match the previously matched domain', async function () {
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@foo' },
})
expect(screen.queryByText('user@domain.edu')).to.be.null
await waitFor(() => {
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('')
})
})
})
})
@ -292,10 +343,15 @@ describe('<AddEmailInput/>', function () {
fetchMock.get('express:/institutions/domains', testInstitutionData)
onChangeStub = sinon.stub()
render(<Input {...defaultProps} onChange={onChangeStub} />)
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@d' },
})
await screen.findByText('user@domain.edu')
await waitFor(() => {
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('user@domain.edu')
})
// subsequent requests fail
fetchMock.reset()
@ -303,16 +359,19 @@ describe('<AddEmailInput/>', function () {
})
it('should clear suggestions', async function () {
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@dom' },
})
const input = screen.getByRole('textbox') as HTMLInputElement
const input = screen.getByTestId('affiliations-email') as HTMLInputElement
expect(input.value).to.equal('user@dom')
await waitForElementToBeRemoved(() =>
screen.queryByText('user@domain.edu')
)
await waitFor(() => {
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('')
})
expect(fetchMock.called()).to.be.true // ensures `domainCache` hasn't been hit
})
@ -322,11 +381,14 @@ describe('<AddEmailInput/>', function () {
it('should clear suggestion', async function () {
fetchMock.get('express:/institutions/domains', testInstitutionData)
render(<Input {...defaultProps} onChange={sinon.stub()} />)
fireEvent.change(screen.getByRole('textbox'), {
fireEvent.change(screen.getByTestId('affiliations-email'), {
target: { value: 'user@other' },
})
await fetchMock.flush(true)
expect(screen.queryByText('user@domain.edu')).to.not.exist
const shadowInput = screen.getByTestId(
'affiliations-email-shadow'
) as HTMLInputElement
expect(shadowInput.value).to.equal('')
})
})
})