ffe3d45017
* dbeaver/pro#5789 refactor: add ButtonIcon component instead of Button.Icon * dbeaver/pro#5789 refactor: button components across whole application to use UIKit button and UIKit variables - Rewrite Button.css(former button.module.css) file to define button styles for better maintainability and scalability - Added props to the Button component for Icons: 'size' and 'placement', currently used only in PropertiesTable (Add property) - Changed button modifiers to 'variant' swapping unelevated mod to primary(default one, so mod just deleted) and outlined mod to variant secondary. - In one case changed raised mod to danger variant (deleting a license) * dbeaver/pro#5789 refactor: fix Button component styling and removed redundant css file * dbeaver/pro#5789 style: clean up button formatting across multiple components * dbeaver/pro#5789 refactor: update Tailwind CSS import to use layer directive * dbeaver/pro#5789 refactor[kit]: add disabled state styles for buttons * dbeaver/pro#5789 refactor: enhance button styles for disabled state * dbeaver/pro#5789 fix button problems * dbeaver/pro#5789 fix: change layer name from theme to base in color styles * dbeaver/pro#5789 refactor: update button padding from 16px to 15px * dbeaver/pro#5789 refactor: adjust button gap and update InputFiles button props * dbeaver/pro#5789 style: center align button in SSHKeyUploader component * dbeaver/pro#5789 fix: update button classes to use inline-flex for better alignment * dbeaver/pro#5789 fix: remove initial background from tab styles * dbeaver/pro#5789 fix: move cursor pointer rule to button container * dbeaver/pro#5789 fix: update checkbox SVG fill property for proper rendering * dbeaver/pro#5789 fix: add variant prop to Button component for styling options * dbeaver/pro#5789 fix: add InlineEditor to CSS layer to compete with theme Important! border-color * dbeaver/pro#5789 fix: add min-width to button styles for consistency * dbeaver/pro#5789 refactor: adjust margin for trigger element in context menu first of all it's done to fix autotests and the second reason is to visually balance the cell with menu * dbeaver/pro#5789 fix: make boolean great again --------- Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com> Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com> Co-authored-by: kseniaguzeeva <112612526+kseniaguzeeva@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>