From fbdb5cd49a10647197fd1a7cd391d5cc120c3e45 Mon Sep 17 00:00:00 2001 From: Sychev Andrey <44414066+SychevAndrey@users.noreply.github.com> Date: Thu, 12 Jun 2025 11:21:29 +0200 Subject: [PATCH] dbeaver/pro#5800 refactor: InputFieldBase (#3492) * dbeaver/pro#5800 refactor: InputFieldBase update InputField by swapping native input by Input from ui-kit, replace inner action icons to IconButton components, and replace Loader with Spinner component * dbeaver/pro#5800 fix: enforce border and min-height styles in InlineEditor * dbeaver/pro#5800 feat: add size prop to Filter component for responsive input sizing * dbeaver/pro#5800 feat: add UiInput tokens for input component removes hover effect on inputs by using the same token as for default border --------- Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com> --- .../core-blocks/src/FormControls/Filter.tsx | 1 + .../InputField/InputField.module.css | 21 ++++-------- .../InputField/InputFieldBase.tsx | 34 +++++++++++++------ .../packages/core-theming/src/ThemeService.ts | 1 + .../core-theming/src/styles/UiInput.css | 6 ++++ .../src/InlineEditor/InlineEditor.module.css | 4 +-- 6 files changed, 41 insertions(+), 26 deletions(-) create mode 100644 webapp/packages/core-theming/src/styles/UiInput.css diff --git a/webapp/packages/core-blocks/src/FormControls/Filter.tsx b/webapp/packages/core-blocks/src/FormControls/Filter.tsx index 1a3b12adc9..1c3803fe59 100644 --- a/webapp/packages/core-blocks/src/FormControls/Filter.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Filter.tsx @@ -119,6 +119,7 @@ export const Filter = observer>(functio readOnly={disabled} name={name} value={value} + size={smallSize ? 'small' : 'medium'} onChange={handleChange} onKeyDown={handleKeyDown} /> diff --git a/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css b/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css index 6a36510309..4e338d9d6a 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css +++ b/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css @@ -5,9 +5,6 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ -.icon { - composes: theme-text-on-secondary from global; -} .fieldLabel { display: block; composes: theme-typography--body1 from global; @@ -18,23 +15,19 @@ } .inputContainer { position: relative; + + --dbv-kit-control-outline-offset: -2px; } .loaderContainer, .iconContainer { position: absolute; - right: 8px; + right: 4px; top: 50%; transform: translateY(-50%); - width: 16px; - height: 16px; - display: flex; -} -.iconContainer { - cursor: pointer; - & .icon { - width: 100%; - height: 100%; - } + width: 24px; + height: 24px; + + --dbv-kit-icon-btn-outline-offset: -2px; } .customIconContainer { diff --git a/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx b/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx index 36225a656a..04a433f101 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputField/InputFieldBase.tsx @@ -13,7 +13,6 @@ import { isNotNullDefined } from '@dbeaver/js-helpers'; import { filterLayoutFakeProps, getLayoutProps } from '../../Containers/filterLayoutFakeProps.js'; import type { ILayoutSizeProps } from '../../Containers/ILayoutSizeProps.js'; import { Icon } from '../../Icon.js'; -import { Loader } from '../../Loader/Loader.js'; import { useTranslate } from '../../localization/useTranslate.js'; import { s } from '../../s.js'; import { useCombinedHandler } from '../../useCombinedHandler.js'; @@ -25,9 +24,11 @@ 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'; -export type InputFieldBaseProps = Omit, 'value' | 'onChange' | 'style' | 'ref'> & +export type InputFieldBaseProps = Omit & ILayoutSizeProps & { + size?: 'small' | 'medium' | 'large'; value?: string; error?: boolean; loading?: boolean; @@ -119,7 +120,7 @@ export const InputFieldBase = observer( {children}
- ( /> {loading && (
- +
)} {passwordType && canShowPassword && ( -
- -
+ + + )} {onCustomCopy && ( -
- -
+ + + )} {icon &&
{icon}
}
diff --git a/webapp/packages/core-theming/src/ThemeService.ts b/webapp/packages/core-theming/src/ThemeService.ts index 9911b96f8f..523a11ad86 100644 --- a/webapp/packages/core-theming/src/ThemeService.ts +++ b/webapp/packages/core-theming/src/ThemeService.ts @@ -22,6 +22,7 @@ import './styles/main/typography.pure.scss'; import './styles/UiCheckbox.css'; import './styles/UiIconButton.css'; import './styles/UiSpinner.css'; +import './styles/UiInput.css'; import { DEFAULT_THEME_ID, themes } from './themes.js'; import { ThemeSettingsService } from './ThemeSettingsService.js'; import type { ClassCollection } from './themeUtils.js'; diff --git a/webapp/packages/core-theming/src/styles/UiInput.css b/webapp/packages/core-theming/src/styles/UiInput.css new file mode 100644 index 0000000000..a071903dff --- /dev/null +++ b/webapp/packages/core-theming/src/styles/UiInput.css @@ -0,0 +1,6 @@ +@layer components { + .dbv-kit-input { + --dbv-kit-input-radius: 3px; + --dbv-kit-color-control-hover: var(--theme-background); + } +} diff --git a/webapp/packages/core-ui/src/InlineEditor/InlineEditor.module.css b/webapp/packages/core-ui/src/InlineEditor/InlineEditor.module.css index 6d073cfc99..d246fa629b 100644 --- a/webapp/packages/core-ui/src/InlineEditor/InlineEditor.module.css +++ b/webapp/packages/core-ui/src/InlineEditor/InlineEditor.module.css @@ -47,11 +47,11 @@ & .input, & .input[disabled], & .input[readonly] { - border: none; + border: none !important; border-radius: unset; width: 100%; height: 100%; - min-height: unset; + min-height: unset !important; padding: 0 8px; } }