7a8c4a141f
* dbeaver/pro#6859 adds pin/unpin methods for data grid * resets state when pins + makes pin icon stay when pinned * adds TableHeaderCellIcon component with new Menu * make actions alive * cleanup * moves pin logic into data-viewer * cleanup * restructures pin logic via contexts * cleanup * synchronizes column ids with view ids so pining works fine * fixes actions visibility * fix: correct layout on editing frozen cell * fixes layout so frozen cell box-shadow can divide pinned and unpinned columns * fixes border and box shadow interactions for frozen and editing cell * makes pinned columns non transparent * makes frozen border 3px and reverts previous style changes * styles cleanup * adds column true and visual indexes and reuses it across the data grid features * cleanup * reverts removed code * reverts hacks with ids * dbeaver/pro#7748 updates yarn.locks * fixes incorrect types * updates helper libs * updates vitest + fixes test cases incorrect mocks * runs tests sequentially with document and windows objects to prevent mock collisions * Revert "runs tests sequentially with document and windows objects to prevent mock collisions" This reverts commitf871837df3. * skips download test * removes export from resetDeprecatedSettings * updates react-data-grid to beta-59 and react to 19.2 * updates storybook * pr fixes * updates yarn lock * removes skip for download test * cleanups download ts with empty body html * updates vitest for core-connections * updates yarn.lock * linter fix + mocks once * fixes hotkeys * reverts version of react-hotkeys-hook library * pr fixes * code style fix * dbeaver/pro#6859 adds selectCellByKey for opening editor * reverts styles * adds pin/unpin icons * Revert "reverts styles" This reverts commit7857ef672d. * on add actions sets correct focus * removes incorrect positioning when editing pinned column * tunes dark theme colors * adds DnD to pin/unpin feature * pr fixes * fixes multiple selections for pinned & unpinned columns * refactors multiple selections for pinned & unpinned columns so it uses data-grid api of getting sorted columns * moves pin logic to usePinnedColumns hook * moves color styles into data grid * fixes letter * adds styles for pinned border only for data editor * adds unpin all columns action * moves pinned logic to grid view action to save pinned state between tabs --------- Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com> Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com> Co-authored-by: Sychev Andrey <44414066+SychevAndrey@users.noreply.github.com>
DBeaver UI Kit
The DBeaver UI Kit is a collection of reusable React components designed to help developers build consistent and visually appealing user interfaces.
Using Ladle for Component Development
Ladle is a tool that allows you to develop, test, and document your React components in isolation. We use it to create a sandbox environment where you can interact with your components and ensure they work as expected.
To get started with Ladle in the DBeaver UI Kit, write in terminal:
yarn docs
Then open the provided URL to see components.
How to Customize
DBeaver UI Kit components have basic styles and use some defaults from Tailwind CSS. To change styling, you can use different approaches.
Global CSS Tokens
The UI kit uses several global CSS tokens described on the Global Tokens page. These tokens help maintain consistency across the UI components. All DBeaver UI tokens are prefixed with --dbv-kit-. You can use these tokens to customize the UI kit to fit your application's design. For example, changing the --dbv-kit-font-size-base token will change the base font size for text in the UI kit. Changing the --dbv-kit-control-height-base token will change all control heights. If you don't want to change all controls, you can change --dbv-kit-control-height-small, --dbv-kit-control-height-medium, or other tokens separately. They will affect only specific components.
Component CSS Tokens
Some components have their own tokens. For example, the Button component has tokens for button sizes, padding, and colors. You can change these tokens to customize the Button component. To see the list of tokens, go to sources or start Ladle.
Component CSS Classes
Each component in the UI kit has a default CSS class name following the dbv-kit-[component name(in lowercase)] naming convention that you can use to customize the component. You can find the default class name in the component's documentation.
For button:
.dbv-kit-button {
/* Your custom styles */
}
For input:
.dbv-kit-input {
/* Your custom styles */
}
Some components have additional classes for different states or sizes. For example, the Button component has classes for different sizes: .dbv-kit-button--small, .dbv-kit-button--large. We use the BEM convention for class names. If a component has a modifier, it will be separated by two dashes. If a component has a child element, it will be separated by two underscores, for example:
.dbv-kit-button__icon- icon is a child element of the button.dbv-kit-button--large- large is a size modifier.dbv-kit-button__icon--start- icon is a child element of the button and has a start placement
Each component accepts the standard className and style props which enable using vanilla CSS, utility classes (e.g., Tailwind), CSS-in-JS (e.g., Styled Components), etc. A custom className can be specified and will be appended to a class list of a component:
<Button className="my-custom-button">Button</Button>
<Button style={{ background: 'red' }}>Button</Button>