Releases: gravity-ui/uikit
Releases · gravity-ui/uikit
v6.41.0
v7.0.0-beta.5
⚠️ Breaking Changes
- Migrate Popup, Modal and other overlay components to use
floating-ui
instead ofpopper.js
. - Built JS files are now in ES2022
Button
- Rename CSS API:
--g-button-icon-size
→--g-button-icon-space
. - Component now accepts any properties from the
<button/>
or<a/>
element. - Deprecate
extraProps
property.
Link
- Component now accepts any properties from the
<a/>
element. - Deprecate
extraProps
property.
RadioButton
- Rename component to
SegmentedRadioGroup
. - No value is checked by default now (before, the first one was checked if no value has been provided).
RadioGroup
- No value is checked by default now (before, the first one was checked if no value has been provided).
Slider
- Remove deprecated
debounceDelay
property.
NumberInput
Component moved to the main entrypoint.
Breadcrumbs
Breadcrumbs
is swapped with the component from the lab entrypoint.
The old component has beed moved to the legacy
entrypoint, marked as deprecated and will be removed in v8:
import {Breadcrumbs as LegacyBreadcrumbs} from '@gravity-ui/uikit/legacy'; // <-- Old Breadcrumbs
import {Breadcrumbs} from '@gravity-ui/uikit'; // <-- New Breadcrumbs
Popup
- Change
offset
property type tonumber | {mainAxis?: number; crossAxis?: number}
. - Remove
disableLayer
andtype
properties. Floating elements are no longer attached to the "layer" context. - Remove
modifiers
property. UsefloatingMiddlewares
instead, check the Floating UI docs for more info.⚠️ Providing own middlewares will replace the defaults. Before, with modifires from popper.js it was adding to the defaults - Remove
altBoundary
property. It now applies automatically whendisablePortal
is true. - Remove deprecated
onClick
property. - Remove
onMouseEnter
andonMouseLeave
properties. - Remove
onFocus
andonBlur
properties. - Remove
container
property. If you need to overridePortal
container, wrapPopup
withPortalProvider
. - Remove
contentClassName
property. There is no morecontent
element. - Replace
restoreFocus
andrestoreFocusRef
properties withreturnFocus?: boolean | React.Ref<HTMLElement>
. - Rename property:
onTransitionEnter
→onTransitionIn
. - Rename property:
onTransitionEntered
→onTransitionInComplete
. - Rename property:
onTransitionExit
→onTransitionOut
. - Rename property:
onTransitionExited
→onTransitionOutComplete
. - Deprecate
anchorRef
property. UseanchorElement
instead. - Deprecate
onClose
,onEscapeKeyDown
andonOutsideClick
callback. UseonOpenChange
instead.
Popover
Popover
is reworked to be a "low-level" component with built-in interactivity and simplier API. See README for details.
The old component has beed moved to the legacy
entrypoint, marked as deprecated and will be removed in v8:
import {Popover as LegacyPopover} from '@gravity-ui/uikit/legacy'; // <-- Old Popover
import {Popover} from '@gravity-ui/uikit'; // <-- New Popover
Tooltip
- Remove
id
property.Tooltip
sets it automatically now to connect the reference via a11y attributes. - Remove
contentClassName
property. There is no morecontent
element. - Remove
disablePortal
property.
ActionTooltip
- Update open/close animation.
- Remove
id
property.ActionTooltip
sets it automatically now to connect the reference via a11y attributes. - Remove
contentClassName
property. There is no morecontent
element. - Remove
disablePortal
property.
Dialog
- Remove
listenKeyEnter
property fromDialog.Footer
.
List
- Remove
ListWrapper
component.
Menu
- Remove
icon
property fromMenu.Item
. UseiconStart
instead.
Select
- Change
renderControl
signature:onKeyDown
,onClick
,popupId
,selectId
,activeIndex
are replaced by singletriggerProps
object.
Sheet
- Remove extra wrapper around the content.
FilePreview
- Remove fullscreen mobile image preview.
HelpMark
- Remove
placement
property. Use newpopoverProps
property to pass any prop toPopover
. - Remove
buttonProps
property. All "top-level" props are now passed to the button element. - Remove
buttonRef
property. Use normalref
instead,
TextInput
- Remove
leftContent
property. UsestartContent
instead. - Remove
rightContent
property. UseendContent
instead.
Avatar
- One of the following properties is now required:
imgUrl
,icon
ortext
. - Change font size of the text in
s
size. - Change border width in
2xs
size. - Rename CSS API:
--g-avatar-color
→--g-avatar-text-color
.
User
- Change the gap between the avatar and the text in
m
size. - Change font size in
xl
size. - Rework CSS API (replace all the variables with new ones).
UserLabel
- Replace
children
property withtext
property. - Change spacing between elements and font sizes.
- Add a border for avatar.
- Rework CSS API (replace all the variables with new ones).
useFocusWithin
- Remove
FocusWithinProps
type, useUseFocusWithinProps
instead.
Layout
- Remove
LayoutProvider
component. Uselayout
prop from theThemeProvider
instead.
Styles
- Update default monospace font family: prioritize
Liberation Mono
overUbuntu Mono
. - Remove scrollbars styling.
- Update text offset in
Checkbox
,Radio
andSwitch
. - New appearance of disabled state in
Checkbox
andRadio
.
🚀 Features
Popup
- Add
modalFocus
property which controls whether focus should be trapped inside the floating element. - Add
initialFocus
property which moves focus to the specified element whenautoFocus
is true. It can benumber
(nth tabbable) orReact.Ref
. - Add
disableFocusVisuallyHiddenDismiss
property which disables adding hidden controls for accessibility purposes whenautoFocus
is true. - Add
zIndex
property
Tooltip
children
property can be a function that returnsReactElement
.- Add
open
andonOpenChange
for controlled state. - Add
trigger
property. See README for details. - Add
role
property which can be eithertooltip
orlabel
. See README for details.
ActionTooltip
children
property can be a function that returnsReactElement
.- Add
open
andonOpenChange
for controlled state. - Add
trigger
property. See README for details.
Avatar
- Add
3xs
size. - Support all
AriaLabelingProps
. - Add
--g-avatar-border-width
,--g-avatar-inner-border-width
and--g-avatar-font-weight
to CSS API.
User
- Add
3xs
size. - Support all
AriaLabelingProps
. - Support string in
avatar
property.
UserLabel
- Add
3xs
and2xs
sizes. - Add
description
property.