Fix excessive left padding in input fields

This commit is contained in:
Florian Scholdei
2025-05-06 13:07:59 +02:00
parent 63aa914e79
commit 18102bc3db
3 changed files with 7 additions and 6 deletions

View File

@@ -0,0 +1,2 @@
- type: fixed
description: Excessive left padding in input fields

View File

@@ -15,6 +15,7 @@
*/
import React from "react";
import classNames from "classnames";
import Field from "../base/Field";
import Control from "../base/Control";
import Label from "../base/label/Label";
@@ -25,7 +26,6 @@ import { useAriaId } from "../../helpers";
export type InputFieldProps = {
label: string;
labelClassName?: string;
helpText?: string;
descriptionText?: string;
error?: string;
@@ -36,13 +36,13 @@ export type InputFieldProps = {
* @see https://bulma.io/documentation/form/input/
*/
const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
({ name, label, helpText, descriptionText, error, icon, className, labelClassName, id, ...props }, ref) => {
({ name, label, helpText, descriptionText, error, icon, className, id, ...props }, ref) => {
const inputId = useAriaId(id ?? props.testId);
const descriptionId = descriptionText ? `input-description-${name}` : undefined;
const variant = error ? "danger" : undefined;
return (
<Field className={className}>
<Label htmlFor={inputId} className={labelClassName}>
<Label htmlFor={inputId}>
{label}
{helpText ? <Help className="ml-1" text={helpText} /> : null}
</Label>
@@ -51,7 +51,7 @@ const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
{descriptionText}
</p>
) : null}
<Control className="has-icons-left">
<Control className={classNames({ "has-icons-left": icon })}>
<Input variant={variant} ref={ref} id={inputId} aria-describedby={descriptionId} {...props}></Input>
{icon ? (
<span className="icon is-small is-left">

View File

@@ -187,9 +187,8 @@ const FileSearch: FC<Props> = ({ repository, baseUrl, branches, selectedBranch }
<InputField
autoFocus={true}
placeholder={t("fileSearch.input.placeholder")}
className="is-full-width is-flex pr-2"
className="is-full-width is-flex pr-2 ml-2"
label=""
labelClassName="mr-2 mt-2"
defaultValue={query}
aria-describedby={fileSearchDescriptionId}
testId="file_search_filter_input"