From 272baafab61ffe80ceb9305137ca4ce98417e50f Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Tue, 30 Sep 2025 13:39:53 +0200 Subject: [PATCH] adds layers to InputField and moves border-offset-layout --- .../@dbeaver/ui-kit/src/Input/Input.css | 4 -- .../FormControls/InputField/InputField.css | 56 +++++++++++++++++++ .../InputField/InputField.module.css | 49 ---------------- .../InputField/InputFieldBase.tsx | 23 ++++---- webapp/packages/core-blocks/src/index.ts | 1 - 5 files changed, 66 insertions(+), 67 deletions(-) create mode 100644 webapp/packages/core-blocks/src/FormControls/InputField/InputField.css delete mode 100644 webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css diff --git a/webapp/common-react/@dbeaver/ui-kit/src/Input/Input.css b/webapp/common-react/@dbeaver/ui-kit/src/Input/Input.css index 9c1550157e..c4bab07b8d 100644 --- a/webapp/common-react/@dbeaver/ui-kit/src/Input/Input.css +++ b/webapp/common-react/@dbeaver/ui-kit/src/Input/Input.css @@ -58,28 +58,24 @@ /* Sizes */ .dbv-kit-input--small { - --dbv-kit-control-outline-offset: 0px; --dbv-kit-input-height: var(--dbv-kit-input-small-height); --dbv-kit-input-padding: var(--dbv-kit-input-small-padding); --dbv-kit-input-font-size: var(--dbv-kit-input-small-font-size); } .dbv-kit-input--medium { - --dbv-kit-control-outline-offset: -2px; --dbv-kit-input-height: var(--dbv-kit-input-medium-height); --dbv-kit-input-padding: var(--dbv-kit-input-medium-padding); --dbv-kit-input-font-size: var(--dbv-kit-input-medium-font-size); } .dbv-kit-input--large { - --dbv-kit-control-outline-offset: -2px; --dbv-kit-input-height: var(--dbv-kit-input-large-height); --dbv-kit-input-padding: var(--dbv-kit-input-large-padding); --dbv-kit-input-font-size: var(--dbv-kit-input-large-font-size); } .dbv-kit-input--xlarge { - --dbv-kit-control-outline-offset: -2px; --dbv-kit-input-height: var(--dbv-kit-input-xlarge-height); --dbv-kit-input-padding: var(--dbv-kit-input-xlarge-padding); --dbv-kit-input-font-size: var(--dbv-kit-input-xlarge-font-size); diff --git a/webapp/packages/core-blocks/src/FormControls/InputField/InputField.css b/webapp/packages/core-blocks/src/FormControls/InputField/InputField.css new file mode 100644 index 0000000000..46eda02026 --- /dev/null +++ b/webapp/packages/core-blocks/src/FormControls/InputField/InputField.css @@ -0,0 +1,56 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2024 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +@layer components { + .dbv-kit-input { + --dbv-kit-control-outline-offset: -2px; + } + + .input-field--label { + display: block; + composes: theme-typography--body1 from global; + font-weight: 500; + } + .input-field--label:not(:empty) { + padding-bottom: 10px; + } + .input-field--container { + position: relative; + } + .input-field--loader-container, + .input-field--icon-container { + position: absolute; + right: 4px; + top: 50%; + transform: translateY(-50%); + width: 24px; + height: 24px; + + --dbv-kit-icon-btn-outline-offset: -2px; + } + + .input-field--custom-icon-container { + composes: input-field--icon-container; + right: 6px; + width: 24px; + height: 24px; + cursor: auto; + display: flex; + align-items: center; + justify-content: center; + } + .input-field--input[disabled] + .input-field--icon-container { + cursor: auto; + } + .input-field--input:not(:only-child) { + padding-right: 32px !important; + } + .input-field--input { + font-size: 12px; + } +} diff --git a/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css b/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css deleted file mode 100644 index 58636a31e4..0000000000 --- a/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css +++ /dev/null @@ -1,49 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2024 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ -.fieldLabel { - display: block; - composes: theme-typography--body1 from global; - font-weight: 500; -} -.fieldLabel:not(:empty) { - padding-bottom: 10px; -} -.inputContainer { - position: relative; -} -.loaderContainer, -.iconContainer { - position: absolute; - right: 4px; - top: 50%; - transform: translateY(-50%); - width: 24px; - height: 24px; - - --dbv-kit-icon-btn-outline-offset: -2px; -} - -.customIconContainer { - composes: iconContainer; - right: 6px; - width: 24px; - height: 24px; - cursor: auto; - display: flex; - align-items: center; - justify-content: center; -} -.input[disabled] + .iconContainer { - cursor: auto; -} -.input:not(:only-child) { - padding-right: 32px !important; -} -.input { - font-size: 12px; -} diff --git a/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx b/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx index 5bf0cc845c..6ea47e61e0 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx @@ -14,17 +14,15 @@ import { filterLayoutFakeProps, getLayoutProps } from '../../Containers/filterLa import type { ILayoutSizeProps } from '../../Containers/ILayoutSizeProps.js'; import { Icon } from '../../Icon.js'; import { useTranslate } from '../../localization/useTranslate.js'; -import { s } from '../../s.js'; import { useCombinedHandler } from '../../useCombinedHandler.js'; import { useCombinedRef } from '../../useCombinedRef.js'; -import { useS } from '../../useS.js'; import { useStateDelay } from '../../useStateDelay.js'; import { Field } from '../Field.js'; import { FieldDescription } from '../FieldDescription.js'; import { FieldLabel } from '../FieldLabel.js'; import { useCapsLockTracker } from '../useCapsLockTracker.js'; -import inputFieldStyle from './InputField.module.css'; -import { IconButton, Input, Spinner, type InputProps } from '@dbeaver/ui-kit'; +import './InputField.css'; +import { clsx, IconButton, Input, Spinner, type InputProps } from '@dbeaver/ui-kit'; export type InputFieldBaseProps = Omit & ILayoutSizeProps & { @@ -70,7 +68,6 @@ export const InputFieldBase = observer( const translate = useTranslate(); const layoutProps = getLayoutProps(rest); rest = filterLayoutFakeProps(rest); - const styles = useS(inputFieldStyle); loading = useStateDelay(loading ?? false, 300); const revealPassword = useCallback(() => { @@ -116,11 +113,11 @@ export const InputFieldBase = observer( } return ( - - + + {children} -
+
( name={name} value={uncontrolled ? undefined : value} defaultValue={defaultValue} - className={s(styles, { input: true })} + className="input-field--input" required={required} onChange={handleChange} onBlur={handleBlur} onKeyDown={handleKeyDown} /> {loading && ( -
+
)} @@ -146,7 +143,7 @@ export const InputFieldBase = observer( size="small" aria-label={translate('ui_reveal_password')} title={translate('ui_reveal_password')} - className={styles['iconContainer']} + className="input-field--icon-container" onClick={revealPassword} > @@ -157,13 +154,13 @@ export const InputFieldBase = observer( size="small" aria-label={translate('ui_copy_to_clipboard')} title={translate('ui_copy_to_clipboard')} - className={styles['iconContainer']} + className="input-field--icon-container" onClick={onCustomCopy} > )} - {icon &&
{icon}
} + {icon &&
{icon}
}
{(description || passwordType) && {description}} diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index 084d2902dc..8dbd2e9ba7 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -183,7 +183,6 @@ export * from './FormControls/ComboboxLoader.js'; export * from './FormControls/FormContext.js'; export * from './FormControls/FormFieldDescription.js'; export * from './FormControls/InputField/InputField.js'; -export { default as InputFieldStyles } from './FormControls/InputField/InputField.module.css'; export * from './FormControls/InputFiles.js'; export * from './FormControls/InputFileTextContent.js'; export * from './FormControls/Radio.js';