Releases: gravity-ui/uikit
v6.3.0
6.3.0 (2024-03-18)
Features
- add Palette component (#1304) (e731838)
- Alert: added ability to pass null as icon prop value (#1407) (180edd0)
- Breadcrumbs: add
renderItem
property (#1413) (d1c800f) - Text: added
break-word
towordBreak
property (#1424) (607c3ea)
Bug Fixes
- adding new classes in rootClassName before removing (#1411) (e29cde1)
- DropdownMenu: fix opening from keyboard (#1404) (9251714)
- prevent event bubbling for table item action (#1399) (d2e9d41)
- ThemeProvider: always set CSS class when scoped (#1423) (c787b5b)
- Toc: set aria-current attribute to selected item (#1426) (682444a)
v5.31.2
v6.2.0
v5.31.1
v6.1.1
v6.1.0
6.1.0 (2024-02-21)
Features
- Disclosure: possibility to use DefaultDisclosureSummary inside … (#1359) (f8b52b9)
- Select: add useSelectOptions hook (#1356) (456ffaa)
- Slider: introduce Slider component (#1243) (a1bf754)
- Table: add renderRowActions property (#1353) (e074b1a)
- withTableSettings: add the renderControls prop (#1357) (b3f0d78)
Bug Fixes
- List: fix virtualized list items rerender (#1314) (8c45f7c)
- Select: do not call onFilterChange on mount (#1321) (0bb7c66)
- TextInput: unequal text alignment in textinput (#1306) (c9cdbd0)
- TreeSelect: fix render container method (#1344) (1ab9d59)
- TreeSelect: fixed dnd examples with selected values (#1329) (14d6ceb)
- TreeSelect: remove default popup width (#1350) (84044f0)
v6.0.0
6.0.0 (2024-02-06)
⚠️ Breaking Changes
Button
- Old "private" CSS-variables are removed:
--yc-button-background-color
,--yc-button-background-color-hover
,--yc-button-height
,--yc-button-padding
,--yc-button-border-radius
. Remove them or migrate to the new CSS API.
Alert
- Removed
positive
theme, usesuccess
instead.
Card
- Removed
positive
theme, usesuccess
instead. - Old "private" CSS-variables are removed:
--yc-card-box-shadow
,--yc-card-border-radius
. Remove them or migrate to the new CSS API.
CopyToClipboard
CopyToClipboardStatus
enum changed to union type:'pending' | 'success' | 'error'
.
ClipboardButton
- Used icons from Gravity pack.
size
prop acceptsButton
's size, not a number.
Dialog
- Old "private" CSS-variables are removed:
--yc-dialog-*
Label
onClose
prop renamed toonCloseClick
Link
href
prop is now required.- Removed
normal-visitable
view, usevisitable
prop instead.
List
- Removed
--yc-list-height
and--yc-list-item-height
CSS vars, use component propsitemsHeight
anditemHeight
respectively. - CSS var
--yc-list-margin
is replaced with--g-list-item-padding
from CSS API. - From this release we do not recommend to use this component. We're working on a new version of list component with better customization and configuration.
MobileContext
Hooks useMobile
and usePlatform
now return only the value, without the setter. Same is true for withMobile
HOC. The only remaining way to change context values is to set props directly on the MobileContext
.
Modal
- Old "private" CSS-variables are removed:
--yc-modal-margin
,--yc-modal-border-radius
. Remove them or migrate to the new CSS API.
Persona
- Component refactored to be built with new
Avatar
component - Component renamed to
UserLabel
due to similarity with theLabel
onClose
prop renamed toonCloseClick
Popup
- Old "private" CSS-variables are removed:
--yc-popup-background-color
,--yc-popup-border-color
,--yc-popup-border-width
. Remove them or migrate to the new CSS API.
Popover
- Old "private" CSS-variables are removed:
--yc-popover-padding
,--yc-popover-max-width
. Remove them or migrate to the new CSS API.
Sheet
- Old "private" CSS-variables are removed:
--yc-sheet-content-paddings
. Remove them or migrate to the new CSS API.
Tabs
- Old "private" CSS-variables are removed:
--yc-tab-item-vertical-padding
,--yc-tab-item-vertical-height
. Remove them or migrate to the new CSS API.
Toaster
- Old "private" CSS-variables are removed:
--yc-toaster-desktop-width
,--yc-toaster-margin
,--yc-toaster-padding
. Remove them or migrate to the new CSS API. type
prop renamed totheme
and its valueerror
changed todanger
.- Type
ToastType
renamed toToastTheme
.
Tooltip
Tooltip
was merged intoActionTooltip
.- New component
Tooltip
was introduced as a replacement for browsers' native tooltip.
User
-
Component is now built with new
Avatar
component, soimgUrl
prop moved to dedicatedavatar
prop:// Old <User imgUrl="..." /> // New <User avatar={{imgUrl: '...'}} />
UserAvatar
- Component removed in favor or new generic
Avatar
CSS
- Removed deprecated
--yc-*
CSS-variables. - Removed fallbacks of
:focus-visible
. - Used logical CSS-properties all over the components.
- Prefix for all components is changed from
.yc-*
to.g-*
.
Hooks
- Hook
useOnFocusOutside
removed. UseuseFocusWithin
instead. - Type
UseFileInputOutput
removed. UseUseFileInputResult
instead. - Type
UseIntersection
renamed toUseIntersectionProps
. - Removed
setOpen
fromuseSelect
result. UsetoggleOpen
instead.
Misc
- Added imports of CSS-files to cjs modules as well. If you are using these files, ensure that you have an appropriate loader in your bundler to handle them.
🚀 Features
Avatar
Component
The component's purpose is to provide a way to display generic avatars. It allows to display images via urls, initials letters from text and icon. The component has different sizes and views "out of the box", but also fully customizable. It's now used in User
and Persona
components.
Components CSS API
We are introducing a new CSS API for some components. It allows "low-level" customization of component's appearance via CSS-variables. Look if CSS API is available for component on docs page.
RTL Support
All components are now correctly displayed with right-to-left languages. To set direction use direction
prop of ThemeProvider
, values are ltr
(default) and rtl
. To get current direction inside your React App use useDirection
hook or withDirection
HOC.
Button.Icon
side
prop now acceptsstart
andend
Disclojure
arrowPosition
prop now acceptsstart
andend
Popover
offset
prop now accepts{block: number; inline: number;}
Content overflow in Modal and Dialog
Modal
and Dialog
components now have prop for controlling content overflow behaviour. Prop contentOverflow
has 2 values: visible
(default, current behaviour) and auto
. Setting auto
switches scrolling to the content area.
New Table sort indicator
With withTableSorting
HOC sort inidicators on sortable columns are always visible, new icons were used, arrows instead of carets.
List 2.0
- New set of hooks and basic stateless components
useList
, to create components based on lists of data, including tree-like ones. Keyboard support, filtering, and basic usage scenarios such as virtualization, dnd, and an endless list are implemented. For more information, see the documentation and examples in Storybook.- Experimental component
TreeSelect
based on the new functionality of theuseList
hook. Depending on the passed data structure, the component can be used as a regular Select, or a representation of tree-like data structures. It has support for DnD and virtualization implemented outside, so the component doesn't not depends on heavy-weight libraries anymore. See the examples in Storybook. - All new functionality is unstable meaning the API of the components may change based on feedback