diff --git a/common-react/@dbeaver/ui-kit/src/Input/Input.tsx b/common-react/@dbeaver/ui-kit/src/Input/Input.tsx index 3fe991c3fc..ed40e9936a 100644 --- a/common-react/@dbeaver/ui-kit/src/Input/Input.tsx +++ b/common-react/@dbeaver/ui-kit/src/Input/Input.tsx @@ -6,23 +6,49 @@ * you may not use this file except in compliance with the License. */ -import { type ComponentPropsWithRef } from 'react'; +import { type ComponentPropsWithRef, type ReactElement, useId } from 'react'; import './Input.css'; import clsx from 'clsx'; import { componentProviderWrapper } from '../componentProviderWrapper.js'; -export interface InputProps extends Omit, 'size'> { - size?: 'small' | 'medium' | 'large' | 'xlarge'; - label?: React.ReactNode; -} +export type InputProps = Omit, 'size'> & { + label?: ReactElement | string; + size?: 'small' | 'medium' | 'large' | 'xlarge'; + }; -export const InputBase: React.FC = function Input({ size, className, ...props }) { +export const InputBase: React.FC = function Input({ + size, + className, + label, + 'aria-labelledby': ariaLabelledBy, + 'aria-label': ariaLabel, + ...props +}) { + const labelId = useId(); const classNameToApply = clsx(`dbv-kit-input`, `dbv-kit-input--${size ?? 'medium'}`, className); + + if (label) { + return ( + + ); + } + return ( - + ); }; diff --git a/webapp/packages/core-blocks/src/FormControls/FieldLabel.module.css b/webapp/packages/core-blocks/src/FormControls/FieldLabel.module.css index 7414370d28..45c45e1b99 100644 --- a/webapp/packages/core-blocks/src/FormControls/FieldLabel.module.css +++ b/webapp/packages/core-blocks/src/FormControls/FieldLabel.module.css @@ -12,3 +12,7 @@ white-space: nowrap; text-overflow: ellipsis; } + +.required { + color: var(--theme-negative); +} diff --git a/webapp/packages/core-blocks/src/FormControls/FieldLabel.tsx b/webapp/packages/core-blocks/src/FormControls/FieldLabel.tsx index c573ff56d8..bab8ffe415 100644 --- a/webapp/packages/core-blocks/src/FormControls/FieldLabel.tsx +++ b/webapp/packages/core-blocks/src/FormControls/FieldLabel.tsx @@ -1,6 +1,6 @@ /* * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2024 DBeaver Corp and others + * Copyright (C) 2020-2025 DBeaver Corp and others * * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. @@ -23,7 +23,12 @@ export const FieldLabel: React.FC> = observer(function return ( ); }); diff --git a/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx b/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx index 04a433f101..5bf0cc845c 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx @@ -6,7 +6,7 @@ * you may not use this file except in compliance with the License. */ import { observer } from 'mobx-react-lite'; -import React, { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react'; +import React, { forwardRef, useCallback, useId, useLayoutEffect, useRef, useState } from 'react'; import { isNotNullDefined } from '@dbeaver/js-helpers'; @@ -62,6 +62,7 @@ export const InputFieldBase = observer( ref, ) { const [uncontrolledInputValue, setUncontrolledInputValue] = useState(value); + const inputId = useId(); const inputRef = useRef(null); const mergedRef = useCombinedRef(inputRef, ref); const capsLock = useCapsLockTracker(); @@ -116,13 +117,14 @@ export const InputFieldBase = observer( return ( - + {children}
) { const translate = useTranslate(); + const inputId = useId(); const textareaRef = useRef(null); const layoutProps = getLayoutProps(rest); rest = filterLayoutFakeProps(rest); @@ -102,12 +103,13 @@ export const Textarea: TextareaType = observer(function Textarea({ return ( - + {children}