* dbeaver/pro#6017 adds new ui spinner to loader
* removes unused code
* pr fixes
* changes loader animation
* dbeaver/pro#6017 fix: remove class names that don't exist
* dbeaver/pro#6017 fix: remove cloudbeaver spinner animation adjustments
* dbeaver/pro#6017 feat: introduce animation delay variable for spinner
Make the initial appearance of the spinner better by starting from semi-filled circle, not the tine dot which is crucial on fast loads.
---------
Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
Co-authored-by: Sychev Andrey <nukemoore@gmail.com>
* 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/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/pro#5554 feat: first iteration of IconButton
* dbeaver/pro#5554 refactor: css var changes
* dbeaver/pro#5554 feat: add loading state to IconButton component
* dbeaver/pro#5554 style: update background color for loading state in IconButton
* dbeaver/pro#5554 feat: separate icon button styles and loader variables
* dbeaver/pro#5554 refactor: extract ButtonRoot component to use as a base for Button and IconButton components
That approach lets us use common logic (loading) but don't mixup styles and tokens and have better control
* dbeaver/pro#5554 refactor: update loading state styles for IconButton component
* dbeaver/pro#5554 refactor: ButtonRootProps
* dbeaver/pro#5554 refactor: remove opacity from loading state in Button and IconButton components
* dbeaver/pro#5554 refactor: create content wrapper, move general styles there, add loader wrapper
---------
Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
* #5490 feat: create basic spin component
* #5490 refactor: use new Spin component in button loading state
* #5490 refactor: add tokens to Spin component
add SpecialLoader story to show how to change Spin appearance for special use cases
* #5490 fix: reverts f4d9b6b101
Element should not get focus visible after mouse interactions
* 5490 fix: lost dash
* #5490 refactor: rename Spin to Spinner
---------
Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>
* dbeaver/pro#5440 feat: display boolean as checkbox in grid
* #5440 refactor: make checkboxes disabled inside grid
It's a very strange UX when checkbox is inside a cell of a table and behaves like a real one. It's much more expected when only cell takes focus and checkbox only represents the value in a way we want without acting like a real input. Moreover, using Focusable component enables smooth toggling between all 3 states of a boolean cell from a keyboard.
* #5440 fix: remove inline padding
* #5440 feat: add hover effect for boolean formatter
* #5440 refactor: revert full width
* #5440 refactor: split onClick and onKeyDown interfaces
* #5440 fix: return onClick
---------
Co-authored-by: Andrey Sychev <nukemoore@gmail.com>
Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>
* chore: add clsx dependency to ui-kit
* chore: import clsx from ui-kit
* refactor: use clsx for class management in Button
* refactor: use clsx in Checkbox
* refactor: use clsx in Input component
* feat: use clsx in radio and radiogroup
* feat: use clsx in Select component
* feat: reexport VisuallyHidden and Focus trap components from ariakit
* refactor: rename css variable in order to be more descriptive and stick to the naming convention
* refactor: unify controls, add new global control css variables
* feat: add radio component
* docs: add radio stories
* docs: add input docs story
* docs: add simple form story
* refactor: change default radio dot size
* refactor: change class name for radio children wrapper
* refactor: don't reexport inner radio elements
* refactor: simplify RadioGroup interface by removing items props, make label(any) required
The radiogroup must have an accessible name either by a visible label referenced by aria-labelledby or has a label specified with aria-label.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/radiogroup_role
* refactor: use label wrapper for input component to simplify structure
* refactor: add classname for radio group container
* feat: add simple select
* feat: add items states vars and popover animation
* feat: add SelectField component
* feat: select field uses getters to get value/label/selected value, update stories to demonstrate
* docs: update select stories
* refactor: remove margin top because we use gutter in SelectField and for reexported aria popover we don't want to setup such default
* fix: select field - set not the very first value by default, but the first not disabled value
* refactor: add popover height variable, remove padding to look more like select in cloudbeaver by default
* feat: add styles for Select Field description
* refactor: rename properties
* refactor: remove redundant docs for props, remove placeholder props because it's not how aria select is supposed to work, you need to use extra select item to create a placeholder
* refactor: remove support for property path, keep only support for property name or custom getter in sake of simplicity and ease of maintenance
* fix: story for key getters
* fix: return type
* fix: don't set disabled value if all items are disabled
* fix: controlled mode, respect value prop over selectedValue
* refactor: remove width property
* refactor: typesafe key getter
The type iterates through every property key in ItemType.
For each property key, it evaluates whether the property's type is assignable to ValueType and creates a union type of all keys that passed the type check
* refactor: fixes after merge and item hover variable
* fix: input
* feat: add custom arrow icon prop
* refactor: remove ability to use object keys as getters, rename options to items in all places
* fix: rename token
* feat: add ui-kit package to common-react
* feat: add tailwind and ladle to ui-kit, use ui-kit in ce
* feat: create custom properties for button and checkbox using tailwind values as default
* feat: create simple button with 2 variants
* feat: create simple checkbox
* refactor: update after rebase
* feat: experiments with button and checkbox
* feat: add buttons sizes, adjust btn loader, add interactive story instead of many stories
* fix: add license
* fix: a11y issues with color contrast
* fix: mdx stories support
* feat: experiments with icons
* feat: try custom rendering
* docs: add small kinda docs for button
* refactor: css layers
* chore: deps
* chore: remove buildinfo from git
* chore: remove tsbuildinfo from git
* fix: vertical tab overflow
* feat: use UIKit button as base for Cloudbeaver button
* fix: box-sizing problems
* refactor: button styles use BEM model
* refactor: separate base tokens from aliases
* refactor: add some defaults, write all properties in snake case
* refactor: rename button classes, add ui-kit prefix
* refactor: remove redundant story, omit a couple of props, add example to ladle
* refactor: add general sizes tokens, update license
* feat: add scaffold for input component
* refactor: update deps
* refactor: remove links
* refactor: change props naming, add prefixes in checkbox, removes validation nodes in input
* refactor: partially revert "feat: use UIKit button as base for Cloudbeaver button" to keep the old Button interface without changes
Original commit SHA: 62bb1fe9a0.
* Revert "refactor: update deps"
This reverts commit f7d6533967.
* refactor: update deps once again
* refactor: rename ui-kit prefix
* chore: update deps
* refactor: Button Icon Interface
* refactor: use JSDoc for placement comment
* refactor css custom props for Button
* refactor: introduce opacity custom property, fix icon margin property
* fix: button text should not wrap;
* fix: tailwindcss version
* fix: tailwindcss version
* refactor: remove checkbox styles, keep only wireframe
* refactor: move input-related css variables to the dedicated folder
* refactor: remove unused input props
* refactor: btn loader animation
* refactor: use nesting for states, refactor classnames using BEM delimiters
* refactor: introduce btn-border-width prop, removed redundant btn-padding-block since we use fixed heights
* refactor: input and button
* fix: input
* chore: deps
* chore: deps
* chore: add vite as dev dep
* refactor: button variants
* chore: yarn install
* fix: loading button should not react on hover
* docs: add stories about tokens
* chore: remove lint command
* refactor: add prefix to css variables
* refactor: add base border-radius and border-width for controls
* fix: don't import tailwind in style files
* fix: add tailwindcss import for ladle
* fix: base radius variable
* refactor: rename css var
* refactor: add tw prefix for tailwind classes and vars
* fix: styles in easy-config
* fix: after tailwind reset paddings don't in width anymore, compensate
* fix: don't show outline on mouse click
* refactor: change btn state classes, remove not loading for hover because it's strange that button reacts on click when in loading state, but not on hover.
* fix: icons
* fix: add letter-spacing to normalize to prevent tailwind reset it with inherit value
* fix: welcome page selector
* fix: button outline uses a variable for width, proper loading state in aria, icon class name
* feat: add global styles for UI-kit ladle
* docs: refactored stories composition, added stories
* refactor: simplify loader, enable custom loaders, introduced token for btn loader, fix class names, updated stories
* docs: add global styles for ladle
* feat: use custom loader in cloudbeaver
* refactor: use oklch color space for color mixing in loaders
* docs: add readme
* fix: tsconfig, format ladle config
* docs: add short command for ladle, update readme
* fix: module export
* build: add vite plugin
* fix: remove aria-label for loading
* fix: yarn
---------
Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
