diff --git a/app/javascript/mastodon/components/form_fields/form_field_wrapper.module.scss b/app/javascript/mastodon/components/form_fields/form_field_wrapper.module.scss index cff93be8a69..43b672a2a14 100644 --- a/app/javascript/mastodon/components/form_fields/form_field_wrapper.module.scss +++ b/app/javascript/mastodon/components/form_fields/form_field_wrapper.module.scss @@ -48,10 +48,14 @@ .status { // If there's no content, we need to compensate for the parent's - // flex gap to avoid extra spacing below the field. + // flex gap to avoid extra spacing below or next to the field. &:empty { margin-top: calc(-1 * var(--form-field-label-gap)); } + + [data-input-placement^='inline'] &:empty { + margin-inline-start: calc(-1 * var(--form-field-label-gap)); + } } .inputWrapper { diff --git a/app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx b/app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx index ffa7f491bcf..579d6e814ca 100644 --- a/app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx +++ b/app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx @@ -24,7 +24,7 @@ export interface FieldStatus { message?: string; } -interface FieldWrapperProps { +export interface FieldWrapperProps { label: ReactNode; hint?: ReactNode; required?: boolean; diff --git a/app/javascript/mastodon/components/form_fields/select_field.tsx b/app/javascript/mastodon/components/form_fields/select_field.tsx index 7c1bfdf47d9..f2e9e5c8d35 100644 --- a/app/javascript/mastodon/components/form_fields/select_field.tsx +++ b/app/javascript/mastodon/components/form_fields/select_field.tsx @@ -4,11 +4,17 @@ import { forwardRef } from 'react'; import classNames from 'classnames'; import { FormFieldWrapper } from './form_field_wrapper'; -import type { CommonFieldWrapperProps } from './form_field_wrapper'; +import type { + CommonFieldWrapperProps, + FieldWrapperProps, +} from './form_field_wrapper'; import classes from './select.module.scss'; interface Props - extends ComponentPropsWithoutRef<'select'>, CommonFieldWrapperProps {} + extends + ComponentPropsWithoutRef<'select'>, + CommonFieldWrapperProps, + Pick {} /** * A simple form field for single-item selections. @@ -19,13 +25,28 @@ interface Props */ export const SelectField = forwardRef( - ({ id, label, hint, required, status, children, ...otherProps }, ref) => ( + ( + { + id, + label, + hint, + required, + status, + inputPlacement, + children, + wrapperClassName, + ...otherProps + }, + ref, + ) => ( {(inputProps) => (