52f567fded
* dbeaver/pro#5553 feat: add column sorting functionality to DataGrid
* dbeaver/pro#5553 feat: enhance column sorting functionality to support multiple selection
* dbeaver/pro#5553 feat: add keyboard navigation to order button
* dbeaver/pro#5553 feat: add constraints handling logic for column sorting in DataGrid
* Revert "dbeaver/pro#5553 feat: add constraints handling logic for column sorting in DataGrid"
This reverts commit 6028a48b13.
* dbeaver/pro#5553 feat: add icon generation script to UIKit, add sample icons
* dbeaver/pro#5553 refactor: use inner react-data-grid API for column sorting
* dbeaver/pro#5553 feat: add IconCross component and update icon-related files
* dbeaver/pro#5553 feat: replace Button with IconButton in OrderButton component
* dbeaver/pro#5553 style: update foreground color variables for IconButton component
* dbeaver/pro#5553 refactor: add normalization rules to layers, use IconButton in Common DialogHeader
checked if new IconButton works well in light and dark mode by using in CommonDialogHeader
* dbeaver/pro#5553 style: format code and update dependencies in CommonDialogHeader and DataGridTable components
* dbeaver/pro#5553 style: move onColumnSort prop to correct position in DataGridTable component
* dbeaver/pro#5553 refactor: remove icons component generation, use svg sprite
* dbeaver/pro#5553 refactor: update OrderButton component and inline icons sprite in Body
we decided to go with this solution for now just adding icons to a sprite and use them by id. Imports by ?url don't work in VSCode if try to use them in <use> href, so we need to find another solution or stick to that approach.
* dbeaver/pro#5553 refactor: update column sorting and sortable logic in DataGrid components
* dbeaver/pro#5553 style: format whitespace in Body component
* dbeaver/pro#5553 feat: add new sorting icons for ascending, descending, and unsorted states
* dbeaver/pro#5553 refactor:styling for header cell and order button components
* dbeaver/pro#5553 refactor: update sorting logic in DataGrid and OrderButton components
* dbeaver/pro#5553 refactor: value deps
* dbeaver/pro#5553 feat: update sorting icons for ascending, descending, and unsorted states
* dbeaver/pro#5553 style: update aria-label and title for OrderButton component
* dbeaver/pro#5553 fix: double focus
* dbeaver/pro#5553 fix: after merge
* dbeaver/pro#5553 refactor: removed outline offset for sort button
* dbeaver/pro#5553 refactor: update Tailwind CSS import to use layer directive
---------
Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>
Co-authored-by: Alexey <wrouds@gmail.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>