[CB] Use only 1 Input component across the app (#3938)

* dbeaver/pro#7041 replaces uikit input with core-blocks InputField for PropertyItem (connection driver properties) * uses Input from ui-kit for react-data-grid from common-react * separates Input and InputField logic so we can reuse Input somewhere else * uses input from core-blocks in search panel * uses input from core-blocks inside fetch size action * removes hover styles if input is focused * adds Input to inline editor * removes style registries * replaces module styles with css layers api * cleanup * calcs padding from spacing * reverts input field base * reverts input fields base 2 * fixes styles for inline editor and fetch size action * fixes outline for inputs * fixes hover styles for combobox so it matches input hover behavior --------- Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
2026-09-24 16:04:36 +08:00 · 2025-12-11 18:23:04 +08:00
parent 3b435459a2
commit 83125bf8b5
16 changed files with 26 additions and 22 deletions
@@ -21,7 +21,7 @@
    font-weight: var(--dbv-kit-combobox-font-weight);
    font-size: var(--dbv-kit-combobox-font-size);

-    &:not(:disabled):hover {
+    &:not(:disabled):not(:focus-visible):not([data-focus-visible]):hover {
      border-color: var(--dbv-kit-combobox-hover-border-color);
    }

@@ -20,7 +20,7 @@
    font-size: var(--dbv-kit-input-font-size);
    height: var(--dbv-kit-input-height);

-    &:not(:disabled):hover {
+    &:not(:disabled):not(:focus-visible):not([data-focus-visible]):hover {
      border-color: var(--dbv-kit-color-control-hover);
    }

@@ -1,10 +1,3 @@
-/*
- * 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;
@@ -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.
@@ -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.
@@ -185,7 +185,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';
@@ -52,7 +52,7 @@
    padding: 7px 12px;
    width: 100%;
    border: 2px solid;
-    outline: none;
+    outline: none !important;
    border-radius: $theme-form-element-radius;

    @include mdc-theme-prop(color, input-color, false);
@@ -35,6 +35,7 @@
    "@cloudbeaver/core-view": "workspace:*",
    "@dbeaver/js-helpers": "workspace:*",
    "@dbeaver/react-dnd": "workspace:^",
+    "@dbeaver/ui-kit": "workspace:*",
    "mobx": "^6",
    "mobx-react-lite": "^4",
    "react": "^19",
@@ -50,9 +50,9 @@
      border: none !important;
      border-radius: unset;
      width: 100%;
-      height: 100%;
+      height: 22px;
      min-height: unset !important;
-      padding: 0 8px;
+      padding: calc(2 * var(--tw-spacing));
    }
  }

@@ -14,6 +14,7 @@ import { CommonDialogService, DialogueStateResult } from '@cloudbeaver/core-dial

 import { EditorDialog } from './EditorDialog.js';
 import styles from './InlineEditor.module.css';
+import { Input } from '@dbeaver/ui-kit';

 export type InlineEditorControls = 'right' | 'top' | 'bottom' | 'inside';

@@ -114,7 +115,7 @@ export const InlineEditor = observer<InlineEditorProps, HTMLInputElement>(
    return (
      <div className={s(style, { editor: true, specific: true, editorActive: active }, className)} onClick={onClick} onDoubleClick={onDoubleClick}>
        <div className={s(style, { editorContainer: true })}>
-          <input
+          <Input
            ref={inputRef}
            className={s(style, { input: true })}
            lang="en"
@@ -124,6 +125,7 @@ export const InlineEditor = observer<InlineEditorProps, HTMLInputElement>(
            onChange={handleChange}
            onKeyDown={handleKeyDown}
            {...rest}
+            size="small"
          />
        </div>
        <div
@@ -13,6 +13,9 @@
    {
      "path": "../../common-react/@dbeaver/react-tests"
    },
+    {
+      "path": "../../common-react/@dbeaver/ui-kit"
+    },
    {
      "path": "../../common-typescript/@dbeaver/cli"
    },
@@ -46,6 +46,7 @@
    "@cloudbeaver/plugin-object-viewer": "workspace:*",
    "@dbeaver/js-helpers": "workspace:*",
    "@dbeaver/result-set-api": "workspace:*",
+    "@dbeaver/ui-kit": "workspace:*",
    "mobx": "^6",
    "mobx-react-lite": "^4",
    "react": "^19",
@@ -13,8 +13,6 @@
    height: 26px;
    width: 80px;
    box-sizing: border-box;
-    padding: 4px 7px;
-    font-size: 13px;
-    line-height: 24px;
+    padding: calc(2 * var(--tw-spacing));
  }
 }
@@ -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.
@@ -15,6 +15,7 @@ import { type ICustomMenuItemComponent } from '@cloudbeaver/core-view';
 import { DATA_CONTEXT_DV_DDM } from '../../../../DatabaseDataModel/DataContext/DATA_CONTEXT_DV_DDM.js';
 import { DataViewerSettingsService } from '../../../../DataViewerSettingsService.js';
 import styles from './FetchSizeAction.module.css';
+import { Input } from '@dbeaver/ui-kit';

 export const FetchSizeAction: ICustomMenuItemComponent = observer(function FetchSizeAction({ context }) {
  const model = context.get(DATA_CONTEXT_DV_DDM)!;
@@ -47,7 +48,7 @@ export const FetchSizeAction: ICustomMenuItemComponent = observer(function Fetch
  return (
    <Container className={s(style, { count: true })} keepSize noGrow center>
      <Form contents onSubmit={handleChange}>
-        <input
+        <Input
          ref={ref}
          className={s(style, { input: true })}
          type="number"
@@ -55,7 +56,8 @@ export const FetchSizeAction: ICustomMenuItemComponent = observer(function Fetch
          disabled={disabled}
          min={dataViewerSettingsService.minFetchSize}
          max={dataViewerSettingsService.maxFetchSize}
-          onChange={e => setLimit(e.target.value)}
+          size="small"
+          onChange={event => setLimit(event.target.value)}
          onBlur={handleChange}
        />
      </Form>
@@ -10,6 +10,9 @@
    {
      "path": "../../common-react/@dbeaver/react-tests"
    },
+    {
+      "path": "../../common-react/@dbeaver/ui-kit"
+    },
    {
      "path": "../../common-typescript/@dbeaver/cli"
    },
@@ -2222,6 +2222,7 @@ __metadata:
    "@dbeaver/js-helpers": "workspace:*"
    "@dbeaver/react-dnd": "workspace:^"
    "@dbeaver/react-tests": "workspace:^"
+    "@dbeaver/ui-kit": "workspace:*"
    "@testing-library/react": "npm:^16"
    "@types/react": "npm:^19"
    mobx: "npm:^6"
@@ -3055,6 +3056,7 @@ __metadata:
    "@dbeaver/js-helpers": "workspace:*"
    "@dbeaver/react-tests": "workspace:*"
    "@dbeaver/result-set-api": "workspace:*"
+    "@dbeaver/ui-kit": "workspace:*"
    "@types/react": "npm:^19"
    mobx: "npm:^6"
    mobx-react-lite: "npm:^4"